{"_id":"@kentico/gatsby-kontent-components","_rev":"60-34b377743471bd9cc65499b227aacf8e","name":"@kentico/gatsby-kontent-components","dist-tags":{"vnext-alpha":"6.0.0-vnext.4","vnext":"6.0.0-vnext.5","gatsbyv3":"7.0.0-beta.1","alpha":"7.1.0-alpha.0","types":"7.0.1-types.0","beta":"8.1.0-beta.1","latest":"8.1.0"},"versions":{"6.0.0-vnext.1":{"name":"@kentico/gatsby-kontent-components","version":"6.0.0-vnext.1","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@6.0.0-vnext.1","maintainers":[{"name":"jirik","email":"jirik@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"michalpaukert","email":"michalp2@kentico.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"}],"homepage":"https://github.com/Kentico/gatsby-source-kontent/tree/vNext/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/gatsby-source-kontent/issues"},"dist":{"shasum":"1c13ffc62cfce4a04d2f8f92124597868c5693a3","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-6.0.0-vnext.1.tgz","fileCount":5,"integrity":"sha512-Dtew3MgBj9iGrGkQ65OufoL5MQofWIGTX96XCKynoFSnla3HcJtp00Lm+Vm93s5/yfubjfkUT/nfJYhCQ2haYw==","signatures":[{"sig":"MEYCIQDLvKarP9pVVn4g6ZubB4z095oDpgfXKOoYUj3hI00uawIhAPklem59VYhRimge3vhqrBkC2hM5UygcO2SeYPQOBlNd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh0VeCRA9TVsSAnZWagAAhXMP/AysgDOuklOMd7qayDKT\nkm8ZDep9FqpPTX0eN0FcoYk7acWTAy/EJZV4GbH0WznAukxyDbpmk6KwgZCN\nabUGzJsLRvol46rhmF7F7KZM1I2U5AcRrmJ2VvX08J5CmBM2YEUElsOsVLn7\n7bzXGnWCSB8pRK4ZHSVKkVIfP4IBKXM4zQDY69/+OLArBw7fJiHEA7w0Iz3/\npJKEJJg9WXNa2K9Yjcj7sF0T93v7DE54Qgj4oO58+Bf6d404bvc8PZIpcPMf\nScAV66N2qjGkJgt+G7MEeBumVjdZAQ3ZLNZAppVIEvUiexVzFrDrJuijL6bU\n5bjQP8FhPu9DSrGxEz62S1xLEkkyNLpdLre7UoabUCb2ihzc+xC8fVrW9zjM\nYmCq38CyYOtrlfUVIuA+aRABjxBcRMBVUI0j6RPF26Zq94MSvRZNSZwotwdC\npNJLfHIstCPIYwpeLcA1rb4ENK6ZU0wuR/BJBKKnOrSrFBUq0aSUnsuJHu5D\no2DTBfe3Mn58s93VP3JR1+nE7qgYscQJXt+RbKJy28tAFnKZPdl5PanJg1IH\nQFV3/S8dycYiGZdT2QFV3CQYt3HRbka2W524oskCH60qlKUUS3O2Ec/HZ4m7\nTmSE1FBaBL9qDpaGteDlX7Ux0QgP42BGemGG+kN+ykC2i5r4UOR1TJ2faBvt\nGGbt\r\n=+Gn3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"c2afed0f4545d97b6a60bf876abc4c6252e4cfa7","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"ondrej.chrastina@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/gatsby-source-kontent.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.13.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"12.13.0","dependencies":{"html-react-parser":"^0.10.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^24.9.0","react":"^16.13.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^16.13.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.10","@types/react":"^16.9.25","ts-auto-mock":"^1.5.7","@types/react-dom":"^16.9.5","jest-ts-auto-mock":"^1.0.11","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^16.10.2","react-dom":"^16.10.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_6.0.0-vnext.1_1585923421925_0.04438083174091956","host":"s3://npm-registry-packages"}},"6.0.0-vnext.2":{"name":"@kentico/gatsby-kontent-components","version":"6.0.0-vnext.2","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@6.0.0-vnext.2","maintainers":[{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"michalpaukert","email":"michalp2@kentico.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"}],"homepage":"https://github.com/Kentico/gatsby-source-kontent/tree/vNext/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/gatsby-source-kontent/issues"},"dist":{"shasum":"7430408fb252fc9d033fa9e0e32a18a41a359672","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-6.0.0-vnext.2.tgz","fileCount":5,"integrity":"sha512-1pBexi3NX9cXVZ8MsH//jrDZcYBDWBrFvXzwCRki4OlOkwOkVu3ApYofuoA8imjcy4vSddDQG4bNRYScnWQTfw==","signatures":[{"sig":"MEUCIDXH+zPy66R7ca9Tq8IrTwzefJAHaboAnZaqXrYQ1UlWAiEA+5sYVyMohLdYRts5sp/df77mQugSA76l1hEAlO7+m/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepn94CRA9TVsSAnZWagAA/iYP/1/Jj0gh/XQ1YodoneCq\nZGrcQMe7r4ojnJ8vTGEchNJMK+T5L+OcM+lRVoU+x4tmrF96TI6ChvQRUrXJ\nrlDPlkfJ41G4qXEhr38j+hahN6ufa6rkLxDyyhGwpS3J5L8GzzW6e/TQ0nvh\npI1FjjMNEd4vo2r41cWg3j7RHKxo38qv2/Ng0RGyp32IZBY5e4du5jCits0Q\nAo6/QE0na5Uskri89I1G8fu+LJZsxTjmbxVBbNEV5mKwJyHTgtz4as2HDq2+\nqOwF8cDISAZT+tkGKdxrejjydkSoGEeLiArW57Axu1RWdK65/xoDDLC74kCE\ngf3Gez2BKbRMNZQLYd2AXtgngmb6xkiJzhXUbUqC6D6uLk64DRHfgcmh1qX7\nksVIOH5Whuro+1W9T6Pm3S9I0ADhQl0e5Cxw7yhwwbHmfsUi+RbO9iynWe1A\n0mh/9JFemFlHAbFrJYj8DFAbpYXH4SfGBRKHzVI/eAHU1oZGU8N7CpBDHKd3\nzemVZy46nI+y35i+PY3DDkCBaNd2XNJ4qLa/wZMmaVA1avSU/Tt0c95pNos4\ndH40INqJC3aDBmsWFKYuPd4IReEsbSkzxKL8gDz4+nBmtpQotbZ0HzqOaJ0K\nPzZQWeKlHQma4+XLWRW+HNwweXaLYhp8of2XZhnRZNawSNhRtOftuq09YA/v\nmqsb\r\n=oSWW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Gatsby Kontent Components\n\nThe package containing React components useful when processing Kontent data to the site.\n\n## Rich text element component\n\nRich text elements from Kentico Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\n\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\n\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\n\n```jsx\n {\n return (\n \n )\n }}\n resolveLink={(link, domNode) => {\n const parentItemType = contextData.type // It is possible to use external data for resolution\n return (\n \n {domNode.children[0].data}\n \n )\n }}\n resolveLinkedItem={linkedItem => {\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\n }}\n />\n```\n\n### Resolution scope\n\nIf you don't need to resolve anything, you could just provide `value` property.\n\n#### Images\n\nIf you want to resolve images pass `images` and `resolveImage` properties.\n\n* `images` **have to contain at least `image_id` property**\n* `resolveImage` has one parameter `image` basically containing one record from `images` array\n\n#### Links to content items\n\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\n\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\n\n* `links` **have to contain at least `link_id` property**\n* `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\n\n#### Content components and Linked content items\n\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\n\n* `linkedItems` **have to contain at least `system.codename` property**\n* `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\n","gitHead":"82d29884c1097b8c9d836c0c00f26f2e34d89ccb","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"ondrej.chrastina@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/gatsby-source-kontent.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.13.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"12.13.0","dependencies":{"html-react-parser":"^0.10.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^16.13.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^16.13.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.10","@types/react":"^16.9.25","ts-auto-mock":"^1.5.7","@types/react-dom":"^16.9.5","jest-ts-auto-mock":"^1.0.11","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^16.10.2","react-dom":"^16.10.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_6.0.0-vnext.2_1587969912138_0.8813722224527063","host":"s3://npm-registry-packages"}},"6.0.0-vnext.3":{"name":"@kentico/gatsby-kontent-components","version":"6.0.0-vnext.3","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@6.0.0-vnext.3","maintainers":[{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"michalpaukert","email":"michalp2@kentico.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"}],"homepage":"https://github.com/Kentico/gatsby-source-kontent/tree/vNext/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/gatsby-source-kontent/issues"},"dist":{"shasum":"7f13c928e412998247ee09d0521e59a094a1de01","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-6.0.0-vnext.3.tgz","fileCount":5,"integrity":"sha512-yPqK68VU7AXCT5EuV51Z5ti1f+mW4KzA92KDJdW1nJLUentncU48gZmijLJ5DJOVkZbJWhMeTmGu2Qu61QLNNw==","signatures":[{"sig":"MEUCIAkT2JHXyCUb6KpHbU0hfVBd6bERKNtMtaGHGQlVQSVZAiEAhDCAFebJEE9ab67v4hBYIGq+4muCS5mNORUpZ9zTXnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepqn6CRA9TVsSAnZWagAAEDYP/0s7DmC6CncMvAsAglPU\nzancG9+OHYJpVMXfiHxlNf/Ywftiqyd57gzYDt5kqb3Zw6ylRIfgOdvZpLpd\nhKrWBstKTLZMDp9E1LuAOjYz8KCrlGgmd2fYpQSPNuxGhFDiszNe7Dgb60LE\nH3puFcETIqxiQgzQ4XOahOO36Do862d1FHQkI9HquXJ5S7vJgVmfNmQjypil\np4jC/wqzbshGh/9tl2K30ZAg11C8SEqGNUxPYzm4YQmS8TmemkNysO8hkHkT\nBVSF0T+5P2mmRK8lwOamAENrKuvBI9BlUeYwkOakpTA80hSkk1hKzC28kNzq\nTzqrQikjv0zSbXw77I6SJ/e5eIdcTeGAIskw069DgG1R2kT23yrHJ2k2uTQ9\nMNGd3zfuxe38ZyCbt1eAWRao/UpGIazWyuuGUDrClVf5WpcfZCKWeluVqGq9\n2YCU2qvFlqTnnJuQiLLi9Ufg3sNk7Jw+ZyXWvYZX/6qTHi8V9UrFcniKUFnC\neQPjUyMIYW+GjK/36mfPbXCYvol8VBZQignZf1ql3NhvU9R+gTkD4XNLP4p2\nCGZEGD97jYYCVZAV6ggq2hDojmzIYTENgjgHBY7c1vF5t59gudUozSPoBUzX\nfW8TC+GjjZvNJUvBP04zrKYtAFzIniGT9Wkcow6TOxF4ktquJZkNPPXg0Yse\n7tCm\r\n=BSgp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Gatsby Kontent Components\n\nThe package containing React components useful when processing Kontent data to the site.\n\n## Rich text element component\n\nRich text elements from Kentico Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\n\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\n\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\n\n```jsx\n {\n return (\n \n )\n }}\n resolveLink={(link, domNode) => {\n const parentItemType = contextData.type // It is possible to use external data for resolution\n return (\n \n {domNode.children[0].data}\n \n )\n }}\n resolveLinkedItem={linkedItem => {\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\n }}\n />\n```\n\n### Resolution scope\n\nIf you don't need to resolve anything, you could just provide `value` property.\n\n#### Images\n\nIf you want to resolve images pass `images` and `resolveImage` properties.\n\n* `images` **have to contain at least `image_id` property**\n* `resolveImage` has one parameter `image` basically containing one record from `images` array\n\n#### Links to content items\n\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\n\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\n\n* `links` **have to contain at least `link_id` property**\n* `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\n\n#### Content components and Linked content items\n\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\n\n* `linkedItems` **have to contain at least `system.codename` property**\n* `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\n","gitHead":"4273ebfd99f6d5ea750195f3ed2d08a0374292dd","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"ondrej.chrastina@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/gatsby-source-kontent.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.13.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"12.13.0","dependencies":{"html-react-parser":"^0.10.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^16.13.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^16.13.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.10","@types/react":"^16.9.25","ts-auto-mock":"^1.5.7","@types/react-dom":"^16.9.5","jest-ts-auto-mock":"^1.0.11","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^16.10.2","react-dom":"^16.10.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_6.0.0-vnext.3_1587980793536_0.8598340493594954","host":"s3://npm-registry-packages"}},"6.0.0-vnext.4":{"name":"@kentico/gatsby-kontent-components","version":"6.0.0-vnext.4","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@6.0.0-vnext.4","maintainers":[{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"michalpaukert","email":"michalp2@kentico.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"}],"homepage":"https://github.com/Kentico/gatsby-source-kontent/tree/vNext/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/gatsby-source-kontent/issues"},"dist":{"shasum":"027b004c05ed9dfc743a2886b9d5ec484a44d0c4","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-6.0.0-vnext.4.tgz","fileCount":5,"integrity":"sha512-MX2lw+QqqdOT9ucc1IEUPTMZ93Mw9Og7lOESZZTUBI64kZdgfgChm6dB7SuwbHHjOMSPAwRLrXaUhpvCl+5FSQ==","signatures":[{"sig":"MEQCIC3eZsz9NGscojg7dtMxXhPzf042YeIJmCHGrD4TMItjAiAONIKs5bA3kvwYr3stFFDyvpxF+YawPq2rM4bJfGCq4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptaxCRA9TVsSAnZWagAAeJ0QAKJKndiNnFrCpPgUQGbg\nvrRtRU7OOPWfIfgANCQtDP0Xu6NbUrAGgal6MhMQuj8PPobvDX4ee8wa3M/r\n2huOA/LyXjB4ClgkpjBZUbrd/yAcpt+9J2ifZCkNIA5Px3EyTuqRklQb49JQ\nGxak5/sTldfFqDNp+bHXJz29EOZxUQWXEwC2L1Ny1Bjwz1Nr7NU55U3ur9A8\n4ZpwSotQgxYEa3hL7QtQsnprv8t9RZIU4jZanHNHBO3QkhIlB03tgHDZrAVk\n+R6oY3VpVNRkomoitMbSWPwE2un4npKHbE6bSJ4tuOva7+c6A01dkkqFW0Yn\nSCFoBBpnX3DLzy/SgcRwPgMbvXEYCrK86Yko1U/ops24oxPq2Pi93PCDW896\nd6ClMVm9zF8UZm/bWCLzMbydIZSzDH8I/c3UVB5CrLhEmOff0Bcx4AZaNg4F\nszfv0ZWm9YelW4Y93owNyPG8jAvkFW/hlIqVlksGUlHMMmo4LgZIkJftUtib\n1QJWchzCrfbe68WlmhY8ZJm0BAYTCNIQ3FD+6m/+jGII7mddikrQR9Ka4bSL\n5a7hGbuo5hLAEvJd8UTGHWgGmQBwCXk7MpANJ6zuCbFVDiWmE300eXHstE10\n7MkhOBpavpmpEYoo0u1CtL48IJ9vB+Zrt8G/Yh+nwIhsjf/sAaE3JXRlVQ4c\nu8Ud\r\n=CJRf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Gatsby Kontent Components\n\nThe package containing React components useful when processing Kontent data to the site.\n\n## Rich text element component\n\nRich text elements from Kentico Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\n\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\n\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\n\n```jsx\n {\n return (\n \n )\n }}\n resolveLink={(link, domNode) => {\n const parentItemType = contextData.type // It is possible to use external data for resolution\n return (\n \n {domNode.children[0].data}\n \n )\n }}\n resolveLinkedItem={linkedItem => {\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\n }}\n />\n```\n\n### Resolution scope\n\nIf you don't need to resolve anything, you could just provide `value` property.\n\n#### Images\n\nIf you want to resolve images pass `images` and `resolveImage` properties.\n\n* `images` **have to contain at least `image_id` property**\n* `resolveImage` has one parameter `image` basically containing one record from `images` array\n\n#### Links to content items\n\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\n\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\n\n* `links` **have to contain at least `link_id` property**\n* `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\n\n#### Content components and Linked content items\n\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\n\n* `linkedItems` **have to contain at least `system.codename` property**\n* `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\n","gitHead":"a224042cba13941eb605076e7fe2d70b81e2efde","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"ondrej.chrastina@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/gatsby-source-kontent.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.13.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"12.13.0","dependencies":{"html-react-parser":"^0.10.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^16.13.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^16.13.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.10","@types/react":"^16.9.25","ts-auto-mock":"^1.5.7","@types/react-dom":"^16.9.5","jest-ts-auto-mock":"^1.0.11","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^16.10.2","react-dom":"^16.10.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_6.0.0-vnext.4_1587992240765_0.033039313714957386","host":"s3://npm-registry-packages"}},"6.0.0-vnext.5":{"name":"@kentico/gatsby-kontent-components","version":"6.0.0-vnext.5","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@6.0.0-vnext.5","maintainers":[{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"michalpaukert","email":"michalp2@kentico.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"}],"homepage":"https://github.com/Kentico/gatsby-source-kontent/tree/vNext/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/gatsby-source-kontent/issues"},"dist":{"shasum":"8bac337378d834b5eb2b2c6b3dc945abee581434","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-6.0.0-vnext.5.tgz","fileCount":5,"integrity":"sha512-6/xVWoVcqsUM/p8a5BgE0UMOstzhoHsgDnAvOc+mBLafbHDqdJdIUhxKT7ragj1h/WQfqF+evj1hL+cTlfQULQ==","signatures":[{"sig":"MEUCIEwr6A1XUmank9MCyXMTAh7NYPOr8viEhcZllbwbhinYAiEA8QzvbNoVPMrfrc3LaNTv5YoLdgwxFoe0MYVyhc/ZjtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJespPWCRA9TVsSAnZWagAA3+cP/jZCN58Ix7SiN+NtIlnz\n0URxUVYdFTY/bObG1CBCfo03clV2nDnpkE2DxKWuKi+iAZG57LL3ziEGQxCd\n0gB4Wad+Q6XIVyGlWdVZb3rAV9miiK2TOPRUXYiGktC6kFkCoX4xHo5JPqvl\naKFNDOcZQabIpEnOPaInfscbqtz+yaerBBEUmRRSl4A0juB9iaOtCahBCdhh\njxPF3RDM/gWXVROp3KW3BUImgP7JmkQHLBXq6rmN9h7bMsVB0rmp0bDtwkcb\nIhjNcnVW3xmhwv/qecjVVU6Km5DGi8oqBmixPx6on4C8OLFxZ34+I7wiFksr\nL22PgdupOW5koD6PZzKcQ+o7yeL4/nHS2mJNDD8c/SZF0SIMBVJOUZc99jS9\n7zFDm6AMa80LNjed1+7jgGerr9PzVRYWmRNqmSpS9W2HQ9y8eZZd7n5I+QtZ\nX5fYAX5RngCP+qXoLWh+rXhyV6+85xM4VPg3ekGrcC19NGVXF35ICb1liyJq\nXEab8SmADZLETM8RAGsPd1zT/YgPoJY+MsQ9uvivG8gDzfJD0KJ2Cxp+uTiy\nRanWl2rp1iLarztmoT1ZZrWG+uA+RJopiktgPWX1oOiB2KkBj+NmsUyjKgUs\nIuJHWw99Dr23h4EZ09t/L63gQnPj8IeC2nr1pdmFCud4MkfzlGyfJ6LdRSwt\ntt1+\r\n=Lcf5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Gatsby Kontent Components\n\n[![npm version](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components.svg)](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components)\n\nThe package containing React components useful when processing Kontent data to the site.\n\n## Install\n\n```sh\nnpm install @kentico/gatsby-kontent-components@vnext\n```\n\n## Rich text element component\n\nRich text elements from Kentico Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\n\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\n\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\n\n```jsx\nimport { RichTextElement } from \"@kentico/gatsby-kontent-components\"\n\n// ... \n\n {\n return (\n \n )\n }}\n resolveLink={(link, domNode) => {\n const parentItemType = contextData.type // It is possible to use external data for resolution\n return (\n \n {domNode.children[0].data}\n \n )\n }}\n resolveLinkedItem={linkedItem => {\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\n }}\n />\n```\n\n### Resolution scope\n\nIf you don't need to resolve anything, you could just provide `value` property.\n\n#### Images\n\nIf you want to resolve images pass `images` and `resolveImage` properties.\n\n* `images` **have to contain at least `image_id` property**\n* `resolveImage` has one parameter `image` basically containing one record from `images` array\n\n#### Links to content items\n\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\n\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\n\n* `links` **have to contain at least `link_id` property**\n* `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\n\n#### Content components and Linked content items\n\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\n\n* `linkedItems` **have to contain at least `system.codename` property**\n* `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\n","gitHead":"97d22e175f0e4970fa591160ad18454e5866c0b2","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"ondrej.chrastina@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/gatsby-source-kontent.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.13.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"12.13.0","dependencies":{"html-react-parser":"^0.10.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^16.13.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^16.13.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.10","@types/react":"^16.9.25","ts-auto-mock":"^1.5.7","@types/react-dom":"^16.9.5","jest-ts-auto-mock":"^1.0.11","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^16.10.2","react-dom":"^16.10.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_6.0.0-vnext.5_1588761557728_0.7399499814290829","host":"s3://npm-registry-packages"}},"6.0.0-6.0.0-beta.1.0":{"name":"@kentico/gatsby-kontent-components","version":"6.0.0-6.0.0-beta.1.0","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@6.0.0-6.0.0-beta.1.0","maintainers":[{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"michalpaukert","email":"michalp2@kentico.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"7149fd132e563acb5cd781e67623c0b698b51017","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-6.0.0-6.0.0-beta.1.0.tgz","fileCount":5,"integrity":"sha512-u1WDkiEuZHRuqPRmwUIbJxDKGJUcNp4IhrZiIf6uf0dXEXEpIZZKrY+AqGbzYx+sGSXlSnFxVd4LgS/v3WGXng==","signatures":[{"sig":"MEUCIQCkaL4MWmyGAudkSxR0glL5KXNWXREEihiL6U5zv87rtAIgG6QNbWl6aRIAh+1Ccgm9VtBwnxaw2eMq0uAQledk9UM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu6CaCRA9TVsSAnZWagAA094P/AxQePwzWLcS11j6h+tT\nlBL6r3hLSB2IPROhUYTtV1s9yHbMfE+QWrUeHqHYcVRoz8pAVR0J3FxngMek\nDbAvrIDlLalx3Lms6KxweiShss6mnwUyqumd6JuLu3zUGMfDqysg+7BeApej\n+Ya7lNUUHVZlxMTJ+PVu+r/MlE5gm6nqMT+iDEy0Qx79QRrvDnTLLFTDhH6S\nz2L5M7xcA0lCK/Wk7VaaEJSXsNiWgt/l96przc/n7IVxAre8E3yZLply7gnM\n1eNuX+S0zq5Wig2pnMRR9V/287lBD+SYYuIzu+mAEr6eUF3F/7w9f6mixhyJ\nCVXjRs+XKWb6EyKV4maPxb2auSuN7TK7KsY9ik8K3I/GvueXMRMwswBXUqhD\n2FwxbFF5GqJCOe2+GG990J6buuyhQLUCkM1q91iU/M/uZHvlLdJI4EFKE4jP\net+lC37/qhUP164Fidf2Md+2tgLCsLVoHavCB/qymHSf/f0Derlbp9L1A37I\n+iAW6viqaugsQ4XFSfiV6mI7MqtzisVP3BKdE9M2AnpJ91ynYuwsygead3dZ\nKM2smHbZ90P9CaiOad+UqNyUqFCOq5NCyFURaT1EifGpjP4X9KHP0OtQ8lRT\nKp3ayV4RZ33gNOYC/GObrgZQhWb41nA6GL1AnlbKsPUDor+UmjiWOZdk46/D\nJFd3\r\n=12/G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Gatsby Kontent Components\n\n[![Gatsby plugin library](https://img.shields.io/badge/Gatsby%20plugin%20library-%23663399.svg)](https://www.gatsbyjs.org/packages/@kentico/gatsby-kontent-components)\n[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kentico-kontent)\n\n[![npm version](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components.svg)](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components)\n[![npm](https://img.shields.io/npm/dt/%40kentico%2Fgatsby-kontent-components.svg)](https://www.npmjs.com/package/@kentico/gatsby-kontent-components)\n\nThe package containing React components useful when processing Kontent data to the site.\n\n## Install\n\n```sh\nnpm install @kentico/gatsby-kontent-components\n```\n\n## Rich text element component\n\nRich text elements from Kentico Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\n\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\n\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\n\n```jsx\nimport { RichTextElement } from \"@kentico/gatsby-kontent-components\"\n\n// ... \n\n {\n return (\n \n )\n }}\n resolveLink={(link, domNode) => {\n const parentItemType = contextData.type // It is possible to use external data for resolution\n return (\n \n {domNode.children[0].data}\n \n )\n }}\n resolveLinkedItem={linkedItem => {\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\n }}\n />\n```\n\n### Resolution scope\n\nIf you don't need to resolve anything, you could just provide `value` property.\n\n#### Images\n\nIf you want to resolve images pass `images` and `resolveImage` properties.\n\n* `images` **have to contain at least `image_id` property**\n* `resolveImage` has one parameter `image` basically containing one record from `images` array\n\n#### Links to content items\n\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\n\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\n\n* `links` **have to contain at least `link_id` property**\n* `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\n\n#### Content components and Linked content items\n\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\n\n* `linkedItems` **have to contain at least `system.codename` property**\n* `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\n","gitHead":"9240b14e0fc174f2b9b07c6720e6d3e5edcf71ca","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"ondrej.chrastina@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.13.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"12.13.0","dependencies":{"html-react-parser":"^0.10.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^16.13.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^16.13.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.10","@types/react":"^16.9.25","ts-auto-mock":"^1.5.7","@types/react-dom":"^16.9.5","jest-ts-auto-mock":"^1.0.11","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^16.10.2","react-dom":"^16.10.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_6.0.0-6.0.0-beta.1.0_1589354650393_0.8809379006437552","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@kentico/gatsby-kontent-components","version":"6.0.0","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@6.0.0","maintainers":[{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"michalpaukert","email":"michalp2@kentico.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"79adb8db048893570e5a7d546fab3792de856e97","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-6.0.0.tgz","fileCount":5,"integrity":"sha512-V8JY1XjChp4eXprHOL1/5mot4SKRVpPhk2fYjoaBKF4Ommi0JtdMQ4AdNOdkDdEZgrjWS9e08S6PQzPEEv5twQ==","signatures":[{"sig":"MEYCIQC5XREk31uJnlfOGn3p818X59wbXLLpxL2GCsj+tdwO/wIhANUXSOKIcQu3JsYH5KUIB+hvnN5+qP7o1v/v1wF2Haed","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu6ssCRA9TVsSAnZWagAAka0QAIdZqs2RG2ZzmZXAasoh\neSCW5FbXg6bnOQ7xFKFhrJ/avgQ8tEBkWRy6DY4xyuvu0i6bBjG0TMAQs9oV\nRc+WgYtxsQEvK0qre/MKAttfDjZKFrwTPWGo2QgouRhkg+WdSVu6U0ljRLan\nBuWakzadvRnKXrvVU2C8dhsMPay+SOKiEkLTF0rtYSprmdsBCZry4jlib1fV\nntGwbKb6UcBOL1TX/vgE+Hh1Av0QZLqqICZ9ZpXVJKMKxOQfrO84/3cd07Lr\nrUrZoJSnRCQHn7/aTWYB+BYzVUh+sm+FGo+dnGv3321DZ5HE3liMT9T2RK/A\nTT7X7S0P35GEcISkEii/8tN0QViITTik+LzNZJO/V76B3DlAHTfcV0TpYFXv\nhhmHCx27dtiIw93hdyIbOdP/lcX6d+HUGXcx+PEYLN9R0EnCRFekpsGBv8tG\nK6EfTaCchfcgp0mX47d4H0wr6Gyk4bUgyz2uCTg04R5KDatRnW7Fx9ddMNDn\nZjPkgZ4H5H6Uacutwgjp1vPmkS/v8yB9/e3KZbOjlM4BHMxiCfaV+OqML1aX\nwMd39G6uD4av9hCiiwvjf0rFtFD19+/c7tFMwvY93wd1q+eouuB3iHPg+O9d\nyYrd90UhLTqbqlUL7Emo3yOIJzj7e5MNRAtqNaHLTckkBlVshFnaStnecnd1\nAe96\r\n=sFIt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"e26ad686bea7d8b3aeade81927bb214cc4af1387","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"ondrej.chrastina@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.20.2/node@v12.13.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"12.13.0","dependencies":{"html-react-parser":"^0.10.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^24.9.0","react":"^16.13.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^16.13.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.10","@types/react":"^16.9.25","ts-auto-mock":"^1.5.7","@types/react-dom":"^16.9.5","jest-ts-auto-mock":"^1.0.11","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^16.10.2","react-dom":"^16.10.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_6.0.0_1589357356226_0.4811504646565574","host":"s3://npm-registry-packages"}},"6.1.0-beta.0":{"name":"@kentico/gatsby-kontent-components","version":"6.1.0-beta.0","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@6.1.0-beta.0","maintainers":[{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"b206c7272dca3f7ca59065e2c89b7684e441e7eb","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-6.1.0-beta.0.tgz","fileCount":5,"integrity":"sha512-UKDfyM1iUVpkd2/TQ6hp2Z1TyQmjw0i4Psih6jctrtL4+FdDaMFHLNdcbHJil9BJHV0qUbIuIVBVcmkD6UjU7A==","signatures":[{"sig":"MEUCIFWNrnp356RjkgIJvmja2f0twBa/sK7l3rYMFq3JcCM9AiEAvmdWkv2gPp0IijqL94MS9xYJefkDQLknPyYZYR+j/cs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfcv6nCRA9TVsSAnZWagAAbwoP/3ppGgZIpRLjoEBoEYJl\nfmK6qK4Jh+D51I6uPH4gBfWJf6p5M++x0ElKEQLVlIx3KXpEVRNSrM2qj7n2\npLUNY6xSYAN7QsDEVIGZCmh6zoIBWmhpoFw4ivWpOHNxgNesacDKXtiP1XYf\nMs5G5AfSJK2mt0pN8VWlTEoW9AvLYAsGKZojaBjX7Vh/p0QUGMHXeRDgBlvb\nPmRz2/XIjH7wqBV7kwhp7bSlb0rMpU7rfPySzN5WEsY1vSfiD39ORAA6TfqP\nOMTjQbyjzcIkfL1gCYk6e3QFz0z4B/oK5ebnG+6+ZmMpPJ31mTqnL362hJKR\nWoGcKEesewE9Neqa/QQb4IZMgMdXYZntiZpgw8Vd0fwkC0B+++HSsh9TNu1z\nKakCuiAl6x0GxQCqgUaxqcDCCA+yzkdnYLy2IAIf/DCFzP9J4dsTspVzyCes\nrm17ZJSwb5iHonfv0VuD8lZVDu/rW/Hgb6qUuQX+sPvZBMJ42bgFJRBZgtD4\nNfFmhvuUhFJTykJCgSYwdXXQUj92HPJsAn70SJJ/9CikgReFYy0UGw710RT2\nh4eLeNToBIZ0qwWx6ibjgkhJGAQSIZLhLPbuRXDll4cj63RrgSXnWrMfI4kL\nG7lNh4QZBdv69OZIo/UcEvmEKyDjp6e1ZuegK2KERv0dBRECxsY8Tba6RdgH\nMJMR\r\n=9nU8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Gatsby Kontent Components\n\n[![Gatsby plugin library](https://img.shields.io/badge/Gatsby%20plugin%20library-%23663399.svg)](https://www.gatsbyjs.org/packages/@kentico/gatsby-kontent-components)\n[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kentico-kontent)\n\n[![npm version](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components.svg)](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components)\n[![npm](https://img.shields.io/npm/dt/%40kentico%2Fgatsby-kontent-components.svg)](https://www.npmjs.com/package/@kentico/gatsby-kontent-components)\n\nThe package containing React components useful when processing Kontent data to the site.\n\n## Install\n\n```sh\nnpm install @kentico/gatsby-kontent-components\n```\n\n## Rich text element component\n\nRich text elements from Kentico Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\n\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\n\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\n\n```jsx\nimport { RichTextElement } from \"@kentico/gatsby-kontent-components\"\n\n// ... \n\n {\n return (\n \n )\n }}\n resolveLink={(link, domNode) => {\n const parentItemType = contextData.type // It is possible to use external data for resolution\n return (\n \n {domNode.children[0].data}\n \n )\n }}\n resolveLinkedItem={linkedItem => {\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\n }}\n />\n```\n\n### Resolution scope\n\nIf you don't need to resolve anything, you could just provide `value` property.\n\n#### Images\n\nIf you want to resolve images pass `images` and `resolveImage` properties.\n\n* `images` **have to contain at least `image_id` property**\n* `resolveImage` has one parameter `image` basically containing one record from `images` array\n\n#### Links to content items\n\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\n\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\n\n* `links` **have to contain at least `link_id` property**\n* `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\n\n#### Content components and Linked content items\n\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\n\n* `linkedItems` **have to contain at least `system.codename` property**\n* `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\n\n![Analytics](https://kentico-ga-beacon.azurewebsites.net/api/UA-69014260-4/Kentico/kontent-gatsby-packages/packages/gatsby-kontent-components?pixel)\n","gitHead":"9d2cd9cc10115b7fd673737556f1b399db1b948e","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"ondrej.chrastina@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.13.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"12.13.0","dependencies":{"html-react-parser":"^0.10.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^16.13.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^16.13.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.10","@types/react":"^16.9.25","ts-auto-mock":"^1.5.7","@types/react-dom":"^16.9.5","jest-ts-auto-mock":"^1.0.11","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^16.10.2","react-dom":"^16.10.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_6.1.0-beta.0_1601371814877_0.7157799991051967","host":"s3://npm-registry-packages"}},"6.2.0":{"name":"@kentico/gatsby-kontent-components","version":"6.2.0","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@6.2.0","maintainers":[{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"762bbb5b15c3a5b85be1a3ad31d5ae3aa09d88ae","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-6.2.0.tgz","fileCount":7,"integrity":"sha512-cNmFINdamZz0ZoD3BreMcCjUV1WR0StuC9yG9YbEZc34UMKJ71NNEri5ff6THq60xAFag4mkh1sr6RDRQPn8CA==","signatures":[{"sig":"MEUCIQDPPxRrtDK/93+zlrZuRIvd43rVGWXuLvu3tWvXwu3QLwIgG1vGTqrjP72vZPtPl7F1KiGdmL/9PUe7J6mCwgUrVDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhVjeCRA9TVsSAnZWagAAk9cP/RfR6+yJ4hALMKG4/Qt0\nqNUS3zR9y0D2xQ1esqytDvYzfpf21fbheHjklX9LXX8wP5dCyZX5I2nsf+oT\n2UDUbUQvvW2WVC0AO/9Dw9N3aSE57xe56ymK4sX+rSIqRnkkR+5hoQfR/0OR\nfCzF1Ba08jvjVlWYI7f8VPQufj4Tj1ZJ8s0O4Fvs5+98mjA10/TRirMQRUow\ntHfAs6ySZscqv4DB8TKYmRfXFgWFYD08Bu5qJsRLHQec8uOEyqgolumt95uK\npgiumn4TearaU9CDqM4vRSC9xfBhcxB/jJz2lvXKSTo7ItRVlJpBWT6gijud\nJ+dTq28deVUaaEgZPN7rTAIzyrWhZ318PniaW8wBgacWKHaR6Cj9JrvjHnLF\nna8T0oorspvKEYeiiQ0UB2GipYJehb6WdRzigGs7FeIMIV6k6Db5Ic/tLhUD\nyJNy+rA7N3yl1uR8AyL/wPr/ddUsSabfqInLddowDzHImLO5sdgU4gKgA6BH\nTgWz1T86g0Z3e8i4y138bnW7fDN5yAcUbnBTJXUR4IQ8nwMGxTL2+d8p91Bx\nvcwnTOsDHJ9USsvltzANpmVw1Lf3Nq0dmWHexslxourKkawVgYfwfgvtL55S\nJOhXOQxVP8W1ToStiVvzfucIGPWu9TsPJtFPsHb2XDSa7m4WiiiDlSUX/gk+\nbxIb\r\n=2k3Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"8de6f81ff40a76353636d6b0da9c57a640a90e44","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"ondrej.chrastina@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.13.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"12.13.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^24.9.0","react":"^16.13.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^16.13.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.10","@types/react":"^16.9.25","ts-auto-mock":"^1.5.7","@types/react-dom":"^16.9.5","jest-ts-auto-mock":"^1.0.11","react-test-renderer":"^16.13.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^16.10.2","react-dom":"^16.10.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_6.2.0_1602574558399_0.3126885751939772","host":"s3://npm-registry-packages"}},"6.3.2-alpha.1":{"name":"@kentico/gatsby-kontent-components","version":"6.3.2-alpha.1","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@6.3.2-alpha.1","maintainers":[{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"a74a2b9c90b551c0757268a1ed42d373c430821c","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-6.3.2-alpha.1.tgz","fileCount":7,"integrity":"sha512-M2pOq2q02+JUYKC2/2YS8z9KmMm/Vng/2iFZ2I+PI4UTr8rsxLWvwiMPHkGr24vc7JsmdNkoHc16gva85WW8LA==","signatures":[{"sig":"MEYCIQDbIlSoeDXQUAB70Ws93sDl2vyMAi2kcw8OU4gA1rgu/AIhAIEvMrefywJdlN7fRGhyByHIvZ6Er18kO9ZEPME/yAD3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP0qMCRA9TVsSAnZWagAAxWkQAKAKa7T/IJ8ZEZq/3OSa\nUmr3KpJVOilqe5l+F8tB+jCdcKC1xmDH6Kpgu5nsbihiLrzW+aZd2GRF7WEq\nVIaXKXr1qcH/poVdmNvyM8EiWj2ncVrQ3/Sq0quToR1J/rzy9p7ZbZISb9jN\nG9AUsEkWDTjdUEpEDlahalfbxIPd4EL9N7QQhcVU/6RBKRHpOExtMzOuJQle\nhMBcxb0iQTdiLz+JUQzOII3OubiOCWy9YEvYtEE67xKjMq0CCqeeFXXR9UgI\n8P89T61p8WIbTGvAxFbldean+0Gomvf/fzqcw7xfCt6PN1xbGFMQrHMRuO57\nwvf5eoo58dllJPHDwyXbSGlXpjCZNd0nwoZvWktXm0R+O+KVvmHGHcDWn8pU\nHFo8hTKo91cw4DKVZOPQ5eORdV1SqUAh8lN+52XKAbcIVnevqV3mvT/5I+wK\nB6Cl5v9H6H3ElPsfeJpRyIngljuzCennBxiSkjk3MW8PYtLccb/F1rdK2gFQ\ncwzoLQ5MUGtZyi33MnZL2zp4O3QvYOkzL2GFpsVFxDojIZygWNiNa7vNbq7e\n4fTzPKP2vFgq4wtJK1ya0BdeESDPa6OVtM6wUR/ZPn6VebWTWzKXd9P1YHFA\nTJ2U0XiaDsKJAmbUIiaBn80dTOO2MgEXkrZsrPmCPm6h3jGVmiCyvzxKDc3q\nurH9\r\n=Jzxh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Gatsby Kontent Components\n\n[![Gatsby plugin library](https://img.shields.io/badge/Gatsby%20plugin%20library-%23663399.svg)](https://www.gatsbyjs.org/packages/@kentico/gatsby-kontent-components)\n[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kentico-kontent)\n\n[![npm version](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components.svg)](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components)\n[![npm](https://img.shields.io/npm/dt/%40kentico%2Fgatsby-kontent-components.svg)](https://www.npmjs.com/package/@kentico/gatsby-kontent-components)\n\nThe package containing React components useful when processing Kontent data to the site.\n\n## Install\n\n```sh\nnpm install @kentico/gatsby-kontent-components\n```\n\n## Rich text element component\n\nRich text elements from Kentico Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\n\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\n\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\n\n```jsx\nimport { RichTextElement } from \"@kentico/gatsby-kontent-components\"\n\n// ...\n\n {\n return (\n \n )\n }}\n resolveLink={(link, domNode) => {\n const parentItemType = contextData.type // It is possible to use external data for resolution\n return (\n \n {domNode.children[0].data}\n \n )\n }}\n resolveLinkedItem={linkedItem => {\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\n }}\n resolveDomNode={(domNode, domToReact) => {\n if (domNode.name === \"table\") {\n // For options - check https://www.npmjs.com/package/html-react-parser#options\n return (\n
\n {domToReact([domNode])}\n
\n );\n }\n }}\n />\n```\n\n### Resolution scope\n\nIf you don't need to resolve anything, you could just provide `value` property.\n\n#### Images\n\nIf you want to resolve images pass `images` and `resolveImage` properties.\n\n- `images` **have to contain at least `image_id` property**\n- `resolveImage` has one parameter `image` basically containing one record from `images` array\n\n#### Links to content items\n\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\n\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\n\n- `links` **have to contain at least `link_id` property**\n- `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\n\n#### Content components and Linked content items\n\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\n\n- `linkedItems` **have to contain at least `system.codename` property**\n- `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\n\n#### Custom resolution for any other dom node\n\nThe general resolution method `resolveDomNode` is called for every DOM node, except for ones that are resolved specifically (described above). In the example above, all table elements will be wrapped with the `div` element. You could also return just a JSX if you want to replace the `domNode` completely.\n\nIf you want to resolve elements via `resolveDomNode`, you get the following parameters:\n\n- `domNode` - DOM node from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser)\n- `domToReact` - method from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser) to be able to extend the actual `domNode` as on the example\n","gitHead":"812c3b6b50d06e1ac1e7d91b4b13cfbe9c1ea640","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"ondrej.chrastina@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.13.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"12.13.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_6.3.2-alpha.1_1614760587409_0.23598105604719843","host":"s3://npm-registry-packages"}},"6.3.2-alpha.2":{"name":"@kentico/gatsby-kontent-components","version":"6.3.2-alpha.2","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@6.3.2-alpha.2","maintainers":[{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"0b7d25b3f273fd7b830e70a2520f749f8dc47169","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-6.3.2-alpha.2.tgz","fileCount":9,"integrity":"sha512-7/4WpnqD2ZRsGOOBcS+Yl5dGL4hc+99iL7u5X0H8ttbm62QAGmfp4HlNYzHxXI5DMt3wtQeAEeT+DI5pfe9V3Q==","signatures":[{"sig":"MEYCIQCFx8wBfngDb2/Zmgl66r0N7MREU0AZX277bQtQL4AWPgIhAJ+qsgOiWHFoaPQTPoF9CCnge/UqKbpZ0U95yRj9wdRH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":34683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQO1pCRA9TVsSAnZWagAAnuwP/R/qlOYHIds+HO59AiQD\nfZmSFY6ukw9AhmbYs+EQki2N18f30aHW/ptKCDF1qiTD+Zrdo1TdGMeZYmbN\niyBFZnJNCJYcT/qq6OocpIih7NgN5YGe+4eaC2ZinMjvJwKVWcGE45PjflYo\n7cXgp+Fs9Y4IeUI6WXukz2YTcKoQ3Hjoq0waKfbRV65OdXhc6JTjTd6lklFy\n9H64xg7suN6LkGqOQoNRvWGDcWDUwywa19RsTXuGcFAaw30HBhQvbMTTGB8R\nHKWKz9lIV7HKPhXya69AyusMye/M8Kl1ZkfJCjGbG1e7KRSQwt7ePJwEeYAW\nT7D3aS8a7b+JT6FaThpB4/xay2KswfYsO1d+iZsbxN7gun2FYXPwycmK93bW\nsIPvMSyC58drIyHjKKW5TDAd56SrwhC68vtQ9K6brSmQ+ZH/j4PiEhx1EC5/\newqqgFdfs2uPYtywtuuImK0evSOeqrOhSsLp5vj4Nq/X1qGFMmBG6wDvNhA1\nppmWP9ls8qLJBqpZZX+9+VRQtpUHKJcW50bQNrQeYizqvEzsIGAbnsxpHU73\njIRKKX/SfF0fTAHzvkZwJ1wJFNdiisGNM1OZuUHoK9CGmSP5CY0m9jYE74Wg\nEEf1UAx2QMWAqa9dw36cLJdYQwxxWakChIfFYz9X5VAzVxQlHKzt+Pdc+xWz\npCZK\r\n=NBrD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Gatsby Kontent Components\n\n[![Gatsby plugin library](https://img.shields.io/badge/Gatsby%20plugin%20library-%23663399.svg)](https://www.gatsbyjs.org/packages/@kentico/gatsby-kontent-components)\n[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kentico-kontent)\n\n[![npm version](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components.svg)](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components)\n[![npm](https://img.shields.io/npm/dt/%40kentico%2Fgatsby-kontent-components.svg)](https://www.npmjs.com/package/@kentico/gatsby-kontent-components)\n\nThe package containing React components useful when processing Kontent data to the site.\n\n## Install\n\n```sh\nnpm install @kentico/gatsby-kontent-components gatsby-plugin-image\n```\n\n## Image element component\n\nImages from Kentico Kontent can be displayed using the `ImageElement` component. This wraps the `GatsbyImage` component from [gatsby-plugin-image](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/), so ensure that you also install that plugin. This component will give the best experience for your users, as it includes responsive srcset, blur-up, lazy loading and many other performance optimizations. [Automatic format optimization](https://docs.kontent.ai/reference/image-transformation#a-automatic-format-selection) is always enabled. In many cases it can improve Lighthouse scores by 10-20 points.\n\nThe component takes all [the `GatsbyImage` props](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#gatsbyimage), as well as the following properties. All are optional except `image`:\n\n- `image`: the `image` object. This should include `src`, `width` and `height`.\n- `layout`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#layout)\n- `width`/`height`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#widthheight)\n- `aspectRatio`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#aspectratio)\n- `backgroundColor`: displayed as a placeholder while the image loads\n- `options`: an object containing options passed to [the Kontent Image Transformation API](https://docs.kontent.ai/reference/image-transformation). Supported options: `fit`, `quality`, `lossless`.\n\n## Rich text element component\n\nRich text elements from Kentico Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\n\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\n\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\n\n```jsx\nimport { RichTextElement, ImageElement } from \"@kentico/gatsby-kontent-components\"\n\n// ...\n\n {\n return (\n \n )\n }}\n resolveLink={(link, domNode) =>\n const parentItemType = contextData.type // It is possible to use external data for resolution\n return (\n \n {domNode.children[0].data}\n \n )\n }}\n resolveLinkedItem={linkedItem => {\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\n }}\n resolveDomNode={(domNode, domToReact) => {\n if (domNode.name === \"table\") {\n // For options - check https://www.npmjs.com/package/html-react-parser#options\n return (\n
\n {domToReact([domNode])}\n
\n );\n }\n }}\n />\n```\n\n### Resolution scope\n\nIf you don't need to resolve anything, you could just provide `value` property.\n\n#### Images\n\nIf you want to resolve images pass `images` and `resolveImage` properties.\n\n- `images` **have to contain at least `image_id` property**\n- `resolveImage` has one parameter `image` basically containing one record from `images` array\n\n#### Links to content items\n\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\n\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\n\n- `links` **have to contain at least `link_id` property**\n- `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\n\n#### Content components and Linked content items\n\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\n\n- `linkedItems` **have to contain at least `system.codename` property**\n- `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\n\n#### Custom resolution for any other dom node\n\nThe general resolution method `resolveDomNode` is called for every DOM node, except for ones that are resolved specifically (described above). In the example above, all table elements will be wrapped with the `div` element. You could also return just a JSX if you want to replace the `domNode` completely.\n\nIf you want to resolve elements via `resolveDomNode`, you get the following parameters:\n\n- `domNode` - DOM node from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser)\n- `domToReact` - method from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser) to be able to extend the actual `domNode` as on the example\n","gitHead":"ed40edd56e276d17261eed39fb53a7573e1ff0d4","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"ondrej.chrastina@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.13.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"12.13.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","gatsby-plugin-image":"^1.0.0-next.3","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","gatsby-plugin-image":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_6.3.2-alpha.2_1614867817164_0.9303721133566496","host":"s3://npm-registry-packages"}},"6.3.3":{"name":"@kentico/gatsby-kontent-components","version":"6.3.3","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@6.3.3","maintainers":[{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"73d83c4468c3e3f78fb43b367ade51b2b59e166e","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-6.3.3.tgz","fileCount":9,"integrity":"sha512-ZHTSaMSpX4Y19RsWaMrbdFiW5YMcLR8OokTTZl1FzjiWsYN5r5e2Qe6Q0YT2+TGketpKP8/Z2AcfZDTuHXd2XQ==","signatures":[{"sig":"MEUCIQCZhFJYbx96OrBWFSu/ORpx7bAkUbNs6uyTdGiIXII6XQIgUz6+3bVrNQ7XdSZeJ5HT7U0a/gPhCMu2GemUf5HhHwI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU3BwCRA9TVsSAnZWagAAFdYP/2E0pqEVpReQnNCHfseW\nFR0HBFhezJ/gMY3m6dn2+a9BSnj/pA0q4eNGmuNBmmWpkv0QACrbcCrZo4Lz\n0DWMK4W0B4HMC2HDESN3lSChk1PLoR9gpu+hhzyhrSnZoL1zFaTTLPPAPI6u\n5lTBzfGmhH7qraZoEUhrMg34TncVo7kUwt9eBEz+U0lkhD7uOwKEuCuvPmrJ\n3gUpHwYzRI6wCJ9jfp24fE+fDYRt0c/ydV4TAkHsOKTZyQu+KhDzAWG2mX7v\ngvufhOU0tenDohYO0dDz3wXqxfrSU/IScxke9KBv2yGJ0VKTjLC1yOqk6MZf\npP9PB5CxkVYZW6EJBz+t27B8Yi4ngBRE9qFWDGueGzgzfAiqwDs43cnOYnXv\nLFOapCYFlkNhOdBzBot6w13qTjSqB17/aA6YB27pJggcpU8AxSuhb1+Lf1+G\ncG8/73yGdxsV6qR1UjP1PP44mfNvlCknKBwuckTqTypTyGJNlk60vvJfoOKt\nZNlB2uZ/8lHkK/SNzhKJDZy8n+bA3TvxWMs+7gbtQZr7rMqQj6nQqmnZkmwN\ncxh9ifQ/PM48PP9S0H3rkhh28zXAs57j+gsVpA6kdR9AJKaXkWuLhYhkuIpF\nzTqHScqlY94NDILgdXF0d2l0uN68pbiUh7V1bS9J6E2DPkODM8ufxbuaYPmN\ngqnw\r\n=vt0e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"76ce0fb39fe5224ab481cdb0bd4c757d88eb28bb","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"makma","email":"martinm@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.15.1+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"14.15.1","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^24.9.0","react":"^16.13.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^16.13.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.10","@types/react":"^16.9.25","ts-auto-mock":"^1.5.7","@types/react-dom":"^16.9.5","jest-ts-auto-mock":"^1.0.11","react-test-renderer":"^16.13.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^16.10.2","react-dom":"^16.10.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_6.3.3_1616081007978_0.5004565746042178","host":"s3://npm-registry-packages"}},"7.0.0-beta.0":{"name":"@kentico/gatsby-kontent-components","version":"7.0.0-beta.0","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@7.0.0-beta.0","maintainers":[{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"e2aeff9dd688be1bf23b24299f9076740d68ac3a","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-7.0.0-beta.0.tgz","fileCount":11,"integrity":"sha512-n7y2xpvbYiNyVMTLTOA3+jBjZqGM/rOHrJP66EFQoZ1G9VWWG46EKA6jzF6V0iHs4H7jrfOs1n367YDh/LplZg==","signatures":[{"sig":"MEYCIQCAhl/m83b72JmF/x7066C87IvizDWtP5qBuPMMKwLQiAIhAMfyXIBx05wDc108XKXGxDV0wCg0c0lj5gM54qxv5Tp9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36859,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU3eGCRA9TVsSAnZWagAAK/YP/0sQQvNRcmtDlyzrg7UG\nZuQiz8gFHp26lzZRkVM8PJwKG5Vt82+H9zmlxGuqiXL44A1f28NP5ZNeAmFT\nYU3gik+RHBdayw1FJDkFf7MMzNc1Vuq1DBvynLObzWQTQEjbIZf8Hoxe8Gro\nFDpFJec5Tf761aCOp5arB6qWptflxdhA6WVS7scthJ6aT63RVLKLBGBWxFAs\nafiWUUdvdZVGLvJ+Y6/kfjxKNT6zeYmWyZMVpsjchiIG4248prM3sky3D7ZA\nrzkpmBSrcSoJ9WX9sLvjNpkQ1H9u4VlKTkRbf0twLFh/r4XNAl0WKanOFk10\nxU69sn/HQ90MlPDyaMPFMcGUN0cNwFetnQdEAOtWpZvKDLrLx89WR6lQLLhV\nmSw4EsNUj4f40IbxH4zH/jcF46EdjJZJ2goZKStUSEs4Hdg9KXNxJu6p9v/S\nm1KD3JvslZa0vpwYH1DqpHffZud1A+c+mXdO3NA+0WhX1AHQaeaDm+eNMpSo\nfA6Axo41Bn5cEEbww3EmlPRGgMpoOgrLj9R0+FwCfEP3aFX3kAb/tApY/Z8E\nm5bjubkQVENJenAhv9KqyRZSTdmajrcS+w70e4bR5mszCzMsfcXh1fP3auhy\nQbVJTYlPOjbc/npL4ufo0RD2kMCgYTREh3UciSEyAxxh1V4nuJrcykA9IbxE\nRP/l\r\n=7gvQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"0ee8d7d9885374df13ccd82d79634ae91dec9b3b","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"makma","email":"martinm@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.15.1+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"14.15.1","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","gatsby-plugin-image":"^1.0.0-next.3","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","gatsby-plugin-image":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_7.0.0-beta.0_1616082821608_0.6338371489505439","host":"s3://npm-registry-packages"}},"6.3.5":{"name":"@kentico/gatsby-kontent-components","version":"6.3.5","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@6.3.5","maintainers":[{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"7d453c6182eebd4db3bd0fd5c09a9d2535374aa4","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-6.3.5.tgz","fileCount":9,"integrity":"sha512-yE9BUa60EHluLxhsDz2tOzmvoOdiQtB5GzQrf1vR1JQl6h6kj+HwnCNrzXYmiC5NuL6FVYq82F3pdu90YUauFA==","signatures":[{"sig":"MEQCIDaTu+HJS6AKhVmCKVgj4aopuENLi28kEKnJnOZSadGkAiATshA9cgbQL0BzF9pZLqcjJzO6ynGwBuxFY+WBd3d/sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVJDMCRA9TVsSAnZWagAA6bkP/iwO0HzdMpuArGMZV32B\nCHk/T6LFunCsoqQT8LvrqPziAGlTR+atZZ1w8tumHGvILDeUFKvR78xxx+if\ne4MSCSgEfjKhv7hkBD0psgwphWeN6PkgdfAWWCA93hzMhkT+BbtWfJ91DOMQ\nE6svq2hSmlI8j9CtkXb/dPmJVYhXaOYKSICipY+gYGFiRwqW/zKfg8l13uTm\nWp1iR/assfxyeQopiEy2vgNAGw7fbvIIZSOYMI7Wv3oIo0da3QJ5c5Z7z9y+\nAuFQ9r9s5u2BfsBHPPseFpUs8BvEpemRRpFsWQ1oKpNGIYK6+x3MitrBY/hP\nTKSQ3wBUj4dSLPQAqi5feISQLSvYn8tVROBEHzWAK/7dfOOzV4wI6blWWLwh\nBkhc939x1LcAH3Ev7tt2swNV3WqBqLu6RjyWQl+vqZFQ0UZkWDNxL3bku4LF\nUQvVqiECBufdUhBhJtgd3NdW7z4tJHsSNKlu/vqp9PtflXIlnzS+qNUAY4Oa\nO+97HYH0bQnO9eyNL2QT5yS6IGCbKry2dEcJjmXFO9CrLEQiJNU5xRzjLa81\nBY0DATAdb254yCRr5tQdiWvVhvs+rqDtVbwtBf0wa0rIhiW/k5BTwXJHqWn4\n69q8YpkCzsKySVa3yi6Z00aha4ZJlKFRt3xZGGxM24O5pRMMoaVvjrrKHDEg\n4bZO\r\n=BnWd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"c01f7ae2576a7cf22dc6492736d5fba1319e9483","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"ondrej.chrastina@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.13.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"12.13.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^24.9.0","react":"^16.13.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^16.13.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.10","@types/react":"^16.9.25","ts-auto-mock":"^1.5.7","@types/react-dom":"^16.9.5","jest-ts-auto-mock":"^1.0.11","react-test-renderer":"^16.13.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^16.10.2","react-dom":"^16.10.2"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_6.3.5_1616154827589_0.9704087271363853","host":"s3://npm-registry-packages"}},"7.0.0-beta.1":{"name":"@kentico/gatsby-kontent-components","version":"7.0.0-beta.1","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@7.0.0-beta.1","maintainers":[{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"7bc196a6880a7434edf1da6cfd8648e1af07b2a4","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-7.0.0-beta.1.tgz","fileCount":11,"integrity":"sha512-WgLaN8Dm0Bt0zUSLnLU46g4oUVo+sYkNd+j5/uNgQ9k+C+m4Iy7Py+sbY9JLl77Rr5pLWNBTltPNFb8reSfVVQ==","signatures":[{"sig":"MEUCIBeqSzZi6mnXCOQxKHtacpgrN7x4CNp7vFkDi0fMrDSRAiEAipFbUlakNDIPVvtxXpXFETAcgKbagBUvy4V9gQzeONM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiBS0CRA9TVsSAnZWagAAHMcQAJhOuva5BkKgcT7LfNv9\nnPq/JweB2zn+LnUfvrjwzNa5aHmwv8HaSc1wDNZckCmWcHSxbHxB/49NzZGz\n5VTi6rqmowuIkWcJBEjln6l454twK1LufuZ6c7VyOJ/evddm72e/J7rJ1I0W\nJGyEcLo8YSBJuxN4PwrykIUIWwDoUrVBVOeaUsEV1x4md894JJQUN2zF5I00\nU0ooRvEbl1AW0Afpm/VB2dJJCQwI5lZUx3+oc5UBIXT0dVFqY8lcXAb7wPgo\nkp9PaxMSoT0kJ7BTxGMaA5atC3p2MKZ+5e465dfrkaQeJu3F4LlNuKFsGBs0\nYcveHA58tQqrxah5OLXmjZr9YMdGPV2oeFhjEJ5a1x/WUQdW+u8XWHPFNd0r\nMOlhiyDl5teqwq4+TGc0kBXYYewfr5pvQdLN130Y2FVBPcWs/o752+jbdC3F\nig9GiFqlPIiTJKbvHzXt1np6umEOfHWJasumoeRWjGflFyZo9KL915kcd/N7\n5RL2B0cOGlwJ1mU32dw6KQyG3OFaTrexPTFwl/3sCOHv9xGvBHpAGqZcr+zh\nvnhtl6zk0li9c/j/sB9xPXUkSFLYgdpkXNKBlKDtZqP8O8orJkxG+V6cznhz\nyvZiePdVucpjpQztV991V1lEvvdz5QNFuEepM/nDwGwwM39bQZ5+vbQe6Wlx\n1sP0\r\n=BYBz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Gatsby Kontent Components\n\n[![Gatsby plugin library](https://img.shields.io/badge/Gatsby%20plugin%20library-%23663399.svg)](https://www.gatsbyjs.org/packages/@kentico/gatsby-kontent-components)\n[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kentico-kontent)\n\n[![npm version](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components.svg)](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components)\n[![npm](https://img.shields.io/npm/dt/%40kentico%2Fgatsby-kontent-components.svg)](https://www.npmjs.com/package/@kentico/gatsby-kontent-components)\n\nThe package containing React components useful when processing Kontent data to the site.\n\n> To see the progress of the Gatsby v3 supported packages - [check out this pull request](https://github.com/Kentico/kontent-gatsby-packages/pull/174).\n\n## Install\n\n```sh\nnpm install @kentico/gatsby-kontent-components gatsby-plugin-image\n```\n\nAlso, add `gatsby-plugin-image` to `plugins` array in `gatsby-config.js`.\n\n## Image element component\n\nImages from Kentico Kontent can be displayed using the `ImageElement` component. This wraps the `GatsbyImage` component from [gatsby-plugin-image](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/), so ensure that you also install that plugin. This component will give the best experience for your users, as it includes responsive srcset, blur-up, lazy loading and many other performance optimizations. [Automatic format optimization](https://docs.kontent.ai/reference/image-transformation#a-automatic-format-selection) is always enabled. In many cases it can improve Lighthouse scores by 10-20 points.\n\nThe component takes all [the `GatsbyImage` props](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#gatsbyimage), as well as the following properties. All are optional except `image`:\n\n- `image`: the `image` object. This should include `url`, `width` and `height`.\n- `layout`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#layout)\n- `width`/`height`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#widthheight)\n- `aspectRatio`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#aspectratio)\n- `backgroundColor`: displayed as a placeholder while the image loads\n- `options`: an object containing options passed to [the Kontent Image Transformation API](https://docs.kontent.ai/reference/image-transformation). Supported options: `fit`, `quality`, `lossless`.\n\nProperties of the image object (e.g. `width` and `height`) are reflected in Kontent's image API query.\nProps of the `ImageElement` component (e.g. `width` and `height`) are reflected in the rendered DOM.\nIf the optional props of `ImageElement` are omitted, the properties of the image object are applied.\n\n> You can find a showcase in the [author.js](../../site/src/pages/author.js) on the development site.\n\n```jsx\nimport React from 'react'\nimport { ImageElement } from \"@kentico/gatsby-kontent-components\"\nimport { graphql } from \"gatsby\";\n\nexport default Page = ({ data }) => {\n const avatar = data.author.elements.avatar_image.value[0];\n\n return (\n \n );\n}\nexport const query = graphql`\n {\n author: kontentItemAuthor {\n elements {\n avatar_image {\n value {\n url\n description\n }\n }\n }\n }\n }\n`\n```\n\n## Rich text element component\n\nRich text elements from Kentico Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\n\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\n\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\n\n```jsx\nimport { RichTextElement, ImageElement } from \"@kentico/gatsby-kontent-components\"\n\n// ...\n\n {\n return (\n \n )\n }}\n resolveLink={(link, domNode) => {\n const parentItemType = contextData.type // It is possible to use external data for resolution\n return (\n \n {domNode.children[0].data}\n \n )\n }}\n resolveLinkedItem={linkedItem => {\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\n }}\n resolveDomNode={(domNode, domToReact) => {\n if (domNode.name === \"table\") {\n // For options - check https://www.npmjs.com/package/html-react-parser#options\n return (\n
\n {domToReact([domNode])}\n
\n );\n }\n }}\n />\n```\n\n### Resolution scope\n\nIf you don't need to resolve anything, you could just provide `value` property.\n\n#### Images\n\nIf you want to resolve images pass `images` and `resolveImage` properties.\n\n- `images` **have to contain at least `image_id` property**\n- `resolveImage` has one parameter `image` usually containing one record from `images` array\n- when resolving images in Rich text element using [Image element component]((#image-element-component)), `image` object must follow data contract defined in [Image element component](#image-element-component) section. Moreover, for correct resolution, the additional `image_id` identifier of the image is mandatory, as well.\n\n#### Links to content items\n\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\n\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\n\n- `links` **have to contain at least `link_id` property**\n- `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\n\n#### Content components and Linked content items\n\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\n\n- `linkedItems` **have to contain at least `system.codename` property**\n- `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\n\n#### Custom resolution for any other dom node\n\nThe general resolution method `resolveDomNode` is called for every DOM node, except for ones that are resolved specifically (described above). In the example above, all table elements will be wrapped with the `div` element. You could also return just a JSX if you want to replace the `domNode` completely.\n\nIf you want to resolve elements via `resolveDomNode`, you get the following parameters:\n\n- `domNode` - DOM node from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser)\n- `domToReact` - method from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser) to be able to extend the actual `domNode` as on the example\n","gitHead":"4ae6e5af58e40ac3cfef4906a3ef15ad4c01a31b","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"ondrej.chrastina@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.13.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"12.13.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","gatsby-plugin-image":"^1.0.0-next.3","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","gatsby-plugin-image":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_7.0.0-beta.1_1619530931488_0.7344242539164647","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@kentico/gatsby-kontent-components","version":"7.0.0","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@7.0.0","maintainers":[{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"simply007","email":"ondrej.chrastina@kentico.com"},{"name":"rocky.intel","email":"rocky.intel@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"makma","email":"martinm@kentico.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"215e7039792893643385a6519343c501bd2480af","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-7.0.0.tgz","fileCount":11,"integrity":"sha512-mQWEPqlj09c9jYM55aSNjT/JxbnjXlsPFXkgMQty7mX9kiMQUNeD6bA3R4LkuMSVdcQ4B3XkwxMfNUT2i3FYtg==","signatures":[{"sig":"MEUCIQDFicrUgmypRgnOilMBXqRsbejEVYHTdlCQlpwRJ76eJAIgFiCQQ/M0cAhnjoCMYsOljeHfNnaSUDxOng/kntnHhm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkogKCRA9TVsSAnZWagAAw/4P/j/cVgFRJxZTk/SjuW3V\nH+ubzFg+AGUqyWfefb84TxhoQYDVqmRRqjjw66zelANP/elMxX7ghSraLpzw\nSoEwW5n8JAF7O9a9dsG8FkUTuAABJz1bAe6emLaL4vBc2PlWGxFVmGZnPVG4\neY4zdPqURkJ65TSydlQd2SJbmBrgMKla9ExsKhJ7GQaPFetYuViuT3LRTyhh\nHx70powThDd5VFXlFXsK3ntWjgZaZykZNDYJUODZq//mjSqq0RLbpmN//A8o\nHqRws+DHY+Ti5FPr1CaVE2Jec1Pma/rZ2AWkvTwfS5LswLXPvovEfi/wEX20\nIqFEyazfyBh8Ty2El3pHDkV7HTt6OQnSo6ZWMfntOjCPQXmP5IBl0FUJa07G\nSiFSlpb+lY0hOpsad9K869mVACKxrDyvbjczP4B9ABNy0Ve/ayEV7w/nHRTS\nGNo8yHhIt2H6/7QZkDAHQAfc3DMIpi85RnTCBjdXk2KEKIaMA3gJM7ST/bsy\nCj6K+16aSHWxgwrDo3OJ9l9LOn8ej0Vylsa9X6MSyzAYsWOxXoALYTMLBHFC\nuncPUHOJ7q1203EknxIGifl7DIenW2b2ZGHFnu5kv9UNzDh8wbjTTA/XEIW3\nmDfORZRwY59YWWPG++YrYjA+5A6Tk1kwxCnLy2VZT8q4omxnv3TD38JqOPiK\n+E6V\r\n=T+PJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"0bbb75419a030c097fff2808aef3e1013154b0c7","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"ondrej.chrastina@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v12.13.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"12.13.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","gatsby-plugin-image":"^1.0.0-next.3","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","gatsby-plugin-image":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_7.0.0_1620215818038_0.9101591496506234","host":"s3://npm-registry-packages"}},"7.1.0-alpha.0":{"name":"@kentico/gatsby-kontent-components","version":"7.1.0-alpha.0","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@7.1.0-alpha.0","maintainers":[{"name":"xperience-npmjs-publisher","email":"NPMJS-pkg-publish@kenticosoftware.onmicrosoft.com"},{"name":"martins1","email":"martins@kentico.com"},{"name":"hom3r","email":"beran3@gmail.com"},{"name":"honzabarton","email":"janb@kentico.com"},{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"simply007","email":"chrastina.ondra@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"712f386f59964c0f476d2d1604def755b1c31a75","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-7.1.0-alpha.0.tgz","fileCount":11,"integrity":"sha512-OoEzvj+/81Pi20zJ/9MmJK3zFK8O29Q2JQWeMJNt3YZCu5g1HTGP2oTwABABFgSZwIq8HR0SIk92uATFKwScuw==","signatures":[{"sig":"MEYCIQD/hWZG8ndw+tDg2h6GAXOpvZgLE7x7R8ZELS5pihvimQIhANct81Gg7crAFwgHwlrPUI5hz0Q7wNyDJzXclex5Lf+f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7aiUCRA9TVsSAnZWagAALxQP/3Xvv8hVEDTnBDFpfwNS\noCgovxFWFnolK6P463neuIWG0Si/d7dk69eECprMQMbY6JGWDKWocxHldost\np3V5oI4eKII6czsxSeIsXVJGsSNwrRt6X+W9tTRuLcDUUdhW8x+PYSNZvQ1m\nGol3L0UmpP8ZZYBjzBbmlJMnC08jMZteU5h9o/Zeitxe6MQLKSu+0P+owXKu\nLZk9VuxNXoDiYYwO2Vbw87pcB1q48X3dH9ZzZ4gzht5eONWUD+8WE9bkcEn3\nGGdoXrTDoj6+zo26ah+Ai3miNCzJYt0vOjx+59ZyZ+taeWZMiVAS2lZZ/xX8\nnCL2ArAhkcUyClplLRWSMCpOMfEJrd6uGQ41ycDN+Nv9rjOB2YD02/STS4WO\nKmeLjcV6I4NE2XfbbDV+XN5+zbeSD11U5qUGcRaLk9ITXbo68zHS4MswEeyV\ndkdxZrH0gIMHvgn7XuTbDiAfz8Z7NpAJbRx68QhgmkZGQkoyMUVb/T1wT3fb\niELfkqj5xL1d4lm5hOAzRFVDkNEwJaLruS0VJfyH+qmd434Q72XieiRU7B1j\nEIBtVTZjxoa4VZd1mWzfdULoH7j/1bRVxEtmvGdQNxmqIX9h/96a6vRTt52Q\nD3xAO51gP8qjXkelEyT+EL280I21HyUgv9WrrqEPv6oBNCTIxiMQkvRVqask\nJilH\r\n=lWxs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Gatsby Kontent Components\r\n\r\n[![Gatsby plugin library](https://img.shields.io/badge/Gatsby%20plugin%20library-%23663399.svg)](https://www.gatsbyjs.org/packages/@kentico/gatsby-kontent-components)\r\n[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kentico-kontent)\r\n\r\n[![npm version](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components.svg)](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components)\r\n[![npm](https://img.shields.io/npm/dt/%40kentico%2Fgatsby-kontent-components.svg)](https://www.npmjs.com/package/@kentico/gatsby-kontent-components)\r\n\r\nThe package containing React components useful when processing Kontent data to the site.\r\n\r\n> To see the progress of the Gatsby v3 supported packages - [check out this pull request](https://github.com/Kentico/kontent-gatsby-packages/pull/174).\r\n\r\n## Install\r\n\r\n```sh\r\nnpm install @kentico/gatsby-kontent-components gatsby-plugin-image\r\n```\r\n\r\nAlso, add `gatsby-plugin-image` to `plugins` array in `gatsby-config.js`.\r\n\r\n## Image element component\r\n\r\nImages from Kentico Kontent can be displayed using the `ImageElement` component. This wraps the `GatsbyImage` component from [gatsby-plugin-image](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/), so ensure that you also install that plugin. This component will give the best experience for your users, as it includes responsive srcset, blur-up, lazy loading and many other performance optimizations. [Automatic format optimization](https://docs.kontent.ai/reference/image-transformation#a-automatic-format-selection) is always enabled. In many cases it can improve Lighthouse scores by 10-20 points.\r\n\r\nThe component takes all [the `GatsbyImage` props](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#gatsbyimage), as well as the following properties. All are optional except `image`:\r\n\r\n- `image`: the `image` object. This should include `url`, `width` and `height`.\r\n- `layout`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#layout)\r\n- `width`/`height`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#widthheight)\r\n- `aspectRatio`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#aspectratio)\r\n- `backgroundColor`: displayed as a placeholder while the image loads\r\n- `options: ImageOptions`: an object containing options passed to [the Kontent Image Transformation API](https://docs.kontent.ai/reference/image-transformation). Supported options: `fit`, `quality`, `lossless`.\r\n\r\n ```ts\r\n interface ImageOptions {\r\n fit?: 'crop' | 'clip' | 'scale';\r\n quality?: number;\r\n lossless?: boolean;\r\n }\r\n ```\r\n\r\nProperties of the image object (e.g. `width` and `height`) are reflected in Kontent's image API query.\r\nProps of the `ImageElement` component (e.g. `width` and `height`) are reflected in the rendered DOM.\r\nIf the optional props of `ImageElement` are omitted, the properties of the image object are applied.\r\n\r\n> You can find a showcase in the [author.js](../../site/src/pages/author.js) on the development site.\r\n\r\n```jsx\r\nimport React from 'react'\r\nimport { ImageElement } from \"@kentico/gatsby-kontent-components\"\r\nimport { graphql } from \"gatsby\";\r\n\r\nexport default Page = ({ data }) => {\r\n const avatar = data.author.elements.avatar_image.value[0];\r\n\r\n return (\r\n \r\n );\r\n}\r\nexport const query = graphql`\r\n {\r\n author: kontentItemAuthor {\r\n elements {\r\n avatar_image {\r\n value {\r\n url\r\n description\r\n }\r\n }\r\n }\r\n }\r\n }\r\n`\r\n```\r\n\r\n## Rich text element component\r\n\r\nRich text elements from Kentico Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\r\n\r\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\r\n\r\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\r\n\r\n```jsx\r\nimport { RichTextElement, ImageElement } from \"@kentico/gatsby-kontent-components\"\r\n\r\n// ...\r\n\r\n {\r\n return (\r\n \r\n )\r\n }}\r\n resolveLink={(link, domNode) => {\r\n const parentItemType = contextData.type // It is possible to use external data for resolution\r\n return (\r\n \r\n {domNode.children[0].data}\r\n \r\n )\r\n }}\r\n resolveLinkedItem={linkedItem => {\r\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\r\n }}\r\n resolveDomNode={(domNode, domToReact) => {\r\n if (domNode.name === \"table\") {\r\n // For options - check https://www.npmjs.com/package/html-react-parser#options\r\n return (\r\n
\r\n {domToReact([domNode])}\r\n
\r\n );\r\n }\r\n }}\r\n />\r\n```\r\n\r\n### Resolution scope\r\n\r\nIf you don't need to resolve anything, you could just provide `value` property.\r\n\r\n#### Images\r\n\r\nIf you want to resolve images pass `images` and `resolveImage` properties.\r\n\r\n- `images` **have to contain at least `image_id` property**\r\n- `resolveImage` has one parameter `image` usually containing one record from `images` array\r\n- when resolving images in Rich text element using [Image element component]((#image-element-component)), `image` object must follow data contract defined in [Image element component](#image-element-component) section. Moreover, for correct resolution, the additional `image_id` identifier of the image is mandatory, as well.\r\n\r\n#### Links to content items\r\n\r\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\r\n\r\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\r\n\r\n- `links` **have to contain at least `link_id` property**\r\n- `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\r\n\r\n#### Content components and Linked content items\r\n\r\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\r\n\r\n- `linkedItems` **have to contain at least `system.codename` property**\r\n- `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\r\n\r\n#### Custom resolution for any other dom node\r\n\r\nThe general resolution method `resolveDomNode` is called for every DOM node, except for ones that are resolved specifically (described above). In the example above, all table elements will be wrapped with the `div` element. You could also return just a JSX if you want to replace the `domNode` completely.\r\n\r\nIf you want to resolve elements via `resolveDomNode`, you get the following parameters:\r\n\r\n- `domNode` - DOM node from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser)\r\n- `domToReact` - method from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser) to be able to extend the actual `domNode` as on the example\r\n","gitHead":"bdd9464966fbf479d33d79510e1ac128f87cb6c4","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"chrastina.ondra@gmail.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.17.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"14.17.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","gatsby-plugin-image":"^1.0.0-next.3","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","gatsby-plugin-image":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_7.1.0-alpha.0_1626187924250_0.06122985919699353","host":"s3://npm-registry-packages"}},"7.2.0-beta.0":{"name":"@kentico/gatsby-kontent-components","version":"7.2.0-beta.0","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@7.2.0-beta.0","maintainers":[{"name":"simply007","email":"chrastina.ondra@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"},{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"honzabarton","email":"janb@kentico.com"},{"name":"hom3r","email":"beran3@gmail.com"},{"name":"martins1","email":"martins@kentico.com"},{"name":"xperience-npmjs-publisher","email":"NPMJS-pkg-publish@kenticosoftware.onmicrosoft.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"ae81bfe21a72074450f3b2daa42c6b33490c1012","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-7.2.0-beta.0.tgz","fileCount":11,"integrity":"sha512-ZdFjXEyetFtgwFH+hYXk1u9Lzpt9uffnKTo+PA7OeolK0jeUXkQiRjf90zYuRyRxBqR4kVSpwwm/EMX147oxSw==","signatures":[{"sig":"MEYCIQDj13liKW5QiqqnrC84cx2wZnShLdoBuHSl4+nx588zOQIhAJtdnShmEPcfXgQBClhBv8XirwNY3+6HpaWLNsHEHwza","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCVLCCRA9TVsSAnZWagAAqV4P/i/NlswdVsc3jePTEhQM\nkdQTHCiOFDyGYWbSNQ1OhH1mJrtKBWcGmBMzkD9PAoC5vKTejxB/swqeeORz\nk3h2gwCiwWmiIhYbG7wE4P61wAk7+cgnMANhcLbk0MJdKgF4kPYX2q0Afxr5\nTOwGjEJDgvVihEeWIiIpM+N0658YBYrFUCEKApt9dRw+raDLQQsLRYC7eJLs\nreE1tnOcyr53la8hmcXqHsUVulBgg2++7bMFA9xMVf6WI9GCyHEpBVimwLVk\n89RLUUmW9IJ2AvMiWcNYvbHc28GPLiR9KbcK5CtCuMGvFqNLI+t6wxohMIO9\nGbEiL/izgd9lEq4oSMvblThzyxsFgy2mT3eBMl2G9s8IohwJoVdBm4O5NFb/\nHsg6rv2mTG4k2WB6qz7VYWWSTwaKBv92M2Sd6W1/LSOvsrn2cbMo3Qevkrcp\nqGdzR3gYrHc9c8oxYoyxSkEBv1YTLu5r1mRHvNuUXGsksfZ9X05nM9W/aEJv\nbEbSM8K9UsIw5PIKAno7ZsMwLUyNq43VLY8RoNKXsGDKyp1W6QNAtjlsB9eM\nuvyturTXG36YTWau8Mfkn4NqvJBtLyqE8lsb180YIMpTsthTfLpmi+22sqJF\np3Ag3xHPjCIRMbPw77L2alYGuNmuqJ2a0T0ZU9c90bb3IIX51O8VYZWyT6e2\nrfu5\r\n=6obd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Gatsby Kontent Components\n\n[![Gatsby plugin library](https://img.shields.io/badge/Gatsby%20plugin%20library-%23663399.svg)](https://www.gatsbyjs.org/packages/@kentico/gatsby-kontent-components)\n[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kentico-kontent)\n\n[![npm version](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components.svg)](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components)\n[![npm](https://img.shields.io/npm/dt/%40kentico%2Fgatsby-kontent-components.svg)](https://www.npmjs.com/package/@kentico/gatsby-kontent-components)\n\nThe package containing React components useful when processing Kontent data to the site.\n\n> To see the progress of the Gatsby v3 supported packages - [check out this pull request](https://github.com/Kentico/kontent-gatsby-packages/pull/174).\n\n## Install\n\n```sh\nnpm install @kentico/gatsby-kontent-components gatsby-plugin-image\n```\n\nAlso, add `gatsby-plugin-image` to `plugins` array in `gatsby-config.js`.\n\n## Image element component\n\nImages from Kentico Kontent can be displayed using the `ImageElement` component. This wraps the `GatsbyImage` component from [gatsby-plugin-image](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/), so ensure that you also install that plugin. This component will give the best experience for your users, as it includes responsive srcset, blur-up, lazy loading and many other performance optimizations. [Automatic format optimization](https://docs.kontent.ai/reference/image-transformation#a-automatic-format-selection) is always enabled. In many cases it can improve Lighthouse scores by 10-20 points.\n\nThe component takes all [the `GatsbyImage` props](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#gatsbyimage), as well as the following properties. All are optional except `image`:\n\n- `image`: the `image` object. This should include `url`, `width` and `height`.\n- `layout`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#layout)\n- `width`/`height`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#widthheight)\n- `aspectRatio`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#aspectratio)\n- `backgroundColor`: displayed as a placeholder while the image loads\n- `options: ImageOptions`: an object containing options passed to [the Kontent Image Transformation API](https://docs.kontent.ai/reference/image-transformation). Supported options: `fit`, `quality`, `lossless`.\n\n ```ts\n interface ImageOptions {\n fit?: 'crop' | 'clip' | 'scale';\n quality?: number;\n lossless?: boolean;\n }\n ```\n\nProperties of the image object (e.g. `width` and `height`) are reflected in Kontent's image API query.\nProps of the `ImageElement` component (e.g. `width` and `height`) are reflected in the rendered DOM.\nIf the optional props of `ImageElement` are omitted, the properties of the image object are applied.\n\n> You can find a showcase in the [author.js](../../site/src/pages/author.js) on the development site.\n\n```jsx\nimport React from 'react'\nimport { ImageElement } from \"@kentico/gatsby-kontent-components\"\nimport { graphql } from \"gatsby\";\n\nexport default Page = ({ data }) => {\n const avatar = data.author.elements.avatar_image.value[0];\n\n return (\n \n );\n}\nexport const query = graphql`\n {\n author: kontentItemAuthor {\n elements {\n avatar_image {\n value {\n url\n description\n }\n }\n }\n }\n }\n`\n```\n\n## Rich text element component\n\nRich text elements from Kentico Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\n\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\n\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\n\n```jsx\nimport { RichTextElement, ImageElement } from \"@kentico/gatsby-kontent-components\"\n\n// ...\n\n {\n return (\n \n )\n }}\n resolveLink={(link, domNode) => {\n const parentItemType = contextData.type // It is possible to use external data for resolution\n return (\n \n {domNode.children[0].data}\n \n )\n }}\n resolveLinkedItem={linkedItem => {\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\n }}\n resolveDomNode={(domNode, domToReact) => {\n if (domNode.name === \"table\") {\n // For options - check https://www.npmjs.com/package/html-react-parser#options\n return (\n
\n {domToReact([domNode])}\n
\n );\n }\n }}\n />\n```\n\n### Resolution scope\n\nIf you don't need to resolve anything, you could just provide `value` property.\n\n#### Images\n\nIf you want to resolve images pass `images` and `resolveImage` properties.\n\n- `images` **have to contain at least `image_id` property**\n- `resolveImage` has one parameter `image` usually containing one record from `images` array\n- when resolving images in Rich text element using [Image element component]((#image-element-component)), `image` object must follow data contract defined in [Image element component](#image-element-component) section. Moreover, for correct resolution, the additional `image_id` identifier of the image is mandatory, as well.\n\n#### Links to content items\n\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\n\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\n\n- `links` **have to contain at least `link_id` property**\n- `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\n\n#### Content components and Linked content items\n\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\n\n- `linkedItems` **have to contain at least `system.codename` property**\n- `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\n\n#### Custom resolution for any other dom node\n\nThe general resolution method `resolveDomNode` is called for every DOM node, except for ones that are resolved specifically (described above). In the example above, all table elements will be wrapped with the `div` element. You could also return just a JSX if you want to replace the `domNode` completely.\n\nIf you want to resolve elements via `resolveDomNode`, you get the following parameters:\n\n- `domNode` - DOM node from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser)\n- `domToReact` - method from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser) to be able to extend the actual `domNode` as on the example\n","gitHead":"691e4e1a1ab42ebbb2cacadaf45322394c7f2ea7","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"chrastina.ondra@gmail.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.16.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"14.16.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","gatsby-plugin-image":"^1.0.0-next.3","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","gatsby-plugin-image":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_7.2.0-beta.0_1628000962392_0.8314405858485678","host":"s3://npm-registry-packages"}},"7.0.1-types.0":{"name":"@kentico/gatsby-kontent-components","version":"7.0.1-types.0","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@7.0.1-types.0","maintainers":[{"name":"simply007","email":"chrastina.ondra@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"},{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"honzabarton","email":"janb@kentico.com"},{"name":"hom3r","email":"beran3@gmail.com"},{"name":"martins1","email":"martins@kentico.com"},{"name":"xperience-npmjs-publisher","email":"NPMJS-pkg-publish@kenticosoftware.onmicrosoft.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"24dd465129379b056d4604dd29e08c6f6556acb6","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-7.0.1-types.0.tgz","fileCount":11,"integrity":"sha512-zoqWJarU4n7RGbHMLQKS0ZCCgIcTrSVZwwUGN5j90yKtcc4rrK/3DHJMzftCka+Pu7h5khifmMQ5RuYKFwikOw==","signatures":[{"sig":"MEQCIGH0YSBovneQMbKvMbfPZPRYtIIS8vnJWUcFW4GFosvpAiBMickKwbBIn6Q3m5nC17O2Ew3xwcY3YWIbZluGLMZB4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCk4BCRA9TVsSAnZWagAA/tsP/0r9MZPqGURYSlTnnq0+\n8xaKApgpr8yzOY6Pu9uWcFBONR6DrxD4gQR9tgZm0yr7wOsnbbPcQjjnHOR5\ntoh87k3hs8fs2LVn5S3pKrYNJtMENsMtFcl1h/XQ0O/JnGnHno7IP6XoCp9w\nGH23C3Boiv+Wm12BQ4RtAE2IGTyroYxyAlnn1YjejBpMbwvcFWr3QZAha9aK\nqacJTcJEKllgWrAE+qsf6AATNG+qsiD7/K/BNxfXnvjjQwnZIn/ajrLddd62\nPFc7jIv1EDOBu+M3BTcNXWxk+0aACpUGIAgDjTeuVPR9uxcFJ/KrUCRskNDT\nezz1EHWaAg/kQZZhDHrwCCUwwxAHnjJN9LdBTCnxCSvoyjIwJWzFQa4+CeCc\nDvvCEcyhaI2yJa9E0GsB2J7hVQzuVKRtxlYaiytrVqEdxRCSozmu6qG0oHTD\n2EOn7kX9b5Hq4MPmv63uVFZgA1BglQMRGE3c5O8TFHD0iRJfp2fu7MBk+c03\nDt0IJL/0JVbvgLRq/wqcOKE/Gz+16Ru4THzo77a7wlrGdMs8WzJqTYfex8DM\nNYSSnqoL0ocoNi1QZxBDgJY6nLJYC4P28w0CKUIm0oq5cJYvEQX48jP9HKE7\nJilz6ONUcjCfwayN4hjXMXz/wH28HnlEm5T+5K22QuSe9+OQgFYCxBQLqna0\ndrQy\r\n=1tox\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Gatsby Kontent Components\n\n[![Gatsby plugin library](https://img.shields.io/badge/Gatsby%20plugin%20library-%23663399.svg)](https://www.gatsbyjs.org/packages/@kentico/gatsby-kontent-components)\n[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kentico-kontent)\n\n[![npm version](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components.svg)](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components)\n[![npm](https://img.shields.io/npm/dt/%40kentico%2Fgatsby-kontent-components.svg)](https://www.npmjs.com/package/@kentico/gatsby-kontent-components)\n\nThe package containing React components useful when processing Kontent data to the site.\n\n> To see the progress of the Gatsby v3 supported packages - [check out this pull request](https://github.com/Kentico/kontent-gatsby-packages/pull/174).\n\n## Install\n\n```sh\nnpm install @kentico/gatsby-kontent-components gatsby-plugin-image\n```\n\nAlso, add `gatsby-plugin-image` to `plugins` array in `gatsby-config.js`.\n\n## Image element component\n\nImages from Kentico Kontent can be displayed using the `ImageElement` component. This wraps the `GatsbyImage` component from [gatsby-plugin-image](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/), so ensure that you also install that plugin. This component will give the best experience for your users, as it includes responsive srcset, blur-up, lazy loading and many other performance optimizations. [Automatic format optimization](https://docs.kontent.ai/reference/image-transformation#a-automatic-format-selection) is always enabled. In many cases it can improve Lighthouse scores by 10-20 points.\n\nThe component takes all [the `GatsbyImage` props](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#gatsbyimage), as well as the following properties. All are optional except `image`:\n\n- `image`: the `image` object. This should include `url`, `width` and `height`.\n- `layout`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#layout)\n- `width`/`height`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#widthheight)\n- `aspectRatio`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#aspectratio)\n- `backgroundColor`: displayed as a placeholder while the image loads\n- `options: ImageOptions`: an object containing options passed to [the Kontent Image Transformation API](https://docs.kontent.ai/reference/image-transformation). Supported options: `fit`, `quality`, `lossless`.\n\n ```ts\n interface ImageOptions {\n fit?: 'crop' | 'clip' | 'scale';\n quality?: number;\n lossless?: boolean;\n }\n ```\n\nProperties of the image object (e.g. `width` and `height`) are reflected in Kontent's image API query.\nProps of the `ImageElement` component (e.g. `width` and `height`) are reflected in the rendered DOM.\nIf the optional props of `ImageElement` are omitted, the properties of the image object are applied.\n\n> You can find a showcase in the [author.js](../../site/src/pages/author.js) on the development site.\n\n```jsx\nimport React from 'react'\nimport { ImageElement } from \"@kentico/gatsby-kontent-components\"\nimport { graphql } from \"gatsby\";\n\nexport default Page = ({ data }) => {\n const avatar = data.author.elements.avatar_image.value[0];\n\n return (\n \n );\n}\nexport const query = graphql`\n {\n author: kontentItemAuthor {\n elements {\n avatar_image {\n value {\n url\n description\n }\n }\n }\n }\n }\n`\n```\n\n## Rich text element component\n\nRich text elements from Kentico Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\n\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\n\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\n\n```jsx\nimport { RichTextElement, ImageElement } from \"@kentico/gatsby-kontent-components\"\n\n// ...\n\n {\n return (\n \n )\n }}\n resolveLink={(link, domNode) => {\n const parentItemType = contextData.type // It is possible to use external data for resolution\n return (\n \n {domNode.children[0].data}\n \n )\n }}\n resolveLinkedItem={linkedItem => {\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\n }}\n resolveDomNode={(domNode, domToReact) => {\n if (domNode.name === \"table\") {\n // For options - check https://www.npmjs.com/package/html-react-parser#options\n return (\n
\n {domToReact([domNode])}\n
\n );\n }\n }}\n />\n```\n\n### Resolution scope\n\nIf you don't need to resolve anything, you could just provide `value` property.\n\n#### Images\n\nIf you want to resolve images pass `images` and `resolveImage` properties.\n\n- `images` **have to contain at least `image_id` property**\n- `resolveImage` has one parameter `image` usually containing one record from `images` array\n- when resolving images in Rich text element using [Image element component]((#image-element-component)), `image` object must follow data contract defined in [Image element component](#image-element-component) section. Moreover, for correct resolution, the additional `image_id` identifier of the image is mandatory, as well.\n\n#### Links to content items\n\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\n\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\n\n- `links` **have to contain at least `link_id` property**\n- `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\n\n#### Content components and Linked content items\n\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\n\n- `linkedItems` **have to contain at least `system.codename` property**\n- `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\n\n#### Custom resolution for any other dom node\n\nThe general resolution method `resolveDomNode` is called for every DOM node, except for ones that are resolved specifically (described above). In the example above, all table elements will be wrapped with the `div` element. You could also return just a JSX if you want to replace the `domNode` completely.\n\nIf you want to resolve elements via `resolveDomNode`, you get the following parameters:\n\n- `domNode` - DOM node from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser)\n- `domToReact` - method from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser) to be able to extend the actual `domNode` as on the example\n","gitHead":"5e6db71929fbf756387ecb5de86df64284d8efab","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"chrastina.ondra@gmail.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.16.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"14.16.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","gatsby-plugin-image":"^1.0.0-next.3","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","gatsby-plugin-image":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_7.0.1-types.0_1628065281687_0.536774409766243","host":"s3://npm-registry-packages"}},"7.2.0":{"name":"@kentico/gatsby-kontent-components","version":"7.2.0","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@7.2.0","maintainers":[{"name":"simply007","email":"chrastina.ondra@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"},{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"honzabarton","email":"janb@kentico.com"},{"name":"hom3r","email":"beran3@gmail.com"},{"name":"martins1","email":"martins@kentico.com"},{"name":"xperience-npmjs-publisher","email":"NPMJS-pkg-publish@kenticosoftware.onmicrosoft.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"8611c4868206e324381d98c0bfab1bb59b48e4b2","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-7.2.0.tgz","fileCount":11,"integrity":"sha512-9hM9oRvGMxwbff22PMle73hyhgMGNciYv8r2/7BVl/voLtLdRVRGGw/ErBP6qgUjGuwu7wMiGmEEKuYz6i3ZWQ==","signatures":[{"sig":"MEQCIGgE4w4wOngOztlcViMZ8DIVtmYzIi3H3t5UcT1a9iB0AiAIpxn1QyIWSkm3/mcRcVggCYPWKeBk9X4WKXE3mmDWKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG2rgCRA9TVsSAnZWagAAEmgP/1vX4IAzX+vIQOavwQuL\nRgRunLWgq3bdJabf1JsiwMZIXTnNCKfAbckvNy36Pg91HTDANhnfRfj50ZUp\n0IMMUm6pHOd9VVmn8jWdx/hi6slnzkJbWz2x9jZec0r3GLpFbxNLtBIYreap\n5YPeTQVe5M0zh+wxVhw8iX6kxxl1MpxSVSYV73frTaqO7AfwVmlu/VZ3HLf0\n/shM9GNUROjVjzNI/gtP0pLknL9KUdKMCkXLNBu941/RZ4VQ/ztSh5b7MK0i\nfMXe2DGD8llHV6l+K3m3DHH9gyWVn2ZAXVKNNYVpKmCA1MHV1sz/eZauwmbB\n5g5ZemXOm3HowJkkyGC5elNbJ+9v+Eljfsyp5M2ygVGSQ06pO3GjBMzvaAKB\n0j7z9cJPeHbJ7+wdvlI+aXiEKrtitJJ6vns0572eb6X4Vf0NZwuI/PPV8kDg\nNO3cSqa/PudnWxRBLHLXOcLFGxxsRYPzUpGHdVWZ3hkQQZHc0DV1BoPq2hbU\nyXxSOf5K9v3bdFKzJm2lwgKZsUrrYW7cnEdicaIzFji8Vy/jT5uFbO2PmLzn\nUNZ3++1TKGkZhFW4SgN1WM1w8oxxYp/LjVwT9224vYcjKET3pSReGdAww61f\nEDgvyxVa6xqjiU8HDI9llxhxHEbS9qnmexut1e2fZ7CuTDmo7Qf6Nxo46Mxc\ngnwx\r\n=V9sh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","gitHead":"538ddc09165936f501adf1c696cc5e0fdd31c649","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"chrastina.ondra@gmail.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.17.0+x64 (win32)","description":"Source plugin providing Kentico Kontent data from REST Delivery API","directories":{},"_nodeVersion":"14.17.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","gatsby-plugin-image":"^1.0.0-next.3","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","gatsby-plugin-image":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_7.2.0_1629186784544_0.08969434593541181","host":"s3://npm-registry-packages"}},"8.0.0-beta.0":{"name":"@kentico/gatsby-kontent-components","version":"8.0.0-beta.0","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@8.0.0-beta.0","maintainers":[{"name":"simply007","email":"chrastina.ondra@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"},{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"honzabarton","email":"janb@kentico.com"},{"name":"hom3r","email":"beran3@gmail.com"},{"name":"martins1","email":"martins@kentico.com"},{"name":"xperience-npmjs-publisher","email":"NPMJS-pkg-publish@kenticosoftware.onmicrosoft.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"78f4c58469b9a85a12214770edc859f7321af5c5","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-8.0.0-beta.0.tgz","fileCount":11,"integrity":"sha512-4HWr7QAx1yhnbi2qUSDPcvth/xrbaTtpVBN6Zs9xHQcGDyXiKTf1ZMXbsmxyaPJJ+Txt/nITJcVEn3teWhj/2Q==","signatures":[{"sig":"MEQCIDKV3AFqA2aocm1FI5iEIci1goIqByzBWyv5TZnEx4XLAiBqP6UFf7EdLFnr12Ica8ijcgCp9QdON020FISofTZsWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20031},"main":"dist/index.js","readme":"# Gatsby Kontent Components\r\n\r\n[![Gatsby plugin library](https://img.shields.io/badge/Gatsby%20plugin%20library-%23663399.svg)](https://www.gatsbyjs.org/packages/@kentico/gatsby-kontent-components)\r\n[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kentico-kontent)\r\n\r\n[![npm version](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components.svg)](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components)\r\n[![npm](https://img.shields.io/npm/dt/%40kentico%2Fgatsby-kontent-components.svg)](https://www.npmjs.com/package/@kentico/gatsby-kontent-components)\r\n\r\nThe package containing React components useful when processing Kontent data to the site.\r\n\r\n> To see the progress of the Gatsby v3 supported packages - [check out this pull request](https://github.com/Kentico/kontent-gatsby-packages/pull/174).\r\n\r\n## Install\r\n\r\n```sh\r\nnpm install @kentico/gatsby-kontent-components gatsby-plugin-image\r\n```\r\n\r\nAlso, add `gatsby-plugin-image` to `plugins` array in `gatsby-config.js`.\r\n\r\n### Typescript\r\n\r\nComponents exports their typescript definitions so that you know what data format you need to provide via props and what data format expect from function prop callback arguments.\r\n\r\n## Image element component\r\n\r\nImages from Kontent can be displayed using the `ImageElement` component. This wraps the `GatsbyImage` component from [gatsby-plugin-image](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/), so ensure that you also install that plugin. This component will give the best experience for your users, as it includes responsive srcset, blur-up, lazy loading and many other performance optimizations. [Automatic format optimization](https://docs.kontent.ai/reference/image-transformation#a-automatic-format-selection) is always enabled. In many cases it can improve Lighthouse scores by 10-20 points.\r\n\r\nThe component takes all [the `GatsbyImage` props](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#gatsbyimage), as well as the following properties. All are optional except `image`:\r\n\r\n- `image`: the `image` object. This should include `url`, `width` and `height`.\r\n- `layout`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#layout)\r\n- `width`/`height`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#widthheight)\r\n- `aspectRatio`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#aspectratio)\r\n- `backgroundColor`: displayed as a placeholder while the image loads\r\n- `options: ImageOptions`: an object containing options passed to [the Kontent Image Transformation API](https://docs.kontent.ai/reference/image-transformation). Supported options: `fit`, `quality`, `lossless`.\r\n\r\n ```ts\r\n interface ImageOptions {\r\n fit?: 'crop' | 'clip' | 'scale';\r\n quality?: number;\r\n lossless?: boolean;\r\n }\r\n ```\r\n\r\nProperties of the image object (e.g. `width` and `height`) are reflected in Kontent's image API query.\r\nProps of the `ImageElement` component (e.g. `width` and `height`) are reflected in the rendered DOM.\r\nIf the optional props of `ImageElement` are omitted, the properties of the image object are applied.\r\n\r\n> You can find a showcase in the [author.js](../../site/src/pages/author.js) on the development site.\r\n\r\n```jsx\r\nimport React from 'react'\r\nimport { ImageElement } from \"@kentico/gatsby-kontent-components\"\r\nimport { graphql } from \"gatsby\";\r\n\r\nexport default Page = ({ data }) => {\r\n const avatar = data.author.elements.avatar_image.value[0];\r\n\r\n return (\r\n \r\n );\r\n}\r\nexport const query = graphql`\r\n {\r\n author: kontentItemAuthor {\r\n elements {\r\n avatar_image {\r\n value {\r\n url\r\n description\r\n }\r\n }\r\n }\r\n }\r\n }\r\n`\r\n```\r\n\r\n## Rich text element component\r\n\r\nRich text elements from Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\r\n\r\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\r\n\r\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\r\n\r\n```jsx\r\nimport { RichTextElement, ImageElement } from \"@kentico/gatsby-kontent-components\"\r\n\r\n// ...\r\n\r\n {\r\n return (\r\n \r\n )\r\n }}\r\n resolveLink={(link, domNode) => {\r\n const parentItemType = contextData.type // It is possible to use external data for resolution\r\n return (\r\n \r\n {domNode.children[0].data}\r\n \r\n )\r\n }}\r\n resolveLinkedItem={linkedItem => {\r\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\r\n }}\r\n resolveDomNode={(domNode, domToReact) => {\r\n if (domNode.name === \"table\") {\r\n // For options - check https://www.npmjs.com/package/html-react-parser#options\r\n return (\r\n
\r\n {domToReact([domNode])}\r\n
\r\n );\r\n }\r\n }}\r\n />\r\n```\r\n\r\n### Resolution scope\r\n\r\nIf you don't need to resolve anything, you could just provide `value` property.\r\n\r\n#### Images\r\n\r\nIf you want to resolve images pass `images` and `resolveImage` properties.\r\n\r\n- `images` **have to contain at least `image_id` property**\r\n- `resolveImage` has one parameter `image` usually containing one record from `images` array\r\n- when resolving images in Rich text element using [Image element component]((#image-element-component)), `image` object must follow data contract defined in [Image element component](#image-element-component) section. Moreover, for correct resolution, the additional `image_id` identifier of the image is mandatory, as well.\r\n\r\n#### Links to content items\r\n\r\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\r\n\r\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\r\n\r\n- `links` **have to contain at least `link_id` property**\r\n- `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\r\n\r\n#### Content components and Linked content items\r\n\r\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\r\n\r\n- `linkedItems` **have to contain at least `system.codename` property**\r\n- `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\r\n\r\n#### Custom resolution for any other dom node\r\n\r\nThe general resolution method `resolveDomNode` is called for every DOM node, except for ones that are resolved specifically (described above). In the example above, all table elements will be wrapped with the `div` element. You could also return just a JSX if you want to replace the `domNode` completely.\r\n\r\nIf you want to resolve elements via `resolveDomNode`, you get the following parameters:\r\n\r\n- `domNode` - DOM node from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser)\r\n- `domToReact` - method from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser) to be able to extend the actual `domNode` as on the example\r\n","gitHead":"b5eb9f80df87f6f4cc47b15bb0dc90c47a428383","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"chrastina.ondra@gmail.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.16.1+x64 (win32)","description":"Source plugin providing Kontent data from REST Delivery API","directories":{},"_nodeVersion":"14.16.1","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","gatsby-plugin-image":"^2.0.0","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","gatsby-plugin-image":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_8.0.0-beta.0_1634905003659_0.23765468510151178","host":"s3://npm-registry-packages"}},"8.0.0-beta.1":{"name":"@kentico/gatsby-kontent-components","version":"8.0.0-beta.1","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@8.0.0-beta.1","maintainers":[{"name":"simply007","email":"chrastina.ondra@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"},{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"honzabarton","email":"janb@kentico.com"},{"name":"hom3r","email":"beran3@gmail.com"},{"name":"martins1","email":"martins@kentico.com"},{"name":"xperience-npmjs-publisher","email":"NPMJS-pkg-publish@kenticosoftware.onmicrosoft.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"45a04a0552a46f84ec8d0c09dd363b9eb92f131c","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-8.0.0-beta.1.tgz","fileCount":11,"integrity":"sha512-eKFA3Bn1WQ/SSoaTUrZCPDGb8a8dIKfLanbVkmbWIgPxceizRpQnOTveLzCNk8+UHvWlJoQB9tmXmYePmxUthw==","signatures":[{"sig":"MEYCIQCAl1PwuuQIB91Baz8yNvH+8NnbJ1UBD43rwnqY/TLklgIhAK2Qhz10KhBCqnb8lu0BD7CZGRHDr4SyaxNGJxj/I+v+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20074},"main":"dist/index.js","readme":"# Gatsby Kontent Components\r\n\r\n[![Gatsby plugin library](https://img.shields.io/badge/Gatsby%20plugin%20library-%23663399.svg)](https://www.gatsbyjs.org/packages/@kentico/gatsby-kontent-components)\r\n[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kentico-kontent)\r\n\r\n[![npm version](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components.svg)](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components)\r\n[![npm](https://img.shields.io/npm/dt/%40kentico%2Fgatsby-kontent-components.svg)](https://www.npmjs.com/package/@kentico/gatsby-kontent-components)\r\n\r\nThe package containing React components useful when processing Kontent data to the site.\r\n\r\n> To see the progress of the Gatsby v4 supported packages - [check out this pull request](https://github.com/Kentico/kontent-gatsby-packages/pull/195).\r\n\r\n## Install\r\n\r\n```sh\r\nnpm install @kentico/gatsby-kontent-components gatsby-plugin-image\r\n```\r\n\r\nAlso, add `gatsby-plugin-image` to `plugins` array in `gatsby-config.js`.\r\n\r\n### Typescript\r\n\r\nComponents exports their typescript definitions so that you know what data format you need to provide via props and what data format expect from function prop callback arguments.\r\n\r\n## Image element component\r\n\r\nImages from Kontent can be displayed using the `ImageElement` component. This wraps the `GatsbyImage` component from [gatsby-plugin-image](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/), so ensure that you also install that plugin. This component will give the best experience for your users, as it includes responsive srcset, blur-up, lazy loading and many other performance optimizations. [Automatic format optimization](https://docs.kontent.ai/reference/image-transformation#a-automatic-format-selection) is always enabled. In many cases it can improve Lighthouse scores by 10-20 points.\r\n\r\nThe component takes all [the `GatsbyImage` props](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#gatsbyimage), as well as the following properties. All are optional except `image`:\r\n\r\n- `image`: the `image` object. This should include `url`, `width` and `height`.\r\n- `layout`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#layout)\r\n- `width`/`height`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#widthheight)\r\n- `aspectRatio`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#aspectratio)\r\n- `backgroundColor`: displayed as a placeholder while the image loads\r\n- `options: ImageOptions`: an object containing options passed to [the Kontent Image Transformation API](https://docs.kontent.ai/reference/image-transformation). Supported options: `fit`, `quality`, `lossless`.\r\n\r\n ```ts\r\n interface ImageOptions {\r\n fit?: 'crop' | 'clip' | 'scale';\r\n quality?: number;\r\n lossless?: boolean;\r\n }\r\n ```\r\n\r\nProperties of the image object (e.g. `width` and `height`) are reflected in Kontent's image API query.\r\nProps of the `ImageElement` component (e.g. `width` and `height`) are reflected in the rendered DOM.\r\nIf the optional props of `ImageElement` are omitted, the properties of the image object are applied.\r\n\r\n> You can find a showcase in the [author.js](../../site/src/pages/author.js) on the development site.\r\n\r\n```jsx\r\nimport React from 'react'\r\nimport { ImageElement } from \"@kentico/gatsby-kontent-components\"\r\nimport { graphql } from \"gatsby\";\r\n\r\nexport default Page = ({ data }) => {\r\n const avatar = data.author.elements.avatar_image.value[0];\r\n\r\n return (\r\n \r\n );\r\n}\r\nexport const query = graphql`\r\n {\r\n author: kontentItemAuthor {\r\n elements {\r\n avatar_image {\r\n value {\r\n url\r\n description\r\n }\r\n }\r\n }\r\n }\r\n }\r\n`\r\n```\r\n\r\n## Rich text element component\r\n\r\nRich text elements from Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\r\n\r\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\r\n\r\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\r\n\r\n```jsx\r\nimport { RichTextElement, ImageElement } from \"@kentico/gatsby-kontent-components\"\r\n\r\n// ...\r\n\r\n {\r\n return (\r\n \r\n )\r\n }}\r\n resolveLink={(link, domNode) => {\r\n const parentItemType = contextData.type // It is possible to use external data for resolution\r\n return (\r\n \r\n {domNode.children[0].data}\r\n \r\n )\r\n }}\r\n resolveLinkedItem={linkedItem => {\r\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\r\n }}\r\n resolveDomNode={(domNode, domToReact) => {\r\n if (domNode.name === \"table\") {\r\n // For options - check https://www.npmjs.com/package/html-react-parser#options\r\n return (\r\n
\r\n {domToReact([domNode])}\r\n
\r\n );\r\n }\r\n }}\r\n />\r\n```\r\n\r\n### Resolution scope\r\n\r\nIf you don't need to resolve anything, you could just provide `value` property.\r\n\r\n#### Images\r\n\r\nIf you want to resolve images pass `images` and `resolveImage` properties.\r\n\r\n- `images` **have to contain at least `image_id` property**\r\n- `resolveImage` has one parameter `image` usually containing one record from `images` array\r\n- when resolving images in Rich text element using [Image element component]((#image-element-component)), `image` object must follow data contract defined in [Image element component](#image-element-component) section. Moreover, for correct resolution, the additional `image_id` identifier of the image is mandatory, as well.\r\n\r\n#### Links to content items\r\n\r\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\r\n\r\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\r\n\r\n- `links` **have to contain at least `link_id` property**\r\n- `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\r\n\r\n#### Content components and Linked content items\r\n\r\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\r\n\r\n- `linkedItems` **have to contain at least `system.codename` property**\r\n- `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\r\n\r\n#### Custom resolution for any other dom node\r\n\r\nThe general resolution method `resolveDomNode` is called for every DOM node, except for ones that are resolved specifically (described above). In the example above, all table elements will be wrapped with the `div` element. You could also return just a JSX if you want to replace the `domNode` completely.\r\n\r\nIf you want to resolve elements via `resolveDomNode`, you get the following parameters:\r\n\r\n- `domNode` - DOM node from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser)\r\n- `domToReact` - method from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser) to be able to extend the actual `domNode` as on the example\r\n","engines":{"node":">=14.0.0"},"gitHead":"fc411278563f79fb817b64b15b7704aca5a134e8","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"chrastina.ondra@gmail.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.17.0+x64 (win32)","description":"Source plugin providing Kontent data from REST Delivery API","directories":{},"_nodeVersion":"14.17.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","gatsby-plugin-image":"^2.0.0","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","gatsby-plugin-image":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_8.0.0-beta.1_1635168353467_0.3048179643731459","host":"s3://npm-registry-packages"}},"8.0.0-beta.2":{"name":"@kentico/gatsby-kontent-components","version":"8.0.0-beta.2","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@8.0.0-beta.2","maintainers":[{"name":"simply007","email":"chrastina.ondra@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"},{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"honzabarton","email":"janb@kentico.com"},{"name":"hom3r","email":"beran3@gmail.com"},{"name":"martins1","email":"martins@kentico.com"},{"name":"xperience-npmjs-publisher","email":"NPMJS-pkg-publish@kenticosoftware.onmicrosoft.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"85ba2fc4e8761c3f1aa26d46868e2fe441a8a214","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-8.0.0-beta.2.tgz","fileCount":11,"integrity":"sha512-cDBbXResN4uiNWPfVq4cE38U2pMy1Mgx0EQhaZVuuvmWtzYhKXndN/oZGoccHqNvQNdutNcD/323l2/oOlJ2gQ==","signatures":[{"sig":"MEQCIBYECzPpXkv1nhKEu4X2G7GNpWccRjvyAVPnEBr26Wq/AiBk2ijeOiofTSFL6alqTTct+4EODjhi6RUXbj6tocY1RA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm0FXCRA9TVsSAnZWagAAK6cP/RHbhP6DMR24Wm2KwSeX\ntOyoF7spWihSHryn5wLstp50t3x9gapng56ka3+521PYDGyyu5n5+M6MjOPc\n1RtA/KnRzMLyaRg1OiC7ss4hdDa5L0wv9czRxjxOEJFt2KCckTubBUXWSUeD\nHdeGYTB8wzYkUqQdidg65OUhT/x7KbwaIAoyEgEZBkeQq1kf/jVZgYLA0Iro\n9HRtvUm5XXufum1xzakwz/xF2MbljTWQNyHfELrw9qMKICmTUHZByCgzehCT\nWxmQt6vmXRSqAdzEpn3/b3WliLxfi2DOx084G28cXwckjhLLWdFIclMH+R3b\nG1IuYM4iiwwUU+8vSpc1ZWgUzXoBbmjWdyVMXHUTPYh3O4jaOWRLGX1nFV9c\n34JQOD63o5m64Q7c7cXZFmQMIPcRLkM9qIggij2v6rcIcLJUt71uhlNSNfvI\nzZPURgVbXcMj0RvEH4ElAr5lNBl83KERivTl9xXgFd6eYbZIRzln8kCO3H2n\noGqywXIpLzsJtEwg7Glpi2wBycv1iF5LO2TGr3r6Yzp+D9ZJGbySsPgyxY4l\nJuP8R9i+1Eu97GNIpMTAku4V+FyNWQBeZnqKcX1EhvGX8E9vpVcCtiDrpbBF\nqobL2OOZi4jTm9MQlLRQDZFSMKIJOoed4YACHIOzbjkDCmTipP4xOVX2IQaQ\n99J5\r\n=UtOT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Gatsby Kontent Components\r\n\r\n[![Gatsby plugin library](https://img.shields.io/badge/Gatsby%20plugin%20library-%23663399.svg)](https://www.gatsbyjs.org/packages/@kentico/gatsby-kontent-components)\r\n[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kentico-kontent)\r\n\r\n[![npm version](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components.svg)](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components)\r\n[![npm](https://img.shields.io/npm/dt/%40kentico%2Fgatsby-kontent-components.svg)](https://www.npmjs.com/package/@kentico/gatsby-kontent-components)\r\n\r\nThe package containing React components useful when processing Kontent data to the site.\r\n\r\n> To see the progress of the Gatsby v4 supported packages - [check out this pull request](https://github.com/Kentico/kontent-gatsby-packages/pull/195).\r\n\r\n## Install\r\n\r\n```sh\r\nnpm install @kentico/gatsby-kontent-components gatsby-plugin-image\r\n```\r\n\r\nAlso, add `gatsby-plugin-image` to `plugins` array in `gatsby-config.js`.\r\n\r\n### Typescript\r\n\r\nComponents exports their typescript definitions so that you know what data format you need to provide via props and what data format expect from function prop callback arguments.\r\n\r\n## Image element component\r\n\r\nImages from Kontent can be displayed using the `ImageElement` component. This wraps the `GatsbyImage` component from [gatsby-plugin-image](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/), so ensure that you also install that plugin. This component will give the best experience for your users, as it includes responsive srcset, blur-up, lazy loading and many other performance optimizations. [Automatic format optimization](https://docs.kontent.ai/reference/image-transformation#a-automatic-format-selection) is always enabled. In many cases it can improve Lighthouse scores by 10-20 points.\r\n\r\nThe component takes all [the `GatsbyImage` props](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#gatsbyimage), as well as the following properties. All are optional except `image`:\r\n\r\n- `image`: the `image` object. This should include `url`, `width` and `height`.\r\n- `layout`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#layout)\r\n- `width`/`height`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#widthheight)\r\n- `aspectRatio`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#aspectratio)\r\n- `backgroundColor`: displayed as a placeholder while the image loads\r\n- `options: ImageOptions`: an object containing options passed to [the Kontent Image Transformation API](https://docs.kontent.ai/reference/image-transformation). Supported options: `fit`, `quality`, `lossless`.\r\n\r\n ```ts\r\n interface ImageOptions {\r\n fit?: 'crop' | 'clip' | 'scale';\r\n quality?: number;\r\n lossless?: boolean;\r\n }\r\n ```\r\n\r\nProperties of the image object (e.g. `width` and `height`) are reflected in Kontent's image API query.\r\nProps of the `ImageElement` component (e.g. `width` and `height`) are reflected in the rendered DOM.\r\nIf the optional props of `ImageElement` are omitted, the properties of the image object are applied.\r\n\r\n> You can find a showcase in the [author.js](../../site/src/pages/author.js) on the development site.\r\n\r\n```jsx\r\nimport React from 'react'\r\nimport { ImageElement } from \"@kentico/gatsby-kontent-components\"\r\nimport { graphql } from \"gatsby\";\r\n\r\nexport default Page = ({ data }) => {\r\n const avatar = data.author.elements.avatar_image.value[0];\r\n\r\n return (\r\n \r\n );\r\n}\r\nexport const query = graphql`\r\n {\r\n author: kontentItemAuthor {\r\n elements {\r\n avatar_image {\r\n value {\r\n url\r\n description\r\n }\r\n }\r\n }\r\n }\r\n }\r\n`\r\n```\r\n\r\n## Rich text element component\r\n\r\nRich text elements from Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\r\n\r\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\r\n\r\n> Complete showcase could be found in [rich-text.js](../../site/src/pages/rich-text.js) in the development site.\r\n\r\n```jsx\r\nimport { RichTextElement, ImageElement } from \"@kentico/gatsby-kontent-components\"\r\n\r\n// ...\r\n\r\n {\r\n return (\r\n \r\n )\r\n }}\r\n resolveLink={(link, domNode) => {\r\n const parentItemType = contextData.type // It is possible to use external data for resolution\r\n return (\r\n \r\n {domNode.children[0].data}\r\n \r\n )\r\n }}\r\n resolveLinkedItem={linkedItem => {\r\n return 
{JSON.stringify(linkedItem, undefined, 2)}
\r\n }}\r\n resolveDomNode={(domNode, domToReact) => {\r\n if (domNode.name === \"table\") {\r\n // For options - check https://www.npmjs.com/package/html-react-parser#options\r\n return (\r\n
\r\n {domToReact([domNode])}\r\n
\r\n );\r\n }\r\n }}\r\n />\r\n```\r\n\r\n### Resolution scope\r\n\r\nIf you don't need to resolve anything, you could just provide `value` property.\r\n\r\n#### Images\r\n\r\nIf you want to resolve images pass `images` and `resolveImage` properties.\r\n\r\n- `images` **have to contain at least `image_id` property**\r\n- `resolveImage` has one parameter `image` usually containing one record from `images` array\r\n- when resolving images in Rich text element using [Image element component]((#image-element-component)), `image` object must follow data contract defined in [Image element component](#image-element-component) section. Moreover, for correct resolution, the additional `image_id` identifier of the image is mandatory, as well.\r\n\r\n#### Links to content items\r\n\r\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\r\n\r\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\r\n\r\n- `links` **have to contain at least `link_id` property**\r\n- `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\r\n\r\n#### Content components and Linked content items\r\n\r\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\r\n\r\n- `linkedItems` **have to contain at least `system.codename` property**\r\n- `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\r\n\r\n#### Custom resolution for any other dom node\r\n\r\nThe general resolution method `resolveDomNode` is called for every DOM node, except for ones that are resolved specifically (described above). In the example above, all table elements will be wrapped with the `div` element. You could also return just a JSX if you want to replace the `domNode` completely.\r\n\r\nIf you want to resolve elements via `resolveDomNode`, you get the following parameters:\r\n\r\n- `domNode` - DOM node from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser)\r\n- `domToReact` - method from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser) to be able to extend the actual `domNode` as on the example\r\n","engines":{"node":">=14.15.0"},"gitHead":"cb491dc14092e33a9259b99a28a46d55d733b259","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"chrastina.ondra@gmail.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v14.17.0+x64 (win32)","description":"Source plugin providing Kontent data from REST Delivery API","directories":{},"_nodeVersion":"14.17.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","eslint-plugin-react":"^7.27.1","gatsby-plugin-image":"^2.0.0","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","gatsby-plugin-image":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_8.0.0-beta.2_1637564759580_0.2862343263207179","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@kentico/gatsby-kontent-components","version":"8.0.0","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.tech","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@8.0.0","maintainers":[{"name":"simply007","email":"chrastina.ondra@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"},{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"honzabarton","email":"janb@kentico.com"},{"name":"hom3r","email":"beran3@gmail.com"},{"name":"martins1","email":"martins@kentico.com"},{"name":"xperience-npmjs-publisher","email":"NPMJS-pkg-publish@kenticosoftware.onmicrosoft.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"6a8986007d1f5a71acf6c8619ad8c63299d20bc0","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-8.0.0.tgz","fileCount":11,"integrity":"sha512-oWvdXv93kHXkq9afm+7miLP3+zKBKQ8YLrgFjOGoGkJWde2dsby3MdjEI2WP/AFqV46lYyZFUPiHItjs+NbdSQ==","signatures":[{"sig":"MEYCIQDhHbwPsopeLQtTHCQuZ9rBKn7qh9148/XD8kgB65Q00QIhAJ0q+sIgBSNjWJrwh1NdNWkW/Oyn2YxHkyhRlbxw772T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBRh9CRA9TVsSAnZWagAAwkMQAIaiw56HflIM8xYIZuoj\nj1Ua1HIO6FbgNM74Y0RERADz9vFxC+XVWBtvLbW37ZjHCCHNnJJWmHVeZkj6\na3DEzF22xEWs6o5fblU+YqHfvi+jWCg5mTTWnfM8sm9+R3BSosCTdydax2dF\nCZy5j+J1n1aCy9GAnsJ+o8i/4cgoyKRowKJeEtjDXbrfYWWZvZuAwtPgAApP\niFySqWAlgL/sKtLyxwi8jSJNx2q8Onu7szJdisDnfOlgYn9Mjy2+UQbwBHNv\nsdX1I9L6o9p6lOfHVUHJy7MzMXjBP34c24+tfb9BIZYEnkXEdw0hT5mxwwPW\nL7R4IvA0n5OD0VM/qdWS91TwITv17IPU7KtGHMv7yn5IrlB9DPs50TTyEjJk\neoP6t5bwEKlMHLSfWO/cjvziw22nZhUuTMwM1E2L7Rvk06501vRzQENqy4tZ\nH1oipTQ2OZo0mN8GPpSz+kMjBTYmtMwIxEsrN9Qz7/kOOONqGUpBZES4/X5b\nB8VzKKBX1PlXk1PPBlTCPXND0RV1K477JhbhdXMkcDORqdH+xYmVLF+bwhaT\nfQoxGzcdvYny0u0quRoCpbqqiq+nfjtMElzRgH77cviUY/oVh35/byzc0YHa\n7BB4zNt4EyBgnrkhryQYrqoR0dhQ2pvGNTB+30Yg0KEKudAQjx0q9aC5IKvs\n+eoO\r\n=N9q5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","engines":{"node":">=14.15.0"},"gitHead":"72b3e3d428d7bcc36ff03e33054b12750042decf","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"simply007","email":"chrastina.ondra@gmail.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v17.4.0+x64 (win32)","description":"Source plugin providing Kontent data from REST Delivery API","directories":{},"_nodeVersion":"17.4.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","eslint-plugin-react":"^7.27.1","gatsby-plugin-image":"^2.0.0","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","gatsby-plugin-image":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_8.0.0_1644501117365_0.5185715963221986","host":"s3://npm-registry-packages"}},"8.1.0-beta.1":{"name":"@kentico/gatsby-kontent-components","version":"8.1.0-beta.1","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.dev","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@8.1.0-beta.1","maintainers":[{"name":"ivannk","email":"ivanK@kentico.com"},{"name":"simply007","email":"chrastina.ondra@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"},{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"honzabarton","email":"janb@kentico.com"},{"name":"hom3r","email":"beran3@gmail.com"},{"name":"martins1","email":"martins@kentico.com"},{"name":"xperience-npmjs-publisher","email":"NPMJS-pkg-publish@kenticosoftware.onmicrosoft.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"4c7e6c6ba09845ee299f72f1b30b784cc0e8f78e","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-8.1.0-beta.1.tgz","fileCount":11,"integrity":"sha512-unmN7Vi5Q7/LD9+Iz47QO1pMpvqjiRAAVLd3jiihYXTAAb/zB1z5Rs5gnxAlnUo4Ao3/5Pj3OQmLOCoFITeVvA==","signatures":[{"sig":"MEQCIHN3gLZGc2WPdGrGI+YrQ09wETZ2dhjsw3eHCLMOCG60AiA7/7zL9GnSg+pUAtKuaQknGXGrPgL7Nvsj4epACZoWSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20914,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiuscuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpahAAlXyOkYuctfynbme/M9oFd535VAiWII/QIskXzUbjWpPr6z5a\r\n9a6OB/bUxY4TMDYizUrDYvoe1xkBeN3m0zMyCtEoa5f+ISfPsbWxDYJZiCbg\r\nv8v9wJIEPLj6q9P39/TsdE5bw/YoKOMJYohwiUFdvB34M6eisJ1gnV+Rv1mf\r\nJcFpMC+9HjYB3s5I7ziFpRdQ4E8+rqdvc2t4XXKcK53475HhyzbouFvhTwZ5\r\nave3jG6u5fnIwiDQsDp95isyEAaXMpvs9c1LQZhlz3rxdY3OOt5HS+x3sRAM\r\ndgKLZpsBc37meDnS7D6UJJms18izuH3Rn1iBn81oKzsRxAdoUngBQdcvonPV\r\n2IhdR+qlNvgp3ywrZ6snrWLCOjtTmRcFGcRf5ayzDzaXoi7XdFNBaAwSXqeW\r\na+zkYo7Bl2JHQOFVU7Phv4AU/lvmgVgSQY9a0dUVJUnLI6Ei9T9QT0udo5l/\r\nhF9XqopJMy44cvZZ6p/1plKu5l6PJ9B0g+YnXhDybp4PqICedXQyjHK/yBnK\r\nysWU9dLBJU++GO/U9EgmWkoAMCdMEjfqPLa24JGis7qvYl+7XqEoH08hAATv\r\nOUO6p1q09CZTwm7hVb7F8j3skc9VwVouG8JyfZO6dz/o0S/qGEmsQfd3FRWK\r\nyOz8LCFHvoHmxfa/po95OINItyAw4I9TvTM=\r\n=8YP5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","readme":"# Gatsby Kontent Components\r\n\r\n[![Gatsby plugin library](https://img.shields.io/badge/Gatsby%20plugin%20library-%23663399.svg)](https://www.gatsbyjs.org/packages/@kentico/gatsby-kontent-components)\r\n[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kentico-kontent)\r\n\r\n[![npm version](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components.svg)](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components)\r\n[![npm](https://img.shields.io/npm/dt/%40kentico%2Fgatsby-kontent-components.svg)](https://www.npmjs.com/package/@kentico/gatsby-kontent-components)\r\n\r\nThe package containing React components useful when processing Kontent data to the site.\r\n\r\n> To see the progress of the Gatsby v4 supported packages - [check out this pull request](https://github.com/Kentico/kontent-gatsby-packages/pull/195).\r\n\r\n## Install\r\n\r\n```sh\r\nnpm install @kentico/gatsby-kontent-components gatsby-plugin-image\r\n```\r\n\r\nAlso, add `gatsby-plugin-image` to `plugins` array in `gatsby-config.js`.\r\n\r\n### Typescript\r\n\r\nComponents exports their typescript definitions so that you know what data format you need to provide via props and what data format expect from function prop callback arguments.\r\n\r\n## Image element component\r\n\r\nImages from Kontent can be displayed using the `ImageElement` component. This wraps the `GatsbyImage` component from [gatsby-plugin-image](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/), so ensure that you also install that plugin. This component will give the best experience for your users, as it includes responsive srcset, blur-up, lazy loading and many other performance optimizations. [Automatic format optimization](https://docs.kontent.ai/reference/image-transformation#a-automatic-format-selection) is always enabled. In many cases it can improve Lighthouse scores by 10-20 points.\r\n\r\nThe component takes all [the `GatsbyImage` props](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#gatsbyimage), as well as the following properties. All are optional except `image`:\r\n\r\n- `image`: the `image` object. This should include `url`, `width` and `height`.\r\n- `layout`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#layout)\r\n- `width`/`height`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#widthheight)\r\n- `aspectRatio`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#aspectratio)\r\n- `backgroundColor`: displayed as a placeholder while the image loads\r\n- `options: ImageOptions`: an object containing options passed to [the Kontent Image Transformation API](https://docs.kontent.ai/reference/image-transformation). Supported options: `fit`, `quality`, `lossless`.\r\n\r\n ```ts\r\n interface ImageOptions {\r\n fit?: 'crop' | 'clip' | 'scale';\r\n quality?: number;\r\n lossless?: boolean;\r\n }\r\n ```\r\n\r\nProperties of the image object (e.g. `width` and `height`) are reflected in Kontent's image API query.\r\nProps of the `ImageElement` component (e.g. `width` and `height`) are reflected in the rendered DOM.\r\nIf the optional props of `ImageElement` are omitted, the properties of the image object are applied.\r\n\r\n> You can find a showcase in the [author.js](../../site/src/pages/author.js) on the development site.\r\n\r\n```jsx\r\nimport React from 'react';\r\nimport { ImageElement } from '@kentico/gatsby-kontent-components';\r\nimport { graphql } from 'gatsby';\r\n\r\nexport default Page = ({ data }) => {\r\n const avatar = data.author.elements.avatar_image.value[0];\r\n\r\n return (\r\n \r\n );\r\n};\r\nexport const query = graphql`\r\n {\r\n author: kontentItemAuthor {\r\n elements {\r\n avatar_image {\r\n value {\r\n url\r\n description\r\n }\r\n }\r\n }\r\n }\r\n }\r\n`;\r\n```\r\n\r\n### getGatsbyImageData\r\n\r\nIn case you need image data for GatsbyImage component, you can use an exported function `getGatsbyImageData`.\r\n \r\n> Showcase can be found in [article.js](../../site/src/pages/article.js) in the development site.\r\n\r\n```ts\r\n const imageData = getGatsbyImageData({\r\n image: avatar, \r\n width: 800,\r\n height: 200,\r\n backgroundColor:\"#bbbbbb\"\r\n })\r\n```\r\n\r\n## Rich text element component\r\n\r\nRich text elements from Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\r\n\r\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\r\n\r\n```jsx\r\nimport {\r\n RichTextElement,\r\n ImageElement,\r\n} from '@kentico/gatsby-kontent-components';\r\n\r\n// ...\r\n\r\n {\r\n return (\r\n \r\n );\r\n }}\r\n resolveLink={(link, domNode) => {\r\n const parentItemType = contextData.type; // It is possible to use external data for resolution\r\n return (\r\n \r\n {domNode.children[0].data}\r\n \r\n );\r\n }}\r\n resolveLinkedItem={(linkedItem, domNode) => {\r\n const isComponent = domNode.attribs['data-rel'] === 'component';\r\n const isLinkedItem = domNode.attribs['data-rel'] === 'link';\r\n return (\r\n <>\r\n {isComponent &&

