muerwre.github.io/docs/api/_content/cache.json

{"generatedAt":1685704584216,"generateTime":86,"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-e9c565"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'web3'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2de874"},"children":[{"type":"text","value":"// URL of your node"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94a57f"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'https://...'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94a57f"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"givenProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94a57f"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"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-eda04e"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-202fdb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-709979"},"children":[{"type":"text","value":"getBalance"}]},{"type":"element","tag":"span","props":{"class":"ct-202fdb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-175d24"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-202fdb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eda04e"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-202fdb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-4e706a"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-175d24"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-202fdb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8747d3"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-202fdb"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-eda04e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-202fdb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"getBalance"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"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-2de874"},"children":[{"type":"text","value":"// first we need to authorize"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'eth_requestAccounts'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2de874"},"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-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"getCurrentAddressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"selectedAddress"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"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-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"transfer"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" ({ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94a57f"},"children":[{"type":"text","value":"nonce"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"getTransactionCount"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94a57f"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94a57f"},"children":[{"type":"text","value":"rawTx"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      value: "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"toWei"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'ether'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":")),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      gasLimit: "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      gasPrice: "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      nonce: "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"nonce"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      data: "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94a57f"},"children":[{"type":"text","value":"privateKeyBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"EthUtil"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"toBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94a57f"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"Transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"rawTx"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"sign"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"privateKeyBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94a57f"},"children":[{"type":"text","value":"serializedTx"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"tx"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"serialize"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94a57f"},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"sendSignedTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"`0x${"}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"serializedTx"}]},{"type":"element","tag":"span","props":{"class":"ct-3a6787"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-3a6787"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'hex'"}]},{"type":"element","tag":"span","props":{"class":"ct-3a6787"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"}`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"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-e9c565"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"estimateFee"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" ({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94a57f"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-94a57f"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"estimateGas"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"to"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      value: "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"toHex"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"toWei"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'ether'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":")),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      data: "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"asciiToHex"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"memo"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    })."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"utils"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"fromWei"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-9726e0"},"children":[{"type":"text","value":"BigInt"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"gasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"())"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"        ."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"multiply"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-9726e0"},"children":[{"type":"text","value":"BigInt"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"gasLimit"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"()))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"        ."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"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-e9c565"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'accountsChanged'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"callback"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"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-eaa2fe"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'chainChanged'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"handler"}]},{"type":"element","tag":"span","props":{"class":"ct-dd9490"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"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-eaa2fe"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"ethereum"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  ."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    method: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'wallet_watchAsset'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    params: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      type: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'ERC20'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      options: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"        address: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'0xb60e8dd61c5d32be8058bb8eb970870f07233155'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"        symbol: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'FOO'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"        decimals: "}]},{"type":"element","tag":"span","props":{"class":"ct-772e7a"},"children":[{"type":"text","value":"18"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"        image: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'https://foo.io/token-image.svg'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-202fdb"},"children":[{"type":"text","value":"  ."}]},{"type":"element","tag":"span","props":{"class":"ct-709979"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-202fdb"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-4e706a"},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"span","props":{"class":"ct-202fdb"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-eda04e"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-202fdb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'FOO successfully added to wallet!'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    } "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9726e0"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'Something went wrong.'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  ."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"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-72a0dd"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"getChainID"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-72a0dd"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'eth_chainId'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"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-e9c565"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    method: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'wallet_switchEthereumChain'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    params: [{ chainId: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'0x03'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" }], "}]},{"type":"element","tag":"span","props":{"class":"ct-2de874"},"children":[{"type":"text","value":"// ropsten chainID (3) in hex"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"switchError"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-2de874"},"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-1a624e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"code"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-772e7a"},"children":[{"type":"text","value":"4902"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"window"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"ethereum"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-51a301"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"        method: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'wallet_addEthereumChain'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"        params: [{ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"          chainId: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'0x03'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2de874"},"children":[{"type":"text","value":"// ropsten chainID (3) in hex"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"          chainName: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'Ropsten Test Network'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"          nativeCurrency: { "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"              name: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'ETH'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"              symbol: "}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'ETH'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"              decimals: "}]},{"type":"element","tag":"span","props":{"class":"ct-772e7a"},"children":[{"type":"text","value":"18"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"          }, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"          rpcUrls: ["}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"], "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"          blockExplorerUrls: ["}]},{"type":"element","tag":"span","props":{"class":"ct-c8c77a"},"children":[{"type":"text","value":"'https://ropsten.etherscan.io'"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"] "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"        }] ,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    } "}]},{"type":"element","tag":"span","props":{"class":"ct-e9c565"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-eaa2fe"},"children":[{"type":"text","value":"addError"}]},{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2de874"},"children":[{"type":"text","value":"// handle \"add\" error"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-2de874"},"children":[{"type":"text","value":"// handle other \"switch\" errors"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1a624e"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-772e7a{color:#79C0FF}.ct-dd9490{color:#C9D1D9}.ct-9726e0{color:#79C0FF}.ct-3a6787{color:#A5D6FF}.ct-8747d3{color:#79C0FF}.ct-4e706a{color:#FFA657}.ct-175d24{color:#FF7B72}.ct-709979{color:#D2A8FF}.ct-202fdb{color:#C9D1D9}.ct-eda04e{color:#FF7B72}.ct-51a301{color:#D2A8FF}.ct-94a57f{color:#79C0FF}.ct-72a0dd{color:#FF7B72}.ct-2de874{color:#8B949E}.ct-c8c77a{color:#A5D6FF}.ct-eaa2fe{color:#C9D1D9}.ct-1a624e{color:#C9D1D9}.ct-e9c565{color:#FF7B72}.light .ct-e9c565{color:#859900}.light .ct-1a624e{color:#657B83}.light .ct-eaa2fe{color:#268BD2}.light .ct-c8c77a{color:#2AA198}.light .ct-2de874{color:#93A1A1}.light .ct-72a0dd{color:#073642}.light .ct-94a57f{color:#268BD2}.light .ct-51a301{color:#268BD2}.light .ct-eda04e{color:#073642}.light .ct-202fdb{color:#657B83}.light .ct-709979{color:#268BD2}.light .ct-175d24{color:#859900}.light .ct-4e706a{color:#657B83}.light .ct-8747d3{color:#859900}.light .ct-3a6787{color:#657B83}.light .ct-9726e0{color:#859900}.light .ct-dd9490{color:#859900}.light .ct-772e7a{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-1e8990"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'web3-eth-contract'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cd7851"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-30cf68"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1f5a16"},"children":[{"type":"text","value":"abi"}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af30f1"},"children":[{"type":"text","value":"object"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1f5a16"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af30f1"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cd7851"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-cd7851"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e0de7"},"children":[{"type":"text","value":"abiFromJson"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a137b4"},"children":[{"type":"text","value":"JSON"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1e0de7"},"children":[{"type":"text","value":"parse"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"abiFromJson"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-d6a533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-d6a533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"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-b49c05"},"children":[{"type":"text","value":"// see example below"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// ABI of contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"/* ... */"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// address for contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"executeContractMethod"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" ({}) "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// getting contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// Calling write method"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// authorizing with Metamask"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"({ method: "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'eth_requestAccounts'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// getting wallet address"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"addressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"currentProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"selectedAddress"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"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-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"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-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// current user's wallet"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"store"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1b163f"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'Parameter'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"send"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"      from: "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"addressUser"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  } "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-84ede9"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// calling read method"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// this method can return data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"retrieve"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  } "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-84ede9"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"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-b49c05"},"children":[{"type":"text","value":"// see example below"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'.'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// ABI контракта"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"/* ... */"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// contract address"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'0xdea164f67df4dbfe675d5271c9d404e0260f33bb'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// getting contract"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"getContract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"CONTRACT_ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// account's private key"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// write-methods requires private key"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cd7851"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-30cf68"},"children":[{"type":"text","value":"executeContractMethod"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cd7851"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1f5a16"},"children":[{"type":"text","value":"val"}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af30f1"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-cd7851"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"methods"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"store"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"val"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"account"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"accounts"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"privateKeyToAccount"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"      to: "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"      data: "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"encodeABI"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"      gas: "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"transaction"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"estimateGas"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"({ from: "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"account"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"      gasPrice: "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"getGasPrice"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"signed"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"accounts"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"signTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"privateKey"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"eth"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"sendSignedTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"signed"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"rawTransaction"}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"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-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"requests"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"   "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"balanceOf"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"call"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"   "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"contract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"method"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"getStaked"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"()."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"call"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"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-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"givenProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"PROVIDER_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cd7851"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-30cf68"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1f5a16"},"children":[{"type":"text","value":"calls"}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af30f1"},"children":[{"type":"text","value":"any"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":"[]) "}]},{"type":"element","tag":"span","props":{"class":"ct-cd7851"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"getWeb3NoAccount"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"BatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"promises"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"calls"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af30f1"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-1f5a16"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1f5a16"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-cd7851"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"add"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"              "}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"            } "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"              "}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"            }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"          })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"        );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"      });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"batch"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"execute"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-84ede9"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"all"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"promises"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  } "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b6b8be"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-d6a533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-d6a533"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"makeBatchRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"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-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'web3'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'YOUR_RPC_ENDPOINT_HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'YOUR ABI HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'YOUR CONTRACT ADDRESS HERE'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"Web3"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"Contract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"ABI"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"CONTRACT_ADDRESS"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"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-72d332"},"children":[{"type":"text","value":"referralProgramContract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"events"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  ."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"RegisterUser"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":"  ."}]},{"type":"element","tag":"span","props":{"class":"ct-30cf68"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c499a7"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":", ("}]},{"type":"element","tag":"span","props":{"class":"ct-1f5a16"},"children":[{"type":"text","value":"subscriptionId"}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af30f1"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-cd7851"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"`| UserRegistered | events | ${"}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"subscriptionId"}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  ."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-cd7851"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1f5a16"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-1f5a16"},"children":[{"type":"text","value":"removed"}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af30f1"},"children":[{"type":"text","value":"boolean"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-1f5a16"},"children":[{"type":"text","value":"returnValues"}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-84bf3d"},"children":[{"type":"text","value":"RegisterUserResponseInterface"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    }) "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"removed"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"        }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"user"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8618"},"children":[{"type":"text","value":"referrer"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"returnValues"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"user"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"referrer"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"      } "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"`| ONCE | ${"}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":"  ."}]},{"type":"element","tag":"span","props":{"class":"ct-30cf68"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c499a7"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":", ("}]},{"type":"element","tag":"span","props":{"class":"ct-1f5a16"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-7a159f"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-84bf3d"},"children":[{"type":"text","value":"ErrnoException"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-cd7851"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-d43304"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"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-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    filter: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"        value: [],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-1b163f"},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"events"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"Transfer"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    ."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    ."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'changed'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"changed"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    ."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    ."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"str"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"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-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-1b163f"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    address: ["}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'address-1'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'address-2'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"],    "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"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-56f121"},"children":[{"type":"text","value":"    topics: []                              "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"//What topics to subscribe to"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'logs'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'data'"}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'changed'"}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"changed"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'error'"}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"err"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"subscription"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"on"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'connected'"}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"nr"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"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-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"//example options(optional)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-dc87cb"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e8990"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    filter: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"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-56f121"},"children":[{"type":"text","value":"        value: ["}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'1000'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'1337'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"]    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b49c05"},"children":[{"type":"text","value":"// number | \"earliest\" | \"pending\" | \"latest\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    fromBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-1b163f"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":",                  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    toBlock: "}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'latest'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"myContract"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"getPastEvents"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2cb2aa"},"children":[{"type":"text","value":"'Transfer'"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    ."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-72d332"},"children":[{"type":"text","value":"results"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":"    ."}]},{"type":"element","tag":"span","props":{"class":"ct-adbb6a"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-56f121"},"children":[{"type":"text","value":" "}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-84bf3d{color:#FFA657}.ct-c499a7{color:#A5D6FF}.ct-b6b8be{color:#79C0FF}.ct-84ede9{color:#79C0FF}.ct-1b163f{color:#79C0FF}.ct-4e8618{color:#79C0FF}.ct-dc87cb{color:#FF7B72}.ct-b49c05{color:#8B949E}.ct-d6a533{color:#FFA657}.ct-adbb6a{color:#D2A8FF}.ct-a137b4{color:#79C0FF}.ct-1e0de7{color:#79C0FF}.ct-af30f1{color:#79C0FF}.ct-1f5a16{color:#FFA657}.ct-7a159f{color:#FF7B72}.ct-30cf68{color:#D2A8FF}.ct-d43304{color:#C9D1D9}.ct-cd7851{color:#FF7B72}.ct-2cb2aa{color:#A5D6FF}.ct-72d332{color:#C9D1D9}.ct-56f121{color:#C9D1D9}.ct-1e8990{color:#FF7B72}.light .ct-1e8990{color:#859900}.light .ct-56f121{color:#657B83}.light .ct-72d332{color:#268BD2}.light .ct-2cb2aa{color:#2AA198}.light .ct-cd7851{color:#073642}.light .ct-d43304{color:#657B83}.light .ct-30cf68{color:#268BD2}.light .ct-7a159f{color:#859900}.light .ct-1f5a16{color:#657B83}.light .ct-af30f1{color:#859900}.light .ct-1e0de7{color:#268BD2}.light .ct-a137b4{color:#657B83}.light .ct-adbb6a{color:#268BD2}.light .ct-d6a533{color:#657B83}.light .ct-b49c05{color:#93A1A1}.light .ct-dc87cb{color:#073642}.light .ct-4e8618{color:#268BD2}.light .ct-1b163f{color:#D33682}.light .ct-84ede9{color:#859900}.light .ct-b6b8be{color:#B58900}.light .ct-c499a7{color:#2AA198}.light .ct-84bf3d{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-ac6924"},"children":[{"type":"text","value":"$cell: "}]},{"type":"element","tag":"span","props":{"class":"ct-c9dd89"},"children":[{"type":"text","value":"250"}]},{"type":"element","tag":"span","props":{"class":"ct-d35475"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ac6924"},"children":[{"type":"text","value":"$gap: "}]},{"type":"element","tag":"span","props":{"class":"ct-c9dd89"},"children":[{"type":"text","value":"20"}]},{"type":"element","tag":"span","props":{"class":"ct-d35475"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e449fe"},"children":[{"type":"text","value":".grid"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-deae50"},"children":[{"type":"text","value":"display"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-af2ce8"},"children":[{"type":"text","value":"grid"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-deae50"},"children":[{"type":"text","value":"grid-template-columns"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-df4cc9"},"children":[{"type":"text","value":"repeat"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d90d77"},"children":[{"type":"text","value":"auto-fit"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-df4cc9"},"children":[{"type":"text","value":"minmax"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d90d77"},"children":[{"type":"text","value":"$cell"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-14db72"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-c0cbca"},"children":[{"type":"text","value":"fr"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c320cc"},"children":[{"type":"text","value":"grid-auto-rows"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c9dd89"},"children":[{"type":"text","value":"256"}]},{"type":"element","tag":"span","props":{"class":"ct-d35475"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-deae50"},"children":[{"type":"text","value":"grid-auto-flow"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-af2ce8"},"children":[{"type":"text","value":"row"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-af2ce8"},"children":[{"type":"text","value":"dense"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-deae50"},"children":[{"type":"text","value":"grid-column-gap"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-d90d77"},"children":[{"type":"text","value":"$gap"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-deae50"},"children":[{"type":"text","value":"grid-row-gap"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-d90d77"},"children":[{"type":"text","value":"$gap"}]},{"type":"element","tag":"span","props":{"class":"ct-350987"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47535c"},"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-e449fe"},"children":[{"type":"text","value":".h-2"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-cee2d5"},"children":[{"type":"text","value":"// takes 2 columns"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c320cc"},"children":[{"type":"text","value":"grid-column-end"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c320cc"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c9dd89"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e449fe"},"children":[{"type":"text","value":".v-2"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-cee2d5"},"children":[{"type":"text","value":"// takes 2 rows"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c320cc"},"children":[{"type":"text","value":"grid-row-end"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c320cc"},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c9dd89"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47535c"},"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-e449fe"},"children":[{"type":"text","value":".full-width"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c320cc"},"children":[{"type":"text","value":"grid-row"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c9dd89"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d35475"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c9dd89"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-cee2d5"},"children":[{"type":"text","value":"// height: 1 row"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c320cc"},"children":[{"type":"text","value":"grid-column"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c9dd89"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":" / "}]},{"type":"element","tag":"span","props":{"class":"ct-c9dd89"},"children":[{"type":"text","value":"-1"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47535c"},"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-e449fe"},"children":[{"type":"text","value":".top-right"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c320cc"},"children":[{"type":"text","value":"grid-row"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c9dd89"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d35475"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c9dd89"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-cee2d5"},"children":[{"type":"text","value":"// height here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c320cc"},"children":[{"type":"text","value":"grid-column"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c9dd89"},"children":[{"type":"text","value":"-2"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":" / "}]},{"type":"element","tag":"span","props":{"class":"ct-c9dd89"},"children":[{"type":"text","value":"-1"}]},{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-cee2d5"},"children":[{"type":"text","value":"// width here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-47535c"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-cee2d5{color:#8B949E}.ct-c320cc{color:#79C0FF}.ct-c0cbca{color:#FF7B72}.ct-14db72{color:#79C0FF}.ct-d90d77{color:#FFA657}.ct-df4cc9{color:#79C0FF}.ct-af2ce8{color:#79C0FF}.ct-deae50{color:#79C0FF}.ct-350987{color:#C9D1D9}.ct-e449fe{color:#79C0FF}.ct-47535c{color:#C9D1D9}.ct-d35475{color:#FF7B72}.ct-c9dd89{color:#79C0FF}.ct-ac6924{color:#FFA657}.light .ct-ac6924{color:#657B83}.light .ct-c9dd89{color:#D33682}.light .ct-d35475{color:#859900}.light .ct-47535c{color:#657B83}.light .ct-e449fe{color:#93A1A1}.light .ct-350987{color:#657B83}.light .ct-deae50{color:#859900}.light .ct-af2ce8{color:#657B83}.light .ct-df4cc9{color:#268BD2}.light .ct-d90d77{color:#657B83}.light .ct-14db72{color:#D33682}.light .ct-c0cbca{color:#859900}.light .ct-c320cc{color:#859900}.light .ct-cee2d5{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-a79cbf"},"children":[{"type":"text","value":"@mixin"}]},{"type":"element","tag":"span","props":{"class":"ct-5f47e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8e10e4"},"children":[{"type":"text","value":"color-per-child"}]},{"type":"element","tag":"span","props":{"class":"ct-5f47e2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c7f3d4"},"children":[{"type":"text","value":"$colors"}]},{"type":"element","tag":"span","props":{"class":"ct-5f47e2"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5f47e2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-a79cbf"},"children":[{"type":"text","value":"@each"}]},{"type":"element","tag":"span","props":{"class":"ct-5f47e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7f3d4"},"children":[{"type":"text","value":"$color"}]},{"type":"element","tag":"span","props":{"class":"ct-5f47e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a79cbf"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-5f47e2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c7f3d4"},"children":[{"type":"text","value":"$colors"}]},{"type":"element","tag":"span","props":{"class":"ct-5f47e2"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5f47e2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-bea191"},"children":[{"type":"text","value":"&"}]},{"type":"element","tag":"span","props":{"class":"ct-d1ce25"},"children":[{"type":"text","value":":nth-child"}]},{"type":"element","tag":"span","props":{"class":"ct-5f47e2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-c7f3d4"},"children":[{"type":"text","value":"#{"}]},{"type":"element","tag":"span","props":{"class":"ct-d8a9d1"},"children":[{"type":"text","value":"index"}]},{"type":"element","tag":"span","props":{"class":"ct-c7f3d4"},"children":[{"type":"text","value":"(($colors), ($color))}"}]},{"type":"element","tag":"span","props":{"class":"ct-5f47e2"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5f47e2"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0d1b2a"},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"class":"ct-5f47e2"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-c7f3d4"},"children":[{"type":"text","value":"$color"}]},{"type":"element","tag":"span","props":{"class":"ct-5f47e2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-74ee53"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-74ee53"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-74ee53"},"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-0632bc"},"children":[{"type":"text","value":".item"}]},{"type":"element","tag":"span","props":{"class":"ct-74ee53"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-74ee53"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-58b0ce"},"children":[{"type":"text","value":"@include"}]},{"type":"element","tag":"span","props":{"class":"ct-74ee53"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-256b1a"},"children":[{"type":"text","value":"color_per_child"}]},{"type":"element","tag":"span","props":{"class":"ct-74ee53"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-c31807"},"children":[{"type":"text","value":"#ded187"}]},{"type":"element","tag":"span","props":{"class":"ct-74ee53"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-c31807"},"children":[{"type":"text","value":"#dbde87"}]},{"type":"element","tag":"span","props":{"class":"ct-74ee53"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-c31807"},"children":[{"type":"text","value":"#bade87"}]},{"type":"element","tag":"span","props":{"class":"ct-74ee53"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-c31807"},"children":[{"type":"text","value":"#9cde87"}]},{"type":"element","tag":"span","props":{"class":"ct-74ee53"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-c31807"},"children":[{"type":"text","value":"#87deaa"}]},{"type":"element","tag":"span","props":{"class":"ct-74ee53"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-74ee53"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-c31807{color:#79C0FF}.ct-256b1a{color:#D2A8FF}.ct-58b0ce{color:#FF7B72}.ct-0632bc{color:#79C0FF}.ct-74ee53{color:#C9D1D9}.ct-0d1b2a{color:#79C0FF}.ct-d8a9d1{color:#79C0FF}.ct-d1ce25{color:#79C0FF}.ct-bea191{color:#7EE787}.ct-c7f3d4{color:#FFA657}.ct-8e10e4{color:#D2A8FF}.ct-5f47e2{color:#C9D1D9}.ct-a79cbf{color:#FF7B72}.light .ct-a79cbf{color:#859900}.light .ct-5f47e2{color:#657B83}.light .ct-8e10e4{color:#268BD2}.light .ct-c7f3d4{color:#657B83}.light .ct-bea191{color:#268BD2}.light .ct-d1ce25{color:#93A1A1}.light .ct-d8a9d1{color:#268BD2}.light .ct-0d1b2a{color:#859900}.light .ct-74ee53{color:#657B83}.light .ct-0632bc{color:#93A1A1}.light .ct-58b0ce{color:#859900}.light .ct-256b1a{color:#268BD2}.light .ct-c31807{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-9ba448"},"children":[{"type":"text","value":"@supports"}]},{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-a7a778"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3588ed"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0ccbeb"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-9ba448"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b01533"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":": blur(5px);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"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-9ba448"},"children":[{"type":"text","value":"@mixin"}]},{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5489e5"},"children":[{"type":"text","value":"can_backdrop"}]},{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-9ba448"},"children":[{"type":"text","value":"@supports"}]},{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d397b4"},"children":[{"type":"text","value":"    ("}]},{"type":"element","tag":"span","props":{"class":"ct-cc2056"},"children":[{"type":"text","value":"-webkit-backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-d397b4"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-de3ab7"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-d397b4"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-8e26eb"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-b0ee15"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-d397b4"},"children":[{"type":"text","value":")) "}]},{"type":"element","tag":"span","props":{"class":"ct-a0a6ed"},"children":[{"type":"text","value":"or"}]},{"type":"element","tag":"span","props":{"class":"ct-d397b4"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":"    ("}]},{"type":"element","tag":"span","props":{"class":"ct-a7a778"},"children":[{"type":"text","value":"backdrop-filter"}]},{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3588ed"},"children":[{"type":"text","value":"blur"}]},{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0ccbeb"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-9ba448"},"children":[{"type":"text","value":"px"}]},{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":"  ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-9ba448"},"children":[{"type":"text","value":"@content"}]},{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0268cb"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-a0a6ed{color:#79C0FF}.ct-b0ee15{color:#FF7B72}.ct-8e26eb{color:#79C0FF}.ct-de3ab7{color:#79C0FF}.ct-cc2056{color:#79C0FF}.ct-d397b4{color:#C9D1D9}.ct-5489e5{color:#D2A8FF}.ct-b01533{color:#7EE787}.ct-0ccbeb{color:#79C0FF}.ct-3588ed{color:#79C0FF}.ct-a7a778{color:#79C0FF}.ct-0268cb{color:#C9D1D9}.ct-9ba448{color:#FF7B72}.light .ct-9ba448{color:#859900}.light .ct-0268cb{color:#657B83}.light .ct-a7a778{color:#859900}.light .ct-3588ed{color:#268BD2}.light .ct-0ccbeb{color:#D33682}.light .ct-b01533{color:#268BD2}.light .ct-5489e5{color:#268BD2}.light .ct-d397b4{color:#657B83}.light .ct-cc2056{color:#859900}.light .ct-de3ab7{color:#268BD2}.light .ct-8e26eb{color:#D33682}.light .ct-b0ee15{color:#859900}.light .ct-a0a6ed{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-7b0dbc"},"children":[{"type":"text","value":"kind"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"pipeline"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"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-7b0dbc"},"children":[{"type":"text","value":"platform"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"os"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"linux"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"arch"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"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-7b0dbc"},"children":[{"type":"text","value":"steps"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"  - "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"build-master"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"plugins/docker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"when"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"branch"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"        - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"master"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"settings"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"dockerfile"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"Dockerfile"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"tag"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"        - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"${DRONE_BRANCH}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"username"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"global_docker_login"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"password"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"global_docker_password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"registry"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"global_docker_registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"repo"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"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-7b0dbc"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"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-7b0dbc"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"drone"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"drone"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"drone/drone:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"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-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"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-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"DRONE_RPC_SECRET=rpc_secret"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"DRONE_SERVER_HOST=drone.url"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"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-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"DRONE_SERVER_PROTO=https"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"DRONE_TLS_AUTOCERT=false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"DRONE_GIT_ALWAYS_AUTH=false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"DRONE_LOGS_DEBUG=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"DRONE_LOGS_TRACE=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"./data:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"8090:80"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"drone-agent"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"drone__agent"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"drone/agent:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"agent"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"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-724d83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7b0dbc"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"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-724d83"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3329b6"},"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-cef0b7"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":" DRONE_SERVER=https://drone.url"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cef0b7"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":" DRONE_TOKEN=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-724d83"},"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-724d83"},"children":[{"type":"text","value":"drone repo update "}]},{"type":"element","tag":"span","props":{"class":"ct-2c94eb"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-427567"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":" --trusted=true "}]},{"type":"element","tag":"span","props":{"class":"ct-eddb69"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-724d83"},"children":[{"type":"text","value":" drone repo info "}]},{"type":"element","tag":"span","props":{"class":"ct-2c94eb"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-427567"},"children":[{"type":"text","value":"1"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-eddb69{color:#FF7B72}.ct-427567{color:#C9D1D9}.ct-2c94eb{color:#C9D1D9}.ct-cef0b7{color:#FF7B72}.ct-3329b6{color:#A5D6FF}.ct-724d83{color:#C9D1D9}.ct-7b0dbc{color:#7EE787}.light .ct-7b0dbc{color:#268BD2}.light .ct-724d83{color:#657B83}.light .ct-3329b6{color:#2AA198}.light .ct-cef0b7{color:#073642}.light .ct-2c94eb{color:#859900}.light .ct-427567{color:#268BD2}.light .ct-eddb69{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-8b7f86"},"children":[{"type":"text","value":"kind"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"children":[{"type":"text","value":"pipeline"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"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-8b7f86"},"children":[{"type":"text","value":"platform"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"os"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"children":[{"type":"text","value":"linux"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"arch"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"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-8b7f86"},"children":[{"type":"text","value":"steps"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"  - "}]},{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"children":[{"type":"text","value":"build"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"children":[{"type":"text","value":"node:16"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"commands"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"children":[{"type":"text","value":"yarn"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"children":[{"type":"text","value":"yarn generate"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"children":[{"type":"text","value":"rm -rf ./docs"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"children":[{"type":"text","value":"mv ./.output/public ./docs"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"children":[{"type":"text","value":"touch ./docs/.nojekyll"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"  - "}]},{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"children":[{"type":"text","value":"publish"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"children":[{"type":"text","value":"plugins/gh-pages"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"settings"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"target_branch"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"children":[{"type":"text","value":"gh-pages"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"username"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"children":[{"type":"text","value":"github_username"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"password"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-8b7f86"},"children":[{"type":"text","value":"from_secret"}]},{"type":"element","tag":"span","props":{"class":"ct-42e0ae"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4e8e43"},"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-4e8e43{color:#A5D6FF}.ct-42e0ae{color:#C9D1D9}.ct-8b7f86{color:#7EE787}.light .ct-8b7f86{color:#268BD2}.light .ct-42e0ae{color:#657B83}.light .ct-4e8e43{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-11d5c6"},"children":[{"type":"text","value":"docker run \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"  --entrypoint htpasswd registry:2 \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"  -Bbn user mypassword "}]},{"type":"element","tag":"span","props":{"class":"ct-a89757"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"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-88c5e0"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"\"3\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-88c5e0"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-88c5e0"},"children":[{"type":"text","value":"registry"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-88c5e0"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"docker__registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-88c5e0"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"registry:2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-88c5e0"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"5000:5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-88c5e0"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-88c5e0"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY=/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"REGISTRY_AUTH=htpasswd"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"REGISTRY_AUTH_HTPASSWD_REALM=Registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"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-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"REGISTRY_HTTP_SECRET=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"REGISTRY_STORAGE_DELETE_ENABLED=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-88c5e0"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"./registry/auth:/auth"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"./registry/data:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-88c5e0"},"children":[{"type":"text","value":"ui"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-88c5e0"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"docker__ui"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-88c5e0"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"parabuzzle/craneoperator:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-88c5e0"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"80:80"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-88c5e0"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-88c5e0"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"REGISTRY_HOST=registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"REGISTRY_PORT=5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"REGISTRY_PROTOCOL=http"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"ALLOW_REGISTRY_LOGIN=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"REGISTRY_ALLOW_DELETE=true"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"USERNAME=registry"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"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-f6ae8c"},"children":[{"type":"text","value":"# Try this first"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"docker run \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"  --rm anoxis/registry-cli \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"  -r https://registry.url \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"  -l user:password \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"  --delete \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"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-f6ae8c"},"children":[{"type":"text","value":"# Then this "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"docker run -it \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"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-11d5c6"},"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-11d5c6"},"children":[{"type":"text","value":"    -e DRY_RUN="}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    -e REGISTRY_AUTH="}]},{"type":"element","tag":"span","props":{"class":"ct-3cdc2a"},"children":[{"type":"text","value":"\"user:password\""}]},{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-11d5c6"},"children":[{"type":"text","value":"    mortensrasmussen/docker-registry-manifest-cleanup"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-f6ae8c{color:#8B949E}.ct-3cdc2a{color:#A5D6FF}.ct-88c5e0{color:#7EE787}.ct-a89757{color:#FF7B72}.ct-11d5c6{color:#C9D1D9}.light .ct-11d5c6{color:#657B83}.light .ct-a89757{color:#859900}.light .ct-88c5e0{color:#268BD2}.light .ct-3cdc2a{color:#2AA198}.light .ct-f6ae8c{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-12ca57"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-f74fa4"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-fd58ca"},"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-12ca57"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-f74fa4"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f74fa4"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-12ca57"},"children":[{"type":"text","value":"watchtower"}]},{"type":"element","tag":"span","props":{"class":"ct-f74fa4"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f74fa4"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-12ca57"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-f74fa4"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-fd58ca"},"children":[{"type":"text","value":"docker__watchtower"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f74fa4"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-12ca57"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-f74fa4"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-fd58ca"},"children":[{"type":"text","value":"v2tec/watchtower"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f74fa4"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-12ca57"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-f74fa4"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-fd58ca"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f74fa4"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-12ca57"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-f74fa4"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f74fa4"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-fd58ca"},"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-f74fa4"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-fd58ca"},"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-f74fa4"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-12ca57"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-f74fa4"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-fd58ca"},"children":[{"type":"text","value":"--interval 60 image_1 image_2"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-fd58ca{color:#A5D6FF}.ct-f74fa4{color:#C9D1D9}.ct-12ca57{color:#7EE787}.light .ct-12ca57{color:#268BD2}.light .ct-f74fa4{color:#657B83}.light .ct-fd58ca{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-65d6fc"},"children":[{"type":"text","value":"#####"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65d6fc"},"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-65d6fc"},"children":[{"type":"text","value":"#####"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5df6d5"},"children":[{"type":"text","value":"DUMP_PATH="}]},{"type":"element","tag":"span","props":{"class":"ct-e82e03"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-81d42a"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5df6d5"},"children":[{"type":"text","value":"CONTAINER="}]},{"type":"element","tag":"span","props":{"class":"ct-d9488d"},"children":[{"type":"text","value":"\"db\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5df6d5"},"children":[{"type":"text","value":"USER=root"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5df6d5"},"children":[{"type":"text","value":"PASSWORD=password"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5df6d5"},"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-5df6d5"},"children":[{"type":"text","value":"cat "}]},{"type":"element","tag":"span","props":{"class":"ct-d9488d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e82e03"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-81d42a"},"children":[{"type":"text","value":"DUMP_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-d9488d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-5df6d5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6b10f0"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-5df6d5"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-08365d"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-5df6d5"},"children":[{"type":"text","value":" -i "}]},{"type":"element","tag":"span","props":{"class":"ct-e82e03"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-81d42a"},"children":[{"type":"text","value":"CONTAINER"}]},{"type":"element","tag":"span","props":{"class":"ct-5df6d5"},"children":[{"type":"text","value":" mysql -u"}]},{"type":"element","tag":"span","props":{"class":"ct-e82e03"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-81d42a"},"children":[{"type":"text","value":"USER"}]},{"type":"element","tag":"span","props":{"class":"ct-5df6d5"},"children":[{"type":"text","value":" -p"}]},{"type":"element","tag":"span","props":{"class":"ct-e82e03"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-81d42a"},"children":[{"type":"text","value":"PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-5df6d5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e82e03"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-81d42a"},"children":[{"type":"text","value":"DB"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-08365d{color:#79C0FF}.ct-6b10f0{color:#FF7B72}.ct-d9488d{color:#A5D6FF}.ct-81d42a{color:#C9D1D9}.ct-e82e03{color:#C9D1D9}.ct-5df6d5{color:#C9D1D9}.ct-65d6fc{color:#8B949E}.light .ct-65d6fc{color:#93A1A1}.light .ct-5df6d5{color:#657B83}.light .ct-e82e03{color:#859900}.light .ct-81d42a{color:#268BD2}.light .ct-d9488d{color:#2AA198}.light .ct-6b10f0{color:#859900}.light .ct-08365d{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-8cd0f5"},"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-c6029a"},"children":[{"type":"text","value":"wait_for_mysql"}]},{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"  query="}]},{"type":"element","tag":"span","props":{"class":"ct-7eaaff"},"children":[{"type":"text","value":"\"SELECT count(*) FROM users\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"  timeout=180 "}]},{"type":"element","tag":"span","props":{"class":"ct-8cd0f5"},"children":[{"type":"text","value":"# 3 minutes limit"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"  i=0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-3fc8fa"},"children":[{"type":"text","value":"while"}]},{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3fc8fa"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-e52095"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":" -it "}]},{"type":"element","tag":"span","props":{"class":"ct-7eaaff"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-386bbb"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-34f037"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-7eaaff"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":" mysql --user="}]},{"type":"element","tag":"span","props":{"class":"ct-7eaaff"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-386bbb"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-34f037"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-7eaaff"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7eaaff"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":" -e "}]},{"type":"element","tag":"span","props":{"class":"ct-7eaaff"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-386bbb"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-34f037"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-7eaaff"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3fc8fa"},"children":[{"type":"text","value":"do"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"    sleep 1"}]},{"type":"element","tag":"span","props":{"class":"ct-3fc8fa"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"    i="}]},{"type":"element","tag":"span","props":{"class":"ct-7eaaff"},"children":[{"type":"text","value":"$(("}]},{"type":"element","tag":"span","props":{"class":"ct-386bbb"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-34f037"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-3fc8fa"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-f24a97"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-7eaaff"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-3fc8fa"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":" [[ "}]},{"type":"element","tag":"span","props":{"class":"ct-386bbb"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-34f037"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-386bbb"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3fc8fa"},"children":[{"type":"text","value":"-ge"}]},{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-386bbb"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-34f037"},"children":[{"type":"text","value":"timeout"}]},{"type":"element","tag":"span","props":{"class":"ct-386bbb"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":" ]]"}]},{"type":"element","tag":"span","props":{"class":"ct-3fc8fa"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3fc8fa"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-e52095"},"children":[{"type":"text","value":"echo"}]},{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7eaaff"},"children":[{"type":"text","value":"\"[Error] can't properly query MySQL after "}]},{"type":"element","tag":"span","props":{"class":"ct-386bbb"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-34f037"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-386bbb"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-7eaaff"},"children":[{"type":"text","value":" secs\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-e52095"},"children":[{"type":"text","value":"exit"}]},{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":" 1"}]},{"type":"element","tag":"span","props":{"class":"ct-3fc8fa"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-3fc8fa"},"children":[{"type":"text","value":"fi"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-3fc8fa"},"children":[{"type":"text","value":"done"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2215c0"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-8cd0f5"},"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-f24a97{color:#79C0FF}.ct-34f037{color:#C9D1D9}.ct-386bbb{color:#C9D1D9}.ct-e52095{color:#79C0FF}.ct-3fc8fa{color:#FF7B72}.ct-7eaaff{color:#A5D6FF}.ct-2215c0{color:#C9D1D9}.ct-c6029a{color:#D2A8FF}.ct-8cd0f5{color:#8B949E}.light .ct-8cd0f5{color:#93A1A1}.light .ct-c6029a{color:#268BD2}.light .ct-2215c0{color:#657B83}.light .ct-7eaaff{color:#2AA198}.light .ct-3fc8fa{color:#859900}.light .ct-e52095{color:#268BD2}.light .ct-386bbb{color:#859900}.light .ct-34f037{color:#268BD2}.light .ct-f24a97{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-d53ba8"},"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-003f7a"},"children":[{"type":"text","value":"wait_for_redis"}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":"  timeout=180 "}]},{"type":"element","tag":"span","props":{"class":"ct-d53ba8"},"children":[{"type":"text","value":"# 3 minutes"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":"  i=0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":"while"}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" docker "}]},{"type":"element","tag":"span","props":{"class":"ct-2cd9f6"},"children":[{"type":"text","value":"exec"}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" -it "}]},{"type":"element","tag":"span","props":{"class":"ct-8add66"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f7f002"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-54666a"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-8add66"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" redis-cli -h localhost -p 6379 -a "}]},{"type":"element","tag":"span","props":{"class":"ct-8add66"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-f7f002"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-54666a"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-8add66"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" ping "}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" grep "}]},{"type":"element","tag":"span","props":{"class":"ct-8add66"},"children":[{"type":"text","value":"\"PONG\""}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":"/dev/null "}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":"2>&1;"}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":"do"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":"    sleep 1"}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":"    i="}]},{"type":"element","tag":"span","props":{"class":"ct-8add66"},"children":[{"type":"text","value":"$(("}]},{"type":"element","tag":"span","props":{"class":"ct-f7f002"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-54666a"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-a9b20e"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-8add66"},"children":[{"type":"text","value":"))"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" [[ "}]},{"type":"element","tag":"span","props":{"class":"ct-f7f002"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-54666a"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-f7f002"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":"-ge"}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f7f002"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-54666a"},"children":[{"type":"text","value":"timeout"}]},{"type":"element","tag":"span","props":{"class":"ct-f7f002"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" ]]"}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2cd9f6"},"children":[{"type":"text","value":"echo"}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8add66"},"children":[{"type":"text","value":"\"[Error] can't properly ping Redis container after "}]},{"type":"element","tag":"span","props":{"class":"ct-f7f002"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-54666a"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-f7f002"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-8add66"},"children":[{"type":"text","value":" secs\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2cd9f6"},"children":[{"type":"text","value":"exit"}]},{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":" 1"}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":"fi"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-d2eda6"},"children":[{"type":"text","value":"done"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c55150"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d53ba8"},"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-a9b20e{color:#79C0FF}.ct-54666a{color:#C9D1D9}.ct-f7f002{color:#C9D1D9}.ct-8add66{color:#A5D6FF}.ct-2cd9f6{color:#79C0FF}.ct-d2eda6{color:#FF7B72}.ct-c55150{color:#C9D1D9}.ct-003f7a{color:#D2A8FF}.ct-d53ba8{color:#8B949E}.light .ct-d53ba8{color:#93A1A1}.light .ct-003f7a{color:#268BD2}.light .ct-c55150{color:#657B83}.light .ct-d2eda6{color:#859900}.light .ct-2cd9f6{color:#268BD2}.light .ct-8add66{color:#2AA198}.light .ct-f7f002{color:#859900}.light .ct-54666a{color:#268BD2}.light .ct-a9b20e{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-b13856"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-6df294"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-b13856"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"'react-native-app-auth'"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4dacc7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a4393"},"children":[{"type":"text","value":"GOOGLE_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b13856"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2bff5e"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4dacc7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a4393"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b13856"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b13856"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cdfa4f"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"  issuer: "}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"'https://accounts.google.com'"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"  clientId: "}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-2a4393"},"children":[{"type":"text","value":"GOOGLE_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"}.apps.googleusercontent.com`"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"  redirectUrl: "}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"`com.yourapp:/oauth2redirect/google`"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"  scopes: ["}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"'openid'"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"'profile'"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"  dangerouslyAllowInsecureHttpRequests: "}]},{"type":"element","tag":"span","props":{"class":"ct-d23cdc"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"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-4dacc7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a4393"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b13856"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4dacc7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a4393"},"children":[{"type":"text","value":"YANDEX_OAUTH_SECRET"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b13856"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"'...'"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-2bff5e"},"children":[{"type":"text","value":"// better hide it somehow"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4dacc7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a4393"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b13856"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"'com.yourapp'"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4dacc7"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a4393"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b13856"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b13856"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cdfa4f"},"children":[{"type":"text","value":"authorize"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"  serviceConfiguration: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"    authorizationEndpoint: "}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"`https://oauth.yandex.ru/authorize?response_type=code&client_id=${"}]},{"type":"element","tag":"span","props":{"class":"ct-2a4393"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"}&redirect_uri=${"}]},{"type":"element","tag":"span","props":{"class":"ct-2a4393"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"}:/oauth2redirect`"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-2bff5e"},"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-b5798b"},"children":[{"type":"text","value":"    tokenEndpoint: "}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"`https://oauth.yandex.ru/token?grant_type=authorization_code&client_id=${"}]},{"type":"element","tag":"span","props":{"class":"ct-2a4393"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"}&client_secret=${"}]},{"type":"element","tag":"span","props":{"class":"ct-2a4393"},"children":[{"type":"text","value":"YANDEX_OAUTH_SECRET"}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"  clientId: "}]},{"type":"element","tag":"span","props":{"class":"ct-2a4393"},"children":[{"type":"text","value":"YANDEX_OAUTH_CLIENT"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"  redirectUrl: "}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-2a4393"},"children":[{"type":"text","value":"APP_ID"}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"}:/oauth2redirect`"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"  scopes: ["}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"'login:info'"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-819a02"},"children":[{"type":"text","value":"'login:avatar'"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"  dangerouslyAllowInsecureHttpRequests: "}]},{"type":"element","tag":"span","props":{"class":"ct-d23cdc"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cdfa4f"},"children":[{"type":"text","value":"callback"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6df294"},"children":[{"type":"text","value":"authState"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6df294"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-b5798b"},"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-d23cdc{color:#79C0FF}.ct-cdfa4f{color:#D2A8FF}.ct-2bff5e{color:#8B949E}.ct-2a4393{color:#79C0FF}.ct-4dacc7{color:#FF7B72}.ct-819a02{color:#A5D6FF}.ct-6df294{color:#C9D1D9}.ct-b5798b{color:#C9D1D9}.ct-b13856{color:#FF7B72}.light .ct-b13856{color:#859900}.light .ct-b5798b{color:#657B83}.light .ct-6df294{color:#268BD2}.light .ct-819a02{color:#2AA198}.light .ct-4dacc7{color:#073642}.light .ct-2a4393{color:#268BD2}.light .ct-2bff5e{color:#93A1A1}.light .ct-cdfa4f{color:#268BD2}.light .ct-d23cdc{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-7a7ee4"},"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-904a75"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ffc48d"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-cb3db3"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-904a75"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-10902c"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"; }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-02ffcf"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-448481"},"children":[{"type":"text","value":"SomeList"}]},{"type":"element","tag":"span","props":{"class":"ct-6818a1"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-93ed0f"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-93ed0f"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-6818a1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":" ({ "}]},{"type":"element","tag":"span","props":{"class":"ct-e74a80"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-02ffcf"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-904a75"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f5544"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb3db3"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d9768c"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-904a75"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f5544"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb3db3"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d9768c"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7a7ee4"},"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-9ca9f8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-904a75"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f5544"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb3db3"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-2039d3"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-904a75"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f5544"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb3db3"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":"    ("}]},{"type":"element","tag":"span","props":{"class":"ct-e74a80"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-6818a1"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-93ed0f"},"children":[{"type":"text","value":"NativeSyntheticEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-93ed0f"},"children":[{"type":"text","value":"NativeScrollEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":">) "}]},{"type":"element","tag":"span","props":{"class":"ct-02ffcf"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"nativeEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"contentOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"y"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"    [],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"  );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-02ffcf"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-03af22"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6818a1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-448481"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"class":"ct-e74a80"},"children":[{"type":"text","value":"_"}]},{"type":"element","tag":"span","props":{"class":"ct-6818a1"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca216f"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e74a80"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-6818a1"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ca216f"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-02ffcf"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f0b7"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-cb3db3"},"children":[{"type":"text","value":"scrollToOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      offset: "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"scrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      animated: "}]},{"type":"element","tag":"span","props":{"class":"ct-2039d3"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"    });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"scrollHeight"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"  }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7a7ee4"},"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-9ca9f8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-904a75"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6f5544"},"children":[{"type":"text","value":"onInteraction"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-cb3db3"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"    () "}]},{"type":"element","tag":"span","props":{"class":"ct-904a75"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2039d3"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-6f5544"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-904a75"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-cb3db3"},"children":[{"type":"text","value":"interact"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      }, "}]},{"type":"element","tag":"span","props":{"class":"ct-d9768c"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-6f5544"},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-904a75"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"shouldKeepScrollPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2039d3"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      }, "}]},{"type":"element","tag":"span","props":{"class":"ct-d9768c"},"children":[{"type":"text","value":"500"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"    },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"    ["}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"setSelectedSubThemes"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"  );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-48f821"},"children":[{"type":"text","value":"FlatList"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7a7ee4"},"children":[{"type":"text","value":"// ...required FlatList options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"onContentSizeChange"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"onRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"onRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"{"}]},{"type":"element","tag":"span","props":{"class":"ct-677add"},"children":[{"type":"text","value":"onScroll"}]},{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-8536ef"},"children":[{"type":"text","value":"/>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"  )"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9ca9f8"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-48f821{color:#FFA657}.ct-ca216f{color:#79C0FF}.ct-03af22{color:#79C0FF}.ct-677add{color:#C9D1D9}.ct-2039d3{color:#79C0FF}.ct-d9768c{color:#79C0FF}.ct-6f5544{color:#79C0FF}.ct-e74a80{color:#FFA657}.ct-93ed0f{color:#FFA657}.ct-6818a1{color:#FF7B72}.ct-448481{color:#D2A8FF}.ct-a3f0b7{color:#C9D1D9}.ct-02ffcf{color:#FF7B72}.ct-10902c{color:#79C0FF}.ct-cb3db3{color:#D2A8FF}.ct-8536ef{color:#FF7B72}.ct-ffc48d{color:#FFA657}.ct-9ca9f8{color:#C9D1D9}.ct-904a75{color:#FF7B72}.ct-7a7ee4{color:#8B949E}.light .ct-7a7ee4{color:#93A1A1}.light .ct-904a75{color:#073642}.light .ct-9ca9f8{color:#657B83}.light .ct-ffc48d{color:#268BD2}.light .ct-8536ef{color:#859900}.light .ct-cb3db3{color:#268BD2}.light .ct-10902c{color:#859900}.light .ct-02ffcf{color:#073642}.light .ct-a3f0b7{color:#657B83}.light .ct-448481{color:#268BD2}.light .ct-6818a1{color:#859900}.light .ct-93ed0f{color:#268BD2}.light .ct-e74a80{color:#657B83}.light .ct-6f5544{color:#268BD2}.light .ct-d9768c{color:#D33682}.light .ct-2039d3{color:#B58900}.light .ct-677add{color:#268BD2}.light .ct-03af22{color:#268BD2}.light .ct-ca216f{color:#859900}.light .ct-48f821{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-0dd272"},"children":[{"type":"text","value":"adb logcat com.application:I "}]},{"type":"element","tag":"span","props":{"class":"ct-0554b1"},"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-0dd272"},"children":[{"type":"text","value":"keytool -printcert -jarfile "}]},{"type":"element","tag":"span","props":{"class":"ct-0554b1"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-900d3b"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a1a8"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-0554b1"},"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-0dd272"},"children":[{"type":"text","value":"npx react-native bundle \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":"  --platform android \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":"  --dev "}]},{"type":"element","tag":"span","props":{"class":"ct-abb305"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":"  --entry-file index.js \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"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-0dd272"},"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-abb305"},"children":[{"type":"text","value":"cd"}]},{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":" android "}]},{"type":"element","tag":"span","props":{"class":"ct-d072f1"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"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-805815"},"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-0dd272"},"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-abb305"},"children":[{"type":"text","value":"cd"}]},{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":" ./android \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-d072f1"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":" ./gradlew assembleRelease \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-d072f1"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"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-805815"},"children":[{"type":"text","value":"# ios "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":"xcrun simctl openurl booted "}]},{"type":"element","tag":"span","props":{"class":"ct-900d3b"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a1a8"},"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-805815"},"children":[{"type":"text","value":"# android"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":"adb shell am start -W -a android.intent.action.VIEW -d "}]},{"type":"element","tag":"span","props":{"class":"ct-900d3b"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a1a8"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"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-0dd272"},"children":[{"type":"text","value":"PACKAGE="}]},{"type":"element","tag":"span","props":{"class":"ct-0554b1"},"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-0dd272"},"children":[{"type":"text","value":"adb shell pm set-app-links --package "}]},{"type":"element","tag":"span","props":{"class":"ct-900d3b"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a1a8"},"children":[{"type":"text","value":"PACKAGE"}]},{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":" 0 all "}]},{"type":"element","tag":"span","props":{"class":"ct-d072f1"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0dd272"},"children":[{"type":"text","value":"  adb shell pm verify-app-links --re-verify "}]},{"type":"element","tag":"span","props":{"class":"ct-900d3b"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-c7a1a8"},"children":[{"type":"text","value":"PACKAGE"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-805815{color:#8B949E}.ct-d072f1{color:#FF7B72}.ct-abb305{color:#79C0FF}.ct-c7a1a8{color:#C9D1D9}.ct-900d3b{color:#C9D1D9}.ct-0554b1{color:#A5D6FF}.ct-0dd272{color:#C9D1D9}.light .ct-0dd272{color:#657B83}.light .ct-0554b1{color:#2AA198}.light .ct-900d3b{color:#859900}.light .ct-c7a1a8{color:#268BD2}.light .ct-abb305{color:#268BD2}.light .ct-d072f1{color:#859900}.light .ct-805815{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-5ab1f1"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7c104e"},"children":[{"type":"text","value":"\"axios\""}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"React"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"createContext"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"PropsWithChildren"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"useContext"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7c104e"},"children":[{"type":"text","value":"\"react\""}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9474ea"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e9825f"},"children":[{"type":"text","value":"APIProviderProps"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9474ea"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4a4cfe"},"children":[{"type":"text","value":"PropsWithChildren"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-456d57"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-150b78"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-456d57"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-150b78"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-59516a"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-456d57"},"children":[{"type":"text","value":"refresh"}]},{"type":"element","tag":"span","props":{"class":"ct-150b78"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-59516a"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9dafee"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-01a17f"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"createContext"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  client: "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    baseURL: "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-01a17f"},"children":[{"type":"text","value":"NEXT_PUBLIC_API_ENDPOINT"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"APIProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5d6265"},"children":[{"type":"text","value":"FC"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-5d6265"},"children":[{"type":"text","value":"APIProviderProps"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" ({ "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"children"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"}) "}]},{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-01a17f"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"      baseURL: "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"process"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"env"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-01a17f"},"children":[{"type":"text","value":"NEXT_PUBLIC_API_ENDPOINT"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  )."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-01a17f"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"<() "}]},{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9dafee"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":">(() "}]},{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e7f8b5"},"children":[{"type":"text","value":"// TODO: implement me"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9dafee"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7c104e"},"children":[{"type":"text","value":"\"not implemented\""}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e7f8b5"},"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-bf085a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-01a17f"},"children":[{"type":"text","value":"req"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-9474ea"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-456d57"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-9474ea"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"          Authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-7c104e"},"children":[{"type":"text","value":"`Bearer ${"}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-c71c80"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-7c104e"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"        };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"      },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":"      ("}]},{"type":"element","tag":"span","props":{"class":"ct-456d57"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-9474ea"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-9dafee"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e7f8b5"},"children":[{"type":"text","value":"// refreshing interceptor"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-01a17f"},"children":[{"type":"text","value":"resp"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"use"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":"      ("}]},{"type":"element","tag":"span","props":{"class":"ct-456d57"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-9474ea"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"      },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-9474ea"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9474ea"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-456d57"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-01a17f"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"config"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6d104a"},"children":[{"type":"text","value":"401"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"_retry"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"_retry"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1786eb"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-01a17f"},"children":[{"type":"text","value":"newToken"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"            headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"              "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"originalRequest"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"              Authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-7c104e"},"children":[{"type":"text","value":"\"Bearer \""}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"newToken"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"            },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"          });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"        }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9dafee"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"reject"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"eject"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"req"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"interceptors"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"request"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"eject"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"resp"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  }, ["}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"access"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"refresh"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"refreshTokens"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"Provider"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"{{ "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" }}"}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":"        {"}]},{"type":"element","tag":"span","props":{"class":"ct-456d57"},"children":[{"type":"text","value":"children"}]},{"type":"element","tag":"span","props":{"class":"ct-da4f4c"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"Provider"}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"  );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"useAPI"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-107ddb"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e63225"},"children":[{"type":"text","value":"useContext"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"APIContext"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-5ab1f1"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-f40996"},"children":[{"type":"text","value":"APIProvider"}]},{"type":"element","tag":"span","props":{"class":"ct-bf085a"},"children":[{"type":"text","value":" };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-1786eb{color:#79C0FF}.ct-6d104a{color:#79C0FF}.ct-c71c80{color:#A5D6FF}.ct-e7f8b5{color:#8B949E}.ct-5d6265{color:#FFA657}.ct-01a17f{color:#79C0FF}.ct-9dafee{color:#79C0FF}.ct-107ddb{color:#FF7B72}.ct-e63225{color:#D2A8FF}.ct-59516a{color:#79C0FF}.ct-150b78{color:#FF7B72}.ct-456d57{color:#FFA657}.ct-4a4cfe{color:#79C0FF}.ct-e9825f{color:#FFA657}.ct-da4f4c{color:#C9D1D9}.ct-9474ea{color:#FF7B72}.ct-7c104e{color:#A5D6FF}.ct-f40996{color:#C9D1D9}.ct-bf085a{color:#C9D1D9}.ct-5ab1f1{color:#FF7B72}.light .ct-5ab1f1{color:#859900}.light .ct-bf085a{color:#657B83}.light .ct-f40996{color:#268BD2}.light .ct-7c104e{color:#2AA198}.light .ct-9474ea{color:#073642}.light .ct-da4f4c{color:#657B83}.light .ct-e9825f{color:#268BD2}.light .ct-4a4cfe{color:#657B83}.light .ct-456d57{color:#657B83}.light .ct-150b78{color:#859900}.light .ct-59516a{color:#859900}.light .ct-e63225{color:#268BD2}.light .ct-107ddb{color:#073642}.light .ct-9dafee{color:#859900}.light .ct-01a17f{color:#268BD2}.light .ct-5d6265{color:#268BD2}.light .ct-e7f8b5{color:#93A1A1}.light .ct-c71c80{color:#657B83}.light .ct-6d104a{color:#D33682}.light .ct-1786eb{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-77afc9"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e470da"},"children":[{"type":"text","value":"\"react\""}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e470da"},"children":[{"type":"text","value":"'axios'"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d0d82a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c20cad"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-07e030"},"children":[{"type":"text","value":"create"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d0d82a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07e030"},"children":[{"type":"text","value":"useGetUsers"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-d0d82a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-d0d82a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c20cad"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07e030"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07e030"},"children":[{"type":"text","value":"AbortController"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"());"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-d0d82a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c20cad"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07e030"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d0d82a"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-d0d82a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-d0d82a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c20cad"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-07e030"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e470da"},"children":[{"type":"text","value":"\"/\""}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-dc658c"},"children":[{"type":"text","value":"// params and props here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"        signal: "}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"signal"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"    });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"result"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"  }, []);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-d0d82a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c20cad"},"children":[{"type":"text","value":"cancel"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07e030"},"children":[{"type":"text","value":"useCallback"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-d0d82a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-07e030"},"children":[{"type":"text","value":"abort"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-dc658c"},"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-cebfea"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-07e030"},"children":[{"type":"text","value":"AbortController"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"  }, ["}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"controller"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-77afc9"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"get"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-350859"},"children":[{"type":"text","value":"cancel"}]},{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":" };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cebfea"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-dc658c{color:#8B949E}.ct-07e030{color:#D2A8FF}.ct-c20cad{color:#79C0FF}.ct-d0d82a{color:#FF7B72}.ct-e470da{color:#A5D6FF}.ct-350859{color:#C9D1D9}.ct-cebfea{color:#C9D1D9}.ct-77afc9{color:#FF7B72}.light .ct-77afc9{color:#859900}.light .ct-cebfea{color:#657B83}.light .ct-350859{color:#268BD2}.light .ct-e470da{color:#2AA198}.light .ct-d0d82a{color:#073642}.light .ct-c20cad{color:#268BD2}.light .ct-07e030{color:#268BD2}.light .ct-dc658c{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-f9abb1"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-f9abb1"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f1a53d"},"children":[{"type":"text","value":"'react'"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cc67b4"},"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-cc67b4"},"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-cc67b4"},"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-cc67b4"},"children":[{"type":"text","value":" */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-cc67b4"},"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-f9abb1"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b44e8"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-22d7f5"},"children":[{"type":"text","value":"useWhatsChanged"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f9abb1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6104c3"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-02a7e4"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-4fa1be"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-6104c3"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2cf3c2"},"children":[{"type":"text","value":"Record"}]},{"type":"element","tag":"span","props":{"class":"ct-6104c3"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-fd4eed"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-6104c3"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-fd4eed"},"children":[{"type":"text","value":"unknown"}]},{"type":"element","tag":"span","props":{"class":"ct-6104c3"},"children":[{"type":"text","value":">,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"prefix"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f9abb1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f1a53d"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-3b44e8"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-3b44e8"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0f2083"},"children":[{"type":"text","value":"prevProps"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f9abb1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-22d7f5"},"children":[{"type":"text","value":"useRef"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-22d7f5"},"children":[{"type":"text","value":"useEffect"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-3b44e8"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6104c3"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-fd4eed"},"children":[{"type":"text","value":"Object"}]},{"type":"element","tag":"span","props":{"class":"ct-6104c3"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-f8110e"},"children":[{"type":"text","value":"entries"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-f9abb1"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"        "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"prevProps"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"class":"ct-f9abb1"},"children":[{"type":"text","value":"!=="}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"value"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"      ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-cc67b4"},"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-31b457"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-22d7f5"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-f1a53d"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"prefix"}]},{"type":"element","tag":"span","props":{"class":"ct-f1a53d"},"children":[{"type":"text","value":"} ${"}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-f1a53d"},"children":[{"type":"text","value":"} has changed`"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"    });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"prevProps"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f9abb1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"  }, ["}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"props"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1346f1"},"children":[{"type":"text","value":"prefix"}]},{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"]);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-31b457"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-f8110e{color:#D2A8FF}.ct-0f2083{color:#79C0FF}.ct-fd4eed{color:#79C0FF}.ct-2cf3c2{color:#FFA657}.ct-4fa1be{color:#FF7B72}.ct-02a7e4{color:#FFA657}.ct-6104c3{color:#C9D1D9}.ct-22d7f5{color:#D2A8FF}.ct-3b44e8{color:#FF7B72}.ct-cc67b4{color:#8B949E}.ct-f1a53d{color:#A5D6FF}.ct-1346f1{color:#C9D1D9}.ct-31b457{color:#C9D1D9}.ct-f9abb1{color:#FF7B72}.light .ct-f9abb1{color:#859900}.light .ct-31b457{color:#657B83}.light .ct-1346f1{color:#268BD2}.light .ct-f1a53d{color:#2AA198}.light .ct-cc67b4{color:#93A1A1}.light .ct-3b44e8{color:#073642}.light .ct-22d7f5{color:#268BD2}.light .ct-6104c3{color:#657B83}.light .ct-02a7e4{color:#657B83}.light .ct-4fa1be{color:#859900}.light .ct-2cf3c2{color:#268BD2}.light .ct-fd4eed{color:#859900}.light .ct-0f2083{color:#268BD2}.light .ct-f8110e{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-e8ced4"},"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-1ce9e2"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-e09b72"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2d334b"},"children":[{"type":"text","value":"axios"}]},{"type":"element","tag":"span","props":{"class":"ct-e09b72"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1ce9e2"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-e09b72"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e55b78"},"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-0ed185"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-e09b72"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0ed185"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-e09b72"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e55b78"},"children":[{"type":"text","value":"'vue'"}]},{"type":"element","tag":"span","props":{"class":"ct-e09b72"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e09b72"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-0ed185"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-e09b72"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-49d54b"},"children":[{"type":"text","value":"ComponentCustomProperties"}]},{"type":"element","tag":"span","props":{"class":"ct-e09b72"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e09b72"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e09b72"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f08b83"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7ef2e7"},"children":[{"type":"text","value":"$translate"}]},{"type":"element","tag":"span","props":{"class":"ct-faf552"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-f08b83"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-693bc9"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-faf552"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-f08b83"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-742d17"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-f08b83"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-9be5a9"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-f08b83"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-742d17"},"children":[{"type":"text","value":"string"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e09b72"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e09b72"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-9be5a9{color:#FF7B72}.ct-742d17{color:#79C0FF}.ct-693bc9{color:#FFA657}.ct-faf552{color:#FF7B72}.ct-7ef2e7{color:#D2A8FF}.ct-f08b83{color:#C9D1D9}.ct-49d54b{color:#FFA657}.ct-0ed185{color:#FF7B72}.ct-e55b78{color:#A5D6FF}.ct-2d334b{color:#C9D1D9}.ct-e09b72{color:#C9D1D9}.ct-1ce9e2{color:#FF7B72}.ct-e8ced4{color:#8B949E}.light .ct-e8ced4{color:#93A1A1}.light .ct-1ce9e2{color:#859900}.light .ct-e09b72{color:#657B83}.light .ct-2d334b{color:#268BD2}.light .ct-e55b78{color:#2AA198}.light .ct-0ed185{color:#073642}.light .ct-49d54b{color:#268BD2}.light .ct-f08b83{color:#657B83}.light .ct-7ef2e7{color:#268BD2}.light .ct-faf552{color:#859900}.light .ct-693bc9{color:#657B83}.light .ct-742d17{color:#859900}.light .ct-9be5a9{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-af07c0"},"children":[{"type":"text","value":"// ~/server/plugins/highlight.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0028ce"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-1cc7eb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0028ce"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-1cc7eb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1a5dc6"},"children":[{"type":"text","value":"defineNitroPlugin"}]},{"type":"element","tag":"span","props":{"class":"ct-1cc7eb"},"children":[{"type":"text","value":"((nitroApp) "}]},{"type":"element","tag":"span","props":{"class":"ct-e5b141"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-1cc7eb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2f8113"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-92d472"},"children":[{"type":"text","value":"nitroApp"}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-92d472"},"children":[{"type":"text","value":"hooks"}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1c30e2"},"children":[{"type":"text","value":"hook"}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-aaaea0"},"children":[{"type":"text","value":"\"content:file:beforeParse\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-46b2e3"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-92d472"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-92d472"},"children":[{"type":"text","value":"_id"}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1c30e2"},"children":[{"type":"text","value":"endsWith"}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-aaaea0"},"children":[{"type":"text","value":"\".md\""}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-92d472"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-92d472"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-46b2e3"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-92d472"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-92d472"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-1c30e2"},"children":[{"type":"text","value":"replace"}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-6647c9"},"children":[{"type":"text","value":"/==("}]},{"type":"element","tag":"span","props":{"class":"ct-7a3b20"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-46b2e3"},"children":[{"type":"text","value":"^"}]},{"type":"element","tag":"span","props":{"class":"ct-7a3b20"},"children":[{"type":"text","value":"=]"}]},{"type":"element","tag":"span","props":{"class":"ct-46b2e3"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-6647c9"},"children":[{"type":"text","value":")==/"}]},{"type":"element","tag":"span","props":{"class":"ct-46b2e3"},"children":[{"type":"text","value":"gs"}]},{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-aaaea0"},"children":[{"type":"text","value":"`<span class=\"highlight\">$1</span>`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"      );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c5954c"},"children":[{"type":"text","value":"  });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2f8113"},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"class":"ct-1cc7eb"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-2f8113"},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-7a3b20{color:#79C0FF}.ct-6647c9{color:#A5D6FF}.ct-46b2e3{color:#FF7B72}.ct-aaaea0{color:#A5D6FF}.ct-1c30e2{color:#D2A8FF}.ct-92d472{color:#C9D1D9}.ct-c5954c{color:#C9D1D9}.ct-2f8113{color:#C9D1D9}.ct-e5b141{color:#FF7B72}.ct-1a5dc6{color:#D2A8FF}.ct-1cc7eb{color:#FFA657}.ct-0028ce{color:#FF7B72}.ct-af07c0{color:#8B949E}.light .ct-af07c0{color:#93A1A1}.light .ct-0028ce{color:#859900}.light .ct-1cc7eb{color:#657B83}.light .ct-1a5dc6{color:#268BD2}.light .ct-e5b141{color:#073642}.light .ct-2f8113{color:#657B83}.light .ct-c5954c{color:#657B83}.light .ct-92d472{color:#268BD2}.light .ct-1c30e2{color:#268BD2}.light .ct-aaaea0{color:#2AA198}.light .ct-46b2e3{color:#859900}.light .ct-6647c9{color:#D30102}.light .ct-7a3b20{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-adcfc5"},"children":[{"type":"text","value":"// render-a-cube.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"\"./create-shader\""}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"vxShader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"\"./vertex.glsl?raw\""}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"fgShader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"\"./fragment.glsl?raw\""}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"getElementyId"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"'view'"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"getRenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"'webgl'"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// should be put inside requestAnimationFrame"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"drawCube"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":")(); "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"drawCube"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7a9410"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-b7f1ad"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3c4d"},"children":[{"type":"text","value":"WebGL2RenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7a9410"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-b7f1ad"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-758bcb"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7a9410"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-b7f1ad"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-758bcb"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// Initializing viewport"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"viewport"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"clearColor"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"clear"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"COLOR_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"createProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b615da"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"\"Can't init programm\""}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"vx"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"vxShader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"VERTEX_SHADER"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"attachShader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"vx"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"fx"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"fgShader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"FRAGMENT_SHADER"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"attachShader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"fx"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"linkProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"getProgramParameter"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"LINK_STATUS"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b615da"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"\"Could not initialise shaders\""}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"vertices"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// 0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":",  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":",   "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// 2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":",  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// 3"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":",  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// 4"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":",   "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// 5"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":",    "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// 6"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":",   "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// 7"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  ];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"indices"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// side 0 (first triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// side 0 (second triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// side 1 (first triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// side 1 (second triangle)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  ];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"createBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"bufferData"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b615da"},"children":[{"type":"text","value":"Float32Array"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"vertices"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"STATIC_DRAW"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f2374f"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"squareIndexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"createBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"squareIndexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"bufferData"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b615da"},"children":[{"type":"text","value":"Uint16Array"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"indices"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"STATIC_DRAW"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-f2374f"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// initial drawing"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"clearColor"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0.0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"enable"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"DEPTH_TEST"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"clear"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"COLOR_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"DEPTH_BUFFER_BIT"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"viewport"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"squareVertexBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"vertexAttribPointer"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"getAttribLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"\"aVertexPosition\""}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"), "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// 3 bytes-long"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"FLOAT"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-f2374f"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"enableVertexAttribArray"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"getAttribLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"\"aVertexPosition\""}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0.01"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"useProgram"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0.25"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"uniform1f"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"getUniformLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"\"slide\""}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"uniform1f"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"getUniformLocation"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"prg"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"\"aspect\""}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"), "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"bindBuffer"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"ELEMENT_ARRAY_BUFFER"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"squareIndexBuffer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"drawElements"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"TRIANGLES"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"indices"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"UNSIGNED_SHORT"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    );"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"+="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"speed"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"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-adcfc5"},"children":[{"type":"text","value":"// create-shader.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7a9410"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-b7f1ad"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e3c4d"},"children":[{"type":"text","value":"WebGL2RenderingContext"}]},{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7a9410"},"children":[{"type":"text","value":"sourceCode"}]},{"type":"element","tag":"span","props":{"class":"ct-b7f1ad"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-758bcb"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7a9410"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-b7f1ad"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-758bcb"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-65b1d0"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-d41173"},"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-64281f"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"createShader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-b615da"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"`Can't init shader`"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"shaderSource"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"sourceCode"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"compileShader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"getShaderParameter"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"COMPILE_STATUS"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7e145c"},"children":[{"type":"text","value":"info"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"gl"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"getShaderInfoLog"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"`Could not compile WebGL program. "}]},{"type":"element","tag":"span","props":{"class":"ct-9bc03d"},"children":[{"type":"text","value":"\\n\\n"}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"${"}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"info"}]},{"type":"element","tag":"span","props":{"class":"ct-d37380"},"children":[{"type":"text","value":"}`"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"shader"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"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-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"attribute vec4 aVertexPosition;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// Parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"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-e04d55"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"(){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"  vec4 scale"}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"(slide),"}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"  vec4 aspectRatioFix"}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"(aspect,"}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"  gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"aVertexPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"aspectRatioFix,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"  v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"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-64281f"},"children":[{"type":"text","value":"precision highp "}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// parameter from Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"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-e04d55"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-e04d55"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"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-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"// same a["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"//   v_positionWithOffset.x,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"//   v_positionWithOffset.y, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"//   v_positionWithOffset.z, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"//   1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-adcfc5"},"children":[{"type":"text","value":"//  ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"  gl_FragColor"}]},{"type":"element","tag":"span","props":{"class":"ct-1b92cf"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-76004f"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-86a21d"},"children":[{"type":"text","value":"xyz"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-a52b15"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-64281f"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-9bc03d{color:#79C0FF}.ct-d41173{color:#8B949E}.ct-f2374f{color:#79C0FF}.ct-b615da{color:#79C0FF}.ct-a52b15{color:#79C0FF}.ct-758bcb{color:#79C0FF}.ct-6e3c4d{color:#FFA657}.ct-b7f1ad{color:#FF7B72}.ct-7a9410{color:#FFA657}.ct-65b1d0{color:#C9D1D9}.ct-76004f{color:#D2A8FF}.ct-7e145c{color:#79C0FF}.ct-e04d55{color:#FF7B72}.ct-d37380{color:#A5D6FF}.ct-86a21d{color:#C9D1D9}.ct-64281f{color:#C9D1D9}.ct-1b92cf{color:#FF7B72}.ct-adcfc5{color:#8B949E}.light .ct-adcfc5{color:#93A1A1}.light .ct-1b92cf{color:#859900}.light .ct-64281f{color:#657B83}.light .ct-86a21d{color:#268BD2}.light .ct-d37380{color:#2AA198}.light .ct-e04d55{color:#073642}.light .ct-7e145c{color:#268BD2}.light .ct-76004f{color:#268BD2}.light .ct-65b1d0{color:#657B83}.light .ct-7a9410{color:#657B83}.light .ct-b7f1ad{color:#859900}.light .ct-6e3c4d{color:#268BD2}.light .ct-758bcb{color:#859900}.light .ct-a52b15{color:#D33682}.light .ct-b615da{color:#859900}.light .ct-f2374f{color:#B58900}.light .ct-d41173{color:#93A1A1}.light .ct-9bc03d{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-399fca"},"children":[{"type":"text","value":"precision highp "}]},{"type":"element","tag":"span","props":{"class":"ct-74ea1f"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad4c6"},"children":[{"type":"text","value":"// parameter from Vertex Shader"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7ad4c6"},"children":[{"type":"text","value":"// parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-74ea1f"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-74ea1f"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-399fca"},"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-74ea1f"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c08e51"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-74ea1f"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7ad4c6"},"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-399fca"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7ad4c6"},"children":[{"type":"text","value":"// same a["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7ad4c6"},"children":[{"type":"text","value":"//   v_positionWithOffset.x,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7ad4c6"},"children":[{"type":"text","value":"//   v_positionWithOffset.y, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7ad4c6"},"children":[{"type":"text","value":"//   v_positionWithOffset.z, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7ad4c6"},"children":[{"type":"text","value":"//   1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7ad4c6"},"children":[{"type":"text","value":"//  ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"  gl_FragColor"}]},{"type":"element","tag":"span","props":{"class":"ct-592041"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c08e51"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-970676"},"children":[{"type":"text","value":"v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-970676"},"children":[{"type":"text","value":"xyz"}]},{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-a7d944"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-399fca"},"children":[{"type":"text","value":"}```"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-a7d944{color:#79C0FF}.ct-970676{color:#C9D1D9}.ct-592041{color:#FF7B72}.ct-c08e51{color:#D2A8FF}.ct-7ad4c6{color:#8B949E}.ct-74ea1f{color:#FF7B72}.ct-399fca{color:#C9D1D9}.light .ct-399fca{color:#657B83}.light .ct-74ea1f{color:#073642}.light .ct-7ad4c6{color:#93A1A1}.light .ct-c08e51{color:#268BD2}.light .ct-592041{color:#859900}.light .ct-970676{color:#268BD2}.light .ct-a7d944{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-b1c69d"},"children":[{"type":"text","value":"// main.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a3b25"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"Worker"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-73e905"},"children":[{"type":"text","value":"'./render-worker.ts'"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a3b25"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"document"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"getElementById"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-73e905"},"children":[{"type":"text","value":"'view'"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1c69d"},"children":[{"type":"text","value":"// attaching event listener to worker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"onmessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e2332"},"children":[{"type":"text","value":"MessageEvent"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a3b25"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"getContext"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-73e905"},"children":[{"type":"text","value":"\"2d\""}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-97e8ad"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-73e905"},"children":[{"type":"text","value":"`Can't get 2D context`"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"drawImage"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"event"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e2332"},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-dba812"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-dba812"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1c69d"},"children":[{"type":"text","value":"// sending canvas contents to worker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"renderInCanvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"createImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"current"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"then"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"instance"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"postMessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", { transfer: ["}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"] })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"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-b1c69d"},"children":[{"type":"text","value":"// render-worker.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c5c72b"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-206304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c5c72b"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-206304"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-9fc3d0"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-206304"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2571d1"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"self"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"onmessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a3b25"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"message"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"instanceof"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-1e2332"},"children":[{"type":"text","value":"ImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-97e8ad"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-73e905"},"children":[{"type":"text","value":"'Received unknown data'"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b1c69d"},"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-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a3b25"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"OffscreenCanvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-2a3b25"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"getContext"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-73e905"},"children":[{"type":"text","value":"\"2d\""}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7529db"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-97e8ad"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-73e905"},"children":[{"type":"text","value":"`Can't get 2D context`"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"drawImage"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-dba812"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-dba812"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b1c69d"},"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-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b1c69d"},"children":[{"type":"text","value":"// a couple of seconds"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"doHardRenderingStuffHere"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"ctx"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-b1c69d"},"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-fc0e66"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"createImageBitmap"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"canvas"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-53822a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"self"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-8779d1"},"children":[{"type":"text","value":"postMessage"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":", { transfer: ["}]},{"type":"element","tag":"span","props":{"class":"ct-7cf441"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"] });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"    });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"  };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc0e66"},"children":[{"type":"text","value":"};"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-2571d1{color:#C9D1D9}.ct-9fc3d0{color:#FF7B72}.ct-206304{color:#FFA657}.ct-c5c72b{color:#FF7B72}.ct-dba812{color:#79C0FF}.ct-97e8ad{color:#79C0FF}.ct-1e2332{color:#FFA657}.ct-7cf441{color:#C9D1D9}.ct-73e905{color:#A5D6FF}.ct-8779d1{color:#D2A8FF}.ct-7529db{color:#FF7B72}.ct-2a3b25{color:#79C0FF}.ct-fc0e66{color:#C9D1D9}.ct-53822a{color:#FF7B72}.ct-b1c69d{color:#8B949E}.light .ct-b1c69d{color:#93A1A1}.light .ct-53822a{color:#073642}.light .ct-fc0e66{color:#657B83}.light .ct-2a3b25{color:#268BD2}.light .ct-7529db{color:#859900}.light .ct-8779d1{color:#268BD2}.light .ct-73e905{color:#2AA198}.light .ct-7cf441{color:#268BD2}.light .ct-1e2332{color:#268BD2}.light .ct-97e8ad{color:#859900}.light .ct-dba812{color:#D33682}.light .ct-c5c72b{color:#859900}.light .ct-206304{color:#657B83}.light .ct-9fc3d0{color:#073642}.light .ct-2571d1{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-470295"},"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-89e88d"},"children":[{"type":"text","value":"attribute vec4 aVertexPosition;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-470295"},"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-470295"},"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-89e88d"},"children":[{"type":"text","value":"varying vec4 v_positionWithOffset;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-470295"},"children":[{"type":"text","value":"// Parameters passed from Javascript loop"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-619701"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":" slide;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"uniform "}]},{"type":"element","tag":"span","props":{"class":"ct-619701"},"children":[{"type":"text","value":"float"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"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-619701"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6a1ab5"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"(){"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-470295"},"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-89e88d"},"children":[{"type":"text","value":"  vec4 scale"}]},{"type":"element","tag":"span","props":{"class":"ct-928cb5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6a1ab5"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6a1ab5"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"(slide),"}]},{"type":"element","tag":"span","props":{"class":"ct-a1b596"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-470295"},"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-89e88d"},"children":[{"type":"text","value":"  vec4 aspectRatioFix"}]},{"type":"element","tag":"span","props":{"class":"ct-928cb5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-6a1ab5"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"(aspect,"}]},{"type":"element","tag":"span","props":{"class":"ct-6a1ab5"},"children":[{"type":"text","value":"vec3"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a1b596"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"));"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-470295"},"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-89e88d"},"children":[{"type":"text","value":"  gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-928cb5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"aVertexPosition"}]},{"type":"element","tag":"span","props":{"class":"ct-928cb5"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"scale"}]},{"type":"element","tag":"span","props":{"class":"ct-928cb5"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"aspectRatioFix,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-470295"},"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-89e88d"},"children":[{"type":"text","value":"  v_positionWithOffset"}]},{"type":"element","tag":"span","props":{"class":"ct-928cb5"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"gl_Position"}]},{"type":"element","tag":"span","props":{"class":"ct-928cb5"},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"class":"ct-6a1ab5"},"children":[{"type":"text","value":"vec4"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-a1b596"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-a1b596"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-a1b596"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":","}]},{"type":"element","tag":"span","props":{"class":"ct-a1b596"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-89e88d"},"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-a1b596{color:#79C0FF}.ct-928cb5{color:#FF7B72}.ct-6a1ab5{color:#D2A8FF}.ct-619701{color:#FF7B72}.ct-89e88d{color:#C9D1D9}.ct-470295{color:#8B949E}.light .ct-470295{color:#93A1A1}.light .ct-89e88d{color:#657B83}.light .ct-619701{color:#073642}.light .ct-6a1ab5{color:#268BD2}.light .ct-928cb5{color:#859900}.light .ct-a1b596{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-4c51fd"},"children":[{"type":"text","value":"[url "}]},{"type":"element","tag":"span","props":{"class":"ct-24b94b"},"children":[{"type":"text","value":"\"https://github.com\""}]},{"type":"element","tag":"span","props":{"class":"ct-4c51fd"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4c51fd"},"children":[{"type":"text","value":"    insteadOf "}]},{"type":"element","tag":"span","props":{"class":"ct-fdc8e1"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-4c51fd"},"children":[{"type":"text","value":" git:"}]},{"type":"element","tag":"span","props":{"class":"ct-e031f8"},"children":[{"type":"text","value":"//github.com"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-e031f8{color:#8B949E}.ct-fdc8e1{color:#FF7B72}.ct-24b94b{color:#A5D6FF}.ct-4c51fd{color:#C9D1D9}.light .ct-4c51fd{color:#657B83}.light .ct-24b94b{color:#2AA198}.light .ct-fdc8e1{color:#859900}.light .ct-e031f8{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-29a912"},"children":[{"type":"text","value":"[alias]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"    flush "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":" git clean"}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"branches branch "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":" grep "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"v master "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":" xargs git branch "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"D"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"    lol "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":" log "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"oneline "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"graph"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"    l "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":" lol"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"    c "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":" commit "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"am"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"    cv "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":" commit "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"no"}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"verify "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"am"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"    p "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":" push"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"    pf "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":" p "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"force"}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"with"}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"lease"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"    ignore"}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"now "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":" update"}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"index "}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"--"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"children":[{"type":"text","value":"skip"}]},{"type":"element","tag":"span","props":{"class":"ct-d43e20"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"class":"ct-29a912"},"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-d43e20{color:#FF7B72}.ct-29a912{color:#C9D1D9}.light .ct-29a912{color:#657B83}.light .ct-d43e20{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-89c348"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4e5b11"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-60c626"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-4a0748"},"children":[{"type":"text","value":"golang.org/x/text/language"}]},{"type":"element","tag":"span","props":{"class":"ct-60c626"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4e5b11"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-60c626"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-4a0748"},"children":[{"type":"text","value":"golang.org/x/text/message"}]},{"type":"element","tag":"span","props":{"class":"ct-60c626"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e2c15"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89c348"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":" language."}]},{"type":"element","tag":"span","props":{"class":"ct-164097"},"children":[{"type":"text","value":"MustParse"}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-8fae75"},"children":[{"type":"text","value":"ru-RU"}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-9e2c15"},"children":[{"type":"text","value":"printer"}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89c348"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":" message."}]},{"type":"element","tag":"span","props":{"class":"ct-164097"},"children":[{"type":"text","value":"NewPrinter"}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"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-9e2c15"},"children":[{"type":"text","value":"count"}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-89c348"},"children":[{"type":"text","value":":="}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-8cc52a"},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"printer."}]},{"type":"element","tag":"span","props":{"class":"ct-164097"},"children":[{"type":"text","value":"Sprintf"}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-442322"},"children":[{"type":"text","value":"%d"}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":" butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"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-636ac6"},"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-636ac6"},"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-636ac6"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"id\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"\"{Count} butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"message\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"\"{Count} butterflies\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"translation\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"select\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"feature\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"\"plural\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"arg\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"\"Count\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"cases\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"one\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"\"{Count} бабочка\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"        },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"few\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"\"{Count} бабочки\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"        },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"many\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"\"{Count} бабочек\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"        },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"other\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"msg\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"\"{Count} бабочуль\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"        }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"placeholders\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"    {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"id\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"\"Count\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"string\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"\"%[1]d\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"type\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"\"int\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"underlyingType\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"\"int\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"argNum\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-8cc52a"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2422fb"},"children":[{"type":"text","value":"\"expr\""}]},{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6f0e2d"},"children":[{"type":"text","value":"\"count\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"children":[{"type":"text","value":"  ]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-636ac6"},"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-4e274a"},"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-636ac6"},"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-4e274a{color:#8B949E}.ct-2422fb{color:#79C0FF}.ct-442322{color:#79C0FF}.ct-8cc52a{color:#79C0FF}.ct-8fae75{color:#FFA198}.ct-6f0e2d{color:#A5D6FF}.ct-164097{color:#79C0FF}.ct-9e2c15{color:#C9D1D9}.ct-4a0748{color:#FFA657}.ct-60c626{color:#A5D6FF}.ct-4e5b11{color:#C9D1D9}.ct-636ac6{color:#C9D1D9}.ct-89c348{color:#FF7B72}.light .ct-89c348{color:#859900}.light .ct-636ac6{color:#657B83}.light .ct-4e5b11{color:#657B83}.light .ct-60c626{color:#2AA198}.light .ct-4a0748{color:#2AA198}.light .ct-9e2c15{color:#268BD2}.light .ct-164097{color:#268BD2}.light .ct-6f0e2d{color:#2AA198}.light .ct-8fae75{color:#CD3131}.light .ct-8cc52a{color:#D33682}.light .ct-442322{color:#CB4B16}.light .ct-2422fb{color:#859900}.light .ct-4e274a{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-63da7c"},"children":[{"type":"text","value":"query"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b8392"},"children":[{"type":"text","value":"listItems"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-00c966"},"children":[{"type":"text","value":"filter"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4b2a94"},"children":[{"type":"text","value":"Filter"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":", "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-00c966"},"children":[{"type":"text","value":"sort"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4b2a94"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-00c966"},"children":[{"type":"text","value":"limit"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4b2a94"},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-00c966"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4b2a94"},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"): "}]},{"type":"element","tag":"span","props":{"class":"ct-3b8392"},"children":[{"type":"text","value":"ItemList"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"input"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4b88de"},"children":[{"type":"text","value":"Filter"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-00c966"},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4b2a94"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-a06743"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-00c966"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4b2a94"},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"class":"ct-a06743"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4b88de"},"children":[{"type":"text","value":"ItemList"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-00c966"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-4b2a94"},"children":[{"type":"text","value":"Item"}]},{"type":"element","tag":"span","props":{"class":"ct-a06743"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-a06743"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-00c966"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4b2a94"},"children":[{"type":"text","value":"Int"}]},{"type":"element","tag":"span","props":{"class":"ct-a06743"},"children":[{"type":"text","value":"!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"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-63da7c"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"InMemoryCache"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e2bfd8"},"children":[{"type":"text","value":"'@apollo/client'"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c02914"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ee6627"},"children":[{"type":"text","value":"client"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b8392"},"children":[{"type":"text","value":"ApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-064ef0"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"  cache: "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b8392"},"children":[{"type":"text","value":"InMemoryCache"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"({ "}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"typePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-064ef0"},"children":[{"type":"text","value":"// ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"});"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c02914"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ee6627"},"children":[{"type":"text","value":"typePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dc2da4"},"children":[{"type":"text","value":"TypePolicies"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"  Query: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"    fields: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-064ef0"},"children":[{"type":"text","value":"// query name"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"      listItems: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-064ef0"},"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-484f1e"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-064ef0"},"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-484f1e"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-064ef0"},"children":[{"type":"text","value":"// consider choosing the right fields, "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-064ef0"},"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-484f1e"},"children":[{"type":"text","value":"        keyArgs: ["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-e2bfd8"},"children":[{"type":"text","value":"'sort'"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-064ef0"},"children":[{"type":"text","value":"// primitive type"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-e2bfd8"},"children":[{"type":"text","value":"'filter'"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":", ["}]},{"type":"element","tag":"span","props":{"class":"ct-e2bfd8"},"children":[{"type":"text","value":"'name'"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-e2bfd8"},"children":[{"type":"text","value":"'type'"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"class":"ct-064ef0"},"children":[{"type":"text","value":"// nested fields of `filter`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"        ],"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"        merge: "}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"      },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"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-064ef0"},"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-406b91"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-004a7d"},"children":[{"type":"text","value":"mergeItemsWithTotalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a06743"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-00c966"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-00c966"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-00c966"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-406b91"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-0f1adc"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-064ef0"},"children":[{"type":"text","value":"// no existing data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"args"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"offset"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"existing"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" [];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-064ef0"},"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-484f1e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"?."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" [];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-064ef0"},"children":[{"type":"text","value":"// merge cache and incoming data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c02914"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ee6627"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-064ef0"},"children":[{"type":"text","value":"// apply latest result for totalCount"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c02914"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ee6627"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"existing"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"incoming"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-63da7c"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"items"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-027a67"},"children":[{"type":"text","value":"totalCount"}]},{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"    };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-484f1e"},"children":[{"type":"text","value":"  };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-004a7d{color:#D2A8FF}.ct-406b91{color:#FF7B72}.ct-dc2da4{color:#FFA657}.ct-064ef0{color:#8B949E}.ct-ee6627{color:#79C0FF}.ct-c02914{color:#FF7B72}.ct-e2bfd8{color:#A5D6FF}.ct-027a67{color:#C9D1D9}.ct-a06743{color:#FF7B72}.ct-4b88de{color:#79C0FF}.ct-4b2a94{color:#79C0FF}.ct-00c966{color:#FFA657}.ct-0f1adc{color:#C9D1D9}.ct-3b8392{color:#D2A8FF}.ct-484f1e{color:#C9D1D9}.ct-63da7c{color:#FF7B72}.light .ct-63da7c{color:#859900}.light .ct-484f1e{color:#657B83}.light .ct-3b8392{color:#268BD2}.light .ct-0f1adc{color:#657B83}.light .ct-00c966{color:#657B83}.light .ct-4b2a94{color:#859900}.light .ct-4b88de{color:#859900}.light .ct-a06743{color:#859900}.light .ct-027a67{color:#268BD2}.light .ct-e2bfd8{color:#2AA198}.light .ct-c02914{color:#073642}.light .ct-ee6627{color:#268BD2}.light .ct-064ef0{color:#93A1A1}.light .ct-dc2da4{color:#268BD2}.light .ct-406b91{color:#073642}.light .ct-004a7d{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-c29a0d"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"createApolloClient"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a4bfe2"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38b71b"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-f6081a"},"children":[{"type":"text","value":"getAuthorizationData"}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-0fc581"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"authorization"}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a4bfe2"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7c69f1"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"<"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"    { "}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a4bfe2"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a4bfe2"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a4bfe2"},"children":[{"type":"text","value":"undefined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"  >,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"ApolloClientBase"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"children":[{"type":"text","value":"// ...other options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    link: "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"ApolloLink"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"(["}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"children":[{"type":"text","value":"// ...other options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-f6081a"},"children":[{"type":"text","value":"setContext"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0fc581"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"_"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":", { "}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" }) "}]},{"type":"element","tag":"span","props":{"class":"ct-0fc581"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"          headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"getAuthorizationData"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"(),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"          },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"HttpLink"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        uri: "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"url"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        fetch: "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"fetchWithTokenRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    ]),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"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-2f3556"},"children":[{"type":"text","value":"/** Global singleton for refreshing promise */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7c69f1"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-38b71b"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38b71b"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ff53b5"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"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-0fc581"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6081a"},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36607d"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"<{ "}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"code"}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36607d"},"children":[{"type":"text","value":"ErrorCode"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" }>)"}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0fc581"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-38b71b"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"isArray"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"some"}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"error"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-61a549"},"children":[{"type":"text","value":"401"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"children":[{"type":"text","value":"// Distinguish unauthorized error here"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"  });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"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-0fc581"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f6081a"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36607d"},"children":[{"type":"text","value":"RequestInit"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-0fc581"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"try"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-117482"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38b71b"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"operationName"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"==="}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d10977"},"children":[{"type":"text","value":"'RefreshToken'"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"  } "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"e"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ff53b5"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"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-c29a0d"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-117482"},"children":[{"type":"text","value":"fetchWithTokenRefresh"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"  ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":": () "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":": () "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      { accessToken: "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ff53b5"},"children":[{"type":"text","value":"undefined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"  ) "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-0fc581"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a4bfe2"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36607d"},"children":[{"type":"text","value":"RequestInit"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36607d"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-36607d"},"children":[{"type":"text","value":"Response"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-0fc581"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"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-c54ac0"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"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-c54ac0"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"&&"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      ("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7c69f1"},"children":[{"type":"text","value":"Record"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-38b71b"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-38b71b"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":">)?."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"authorization"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-117482"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"refreshingPromise"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        ."}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"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-c54ac0"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-d10977"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"async"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-117482"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"await"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-117482"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"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-c54ac0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" ("}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"isRefreshRequestOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"||"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"||"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"hasUnauthorizedError"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"errors"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      ) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"response"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"          ok: "}]},{"type":"element","tag":"span","props":{"class":"ct-ff53b5"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a4bfe2"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a4bfe2"},"children":[{"type":"text","value":"unknown"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":">("}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0fc581"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"              "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"json"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a4bfe2"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a4bfe2"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":">("}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0fc581"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"              "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            }),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"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-c54ac0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"refreshToken"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"          ."}]},{"type":"element","tag":"span","props":{"class":"ct-f6081a"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0fc581"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-36607d"},"children":[{"type":"text","value":"Promise"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a4bfe2"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-0fc581"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ff53b5"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"!"}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"              "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38b71b"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d10977"},"children":[{"type":"text","value":"'Session expired'"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"?."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"accessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"          })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"          ."}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"refreshingPromise"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ff53b5"},"children":[{"type":"text","value":"null"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"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-c54ac0"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"logout"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"throw"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-38b71b"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-d10977"},"children":[{"type":"text","value":"'Session expired'"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"          });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"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-c54ac0"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"refreshingPromise"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"        ."}]},{"type":"element","tag":"span","props":{"class":"ct-f6081a"},"children":[{"type":"text","value":"then"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-0fc581"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-cd6d99"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-263e81"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a4bfe2"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-0fc581"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-762abc"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"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-c54ac0"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"              "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"              authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"newAccessToken"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"          });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        ."}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"catch"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-36d8aa"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-2f3556"},"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-c54ac0"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-707e43"},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"uri"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":", {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            headers: {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"              "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6db9a8"},"children":[{"type":"text","value":"headers"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c29a0d"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":" {}),"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"              authorization: "}]},{"type":"element","tag":"span","props":{"class":"ct-d10977"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"            },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"          });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"        });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"    });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-c54ac0"},"children":[{"type":"text","value":"  };"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-d10977{color:#A5D6FF}.ct-117482{color:#79C0FF}.ct-61a549{color:#79C0FF}.ct-36607d{color:#FFA657}.ct-ff53b5{color:#79C0FF}.ct-6db9a8{color:#C9D1D9}.ct-2f3556{color:#8B949E}.ct-7c69f1{color:#FFA657}.ct-0fc581{color:#FF7B72}.ct-f6081a{color:#D2A8FF}.ct-38b71b{color:#79C0FF}.ct-a4bfe2{color:#79C0FF}.ct-263e81{color:#FF7B72}.ct-cd6d99{color:#FFA657}.ct-762abc{color:#C9D1D9}.ct-707e43{color:#D2A8FF}.ct-36d8aa{color:#FF7B72}.ct-c54ac0{color:#C9D1D9}.ct-c29a0d{color:#FF7B72}.light .ct-c29a0d{color:#859900}.light .ct-c54ac0{color:#657B83}.light .ct-36d8aa{color:#073642}.light .ct-707e43{color:#268BD2}.light .ct-762abc{color:#657B83}.light .ct-cd6d99{color:#657B83}.light .ct-263e81{color:#859900}.light .ct-a4bfe2{color:#859900}.light .ct-38b71b{color:#859900}.light .ct-f6081a{color:#268BD2}.light .ct-0fc581{color:#073642}.light .ct-7c69f1{color:#268BD2}.light .ct-2f3556{color:#93A1A1}.light .ct-6db9a8{color:#268BD2}.light .ct-ff53b5{color:#B58900}.light .ct-36607d{color:#268BD2}.light .ct-61a549{color:#D33682}.light .ct-117482{color:#268BD2}.light .ct-d10977{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-6abb3f"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-ce00cb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7dd3c9"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"class":"ct-ce00cb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6abb3f"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-ce00cb"},"children":[{"type":"text","value":" /proc/"}]},{"type":"element","tag":"span","props":{"class":"ct-6abb3f"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"class":"ct-ce00cb"},"children":[{"type":"text","value":"/status "}]},{"type":"element","tag":"span","props":{"class":"ct-6abb3f"},"children":[{"type":"text","value":";"}]},{"type":"element","tag":"span","props":{"class":"ct-ce00cb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6abb3f"},"children":[{"type":"text","value":"do"}]},{"type":"element","tag":"span","props":{"class":"ct-ce00cb"},"children":[{"type":"text","value":" awk "}]},{"type":"element","tag":"span","props":{"class":"ct-7195a7"},"children":[{"type":"text","value":"'/VmSwap|Name/{printf $2 \" \" $3}END{ print \"\"}'"}]},{"type":"element","tag":"span","props":{"class":"ct-ce00cb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6abb3f"},"children":[{"type":"text","value":"done"}]},{"type":"element","tag":"span","props":{"class":"ct-ce00cb"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6abb3f"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-ce00cb"},"children":[{"type":"text","value":" sort -k 2 -n -r "}]},{"type":"element","tag":"span","props":{"class":"ct-6abb3f"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-ce00cb"},"children":[{"type":"text","value":" less"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-7195a7{color:#A5D6FF}.ct-7dd3c9{color:#C9D1D9}.ct-ce00cb{color:#C9D1D9}.ct-6abb3f{color:#FF7B72}.light .ct-6abb3f{color:#859900}.light .ct-ce00cb{color:#657B83}.light .ct-7dd3c9{color:#268BD2}.light .ct-7195a7{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-1349d3"},"children":[{"type":"text","value":"Bluetooth: hci0: ACL packet "}]},{"type":"element","tag":"span","props":{"class":"ct-7d044d"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-1349d3"},"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-0979d6"},"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-1349d3"},"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-1349d3"},"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-1349d3"},"children":[{"type":"text","value":"$ systool -v -m btusb "}]},{"type":"element","tag":"span","props":{"class":"ct-7d044d"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-1349d3"},"children":[{"type":"text","value":" grep autosuspend"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1349d3"},"children":[{"type":"text","value":"    enable_autosuspend = "}]},{"type":"element","tag":"span","props":{"class":"ct-9b394f"},"children":[{"type":"text","value":"\"N\""}]},{"type":"element","tag":"span","props":{"class":"ct-1349d3"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-0979d6"},"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-9b394f{color:#A5D6FF}.ct-0979d6{color:#8B949E}.ct-7d044d{color:#FF7B72}.ct-1349d3{color:#C9D1D9}.light .ct-1349d3{color:#657B83}.light .ct-7d044d{color:#859900}.light .ct-0979d6{color:#93A1A1}.light .ct-9b394f{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-1299ad"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-34c583"},"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-1299ad"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1299ad"},"children":[{"type":"text","value":"gitea"}]},{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1299ad"},"children":[{"type":"text","value":"external"}]},{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-499005"},"children":[{"type":"text","value":"false"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1299ad"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-1299ad"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1299ad"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-34c583"},"children":[{"type":"text","value":"gitea/gitea:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1299ad"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-34c583"},"children":[{"type":"text","value":"gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1299ad"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-34c583"},"children":[{"type":"text","value":"USER_UID=1000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-34c583"},"children":[{"type":"text","value":"USER_GID=1000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1299ad"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-34c583"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1299ad"},"children":[{"type":"text","value":"networks"}]},{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-34c583"},"children":[{"type":"text","value":"gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1299ad"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-34c583"},"children":[{"type":"text","value":"./var/lib/gitea:/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-34c583"},"children":[{"type":"text","value":"./etc/gitea:/etc/gitea"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-34c583"},"children":[{"type":"text","value":"/etc/timezone:/etc/timezone:ro"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-34c583"},"children":[{"type":"text","value":"/etc/localtime:/etc/localtime:ro"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-1299ad"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-34c583"},"children":[{"type":"text","value":"\"3000:3000\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-871c02"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-34c583"},"children":[{"type":"text","value":"\"222:22\""}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-499005{color:#79C0FF}.ct-34c583{color:#A5D6FF}.ct-871c02{color:#C9D1D9}.ct-1299ad{color:#7EE787}.light .ct-1299ad{color:#268BD2}.light .ct-871c02{color:#657B83}.light .ct-34c583{color:#2AA198}.light .ct-499005{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-0bc3c0"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"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-0bc3c0"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"photoprism"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"photoprism__app"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"photoprism/photoprism:latest"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"depends_on"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"mariadb"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"unless-stopped"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"security_opt"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"seccomp:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"apparmor:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"2342:2342"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-952961"},"children":[{"type":"text","value":"# HTTP port (host:container)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_ADMIN_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"password\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_URL"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"https://service.url/\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_ORIGINALS_LIMIT"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-4fd78c"},"children":[{"type":"text","value":"5000"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_HTTP_COMPRESSION"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"gzip\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_DEBUG"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"          "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_PUBLIC"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_READONLY"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_EXPERIMENTAL"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_CHOWN"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_WEBDAV"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_SETTINGS"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_TENSORFLOW"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_FACES"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"     "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_DISABLE_CLASSIFICATION"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"false\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_DARKTABLE_PRESETS"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"     "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_DETECT_NSFW"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"false\""}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"           "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_UPLOAD_NSFW"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"true\""}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"            "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_DRIVER"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"mysql\""}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"       "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_SERVER"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"mariadb:3306\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_NAME"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"photoprism\""}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_USER"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"root\""}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"         "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_DATABASE_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"insecure\""}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_TITLE"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"PhotoPrism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_CAPTION"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"Browse Your Life\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_DESCRIPTION"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"PHOTOPRISM_SITE_AUTHOR"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"HOME"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"/photoprism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"working_dir"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"/photoprism\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"./data/originals:/photoprism/originals\""}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"./data/imports:/photoprism/import\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"./data/storage:/photoprism/storage\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"mariadb"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"photoprism__db"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"unless-stopped"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"mariadb:10.6"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"security_opt"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"seccomp:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"apparmor:unconfined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"command"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"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-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"\"./database:/var/lib/mysql\""}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-952961"},"children":[{"type":"text","value":"# Important, don't remove"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"MYSQL_ROOT_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"insecure"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"MYSQL_DATABASE"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"photoprism"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"MYSQL_USER"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"photoprism"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"class":"ct-0bc3c0"},"children":[{"type":"text","value":"MYSQL_PASSWORD"}]},{"type":"element","tag":"span","props":{"class":"ct-d6f3f5"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-f8d4d6"},"children":[{"type":"text","value":"insecure"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-4fd78c{color:#79C0FF}.ct-952961{color:#8B949E}.ct-f8d4d6{color:#A5D6FF}.ct-d6f3f5{color:#C9D1D9}.ct-0bc3c0{color:#7EE787}.light .ct-0bc3c0{color:#268BD2}.light .ct-d6f3f5{color:#657B83}.light .ct-f8d4d6{color:#2AA198}.light .ct-952961{color:#93A1A1}.light .ct-4fd78c{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-a3f23e"},"children":[{"type":"text","value":"( screen -r bash "}]},{"type":"element","tag":"span","props":{"class":"ct-482fd3"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f23e"},"children":[{"type":"text","value":" ( screen -d bash "}]},{"type":"element","tag":"span","props":{"class":"ct-482fd3"},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f23e"},"children":[{"type":"text","value":" screen -r bash "}]},{"type":"element","tag":"span","props":{"class":"ct-482fd3"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"class":"ct-a3f23e"},"children":[{"type":"text","value":" screen -SAm bash bash ) )"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-482fd3{color:#FF7B72}.ct-a3f23e{color:#C9D1D9}.light .ct-a3f23e{color:#657B83}.light .ct-482fd3{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-9138da"},"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-00bbaf"},"children":[{"type":"text","value":"PORT=22"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-00bbaf"},"children":[{"type":"text","value":"USER=user"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-00bbaf"},"children":[{"type":"text","value":"HOST=example.com"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-00bbaf"},"children":[{"type":"text","value":"REMOTE_PATH=/tmp"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-00bbaf"},"children":[{"type":"text","value":"REMOTE_FILE=sample.text"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-00bbaf"},"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-00bbaf"},"children":[{"type":"text","value":"rsync -a -e "}]},{"type":"element","tag":"span","props":{"class":"ct-447de1"},"children":[{"type":"text","value":"\"ssh -p "}]},{"type":"element","tag":"span","props":{"class":"ct-7c419c"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-733188"},"children":[{"type":"text","value":"PORT"}]},{"type":"element","tag":"span","props":{"class":"ct-447de1"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-00bbaf"},"children":[{"type":"text","value":" -P -v \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-00bbaf"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-447de1"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7c419c"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-733188"},"children":[{"type":"text","value":"USER"}]},{"type":"element","tag":"span","props":{"class":"ct-447de1"},"children":[{"type":"text","value":"@"}]},{"type":"element","tag":"span","props":{"class":"ct-7c419c"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-733188"},"children":[{"type":"text","value":"HOST"}]},{"type":"element","tag":"span","props":{"class":"ct-447de1"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-7c419c"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-733188"},"children":[{"type":"text","value":"REMOTE_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-447de1"},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"class":"ct-7c419c"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-733188"},"children":[{"type":"text","value":"REMOTE_FILE"}]},{"type":"element","tag":"span","props":{"class":"ct-447de1"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-00bbaf"},"children":[{"type":"text","value":" \\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-00bbaf"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-447de1"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-7c419c"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-733188"},"children":[{"type":"text","value":"DEST_PATH"}]},{"type":"element","tag":"span","props":{"class":"ct-447de1"},"children":[{"type":"text","value":"\""}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-733188{color:#C9D1D9}.ct-7c419c{color:#C9D1D9}.ct-447de1{color:#A5D6FF}.ct-00bbaf{color:#C9D1D9}.ct-9138da{color:#8B949E}.light .ct-9138da{color:#93A1A1}.light .ct-00bbaf{color:#657B83}.light .ct-447de1{color:#2AA198}.light .ct-7c419c{color:#859900}.light .ct-733188{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-f6e2ab"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-986a3e"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3b9cc5"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-f886f0"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-3b9cc5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-84533e"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9cc5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-986a3e"},"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-3a3e89"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-986a3e"},"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-3a3e89"},"children":[{"type":"text","value":"   "}]},{"type":"element","tag":"span","props":{"class":"ct-ee82bb"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-986a3e"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"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-f6e2ab"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-986a3e"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":" client_max_body_size "}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"200M;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-986a3e"},"children":[{"type":"text","value":"# ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"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-f6e2ab"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"next.vault48.org;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5650cb"},"children":[{"type":"text","value":"301"}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":" https://next.vault48.org"}]},{"type":"element","tag":"span","props":{"class":"ct-1b1878"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-cd14d7"},"children":[{"type":"text","value":"request_uri"}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f6e2ab"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"[::]:443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-986a3e"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":" ssl_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"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-3a3e89"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":" ssl_certificate_key "}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"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-3a3e89"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":" ssl_trusted_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"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-3a3e89"},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"next.vault48.org;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3b9cc5"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-f886f0"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-3b9cc5"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-84533e"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-3b9cc5"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"   "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":" proxy_redirect "}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"off;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"   "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"Host "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1878"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-cd14d7"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"   "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"X-Real-IP "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1878"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-cd14d7"},"children":[{"type":"text","value":"remote_addr"}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"   "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"X-Forwarded-For "}]},{"type":"element","tag":"span","props":{"class":"ct-1b1878"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-cd14d7"},"children":[{"type":"text","value":"proxy_add_x_forwarded_for"}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"    "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"   "}]},{"type":"element","tag":"span","props":{"class":"ct-7b47f8"},"children":[{"type":"text","value":" proxy_pass "}]},{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"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-3a3e89"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-3a3e89"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-cd14d7{color:#C9D1D9}.ct-1b1878{color:#C9D1D9}.ct-5650cb{color:#79C0FF}.ct-7b47f8{color:#FF7B72}.ct-ee82bb{color:#FF7B72}.ct-84533e{color:#FFA657}.ct-f886f0{color:#FF7B72}.ct-3b9cc5{color:#C9D1D9}.ct-986a3e{color:#8B949E}.ct-3a3e89{color:#C9D1D9}.ct-f6e2ab{color:#FF7B72}.light .ct-f6e2ab{color:#073642}.light .ct-3a3e89{color:#657B83}.light .ct-986a3e{color:#93A1A1}.light .ct-3b9cc5{color:#657B83}.light .ct-f886f0{color:#073642}.light .ct-84533e{color:#657B83}.light .ct-ee82bb{color:#657B83}.light .ct-7b47f8{color:#859900}.light .ct-5650cb{color:#D33682}.light .ct-1b1878{color:#859900}.light .ct-cd14d7{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-50b3d6"},"children":[{"type":"text","value":"version"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3e0e75"},"children":[{"type":"text","value":"'3'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-50b3d6"},"children":[{"type":"text","value":"services"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-50b3d6"},"children":[{"type":"text","value":"couchserver"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-50b3d6"},"children":[{"type":"text","value":"container_name"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3e0e75"},"children":[{"type":"text","value":"obsidian__database"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-50b3d6"},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3e0e75"},"children":[{"type":"text","value":"couchdb"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-50b3d6"},"children":[{"type":"text","value":"restart"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-3e0e75"},"children":[{"type":"text","value":"always"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-50b3d6"},"children":[{"type":"text","value":"ports"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3e0e75"},"children":[{"type":"text","value":"\"5984:5984\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-50b3d6"},"children":[{"type":"text","value":"environment"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3e0e75"},"children":[{"type":"text","value":"COUCHDB_USER=user"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3e0e75"},"children":[{"type":"text","value":"COUCHDB_PASSWORD=somepassword"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-50b3d6"},"children":[{"type":"text","value":"volumes"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3e0e75"},"children":[{"type":"text","value":"./couchdb/dbdata:/opt/couchdb/data"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"      - "}]},{"type":"element","tag":"span","props":{"class":"ct-3e0e75"},"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-44dce1"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"   "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"   "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"[::]:80;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"   "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"couchdb.yourhost.com;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-825c3e"},"children":[{"type":"text","value":"301"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":" https://"}]},{"type":"element","tag":"span","props":{"class":"ct-9de14b"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-23c908"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-9de14b"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-23c908"},"children":[{"type":"text","value":"request_uri"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-44dce1"},"children":[{"type":"text","value":"server"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"       "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"443 ssl http2;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"       "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" listen "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"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-885032"},"children":[{"type":"text","value":"       "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" ssl_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"/etc/letsencrypt/live/yourhost.com/fullchain.pem; "}]},{"type":"element","tag":"span","props":{"class":"ct-c4dfcc"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"       "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" ssl_certificate_key "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"/etc/letsencrypt/live/yourhost.com/privkey.pem; "}]},{"type":"element","tag":"span","props":{"class":"ct-c4dfcc"},"children":[{"type":"text","value":"# managed by Certbot"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"       "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" ssl_trusted_certificate "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"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-885032"},"children":[{"type":"text","value":"       "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" server_name "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"couchdb.yourhost.com;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"       "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" client_max_body_size "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"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-00a8a1"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-444b1d"},"children":[{"type":"text","value":"location"}]},{"type":"element","tag":"span","props":{"class":"ct-00a8a1"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-449352"},"children":[{"type":"text","value":"/ "}]},{"type":"element","tag":"span","props":{"class":"ct-00a8a1"},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"               "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" proxy_redirect "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"off;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"               "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"Host "}]},{"type":"element","tag":"span","props":{"class":"ct-9de14b"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-23c908"},"children":[{"type":"text","value":"host"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"               "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"X-Real-IP "}]},{"type":"element","tag":"span","props":{"class":"ct-9de14b"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-23c908"},"children":[{"type":"text","value":"remote_addr"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"               "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" proxy_set_header "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"X-Forwarded-For "}]},{"type":"element","tag":"span","props":{"class":"ct-9de14b"},"children":[{"type":"text","value":"$"}]},{"type":"element","tag":"span","props":{"class":"ct-23c908"},"children":[{"type":"text","value":"proxy_add_x_forwarded_for"}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"children":[{"type":"text","value":"               "}]},{"type":"element","tag":"span","props":{"class":"ct-90db21"},"children":[{"type":"text","value":" proxy_pass "}]},{"type":"element","tag":"span","props":{"class":"ct-885032"},"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-885032"},"children":[{"type":"text","value":"        }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-885032"},"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-449352{color:#FFA657}.ct-444b1d{color:#FF7B72}.ct-00a8a1{color:#C9D1D9}.ct-c4dfcc{color:#8B949E}.ct-23c908{color:#C9D1D9}.ct-9de14b{color:#C9D1D9}.ct-825c3e{color:#79C0FF}.ct-90db21{color:#FF7B72}.ct-44dce1{color:#FF7B72}.ct-3e0e75{color:#A5D6FF}.ct-885032{color:#C9D1D9}.ct-50b3d6{color:#7EE787}.light .ct-50b3d6{color:#268BD2}.light .ct-885032{color:#657B83}.light .ct-3e0e75{color:#2AA198}.light .ct-44dce1{color:#073642}.light .ct-90db21{color:#859900}.light .ct-825c3e{color:#D33682}.light .ct-9de14b{color:#859900}.light .ct-23c908{color:#268BD2}.light .ct-c4dfcc{color:#93A1A1}.light .ct-00a8a1{color:#657B83}.light .ct-444b1d{color:#073642}.light .ct-449352{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-1f7202"},"children":[{"type":"text","value":"sudo apt update"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f7202"},"children":[{"type":"text","value":"sudo apt install mariadb-server"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f7202"},"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-1f7202"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f7202"},"children":[{"type":"text","value":"bind-"}]},{"type":"element","tag":"span","props":{"class":"ct-511189"},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"span","props":{"class":"ct-1f7202"},"children":[{"type":"text","value":" = 0.0.0.0"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1f7202"},"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-511189{color:#FF7B72}.ct-1f7202{color:#C9D1D9}.light .ct-1f7202{color:#657B83}.light .ct-511189{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-7df206"},"children":[{"type":"text","value":"sudo apt update"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7df206"},"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-7df206"},"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-7df206"},"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-7df206"},"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-7df206"},"children":[{"type":"text","value":"Type "}]},{"type":"element","tag":"span","props":{"class":"ct-3eddfa"},"children":[{"type":"text","value":"\"help\""}]},{"type":"element","tag":"span","props":{"class":"ct-7df206"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e6324"},"children":[{"type":"text","value":"for"}]},{"type":"element","tag":"span","props":{"class":"ct-7df206"},"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-7df206"},"children":[{"type":"text","value":"postgres="}]},{"type":"element","tag":"span","props":{"class":"ct-2d99d6"},"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-7df206"},"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-7df206"},"children":[{"type":"text","value":"..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fc64a5"},"children":[{"type":"text","value":"local"}]},{"type":"element","tag":"span","props":{"class":"ct-7df206"},"children":[{"type":"text","value":"   all             postgres                                peer"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7df206"},"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-7df206"},"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-7df206"},"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-fc64a5{color:#FF7B72}.ct-2d99d6{color:#8B949E}.ct-6e6324{color:#FF7B72}.ct-3eddfa{color:#A5D6FF}.ct-7df206{color:#C9D1D9}.light .ct-7df206{color:#657B83}.light .ct-3eddfa{color:#2AA198}.light .ct-6e6324{color:#859900}.light .ct-2d99d6{color:#93A1A1}.light .ct-fc64a5{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-6c67cc"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-df51f3"},"children":[{"type":"text","value":"global"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-6c67cc"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dcff4e"},"children":[{"type":"text","value":"Window"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-52ad6e"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-e38c72"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-6c67cc"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-572fb9"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"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-f6ae9a"},"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-e38c72"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6c67cc"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dcff4e"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-f6ae9a"},"children":[{"type":"text","value":"// nothing :-)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"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-f6ae9a"},"children":[{"type":"text","value":"// fancyThings.ts"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e38c72"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-df51f3"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-e38c72"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-14d7fb"},"children":[{"type":"text","value":"\"./Sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c67cc"},"children":[{"type":"text","value":"declare"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6c67cc"},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-14d7fb"},"children":[{"type":"text","value":"\"./Sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-6c67cc"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dcff4e"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-52ad6e"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-e38c72"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" () "}]},{"type":"element","tag":"span","props":{"class":"ct-6c67cc"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-572fb9"},"children":[{"type":"text","value":"void"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"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-e38c72"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-df51f3"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-e38c72"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-14d7fb"},"children":[{"type":"text","value":"\"./sample\""}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-e38c72"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-14d7fb"},"children":[{"type":"text","value":"\"./fancyThings\""}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6c67cc"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5a04d9"},"children":[{"type":"text","value":"sample"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e38c72"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e38c72"},"children":[{"type":"text","value":"new"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-52ad6e"},"children":[{"type":"text","value":"Sample"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-df51f3"},"children":[{"type":"text","value":"sample"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-52ad6e"},"children":[{"type":"text","value":"doFancyThings"}]},{"type":"element","tag":"span","props":{"class":"ct-2c039e"},"children":[{"type":"text","value":"(); "}]},{"type":"element","tag":"span","props":{"class":"ct-f6ae9a"},"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-5a04d9{color:#79C0FF}.ct-14d7fb{color:#A5D6FF}.ct-f6ae9a{color:#8B949E}.ct-572fb9{color:#79C0FF}.ct-e38c72{color:#FF7B72}.ct-52ad6e{color:#D2A8FF}.ct-dcff4e{color:#FFA657}.ct-df51f3{color:#C9D1D9}.ct-2c039e{color:#C9D1D9}.ct-6c67cc{color:#FF7B72}.light .ct-6c67cc{color:#073642}.light .ct-2c039e{color:#657B83}.light .ct-df51f3{color:#268BD2}.light .ct-dcff4e{color:#268BD2}.light .ct-52ad6e{color:#268BD2}.light .ct-e38c72{color:#859900}.light .ct-572fb9{color:#859900}.light .ct-f6ae9a{color:#93A1A1}.light .ct-14d7fb{color:#2AA198}.light .ct-5a04d9{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-356c17"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3939d7"},"children":[{"type":"text","value":"en"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e843b"},"children":[{"type":"text","value":"'./en.json'"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4bd576"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"TranslationPath"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"typeof"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3939d7"},"children":[{"type":"text","value":"en"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":">;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-b1a434"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-d83093"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-86ffef"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-d83093"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-30ce96"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d83093"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-653b29"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-30ce96"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-d83093"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-706698"},"children":[{"type":"text","value":"TranslationPath"}]},{"type":"element","tag":"span","props":{"class":"ct-d83093"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-653b29"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-30ce96"},"children":[{"type":"text","value":"?:"}]},{"type":"element","tag":"span","props":{"class":"ct-d83093"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-706698"},"children":[{"type":"text","value":"TranslateOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-d83093"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-b1a434"},"children":[{"type":"text","value":"=>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-3939d7"},"children":[{"type":"text","value":"I18nLib"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-84c139"},"children":[{"type":"text","value":"t"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-3939d7"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-3939d7"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"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-f3dd82"},"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-f3dd82"},"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-356c17"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4bd576"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4bd576"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77890c"},"children":[{"type":"text","value":"number"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ee1076"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"] "}]},{"type":"element","tag":"span","props":{"class":"ct-4bd576"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-77890c"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77890c"},"children":[{"type":"text","value":"never"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4bd576"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"PluralForm"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-f3dd82"},"children":[{"type":"text","value":"// plural object"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e843b"},"children":[{"type":"text","value":"''"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4bd576"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77890c"},"children":[{"type":"text","value":"object"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" { ["}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"keyof"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"-?:"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"Join"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"Flatten"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"], "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"Prev"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"["}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"D"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"]>> }["}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"keyof"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"T"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e843b"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-f3dd82"},"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-4bd576"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"PluralForm"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"Record"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6e843b"},"children":[{"type":"text","value":"'one'"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e843b"},"children":[{"type":"text","value":"'few'"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e843b"},"children":[{"type":"text","value":"'many'"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-77890c"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":">;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4bd576"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"Join"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4bd576"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77890c"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77890c"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4bd576"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77890c"},"children":[{"type":"text","value":"string"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77890c"},"children":[{"type":"text","value":"number"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e843b"},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"K"}]},{"type":"element","tag":"span","props":{"class":"ct-6e843b"},"children":[{"type":"text","value":"}${''"}]},{"type":"element","tag":"span","props":{"class":"ct-8b6286"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4bd576"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-8b6286"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-8b6286"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"?"}]},{"type":"element","tag":"span","props":{"class":"ct-8b6286"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e843b"},"children":[{"type":"text","value":"''"}]},{"type":"element","tag":"span","props":{"class":"ct-8b6286"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-8b6286"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6e843b"},"children":[{"type":"text","value":"'.'}${"}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"P"}]},{"type":"element","tag":"span","props":{"class":"ct-6e843b"},"children":[{"type":"text","value":"}`"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77890c"},"children":[{"type":"text","value":"never"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-77890c"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-4bd576"},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"Prev"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":" ["}]},{"type":"element","tag":"span","props":{"class":"ct-77890c"},"children":[{"type":"text","value":"never"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ee1076"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ee1076"},"children":[{"type":"text","value":"1"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ee1076"},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ee1076"},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ee1076"},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-ee1076"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-356c17"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"class":"ct-a1c6e9"},"children":[{"type":"text","value":"Array"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-ee1076"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-fb01d2"},"children":[{"type":"text","value":">];"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-8b6286{color:#A5D6FF}.ct-ee1076{color:#79C0FF}.ct-77890c{color:#79C0FF}.ct-f3dd82{color:#8B949E}.ct-84c139{color:#D2A8FF}.ct-706698{color:#FFA657}.ct-653b29{color:#FFA657}.ct-30ce96{color:#FF7B72}.ct-86ffef{color:#D2A8FF}.ct-d83093{color:#C9D1D9}.ct-b1a434{color:#FF7B72}.ct-a1c6e9{color:#FFA657}.ct-4bd576{color:#FF7B72}.ct-6e843b{color:#A5D6FF}.ct-3939d7{color:#C9D1D9}.ct-fb01d2{color:#C9D1D9}.ct-356c17{color:#FF7B72}.light .ct-356c17{color:#859900}.light .ct-fb01d2{color:#657B83}.light .ct-3939d7{color:#268BD2}.light .ct-6e843b{color:#2AA198}.light .ct-4bd576{color:#073642}.light .ct-a1c6e9{color:#268BD2}.light .ct-b1a434{color:#073642}.light .ct-d83093{color:#657B83}.light .ct-86ffef{color:#268BD2}.light .ct-30ce96{color:#859900}.light .ct-653b29{color:#657B83}.light .ct-706698{color:#268BD2}.light .ct-84c139{color:#268BD2}.light .ct-f3dd82{color:#93A1A1}.light .ct-77890c{color:#859900}.light .ct-ee1076{color:#D33682}.light .ct-8b6286{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-c77a48"},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"class":"ct-fd17a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-065d68"},"children":[{"type":"text","value":"isFish"}]},{"type":"element","tag":"span","props":{"class":"ct-fd17a7"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-9b0c86"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-159293"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fd17a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-417de1"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-fd17a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-159293"},"children":[{"type":"text","value":"|"}]},{"type":"element","tag":"span","props":{"class":"ct-fd17a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-417de1"},"children":[{"type":"text","value":"Bird"}]},{"type":"element","tag":"span","props":{"class":"ct-fd17a7"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-159293"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"class":"ct-fd17a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-9b0c86"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-fd17a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-159293"},"children":[{"type":"text","value":"is"}]},{"type":"element","tag":"span","props":{"class":"ct-fd17a7"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-417de1"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-fd17a7"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-42123c"},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-126cc2"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42123c"},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-dc808b"},"children":[{"type":"text","value":"Fish"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"class":"ct-126cc2"},"children":[{"type":"text","value":"swim"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42123c"},"children":[{"type":"text","value":"!=="}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4c8c5d"},"children":[{"type":"text","value":"undefined"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"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-6c7ab9"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-600790"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-42123c"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ae3d89"},"children":[{"type":"text","value":"getSmallPet"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-42123c"},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-ae3d89"},"children":[{"type":"text","value":"isFish"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-126cc2"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":")) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-126cc2"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ae3d89"},"children":[{"type":"text","value":"swim"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"class":"ct-42123c"},"children":[{"type":"text","value":"else"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-126cc2"},"children":[{"type":"text","value":"pet"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-ae3d89"},"children":[{"type":"text","value":"fly"}]},{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-1e77de"},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ae3d89{color:#D2A8FF}.ct-600790{color:#79C0FF}.ct-6c7ab9{color:#FF7B72}.ct-4c8c5d{color:#79C0FF}.ct-dc808b{color:#FFA657}.ct-126cc2{color:#C9D1D9}.ct-42123c{color:#FF7B72}.ct-1e77de{color:#C9D1D9}.ct-417de1{color:#FFA657}.ct-159293{color:#FF7B72}.ct-9b0c86{color:#FFA657}.ct-065d68{color:#D2A8FF}.ct-fd17a7{color:#C9D1D9}.ct-c77a48{color:#FF7B72}.light .ct-c77a48{color:#073642}.light .ct-fd17a7{color:#657B83}.light .ct-065d68{color:#268BD2}.light .ct-9b0c86{color:#657B83}.light .ct-159293{color:#859900}.light .ct-417de1{color:#268BD2}.light .ct-1e77de{color:#657B83}.light .ct-42123c{color:#859900}.light .ct-126cc2{color:#268BD2}.light .ct-dc808b{color:#268BD2}.light .ct-4c8c5d{color:#B58900}.light .ct-6c7ab9{color:#073642}.light .ct-600790{color:#268BD2}.light .ct-ae3d89{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"}]}]}