Component

}\r\n {isLinkedItem &&

Linked item

}\r\n 
{JSON.stringify(linkedItem, undefined, 2)}
\r\n \r\n );\r\n }}\r\n resolveDomNode={(domNode, domToReact) => {\r\n if (domNode.name === 'table') {\r\n // For options - check https://www.npmjs.com/package/html-react-parser#options\r\n return
{domToReact([domNode])}
;\r\n }\r\n }}\r\n/>;\r\n```\r\n\r\n### Resolution scope\r\n\r\nIf you don't need to resolve anything, you could just provide `value` property.\r\n\r\n#### Images\r\n\r\nIf you want to resolve images pass `images` and `resolveImage` properties.\r\n\r\n- `images` **have to contain at least `image_id` property**\r\n- `resolveImage` has one parameter `image` usually containing one record from `images` array\r\n- when resolving images in Rich text element using [Image element component](#image-element-component), `image` object must follow data contract defined in [Image element component](#image-element-component) section. Moreover, for correct resolution, the additional `image_id` identifier of the image is mandatory, as well.\r\n\r\n#### Links to content items\r\n\r\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\r\n\r\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\r\n\r\n- `links` **have to contain at least `link_id` property**\r\n- `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\r\n\r\n#### Content components and Linked content items\r\n\r\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\r\n\r\n- `linkedItems` **have to contain at least `system.codename` property**\r\n- `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\r\n\r\n#### Custom resolution for any other dom node\r\n\r\nThe general resolution method `resolveDomNode` is called for every DOM node, except for ones that are resolved specifically (described above). In the example above, all table elements will be wrapped with the `div` element. You could also return just a JSX if you want to replace the `domNode` completely.\r\n\r\nIf you want to resolve elements via `resolveDomNode`, you get the following parameters:\r\n\r\n- `domNode` - DOM node from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser)\r\n- `domToReact` - method from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser) to be able to extend the actual `domNode` as on the example\r\n","engines":{"node":">=14.15.0"},"gitHead":"85dc932dfb0475fff19c90243a5940cae2926364","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"ivannk","email":"ivanK@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.0+x64 (win32)","description":"Source plugin providing Kontent data from REST Delivery API","directories":{},"_nodeVersion":"16.13.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","eslint-plugin-react":"^7.27.1","gatsby-plugin-image":"^2.0.0","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","gatsby-plugin-image":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_8.1.0-beta.1_1656407854184_0.5836245113943654","host":"s3://npm-registry-packages"}},"8.1.0":{"name":"@kentico/gatsby-kontent-components","version":"8.1.0","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"author":{"url":"https://ondrej.chrastina.dev","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","_id":"@kentico/gatsby-kontent-components@8.1.0","maintainers":[{"name":"ivannk","email":"ivanK@kentico.com"},{"name":"simply007","email":"chrastina.ondra@gmail.com"},{"name":"enngage","email":"ennspassion@gmail.com"},{"name":"janck","email":"janc@kentico.com"},{"name":"kentico_tomasw","email":"tomasw@kentico.com"},{"name":"jirik","email":"jirik@kentico.com"},{"name":"vladislavb-kentico","email":"vladislavb@kentico.com"},{"name":"xp-peterp","email":"peterp@kentico.com"},{"name":"honzabarton","email":"janb@kentico.com"},{"name":"hom3r","email":"beran3@gmail.com"},{"name":"martins1","email":"martins@kentico.com"},{"name":"xperience-npmjs-publisher","email":"NPMJS-pkg-publish@kenticosoftware.onmicrosoft.com"}],"homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"dist":{"shasum":"d828176569e78c9e6ac2bfd6739e6cd204454495","tarball":"https://registry.npmjs.org/@kentico/gatsby-kontent-components/-/gatsby-kontent-components-8.1.0.tgz","fileCount":11,"integrity":"sha512-lclWFN3G3YQjSFW99mp2tnNoOtNnQpl6VP+B3gzeJc3G62+DuP8LnEAEbShW6FSQmvhkNXCnTZqkNwV6DIJS3g==","signatures":[{"sig":"MEYCIQD44waAyWqzAUy/p8/RhqwdJmWfSZ1Z0jCsTz8QmFID9AIhAOycRQtr3Bj8/FG4/XNSBJ4pWUxtLk1pvOfrsXArE3D1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":20907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiuvYRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPsQ/+MCVwBRMmlXLNc8RB3zY2ArgEu5cmycbdMP6wafq89WeYKcXO\r\nPI105hsofas37X6Xy3f8XAF9rEgNRZ0F0uQ73sNsNfKFqziq6VSa1+Ywp0l7\r\nh6F4ukpNnUAdOm8JsMoKFhmVQV2wiHAbt0KYX+YJmiylJdp0VgE9Qf7UqTvg\r\nZBPQWeowSuGWiDC6hTHGG00yP2emz+TvKtTMsXa2mpEp0BluNyaH+0Mu8u2E\r\n+VLaATaOsOVtEysXfnjOrRaSp5iTNBYE76sRi5cfhk9Lv0OZj+TYSZNpTeqc\r\nRN1HqKWq3npOo+djjEU+J/v6N0I4r+r+z/+a4dOukzBZSiPiN7mYLNQzw1D/\r\nO/XRRJO1W1hx/mrio4cxoF5z4y5vqpNLTKcP2RmzyJvL1K4UlT5lLWiVi6WH\r\nHZlgM+DKW+wvvaF8Mmlb/vNa3HrL9qrhNXNU4TMgJ9iJjBdwiwd51segGUXf\r\nNYRo34d14MDedYBx5aZkAemDErM9ny8XM7uenQhbn+LHxIuAdskqq1hBL5Ow\r\nwkuj34rKXZzmzd21l79ElC7Tc4OZRv3vfnMWXjryXc/Si2VCfj2poDzgaQj7\r\n+unH7KVVkgLIeRlQOFLC39iiJPl6Uzvzns3pHN9pd6/5DSW5xWVGSQ10MvX/\r\nYub2XvfB3wyc502PMo1mOcshNu+KTfdDzFU=\r\n=YjZM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","engines":{"node":">=14.15.0"},"gitHead":"0032c6d1695cdb47111cc0f7381655a05b943eaa","scripts":{"lint":"eslint **/*.{ts,tsx}","test":"jest --passWithNoTests","build":"tsc","watch":"tsc -w","format":"prettier --write \"**/*.{ts,tsx}\""},"_npmUser":{"name":"ivannk","email":"ivanK@kentico.com"},"deprecated":"Package has been renamed to @kontent-ai/gatsby-components. Please update your code to use the latest version","repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"_npmVersion":"lerna/3.22.1/node@v16.13.0+x64 (win32)","description":"Source plugin providing Kontent data from REST Delivery API","directories":{},"_nodeVersion":"16.13.0","dependencies":{"html-react-parser":"^0.14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^24.9.0","react":"^17.0.1","eslint":"6.8.0","ts-jest":"^24.3.0","prettier":"1.19.1","react-dom":"^17.0.1","typescript":"^3.7.5","@types/jest":"24.9.0","@types/node":"13.1.8","ttypescript":"^1.5.12","@types/react":"^17.0.2","ts-auto-mock":"^1.5.7","@types/react-dom":"^17.0.1","jest-ts-auto-mock":"^1.0.11","eslint-plugin-react":"^7.27.1","gatsby-plugin-image":"^2.0.0","react-test-renderer":"^17.0.1","@typescript-eslint/parser":"2.16.0","@typescript-eslint/eslint-plugin":"2.16.0"},"peerDependencies":{"react":"^17.0.1","react-dom":"^17.0.1","gatsby-plugin-image":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-kontent-components_8.1.0_1656419857493_0.7702925335561615","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-04-03T14:17:01.415Z","modified":"2026-08-03T11:32:38.393Z","6.0.0-vnext.1":"2020-04-03T14:17:02.063Z","6.0.0-vnext.2":"2020-04-27T06:45:12.254Z","6.0.0-vnext.3":"2020-04-27T09:46:33.682Z","6.0.0-vnext.4":"2020-04-27T12:57:20.911Z","6.0.0-vnext.5":"2020-05-06T10:39:17.861Z","6.0.0-6.0.0-beta.1.0":"2020-05-13T07:24:10.529Z","6.0.0":"2020-05-13T08:09:16.360Z","6.1.0-beta.0":"2020-09-29T09:30:14.981Z","6.2.0":"2020-10-13T07:35:58.550Z","6.3.2-alpha.1":"2021-03-03T08:36:27.605Z","6.3.2-alpha.2":"2021-03-04T14:23:37.296Z","6.3.3":"2021-03-18T15:23:28.185Z","7.0.0-beta.0":"2021-03-18T15:53:41.763Z","6.3.5":"2021-03-19T11:53:47.822Z","7.0.0-beta.1":"2021-04-27T13:42:11.673Z","7.0.0":"2021-05-05T11:56:58.222Z","7.1.0-alpha.0":"2021-07-13T14:52:04.362Z","7.2.0-beta.0":"2021-08-03T14:29:22.592Z","7.0.1-types.0":"2021-08-04T08:21:21.833Z","7.2.0":"2021-08-17T07:53:04.673Z","8.0.0-beta.0":"2021-10-22T12:16:43.798Z","8.0.0-beta.1":"2021-10-25T13:25:53.664Z","8.0.0-beta.2":"2021-11-22T07:05:59.712Z","8.0.0":"2022-02-10T13:51:57.523Z","8.1.0-beta.1":"2022-06-28T09:17:34.364Z","8.1.0":"2022-06-28T12:37:37.673Z"},"bugs":{"url":"https://github.com/Kentico/kontent-gatsby-packages/issues"},"author":{"url":"https://ondrej.chrastina.dev","name":"Ondřej Chrastina","email":"chrastina.ondra@gmail.com"},"license":"MIT","homepage":"https://github.com/Kentico/kontent-gatsby-packages/tree/master/packages/gatsby-kontent-components#readme","keywords":["kontent","react","gatsby","react-component","gatsby-component"],"repository":{"url":"git+https://github.com/Kentico/kontent-gatsby-packages.git","type":"git"},"description":"Source plugin providing Kontent data from REST Delivery API","maintainers":[{"email":"filips@kentico.com","name":"filipsnt"},{"email":"peterb@kentico.com","name":"peterbaltaz"},{"email":"danielsed@seznam.cz","name":"danys198"},{"email":"radek.petruska@hotmail.cz","name":"radek.petruska"}],"readme":"# Gatsby Kontent Components\r\n\r\n[![Gatsby plugin library](https://img.shields.io/badge/Gatsby%20plugin%20library-%23663399.svg)](https://www.gatsbyjs.org/packages/@kentico/gatsby-kontent-components)\r\n[![Stack Overflow](https://img.shields.io/badge/Stack%20Overflow-ASK%20NOW-FE7A16.svg?logo=stackoverflow&logoColor=white)](https://stackoverflow.com/tags/kentico-kontent)\r\n\r\n[![npm version](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components.svg)](https://badge.fury.io/js/%40kentico%2Fgatsby-kontent-components)\r\n[![npm](https://img.shields.io/npm/dt/%40kentico%2Fgatsby-kontent-components.svg)](https://www.npmjs.com/package/@kentico/gatsby-kontent-components)\r\n\r\nThe package containing React components useful when processing Kontent data to the site.\r\n\r\n> To see the progress of the Gatsby v4 supported packages - [check out this pull request](https://github.com/Kentico/kontent-gatsby-packages/pull/195).\r\n\r\n## Install\r\n\r\n```sh\r\nnpm install @kentico/gatsby-kontent-components gatsby-plugin-image\r\n```\r\n\r\nAlso, add `gatsby-plugin-image` to `plugins` array in `gatsby-config.js`.\r\n\r\n### Typescript\r\n\r\nComponents exports their typescript definitions so that you know what data format you need to provide via props and what data format expect from function prop callback arguments.\r\n\r\n## Image element component\r\n\r\nImages from Kontent can be displayed using the `ImageElement` component. This wraps the `GatsbyImage` component from [gatsby-plugin-image](https://www.gatsbyjs.com/docs/how-to/images-and-media/using-gatsby-plugin-image/), so ensure that you also install that plugin. This component will give the best experience for your users, as it includes responsive srcset, blur-up, lazy loading and many other performance optimizations. [Automatic format optimization](https://docs.kontent.ai/reference/image-transformation#a-automatic-format-selection) is always enabled. In many cases it can improve Lighthouse scores by 10-20 points.\r\n\r\nThe component takes all [the `GatsbyImage` props](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#gatsbyimage), as well as the following properties. All are optional except `image`:\r\n\r\n- `image`: the `image` object. This should include `url`, `width` and `height`.\r\n- `layout`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#layout)\r\n- `width`/`height`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#widthheight)\r\n- `aspectRatio`: see [the `gatsby-plugin-image` docs](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image#aspectratio)\r\n- `backgroundColor`: displayed as a placeholder while the image loads\r\n- `options: ImageOptions`: an object containing options passed to [the Kontent Image Transformation API](https://docs.kontent.ai/reference/image-transformation). Supported options: `fit`, `quality`, `lossless`.\r\n\r\n ```ts\r\n interface ImageOptions {\r\n fit?: 'crop' | 'clip' | 'scale';\r\n quality?: number;\r\n lossless?: boolean;\r\n }\r\n ```\r\n\r\nProperties of the image object (e.g. `width` and `height`) are reflected in Kontent's image API query.\r\nProps of the `ImageElement` component (e.g. `width` and `height`) are reflected in the rendered DOM.\r\nIf the optional props of `ImageElement` are omitted, the properties of the image object are applied.\r\n\r\n> You can find a showcase in the [author.js](../../site/src/pages/author.js) on the development site.\r\n\r\n```jsx\r\nimport React from 'react';\r\nimport { ImageElement } from '@kentico/gatsby-kontent-components';\r\nimport { graphql } from 'gatsby';\r\n\r\nexport default Page = ({ data }) => {\r\n const avatar = data.author.elements.avatar_image.value[0];\r\n\r\n return (\r\n \r\n );\r\n};\r\nexport const query = graphql`\r\n {\r\n author: kontentItemAuthor {\r\n elements {\r\n avatar_image {\r\n value {\r\n url\r\n description\r\n }\r\n }\r\n }\r\n }\r\n }\r\n`;\r\n```\r\n\r\n### getGatsbyImageData\r\n\r\nIn case you need image data for GatsbyImage component, you can use an exported function `getGatsbyImageData`.\r\n \r\n> Showcase can be found in [article.js](../../site/src/pages/article.js) in the development site.\r\n\r\n```ts\r\n const imageData = getGatsbyImageData({\r\n image: avatar, \r\n width: 800,\r\n height: 200,\r\n backgroundColor:\"#bbbbbb\"\r\n })\r\n```\r\n\r\n## Rich text element component\r\n\r\nRich text elements from Kontent could be resolved to React components using \"html-react-parser\" as described in [this article](https://rshackleton.co.uk/articles/rendering-kentico-cloud-linked-content-items-with-react-components-in-gatsby).\r\n\r\nThis package should make the usage easier. Basically by loading the rich text data and use these components to provide this data and resolution functions.\r\n\r\n```jsx\r\nimport {\r\n RichTextElement,\r\n ImageElement,\r\n} from '@kentico/gatsby-kontent-components';\r\n\r\n// ...\r\n\r\n {\r\n return (\r\n \r\n );\r\n }}\r\n resolveLink={(link, domNode) => {\r\n const parentItemType = contextData.type; // It is possible to use external data for resolution\r\n return (\r\n \r\n {domNode.children[0].data}\r\n \r\n );\r\n }}\r\n resolveLinkedItem={(linkedItem, domNode) => {\r\n const isComponent = domNode.attribs['data-rel'] === 'component';\r\n const isLinkedItem = domNode.attribs['data-rel'] === 'link';\r\n return (\r\n <>\r\n {isComponent &&

Component

}\r\n {isLinkedItem &&

Linked item

}\r\n 
{JSON.stringify(linkedItem, undefined, 2)}
\r\n \r\n );\r\n }}\r\n resolveDomNode={(domNode, domToReact) => {\r\n if (domNode.name === 'table') {\r\n // For options - check https://www.npmjs.com/package/html-react-parser#options\r\n return
{domToReact([domNode])}
;\r\n }\r\n }}\r\n/>;\r\n```\r\n\r\n### Resolution scope\r\n\r\nIf you don't need to resolve anything, you could just provide `value` property.\r\n\r\n#### Images\r\n\r\nIf you want to resolve images pass `images` and `resolveImage` properties.\r\n\r\n- `images` **have to contain at least `image_id` property**\r\n- `resolveImage` has one parameter `image` usually containing one record from `images` array\r\n- when resolving images in Rich text element using [Image element component](#image-element-component), `image` object must follow data contract defined in [Image element component](#image-element-component) section. Moreover, for correct resolution, the additional `image_id` identifier of the image is mandatory, as well.\r\n\r\n#### Links to content items\r\n\r\nIf you want to resolve links to other content items pass `links` and `resolveLink` properties.\r\n\r\n> All other links (web URL, email, asset link) are not resolved. If you could use this functionality, please submit a feature request.\r\n\r\n- `links` **have to contain at least `link_id` property**\r\n- `resolveLink` has two parameter `link` basically containing one record from `links` array and `domNode` dome link element that could be used for i.e. getting the inner text of the current link `domNode.children[0].data`.\r\n\r\n#### Content components and Linked content items\r\n\r\nIf you want to resolve images pass `linkedItems` and `resolveLinkedItem` properties.\r\n\r\n- `linkedItems` **have to contain at least `system.codename` property**\r\n- `resolveLinkedItem` has one parameter `linkedItem` basically containing one record from `linkedItems` array\r\n\r\n#### Custom resolution for any other dom node\r\n\r\nThe general resolution method `resolveDomNode` is called for every DOM node, except for ones that are resolved specifically (described above). In the example above, all table elements will be wrapped with the `div` element. You could also return just a JSX if you want to replace the `domNode` completely.\r\n\r\nIf you want to resolve elements via `resolveDomNode`, you get the following parameters:\r\n\r\n- `domNode` - DOM node from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser)\r\n- `domToReact` - method from [`html-react-parser`](https://www.npmjs.com/package/html-react-parser) to be able to extend the actual `domNode` as on the example\r\n","readmeFilename":"README.md"}