{"_id":"@bentoproject/instagram","_rev":"217-469e0e4339ea38b394f82aefa5f2d2a0","name":"@bentoproject/instagram","dist-tags":{"nightly":"1.2302271541.0","latest":"1.2302271541.0"},"versions":{"1.2110261518.0":{"name":"@bentoproject/instagram","version":"1.2110261518.0","description":"AMP HTML amp-instagram Component","author":{"name":"The AMP HTML Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"e4bbe5c706c18a2c817265b40388ca4d4771613a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2110261518.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-JCefljf7HJoNS64SE930QED/2tvPGYf5UNL+eh6s+mo6J6NDJmOP1QBsXu7DD5y8NLXijB0FDaybwdQFUacxnA==","shasum":"52f4698b80c5d8c107a780a9f452922d03e75074","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2110261518.0.tgz","fileCount":27,"unpackedSize":1974765,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbbO3vJgTPlPWKa3fLjteDHiBcs2kizZXdduDcVyBfMQIhAMaDG4QR1OgGvtYMHsB8UmgoHCusaBRsbE9QU/mvxFr7"}]},"_npmUser":{"name":"ampprojectbot","email":"bot@amp.dev"},"directories":{},"maintainers":[{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2110261518.0_1635445009627_0.5730434803613149"},"_hasShrinkwrap":false},"1.2110252343.0":{"name":"@bentoproject/instagram","version":"1.2110252343.0","description":"Bento instagram Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nThe Bento Instagram component allows you embed an Instagram post.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-instagram>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n  ></script>\n  <style>\n    bento-instagram {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n</head>\n<body>\n  <bento-instagram\n    id=\"my-instagram\"\n    data-shortcode=\"CKXYAzuj7TE\"\n    data-captioned\n  >\n  </bento-instagram>\n  <button id=\"change-shortcode\">Change shortcode</button>\n\n  <script>\n    (async () => {\n      const instagram = document.querySelector('#my-instagram');\n      await customElements.whenDefined('bento-instagram');\n\n      // set up button actions\n      document.querySelector('#change-shortcode').onclick = () => {\n        instagram.dataset.shortcode = '1totVhIFXl';\n      };\n    })();\n  </script>\n</body>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n#### Attributes\n\n##### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n##### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoInstagram>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Props\n\n##### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n##### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"57e62ecc0e24bc2cd64467dba9d0f9836eea0182","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2110252343.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-fLrEPs+AYuhEoDZnogdX/ooFfpK/sIs0jucwrJoAjSmUfYdNNTcMtOYLEX7Ayi02QqW0Lt9S6r7s2yQeaT0X+Q==","shasum":"fa04f204cd2c69b354858d4dede20dca3028f0ad","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2110252343.0.tgz","fileCount":27,"unpackedSize":1974751,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIATii76dw72OmZQM0LA3PImBSgFd9yoFbVQEOgtnENGXAiEAq8FsyViSywhfeU71bSWY0VVB2XREgsOTVezgB819wuQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2110252343.0_1635457658967_0.8607336919179347"},"_hasShrinkwrap":false},"1.2110281959.0":{"name":"@bentoproject/instagram","version":"1.2110281959.0","description":"Bento instagram Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nThe Bento Instagram component allows you embed an Instagram post.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-instagram>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n  ></script>\n  <style>\n    bento-instagram {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n</head>\n<body>\n  <bento-instagram\n    id=\"my-instagram\"\n    data-shortcode=\"CKXYAzuj7TE\"\n    data-captioned\n  >\n  </bento-instagram>\n  <button id=\"change-shortcode\">Change shortcode</button>\n\n  <script>\n    (async () => {\n      const instagram = document.querySelector('#my-instagram');\n      await customElements.whenDefined('bento-instagram');\n\n      // set up button actions\n      document.querySelector('#change-shortcode').onclick = () => {\n        instagram.dataset.shortcode = '1totVhIFXl';\n      };\n    })();\n  </script>\n</body>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n#### Attributes\n\n##### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n##### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoInstagram>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Props\n\n##### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n##### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"55fa3e004e2aeece5faf9a68717228077c215a13","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2110281959.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-MY0LZClmzBmKLCqqc30yNShkrs3mM+9t9+jlV6p/FUmiC/3sqqqQtdBvRgcG7T+YpWZw68Vv9ImufGJAjPwcbg==","shasum":"b1b132e2225a75bdad0951b8be7c51fb529ce9bc","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2110281959.0.tgz","fileCount":27,"unpackedSize":1974751,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICUEuOx0hfxtRozE7Brk/Np52GszGCIB8Gwo/6DPbf9yAiEAqRYoMcR87UyeC3rRWDH+LY/I/0Zg9JmhO4Tzylm/HAs="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2110281959.0_1635508343212_0.47473170250505237"},"_hasShrinkwrap":false},"1.2110290545.0":{"name":"@bentoproject/instagram","version":"1.2110290545.0","description":"Bento instagram Component","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":"./web-component","./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nThe Bento Instagram component allows you embed an Instagram post.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-instagram>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n  ></script>\n  <style>\n    bento-instagram {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n</head>\n<body>\n  <bento-instagram\n    id=\"my-instagram\"\n    data-shortcode=\"CKXYAzuj7TE\"\n    data-captioned\n    style=\"height: 800px; width: 400px;\"\n  >\n  </bento-instagram>\n  <button id=\"change-shortcode\">Change shortcode</button>\n\n  <script>\n    (async () => {\n      const instagram = document.querySelector('#my-instagram');\n      await customElements.whenDefined('bento-instagram');\n\n      // set up button actions\n      document.querySelector('#change-shortcode').onclick = () => {\n        instagram.dataset.shortcode = '1totVhIFXl';\n      };\n    })();\n  </script>\n</body>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n#### Attributes\n\n##### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n##### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoInstagram>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Props\n\n##### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n##### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"1cc07336e186d25fc5fbfb2e8f7e12c4a5c79fe9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2110290545.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-zwVHkiOQiyn9S0j4HSNMo/kcGWCTueL8iR0E6+x9J0mH7qWCqu1w2CwH0vW1YS1CL6MhdodF1Vh/tzYlzpldyw==","shasum":"9ea79f67eadb2aefa966dda4594b771a828eb32d","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2110290545.0.tgz","fileCount":27,"unpackedSize":1974792,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBE28zap0m/bSRa19aj57DDSJVGOr1NI00Q1GnmWa49JAiAdVXZwTkwzZAwMoa+gcOO9X9zxfQXhrjXK51lb7MRyjg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"ampprojectbot","email":"bot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2110290545.0_1635592870546_0.47021969106162564"},"_hasShrinkwrap":false},"1.2111011823.0":{"name":"@bentoproject/instagram","version":"1.2111011823.0","description":"The Bento Instagram component allows you embed an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nThe Bento Instagram component allows you embed an Instagram post.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-instagram>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n  ></script>\n  <style>\n    bento-instagram {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n</head>\n<body>\n  <bento-instagram\n    id=\"my-instagram\"\n    data-shortcode=\"CKXYAzuj7TE\"\n    data-captioned\n    style=\"height: 800px; width: 400px;\"\n  >\n  </bento-instagram>\n  <button id=\"change-shortcode\">Change shortcode</button>\n\n  <script>\n    (async () => {\n      const instagram = document.querySelector('#my-instagram');\n      await customElements.whenDefined('bento-instagram');\n\n      // set up button actions\n      document.querySelector('#change-shortcode').onclick = () => {\n        instagram.dataset.shortcode = '1totVhIFXl';\n      };\n    })();\n  </script>\n</body>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n#### Attributes\n\n##### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n##### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoInstagram>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Props\n\n##### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n##### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"7bd4192edeb4ded8e78291b094118653b1a78939","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2111011823.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-SkfAuiX/8sMcwi4btDp162y9Nqf/OSlBnYZ5Sqz8XF5wEi1vaX2+v5XSff7bKPwVEYGQmVuaViS+9sFOObf4Wg==","shasum":"5a3d1da005f84c3b728ccde6f8923f5008697f89","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2111011823.0.tgz","fileCount":27,"unpackedSize":1974915,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPYHSWt47C658tbzZ+JsVHgUCuMVFQc897yDM72f6+6wIgZX3T0GrKGX+Fc8nG3I9Y5H78eeapSZjIE0ACt4PPmqI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2111011823.0_1635852276597_0.8786992787178451"},"_hasShrinkwrap":false},"1.2110152252.3":{"name":"@bentoproject/instagram","version":"1.2110152252.3","description":"The Bento Instagram component allows you embed an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2110152252.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-3TiWlB+D52mVCugASTWDB6CGJp9mC9CYtjf7mKtqhn82MaUOx1Z9f/A7J848zpZ1z66y7aDplVv6iQ6PI3bLZg==","shasum":"fafc7f09b15b1eaf6de33fd894b1faf9e2c837ed","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2110152252.3.tgz","fileCount":27,"unpackedSize":1974915,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEjCI0r8fXsBc2ZR6HwFp8MyYGOEXQM87vmPvqSh4IMDAiAM4WwAukpsL7Ih49ZMWKfDPmeQ1yAcoVQ+e71Yvqm9YA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2110152252.3_1635890635743_0.9750343296084663"},"_hasShrinkwrap":false},"1.2110212130.2":{"name":"@bentoproject/instagram","version":"1.2110212130.2","description":"The Bento Instagram component allows you embed an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2110212130.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-cU3T7JMtAYBwkiQEqM+Hyfc8PfpCXZeqnZgZJqIv9TwNcHAbuC8CU4J0xhqpBo7W1TzMQHSXIY28mzPQdxL2+w==","shasum":"16e98ae759e75ab57e6017f24c94d078abd0de87","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2110212130.2.tgz","fileCount":27,"unpackedSize":1974915,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB8ixANXeKffCCXG4I8HmhWUion9f+VUomupxZWLBq6xAiB0tHfLSpGLvQ9DCh6ACn9uDSQhQQB4lD1M4fJWjbBoVQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2110212130.2_1635891251109_0.15123030344979882"},"_hasShrinkwrap":false},"1.2111022043.0":{"name":"@bentoproject/instagram","version":"1.2111022043.0","description":"The Bento Instagram component allows you embed an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nThe Bento Instagram component allows you embed an Instagram post.\n\n## Usage\n\n### Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-instagram>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n  ></script>\n  <style>\n    bento-instagram {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n</head>\n<body>\n  <bento-instagram\n    id=\"my-instagram\"\n    data-shortcode=\"CKXYAzuj7TE\"\n    data-captioned\n    style=\"height: 800px; width: 400px;\"\n  >\n  </bento-instagram>\n  <button id=\"change-shortcode\">Change shortcode</button>\n\n  <script>\n    (async () => {\n      const instagram = document.querySelector('#my-instagram');\n      await customElements.whenDefined('bento-instagram');\n\n      // set up button actions\n      document.querySelector('#change-shortcode').onclick = () => {\n        instagram.dataset.shortcode = '1totVhIFXl';\n      };\n    })();\n  </script>\n</body>\n```\n\n#### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n#### Attributes\n\n##### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n##### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n### Preact/React Component\n\nThe examples below demonstrates use of the `<BentoInstagram>` as a functional component usable with the Preact or React libraries.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Props\n\n##### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n##### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"f4d548031e8e20aaea8ade649d3394d56518b769","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2111022043.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-a6T2idVesKrs1QBnuYKCFIQh+RK+G1yx4jy6S5gEQ2iiUqwPJ/isMpx7yTIQJDy597+kEkFce2gv8wt0DNO4+A==","shasum":"be77f2cb234211ded18164d9301303b89e762252","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2111022043.0.tgz","fileCount":27,"unpackedSize":1974915,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGi2GDlQW/gL2ss5Y4XWWv7v5PhJJLhmABQRlih6pB8JAiEA/kFXU/EfSbjIDY0xU4fWP/5lxNZ2hCElAN3VmvDy8v8="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2111022043.0_1635938459725_0.5476663931258043"},"_hasShrinkwrap":false},"1.2111180040.0":{"name":"@bentoproject/instagram","version":"1.2111180040.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Example: Include via `<script>`\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2111180040.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-7oW3iGWuGOHdiXbWMdF6vT/LW3dRN4OIb0z76m8117hNNU0Fc5z+Zeysa7N/DMx41BCFW6AFp8C8gj8QjNU3Gw==","shasum":"aa3b46dd30b4e7d9ddd2dfd82dc33abe258b119e","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2111180040.0.tgz","fileCount":27,"unpackedSize":1841707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsWLCRA9TVsSAnZWagAALYYP/1zxAtKFQjkTqKwbcTTL\nvM3S2bFjpYatUhTG8ZExPMQ9p/ZUsVzd3nf6R94UCVwoDCwARhmHFMdJh9BJ\nGYgMIZRilIEEGVUyfT3gX/CoEJnI9NVlCeUgsjX4LIAU+eswWTlegclIeHbs\n+1iT3A2n9Alm76JJmR7l/JVXS4nxwvpF0UQZ9UHpg389uy094K45arNzGgTN\n8/TMIWsl2puvLGGJ+Otu3zgYY9I0cHqCG+Q+LS4ln5BTZZrfOuKSl7JPoXmn\nikcLI4rVVGVvmLuu4jTowfPlX85smeSROZImQwN7qOB67lNhI840P7lL28K9\n9imjOudEQAUBbqYUIeQ5D3PneC2E3extu5mfDJQhUlmJU8TPJrJiz0l542sc\nrlrE3YOSqW527ydbUEmqsE2LZO/unvvNWMyB0m9YYjWdnHZ0s/7RP58+nd6z\nmAiJuSldyHmr63MLQXNxb5F+olxpyR9mWjYxinp6vA/adlvRhAXCCqeu1ZjD\nVuq3aAbxFzq4vGEkCCLnu44SxzDjeUbKMKk9+Hz/TP1dpaaTZ1GWbovJ7tL1\nqMToQ1p7CTZsZ5+nqgUWjZAZD+nugBiaUSh+bfAL93O2zc/+S1sx2jwcPV+s\n2WN+Cf6gKNHK2GALe0yzMfZW0e64o44jBGmKi+Tuk3OE07nDMsTTAQ9rJ1RN\nwAkm\r\n=SQcX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC369RIdFKbZNy58hX1yGL8y0GrJNABLspz02tP5GngCAiB9hjgWNsWdwe2sHv94dH59yKDq7FofQuqmevC8Lei0KA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2111180040.0_1637270922866_0.654431683255914"},"_hasShrinkwrap":false},"1.2111060251.3":{"name":"@bentoproject/instagram","version":"1.2111060251.3","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2111060251.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-vcIjUmB8roM6jG2Y3N1kSsadGMRZ4G2Ky66pm51OYdH/JpgoxiI9J2YUgFgylPgTU4A5C11aBWj7yuhrOGO85g==","shasum":"d2505789306275c494baf82c2d2f391434e99400","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2111060251.3.tgz","fileCount":27,"unpackedSize":1841707,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsiqCRA9TVsSAnZWagAAoMAP/iI8tEyp4nMh3B9dgjy+\nINHbHiHtyuJcgDUYJ2fBxLC7kTvUyDh8XDJkPilXazSrhIE4954LQqIBOcjL\n11+WtWvjzQJJ7PsvrTrwSopiO4aLBmr9G0V0iIh+tnnGWA7B/SKz0byhbQlv\nk3ww1NFbcIT4GoiVWs6cm6ANK5IaFj8U5zc8EktfjDTVAgIdxBX+bDulkquC\nZMBbACyurA4K0gkG5iKzPsl0l4zCKmNKgyXbZMXjSzNsyUd3YT5nZPc9T50n\nuGDQMEAmewTzb8sqDASOzwILcXU64zjl9vahc8hc/nuurFKOeMlN146Ug+Ri\nlxYU+ovKyU3kc7EiBdikEmFJ4OPzzUZfLCbJvzbIEYb2q5FyqhF43F5NCbfm\nIZ6cM1HIb+qTjf97Kta5LMx1CodWrtPTtFyO0ovJufMV00gjbTF7ubGDPi2t\nSgtV/FmUKxtcsfdINa7fv5gVyMdotiC4u8Mr9rngd0tvLzeB9Jy/IHnUQwka\npjELJFx2CkOF0ggoIFVQ4H3VXiTO2EcB6EA6hkIJTBxDPPT9GIk3EPmRiOPt\nlLwt9wxDEGn5KhZNvGoMX6XQjnotvk+ANN1ID/SMxYuGXKIni0BSV8oHpN4L\nmO+6iZURawPkIuQB+pJABcLviYA/C0VJKj1YOUdTTraEHoT7eB9+TRhlTTjl\nQmv3\r\n=IAG5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDEtK+xPjf5OZUtCrPogaqYvDh7tDTtFCKd/PWn7NLMAIgYL3/zgseMZjWxdiJAq7bx8nwTWxTSB/4uzJMrrZZ+WM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2111060251.3_1637271721779_0.029558306686805036"},"_hasShrinkwrap":false},"1.2111182332.0":{"name":"@bentoproject/instagram","version":"1.2111182332.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"34ebd943d9b16506b7a515b38941fdd8357bd288","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2111182332.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-w+vi6UrseMT+oOkSv0C1V4wWtpLBfo9Lxzz8Izx4JPxSeSVl5OihL+LNjH1FUnpdLacbHvEa1F+Th5j1dIGFAQ==","shasum":"e6d2a1a7c9b2b8166f67e263dd4ec1017b473a00","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2111182332.0.tgz","fileCount":27,"unpackedSize":1854960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl5deCRA9TVsSAnZWagAArx0P+gIqpMtki7PQr4kbfMUg\nQyJKU1U4MmvQXNJqt0Ixo7/Yu4o/E1g5eUCKqe0CZpt7gEv65FkGSJNsMJjL\nEkVAsemgQGSptgqj53nuPTPwDELxgPUPf2YEzrP861XTAkTbmJx8V18+GTLb\nRavsDvBoExtrLx9haxhfjyO+fNJwQpHxQXxSGI+zknQe7W9BXy4PIWjWniW0\nzP6Rx6PN2fTSP9efVIQyjKT6J6ffzJ51/8c/gUMrvYgmvYQtinDieyQAufav\ngWmwXNsXMN6PciZyhp0XKpMtGy4dKr0Hep5JTFEg2O6J6ELkiCXZwVngpnmd\nqBsTLHer4bEAUnEbmvyQR0lKCzbVkkgjK4sywFTtNpJST3o7VKtgG0yRDb5T\nVjOBdVX9WRE2uIY6KJKoGjFs3haRPUSoEXsPoxFiOjyIL/BMEZFy1QtfjYgl\ngDOrqiaHEEfh68U1UI50sJ4Wd1mqxcZs+pIM7H9/EGDF34z2bLarT6pdZ8Is\noU+BzkG4130/xFRuiKnB6DWYxfaxQzylQZr5vqSVy5KWphDp3/zYr3OrXTNC\nLPJmKe7ivxDqyhCRlV2dSEOLJoIsJ8BPhmIcHdBsz/g+5NHT5f22HzAPpdYp\nnAT7x1djgd8qxUayDgepmdRTWbXP1+aUqjRMDj3/Gju3Y06uf48FG6BYlk35\nEUcy\r\n=34vF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAyxCfef6A9STK1y5n4mneO6RhWa0zLy3UZxsPw3kuLwAiB4SIwnkApw+lRt9w1OeW2Ar98xIjiBu99zE439snuazw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2111182332.0_1637324638562_0.11416353409898305"},"_hasShrinkwrap":false},"1.2111060251.9":{"name":"@bentoproject/instagram","version":"1.2111060251.9","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"04e44a3695f8db307eda69f753e10665cfa70fa1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2111060251.9","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-GOCzTtJ9r/rRy7g4WFxDO8KW8xX5UhQS53qufIIfHlt7APtE2jhGcrKIbKF+6h7L/+f+HHtNDyLA7BC3GPqSMw==","shasum":"5a0256ccde65f26103cf6095ad319fc487b1d690","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2111060251.9.tgz","fileCount":27,"unpackedSize":1854960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl9FbCRA9TVsSAnZWagAAlrEP/12w5cD5zW8AWtTwwAAy\nDiHSxNxBCRl22kdpxOiDdeJ26+0v+u1RV4nKJgueo6lAJ5QTuhnTL3GKQaI/\nCd3zpetnACNiMaxKGAiuoEvN25z5dC/dIGJjBEzUttBlz3OqC6yO5KZuxhyB\nNi4zC+jkcSa8wpsCTUQpQIihqKM0ZuVmMAL7zr2wO4RCe4IK9DkfgwPzDcGc\nAQ2zZnprHCRvrYTTOKwmKVTT1d7zaPzCTB1HFkMvIDyNoZ/DzzDMD0cySrMS\n+D2O6Z9Ek6sXvgzO5p3QSZC8/GlxZ011UZ2avjGn9XwYVbxRGth9mIHIqqqp\nsy0sP/lo0KDw6J2VEE5g7ZXvAfwjIggmJgYuJqJl2bOff3UZqFTn3/Ldi/Dn\nVYHHnkqITfu7gmvUJpYulvpG1+eN7/tMbLbWMjKu9qYS+kVXMIRVTg7p6iZg\ndI+FkwsfITW5s9vOMcK2ToCFh7NgVKtUgS39N40VQgGGpGDjXPBugS1aDO6X\nnyX10aqnH4JZ463Q2nlqaREUa6//0ZtUEzFtAkC46jEbspPA2yoqHgchypDI\nz+Xw9cVSRgjkoH8u2hBh3/QxxjmNo0KoX33f5c5lYce0Z3NBkgXERb2RnpF4\nQcLMi+ywG+nLd7GLoWJqtIaA/hqBbnr40hPR/UQz9vMePBb6V1l8eAehscUG\nXjPW\r\n=hmqd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDr1825Ky01eEk6HDmGOiFDofnhwQMGrGEHz0YFFjcPQIgXhGmC6rEsteGWV2gl9LLm829hOjzgvhsikjC0E4L0hU="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2111060251.9_1637339483242_0.07910610301765542"},"_hasShrinkwrap":false},"1.2111191951.0":{"name":"@bentoproject/instagram","version":"1.2111191951.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"22d6da19b9e01e75e6b67f54cd425c465822fe8c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2111191951.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-O9rvH8DhXPFYIzYs5pFGyujBI/+u/WRcOQFGiFx07ozmZj/JufLYZyv0xvu2KGZx1q+IG2ID/W8JXvND+SomkA==","shasum":"15c408b275e9b921e4bf2e9e231160ba7f02d508","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2111191951.0.tgz","fileCount":27,"unpackedSize":1854960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmOiyCRA9TVsSAnZWagAAuKAP+QB0gSfreUEvmML39Lgu\nkafmbfFC72whqpn52E0OdYYz0/cwKe2jtoWqqce7z8M/5m/o6Mp40ZehsNb+\nHig1PXzNJFm1Ud8J9mfpGtgGKYEsYxlBpSkR5Z8b0E3jp6oKDtk4HEnE78fo\n8FOf6KSVGN3+y75JiQI4ztbqUkWX6oUU+VEDmuCPm4DOR1gOpJPHd+91LmB1\neMgkQhpdTOaCVlLywYInaMudI+rIrZuGdVcmJ5bt48jaUFvd0qrpRy5aUsYB\nCaf5i6zl0G/RPeNcSoBG1sYGCyG7YFCP0ucUFq2cE+Ngo2/fHM7l05Oq7y+k\nNJY7ON8NZmbxlVJymuKMwUir8VLuBe4YaCItPzqXuJGo9/N7h9eQqAYqv5fg\nPy5thOMBF8ZU2fglhqqhBmzxnpdm9fDYmk12kxqKmctpETqth7d1NrAH5jk/\n/1WBdtZYV3WLCjDg81u99O++5FKe+Dex3gZ9bzgsfkp6QGLQHkPx70r+h3oI\nqrAcOjDeYgSl0gTifyyMluvYAB0xYOIAR0sMXuDopOwJ8sTfENR6GEAVTtJb\n1QII9B2KHcIFqEpXhQeNXAWMJsG3ntaUKcmOowzgmBeND3MBnCb8vRgE27kE\n1b2+06KQKxm7DxDUXlhJhcDMD1R6Ko5/ZCJaP7vsUCmIKPrDkRzms0VOGFtU\nyJJb\r\n=FkkM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHm2xFchxJpW6bgaR1m1+2sO451MXJeLeak04kuPBheqAiAoLVwrjBv8svsiRV9iz+YVzInWB8UNmFIYcjKb+/CIoA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2111191951.0_1637410994277_0.6456339011401742"},"_hasShrinkwrap":false},"1.2111230244.0":{"name":"@bentoproject/instagram","version":"1.2111230244.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"d906c0bae3e05aebd88696b9659414f63c1ca45a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2111230244.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-zJxMjNyRnJqkvhSEpVPGb7qxmyvYpdg0el7ZmN7ZT/U475FAE+Xt7vGVevN4ncUbHdyFCqOSlVCGAjEJUtrPyg==","shasum":"3909aaab9d98e52ed60cf7aa60b43d90982c16ed","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2111230244.0.tgz","fileCount":27,"unpackedSize":1854960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnN1wCRA9TVsSAnZWagAAFx4P/iDHXzfP40TOjgxNuyQO\nDDAB+mqWE0XT6gCNs3pxO0YhwELXfnk0/7h3s5WbMXLBul4wBE26hjmjwuTu\npXu+2Y5OOpiJ8zIkhRA1Q/QnI0OIBzgE8Cn0EsacVIXAAoBNSAODO5yfUZdJ\nSbADEhV6irP9WutpdUdTghZ8RWOzRqMvAbfqRbuZkPk93VjizHG6gxHyJ3C2\nKWZoU9wHShCye9VLWnrLQG8QHbLI5DMZdSc7Wr9thTKbuQjFjHqYMAkHkKoP\nP3DGxqMSZlAQE4EIKg8C+g/dvA3pDxPC7ZoD0p0ZQ+RcAfTnKFgmoUx/YuG3\n+0yVepfz+ASHtrKqAJefq7UIFq0S45xAMQbBKAlpXj74YrK/dFLk4aXfjBex\nUonqqB9kqtB+E+oQQxUiyk3Wh4O9SKnWz+L0YaPV4opVrgDWFq2RicBzUTQA\nHVn73Cp6vCt8a4YRVJLSLFec2fQELt7rlN4tbSSE5mOlfxQasmDAIlks8T5E\nOL0JcTyc0YoHIArISRfzA9/LRPBphD/S7G/A0a13D46kc9Fl4Isnm4KZ0KXd\nt0INfXs6tifa3zVWOskl4+IEfQDMVSvLcS1iixZJaAiVGMWYU/o29AsfAT3e\nXnPYjGZrIYmIhlpq3tou9v1zmoSDuPCrhvvygq/K6U0LmKluDdEzzYIw2xJv\nbrVS\r\n=r3uj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYeAM81e7ckTWz2RrlNol6548f2RJFnHIw9CKJH0U0uQIgfjFRD052tw8fa44qQ7ZIw0VGJdjJwBhPRGRWMwMt9kA="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2111230244.0_1637670256050_0.7175506325202701"},"_hasShrinkwrap":false},"1.2111230636.0":{"name":"@bentoproject/instagram","version":"1.2111230636.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"46e8f482bf5e3008ef07e950034d194c48317990","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2111230636.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-XSRgatzyRs4AaCw31qBOZXiV7ZjSJX1oKHH03VldZRAAcQzDv3fZOAnU0CoqeIv8Fedg7t94A2iEZ2Ry691fGg==","shasum":"cbae697e30c40beeb1cdab8430a813bd69784580","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2111230636.0.tgz","fileCount":27,"unpackedSize":1854960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhni7ICRA9TVsSAnZWagAAuxIP/0EhjyMraMAT04pjn7D+\nQSXXX3VfXoEdpA2YFvyWSImHQ0TcGLnI5HAD2a/z+cYOgrvXYk3A6c2g9HM3\nhCBDPmlTykWgBshnVaBbRLApqyq0oEkZvPFh+N04xO9Vy7PNhwVZdOREWmAR\nArbY+K9wa/fTCxW1n4EGKq9b2sLlOxlGGo0SG7+7GMgxcv9aMwwAxQRInRKa\nKOThHaUXGUsLDr+RCWfQirodqzbBjItbphp0qse7MbWT38P/Zb0ROf2Li3Vh\nRjKIM9v6zHafWrVdDH+UHFMCRMmpEPcZ8iuOsNiTKJAx6vMLtXEB7Ga/OpYk\nKjsJ2vkMDeW3qEi3lPYVaeKvxi1gCm4JVZluiq3rcszaZC/eHdswLJJ4QoVs\nJ3eyvEPmc4EqW0B8wDLT45DkYCi1PuY8FxD5wJQLCO4UUxMxA8DAzRRk7h6i\nrEyPQtZbGGkktqtFfizI9qjV9cNfFEMMrNUrJnM0tY+oa8fCWynJf0Y/coBa\n1119eCokH0UJAp0aSjWKM7RibQ/XtvpOrOmN7m00RNBeQ5oe+D53vYQF0+x4\nD4Ls+kWzJWZd7kTDdtmi7/jD1UTQfc//s3YQLM9wpzYEnea2x7reRI6hQrmU\nGeQMY/9wQCEgOIeCyi2Bh/ZMFVnOmErXzTGAQPX38r5kY2DFKili/2ZtcLdC\nfo2C\r\n=/tUx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkff6UEEPoelTUQSMmlOJU3nfk9yl2dUBoCCd0zJyngAIhAISyDfME3JQP+23VGedXmC8b6M+vEpu9dB2i1NLZPgxr"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2111230636.0_1637756616174_0.15991474916549997"},"_hasShrinkwrap":false},"1.2111242025.0":{"name":"@bentoproject/instagram","version":"1.2111242025.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"b78e8781ff3976b3bff1ba881cf66dd2609b5c07","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2111242025.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-fwW3LnO4296z61RAqeeMPUQM10tqgmry8XyD56rQeHRzWqYlp8L9eJknoG1TFSuIv/CTfZcDfeZdO8Ohm/Ji0g==","shasum":"2d9017f0ba7b78a8da824b419eebbd0acf6a199f","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2111242025.0.tgz","fileCount":27,"unpackedSize":1855928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn4SoCRA9TVsSAnZWagAATaEP/An/MSmMufYL22duKMx3\nQ1MNWVxE2JpU5UDp+xd07RpPIsttEA4cNc/nZjcGLYe0DKhuhfYPWUOenGd2\nuSTLdZqdKUX2uIkjtj1WBRspgoB7LRa/OuPOpwDFmU7PLVmSg3KUzRwlzmZ+\nFshvqY00K3QaMM0Xi2uPkCXlpN0x8/VS1mqWivl6vZ4EWSZWYYSGfnqRTGfM\nB8ptfq07AhDK8bBAeu0gsymhNqfo+rDTKfsJ8zIcWrOLa6i483IDz7iNaLXQ\nL0XB31voA1+biGvKbrcythwDW59vvFpCeGrCjXjedFbenXmxD6Bhd6+IVwMo\nyqz9Mx/I9cS5bLrWRwTdMiEG4xHzVQUX6Nt+fmTJcFdau38v4iJZP0PZ8gmg\nTHqqVAya7YQZ6sKh7EJ4BVh3FdBsni0SwHKXMjPfYNX5XqL3YgHp73Csp2X6\niCt+SWIyWeDkTGHUr5fMzIaDO59lYrHRwiUApVtCpBoAUi2wnJ9pxXY9XPuc\ngGZSC9fWB8/Muu8Ua6QxEXYKKnxdKlc5WlI1vshNhZ/cwKHB2uw7zWK5SBXy\neX4PlU6DLymabmpmi2C112EC+MySpfXBJTs0/lSCnNGpNrKTAJJuS4lKuszi\nLuDjvESmHHLZMtahsRvrzJk/moYHO8O1YTx9DwJxRFyd+TFr3NBiEoeZONBY\n5dJA\r\n=PRFP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKlHsJntjDrT5NRBNppXu4Jad+0VEEkHJg7PVQk43L4AiA20omh/QHT8t1vKB2n/NIDtqUpEPyFRdQrm2iZXG+zlQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2111242025.0_1637844136030_0.05685034801827116"},"_hasShrinkwrap":false},"1.2111292120.0":{"name":"@bentoproject/instagram","version":"1.2111292120.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"e938f7c9446e2d1eb0f0f865c0f1ff42a4be76c5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2111292120.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-1vbuVsRkWjVRqpO7WO+nmCtR/ENa+wC1a0SxYVwtCecJSetnnbP0NJ1hNSr9iUnK+QUqqerYufrHmQI2Upe9Kg==","shasum":"24b84fdca7f2edafe14180d9fbd60c5e5a0f00d4","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2111292120.0.tgz","fileCount":27,"unpackedSize":1855928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhphvNCRA9TVsSAnZWagAAVAYQAIthsRQSREDaooQhje4F\nctJ6uCqbdbJuiMtb1wDy7/+h3QdRE+wOZwb00za4gN6bwkukm33NIYXjziPH\nKtkpRuQfhLklXr4O7Z2C9Ab6StEMZRolc59NRg+WyHF8UZrT/nuVpDR5xeec\nSH58O9hDZeBD9tVYc/G1nxA7Xu1vv/6f5uo3zDxayfYTO4suKFEpYElbcPRz\nlXAWLf2kO8StzaCiwCm4E6GqBs9n5N8Vhh9CKDFSZI714AtXVZx4ovZTTlPu\nPCU6lMhGewjIoeN8nHYBWJr761Y6AII37K1GYYnRu/orR2xQArBtUfJueSKT\nLFaHq2ajKZmQ8c81XPW5fxvRQl/VtGXxsekmqEmsoUy7Bl7rMm94qTlLJ0T1\nvtl4jDOhWdaKeHk11StMk1gvfhGKcuNjq072fO/ntdOda0ouu6UjM48QlFFs\noAI2M5l/gXbHUse6AyxO7/Z6tggAbIDDAygXCZPxTsmBKdt6dnSaUG6IeP1G\n4hdT8x9Hj26fyGPEeWNTPGS2v7LW0qTnTRaqkArd/1DcrCVwlnzmRYmjXBdD\nEOm6biVvm018LgAfwZ2u74eForjbxH3pbRaXR43Z+7BywURsBz3x/k9RdmWT\nmcDsSw3r/WMZgSXFzQeF13pT39xxS55yjEi8E+Kpjmoi0RcD1AGJrwftJXiP\n7Sty\r\n=8Rd2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEAlITjPD/cs+mW2YnRv2AtCWpbbHv/SPPKmF0mqrnqDAiEA3bt2EBu/rdBPAN4oR0rhdY1XMHvnvi51Qs81NbZgCHc="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2111292120.0_1638276044880_0.8958544265870252"},"_hasShrinkwrap":false},"1.2111152338.2":{"name":"@bentoproject/instagram","version":"1.2111152338.2","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"27e204ed206cf75fae0a37d8f110b5fedb45fa7e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2111152338.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-n3Y3CGAvg4yVTwfVM79tdW2jJA4MoX/uISFgY8xVyvOrnlYOQjSFX/z33NjQGlrvWMhaznPlKdzXe6woCV9WzA==","shasum":"06cdbcea151d8fcd939bf4bed0813424f27d42bf","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2111152338.2.tgz","fileCount":27,"unpackedSize":1855928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpmVFCRA9TVsSAnZWagAAGb0P/3zUe5T+VagL/frUnXzy\nhsOrI8WSAOP5cqR/1ELrzGp9xU3pmBrjitHUYFYnuHDEp6cSJplyzWAQTKHk\nfsFoGAwqyGvu1cCGI6k5x1Jr1TwMy5zJ5qHUYYMcKsvLLT3/jtVhQWFL6+/g\nrJ901/xbOl5yytz/r2sf3qyYhu3QEJpPhGYgtcHHNmbtX/ucwbXGmnLqqbkU\nmBJOUM4AuXGcJ49SlgJfxkMFyqpiu2EIFAH/dFg0mU9sPHVzhwQjf78py0tj\nahG0PzfofuhXTNWzOphL0X5mTsMFdFF/fNQjZTUfqDMtEs/rlkH8HOL3nkc1\n9eVh4ooUbgb7DLaHeVd/KWo8PjivGGjt2imI7vGUJURASB+SKQqtpPUMIHba\nYrt0gH5smBPnnR1EiEwo0hYRii3qYEflevzE5c5O5HHYoEcXeCx1FEklsP8d\ncjTok1n75PRAV/WEUlVLgh1x1JypLFWh2A+4PuB9G/zXUE16bPR9d+XMD1+I\nTwAYPZ5dC48yyTxeAF3L8CGgnpqamEbHnoxTlsFa/X+w97ly+q29hRzkUS+O\nt6OGFJ8U/HO+c8/3edNaQlAF15TZKfWM3eRyGo+GUDFjvA8ApWWCG/jHk/pd\na6pa7caMukjsPKalbqrNTZw+zEEsEwg+wLL0hvhzUdTMDf5pfOa5uG12nYc6\nXDjZ\r\n=wXwf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHt5uqDPnC+4xBiXXDpzpv51mnHcmN4CxXQmL1H6mnKDAiEAx17cr7aNRoXz6cVBTx0n+W/iuO68PSZ2Sp59LctfL0w="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2111152338.2_1638294853305_0.30496311080447014"},"_hasShrinkwrap":false},"1.2112010058.0":{"name":"@bentoproject/instagram","version":"1.2112010058.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"6d1060a3a4288fb99047cc700661d589bc9e2a01","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112010058.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-xVQB7zvRnrOOJ+PG2XAw4f91XFSqPHH9DTqT0unvV6oerbr+rh/grJwKGhC7scCdMRgjKmnfb2K2EMGBOBvKbQ==","shasum":"59dbcf8d85052fafd46397fe5335e18fbcd55e89","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112010058.0.tgz","fileCount":27,"unpackedSize":1856200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp2gjCRA9TVsSAnZWagAACCoP+wSMrdFxU7jmlHvWpW5n\nc+YUVYXNxNt7/WfXgUT5+FSnZJD8e44XDMvFCZiDYmlvjyqNC4im+mIE4QIi\nTQFluiSNHItwhXtjAVsCzA6N8NrNaR+28myEjq9dmw5/eLM02cOrTZh6PXlc\npbUuHqZZ99Jjn+nghJgRMI0FbyAoaDDfjmQ8Hdw/q1VJWP3mfD/xDPhPAEg4\nj01Lc0umQDifvPbl0yQx+OVklifGMudQvE2cJ2PJRbx5SZW1RGsuHRUmyOeT\ntdaelJ7A75LoftBnJzPiT0MvVzZZ+N5VH1ZQRJc89ehkPoCyaC9tBBVPg0cd\nkQ42xbQ/Wt6TA0TDkBrR840sqMtBqetsYl90uu1jqUvd+ixuF8R9E5QHOHxA\nGzHV5IwanAdv4v+7MC0gxEbM9Sky5d5a0MBWz8sa1ONW1+bEaJODIk1gYAST\nXBTJe3kKMUpGQ9jxg+BQrXjKqohFzAmtBnVEMXlzvCuC7XI7JO2ZyFSqQDgb\nfdZ0AlgnxgI5a9npJlLESTYyyRfzWOyK44mXxvV+2pEVuSVGtUcY+6BYQj90\ntODyVkyHZhuhCfAEJhVoZhPOY00xxpiq1XX5g9AoIQKg3oz5z3BTYdlYUutZ\nv5D1WFZkMaSvklKC7C9lZvQq0MiNpno73RTXsqI3HG+1g8kWnVm0AhasuJ7K\n5QSZ\r\n=a0W9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVmN6aDlo2Ury66iRdGy9HX/1ALdP6MK5K3eGzJVM46AIgRxfG39BITd9xmdyX7PCVHqpkKhn5Z/SB/YsdiZNZKlA="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112010058.0_1638361123479_0.9707710592532002"},"_hasShrinkwrap":false},"1.2112012300.0":{"name":"@bentoproject/instagram","version":"1.2112012300.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"4ecf84d856583465c1ab59847234535fed16d55a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112012300.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-XVbaxe5nsoN9z21s1kkltzP+v8yECxtyjoEo0dP8+61QK6uR2bLnjIZ+OTJJTO9g1gjFuSDdGYvZp+6sEE2m0A==","shasum":"07d6171d2cd8efcb964aec80462635a5383bceed","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112012300.0.tgz","fileCount":27,"unpackedSize":1856200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqLxhCRA9TVsSAnZWagAACe0P/i5QxI6D151DqwNneQx1\nVWhi2lO6SDjcltorEa3+ewFxDyb5oKxgximus5BFIEYM8JWzKrBTA/Wen9Ov\nnow2arlwrFZ4IWk71BQqpsLVjPj0YOK4MLcYHd54rRdbyfi4/LGJuJMuW7uv\nvONsqX+9qnOLdaUS8S2/dMWcE4tkgfAnHGSF6JR73NwuEK0N8/nGhtSLbjA5\nrf3S2svS7+gu36kr4WzCO5pnzobYtKwVbzkPWZV/nVi38wYsixV9gYClqDgz\nLgC+LKNneTVgo0Ne0MM/mroqAsbv3Olvg7oj+W8/UEUG9+A6sLKMXXBHDBPV\nhwMuTELJAMxh1IXYlYuZmLvAEGrmjMD8Jwhvj8VcZLq/pXWv8rK+UoErjGFb\nG5FTl46wLl01iokZ40o8/8dtU6Jn3v9/BY4qDBDjzb608uK1PiOFpwCsFjL1\ng2JvvLhrkjhwGqWFkjhT2j4wz34B8IUJP0CvBjofJk1Tej3i5yKjodx2thZK\nkfe2zQiCFGvDT7naXN+eRunO9Ad06EYEc/WWgCrRUnmfHziDngxiCd/acWfE\nZmtdQPn1SbVYj+C3Dbma8zJNSnITp5OSOJrQe5745pbAVsNRLt4RJ9YDqqud\nNSZoOxkBk5rv46IEWh7axcAh3zF2KMGxm9d3T4urMcG1jesyRzFaJ4E2GPEf\nI0bt\r\n=F0+k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC27Nb2iNFbLVKERGII2zVSUD+HhN9+x318vNIR69o5MAiBTGuqKcjkhsQ0vyOnIyzX6UOAe96QTX2AVv+0zA3radw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112012300.0_1638448225338_0.6082899897509599"},"_hasShrinkwrap":false},"1.2112021656.0":{"name":"@bentoproject/instagram","version":"1.2112021656.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"4a66d3f7120b51959ea01867aa68d516d5e0dc36","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112021656.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-mTS37UFRBv62gTnSyRoiNlZQP4rYym+vwCcI5to0+IYOXUy1FD68PpdGqIpO8r7E+pSsySQVx7FFL0su+zAeYA==","shasum":"5047bf2da0d95299e9fdbe9758226c51c14f6dbe","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112021656.0.tgz","fileCount":27,"unpackedSize":1856200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqgvsCRA9TVsSAnZWagAAlgcP/jRdCMcq5E9CxeXP+ja+\nYZaH4AvAr1RUqpdYmXGPeX3QYQNgjLMMD2rr8x5Fd7gRjKpvLUc1FLcBtypZ\nWO5a6HMHE72pekbFcqreTzIOstCs5Er9pYJEGXFuI6FGhhLnd5qzBOjnetaz\nG7wk4n0E9k8L1hoNhsubbawfp8+ODYY4x8aIprrcaPK8OvzjpUoeqUhp1z9G\n1El9mjZ8u0n2RGTtrcugoTq4y4oC7coJFJ37XeP13V2hixxdsXDBuJp6siyd\nGkjirvozYwjGqhsaUsMcQfICd3v4yJy/YH9zQ1RDpiVjC4UThpfqLMSzidHW\n0OdVWXKl6dz2Qn5C9XF4kN0Ubtd8SL8XR1hgzrOleniFyBf4S8FCd5PLCKXn\nqdqwuZ+cTSDuyGNoisBH4gPoAae0+n45E0PfjxGPnUsTgo3TpX0GuqXU0yc0\n9iZN19Nf2HARmtM3U7XA/ZP5KIURfsTqC84e1UI744K93Hm1AgVp2ZsnW4ZE\nhECKb/owbP4mwlQ66HMUEao46ScYSH1UO9SbqtTy4H2coomWd16UgaAh7Mql\n41DFwapaciXQe+bThtaTSa+gqhrivjwJfiAEc9hTn2+4A+EtI6+QSC7GFuRq\nlm5wPzeeE/YLTvyIjfurakuhFklzGdALxGWnfdh7EvfcANFuLqFkbpI0Ot+I\nfjDm\r\n=uLGS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEnPwamKgBNuvY4riohn4Gpj7CLDUx37IANfXbMttjCjAiATP7jWAlGi8Q/aCb5a9hwHUkK485BA/JknkgsnGdwQsQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112021656.0_1638534124159_0.351606747009912"},"_hasShrinkwrap":false},"1.2112032204.0":{"name":"@bentoproject/instagram","version":"1.2112032204.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"80ca53e97f8ac619b78398d429e0031f40cf68c0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112032204.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Jl7Wqgk/6d4P/gKvhMeHpdz6KEGz4cHP+6fJ23pGRVp+zt8ljMywO8mhcHXPCbfhESyyFVmVVo8HFErDsq99tw==","shasum":"88a2b455c4cb2ab40d29627bd86ecfac0f70fa14","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112032204.0.tgz","fileCount":27,"unpackedSize":1845639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhq1zdCRA9TVsSAnZWagAAfiUP/icfL6wX75lsW8VT6tsV\n9FccWCIH7M8+s+ZuR4nf1KqKEcEYst8Pf+CmsFIEoTl5+jIUxXTAD767OA9d\n8x1H/ne6WDmFL/8UOZJnbeUTBmiuAu6P64GUAi7eq1HyCKoiUxgVULfKwVGc\njkVCfydykgQ8WC4ZQAbSt/R5ldQvBdWFpdcXvTwlKw22Khkc8XUj3n2yever\nlik17mmPumux71CYasyTxMHp3Hw6hGGNq1eTSV1HdnxgXr7+SvZa7oSAJumx\nE4WgERqr/2SBSVcfI6XZOr31lNbEZhdNNN38eRTurGMXYwXbUjVOwQ5SHeYD\nPef3+1Oro/4KIuYfXGMB144HC6Pl8lBuMl/Ds+0kbp+ROB6ShT/TCw3NZ8zs\nXfClnAwwrAzeL5noNRZM9/0bmEsWWIXLwq4g4TUZgScNlSCo3g5NW7zPXHgZ\nVHOrdbS8HjOM0qWDpfeZKyWz7y0iKQ6ImTD1SYlPEyaallTxZt9qSP2fsi1K\nr17a/RSs5/J2E3l9qiJIdNF90Px62qawpcjZv578ttlNnghAUZ64LvtPtdXF\nT3+3IL1drd/YO0IDJ4akbtlFBAjzil2Ik9geSusECOLhLQx0sHLL/Xb0qqDF\nuS9onGfbAo/fbLDNfiYEkNCGVIxMULA2N9D5UViTFTkhjbK6MKDh7+t5Ikrf\nEbj9\r\n=Ks1y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEO6D4uIaa5GveAWEm4RrYMSmkM8Ok388jtR0EAcufHKAiEAxGVLnGP6D4dGCHX47V2TFoW4jJOw934CWQ5cLriqnOQ="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112032204.0_1638620381141_0.6126710122152026"},"_hasShrinkwrap":false},"1.2112062322.0":{"name":"@bentoproject/instagram","version":"1.2112062322.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"cddcce65024c209c9420ce0567f525aef4fc971f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112062322.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-KX0Ius17bPUE8xQRyIIfdaYwh+Tzca0qg7nwOX81gVeZSUgSLTl6CsfQ4TsbwpGsHf8ByDQOWh3fjhluZfB9oA==","shasum":"4010d25aef9b16c800e6ddb3885b819d85d24cad","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112062322.0.tgz","fileCount":27,"unpackedSize":1847759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr1MeCRA9TVsSAnZWagAAWTAP/3lrKwrw1pNaPYAOhCjX\nNrhtMuG1YD89PvyJ0iM4zKhhDrFOKah1nOK5V4vVMLEvn3BtNLaHyT8RfXXN\nC+nyNA1p/zL8rpqS3/tpl8IdFI6gJW5KPxMjPHH8Rbq34Rcz4aN5j/6OOMJL\n0+xlSeULrf7gsA8yxYipl9UVoqIGwcKGk3wRwXqF9IEMkvCmN4LkvtdDQAdx\n1c0ebbe91hkGchWWCxPJP4aNyRrka5jlJwQG4Tl9nye66FRv7zbYaZnzcbq5\nRPSXW2SIb3SF3odQQNZ7/4KAcxzOWpDV0lNYgEtGt1HL7Yjf3Ci2VOMDvomA\nEvVDsB2KCchZbj/D/2MqRb0eltMuC42iTKjHig3/JHX3Dlueb1fYYvN9ldC8\nt6YcUfBcisqqjrPGv+w3ZmBPKlBXoouyhUNHRt4i9bNjG4grS8DIKX8FjX8W\nleP3NQqrJf9zpsTb4dvyo5H7hbz6sZxxE9FSTLN7AvSoJmSuAs1krzMKNn79\nnq6Bav1piob98HosyfIffq3An1stoNXzXrsW84v5K8aht9790sM2Albai8UV\nwrOBRLRCdA5O4WJWFOkpyyuECezw+qNNnNgjwFU+NYnOzreUqOBc/1lomH8c\nYvXNEJ+yZAOu23aFWa/lLHxl265vC+La3puaccOBmqrf95mZt/3tJNXXjvVZ\nAr2y\r\n=H/dM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqb94Larl4ZcJ6GWiAKPCF1f/P5t3tV+gUGsTcpXm7ZQIgEsF2RloruQgBxfQDQ3R1tubYNCwf6WMRn0D6JnFdwao="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112062322.0_1638880029800_0.7037086857160253"},"_hasShrinkwrap":false},"1.2112062322.2":{"name":"@bentoproject/instagram","version":"1.2112062322.2","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"3e8072d191c8771ac14d19f2122bba93b872265b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112062322.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-+0/7ZhtMYSV68A6KSYo53CqJNASoAdBUqvLe35iuUY2S/fouXBgie6eYB+z3Hfs/3gMnJkm1s+GGT/JbQ1YYMw==","shasum":"7946491a7b5bbfd3ca4bfc83a7991f24bea0bdef","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112062322.2.tgz","fileCount":27,"unpackedSize":1847759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr+AaCRA9TVsSAnZWagAAzPsP/RKsGBePJNni9kNCnx4+\nXI7VIuJ1i/cNKrwxSWYdvdR7VBvFsP+KUEAdkUaJI4NxlKk3NTO2li91beW8\njj6t+Sz5f8zkv+qy/YhLHiEGnEl4CjunkafItvIcO157Wbq34d4jncjlzHZb\nQlo548vWv0MkYol1fz+ixMfgZEwPyeOkrkmCS4OILhesNn5uNWVMreqeUL2K\neeVK+BV5CxIQZyeMdxP8r5eESfm1lt2ggKzC/4e3jr2HGHrheoXvs5AWoqX6\nAu/Vgm7DWFrUgGYCmL1F1RfkPKePtO0abB54AYr75W+YPv9ydaMFsnadk6dR\nSGwPOdoAyD9FSsZBaKv/vLcCP7rWqZp3UMH/aCdNtgTKAnx80EOjXxz10n6U\njB1ELjhBPQSn8kvINsVLAJ9uK6X8GEO+g++VlkhZednT1QEt3JfBPctIFCSB\nN1QvOsSrjgquq0pKKJXVyn0Sv4fIKIkuLwlxbCPbsP3zQ8LYq4X7i1S5pJcP\nggt3zgjgmqdVVN8YrPOoFgMKfm3/osnQapDdldlCcy87lpckAhR4S582+pRN\nLmrjVVOYznXQN2ckzmqmaXJBzVABDw4zWzy9NbveKkGKOdGUXFlrxs+3JcaV\nSFHkyCJW51xTbbP8beiCxwiWMH4uK3PRXLvGGtqr45PTloBBWuaC0O0NVSu2\n+8hv\r\n=az8u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFnXV1kURWCbxgt5H+20DI4aV+qziuhl9xgrxZGQudaPAiATqTd10G/2zzDsQ1SEjn/xnAdUjmpbbnxe0IeyIBi7Mw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112062322.2_1638916121801_0.7723266456866495"},"_hasShrinkwrap":false},"1.2112080230.0":{"name":"@bentoproject/instagram","version":"1.2112080230.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"6d03180e136b7ae380fb9d5d3d6fd8c0d5b28e04","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112080230.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-MNL38W3QUCDTbrYD+MF+bhtOIY8bsfOz5dPPsaxZldiDaFw9vuUTjA1jkQ8Pf1Qnn+r57AsSCWVAqiKUVY63VQ==","shasum":"5bd9942eaf6dfa178fc94dfc291239bd2e0b12f3","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112080230.0.tgz","fileCount":27,"unpackedSize":1847759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsLFiCRA9TVsSAnZWagAAmGcP+QCIXcu0PgV0mBYdpFHQ\nUUquof+TGrhFSdRmdGViCDlGo6arbDWUVvaEIEFxPuCj6TL6wbqmMS3v4XLD\njK5ldTZMXgwBtLkcocWaHqtizVGyT7VODALWxYSpRYg90eneHuAQtBUOWVV6\nIc+R9tUIK0KnIcW9On0wRpUbc7DPXviE5JQ3vDMRzlwTVtTltqsALxsLLAXc\nOh80yBc8f0h6CXSHoExSHpbRUZVNoUdqMbdwaj08PqVeYKJMwbzjsC+gSb02\n27i/sTS6PAyOu7kw1mwCQ5RH59O7qj6o/6gsr4L9lTLOx95+rlT0WnrDuP6k\nj65KRvt9hSX89ksIGzNA2kouWkukJirXLdDsdGsuBdfWqcXR2fhHXbS6eDd6\nzHHK8h4MQ33fli1ZSbrTH85n5MVrmRqc64ghqGxvARnJgcrhV/jHZgVArx35\nkIi6hTP85hed3yiKFEoN4JLrrm7BOai/B2CHNDRnZnqkeJmQ/ORisA4b11hw\ng2BVHDjLp3lqc45uQhNr2Qin7R4arJOGNzxjVDAsrPPdKpJlqHmOZjbE5R1j\nMNdrOhPPbCSVOYowolMVktnm68GZLH0aC+liuBkArlo9TNOePDBQtAonPpDo\n6Kee8059GGHeJwEBYJG86FjVZuk+ijFy+PHlC68VTFQK2SWyD/A7+/BhEZlo\nIlGn\r\n=V9+2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC1KM49wYT+ZxJ8U/QDMQUU+2n24ttfz/7YYBRCFYt4OAiEAsgCrlQ2YgDiWTdI/h02U+lu3LJBI9TQOg1S1Hx+wXkU="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112080230.0_1638969698512_0.4059579652531915"},"_hasShrinkwrap":false},"1.2112080230.1":{"name":"@bentoproject/instagram","version":"1.2112080230.1","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6268ef31f81697778937a9d77d4ccda3a561f39f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112080230.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ZXKIyh1bKyjFJmw2qzZBBig/5EQdN1XrMulvnUxOZZ6wZXCGM3UH+TaX1OuGMHRcK+5D5xmLkinMBzdtwQN/gw==","shasum":"840d919732e0a3bf858ed0f776e82af8a0b411ad","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112080230.1.tgz","fileCount":27,"unpackedSize":1847777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsNX0CRA9TVsSAnZWagAAGpAP+wcT5qKGOrRkWRCCQbsT\nlY9DExecdeyPC48LbETRkr0Wf09swl0rr8N6AJNvv8NsdHKWT3FXJNv1FwHz\npUFYXmsEoIzQkYFVRF/JlZRsvHGOfTqYYNt1h+jDfCMkY9243JHpHSaAZLOM\neIVWSAYlCOiNiL4YsLNWYJP7MPBG3TV3dZsK7AnLGxtwImo+Ubunex7EImlZ\nPGCoBYhAGBy/BSOH0SFd7c/tEkXcLHDQUU44kbLg0VtCh+L1KT4PKGLrwBye\nSvTi3UDWcUM3CDlZZFF4RSp0h14TQv7ArhHiPir6HapIdBf/Xn5J16K7ITUX\nk9XjyDHo5e3nazXtxMbkbIlno6pTyvNOIWNwC/jIQCC/odzEdbL1SyQOBf9E\njt8Cmdd0xt4dJm6kPb1+JWW/HB5VfJn5p0JiD+aa+5JrKhRw0q7a/O3DJETB\nKqe359RHnFQWqn6lLifk7Q1YnrDbFAi1I+1L2PZZO2+Vp8HdQK3l0yX/VEdw\nKX+dHbwL8r22wKTbEl0XhN3zNmSUMMBoE31s4v52l0XqaUdk1N8Jo+lW7PqA\nuANXherncbPjToK7Lzegwr5MJ8z/rivCnucEySEkGIDDvJtuHEX9jw1j81zF\nCcxbCWiHDjh1k7beNcjQpFYW3otDXiatGlsItvVkgQrA8xLtr80TayC1T4fN\nAseQ\r\n=kE6J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1nTJHUMmjZUMvaX5AsjrVunBN1W4de83USO47i0pyfQIhAOyezg2pq7X6RNq+kWB0bHrd1HEmEfQI6NhtGUtE6E3d"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112080230.1_1638979060611_0.14603344359335835"},"_hasShrinkwrap":false},"1.2112082232.0":{"name":"@bentoproject/instagram","version":"1.2112082232.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"b7b1a9f9f7f0773645f4fbcb9a550233900046a0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112082232.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-i075o85At/+fXHejfDua5G7f5IwNvkFMvSaCSGELDbizujvpk5757w/uTz8Xc1dCge/Ogp2rtKhkm56cTzDotQ==","shasum":"73c8a2fff00f96d6343d828398d407216582ebc6","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112082232.0.tgz","fileCount":27,"unpackedSize":1847777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsfpYCRA9TVsSAnZWagAAIbIP/iMkvmzeiM33NRNSsWJW\nxKvg8xZP/gpGem3ex8EfFUjrFjWOWzSYcqcpgfVNpSlS+AA23IMFXuFhKOfs\ndyJp+e90uj0Li0g1aKlGcbfcinD1LglZ0gKa+6wGRDrx6O1d2Zgq8+mcONnT\naXqsf0FpE5efZ2Usv24gNgabTDsN0RvnGM/0HlzJsgT/I6uHQSHMaWg628X2\nHt72w1x8M1UlrKoX/mSrr2v77GsM2Kr58RFrg7kkNNBfh/IWl3s8wCos/2DN\n+77uuZZZFh5vxRbJ3sWJUiYMfUDKH+hRdLANsj3sLpl6zxEDp//YLYqXnDlw\n24nB1Xu3Afrv5MhHAefQGn6+tutC97+sfuVop8m+h3zN4tvHpq7jCjPfxV3m\nGb3JEhhfZ7QWB4Vz/SK3l1/GrQggAZGE2YZ6QEd9Dd20BRVnfq5bQ8taMFyZ\n95RH7HUzXsXWgb36g1YagHpq/kl7vA/3lVPpr1vzv6Xhq78YO+D/WsQC9FSJ\nGPy0k+4vDbxSsAm6QplA/nbYiKxxZVRuZdc9M03d69xPUVkgJ79uFDLTO4XL\n3Nd9O6LwYFDsTVENageRmZTkRVU6AG69/vpv0Elj3McR/O2SR5n869HXWgtg\nUnBKKvKhF1F39BhxJooBKpv7JPxS4+yaV2XWmWvrL2cUht0GXb/BISEECLPS\nTzzR\r\n=Mt/y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIANg7s7VxBlg+zJYD6NDnvlezxHzYnhP9S7D4lEfUFsoAiEApr5LQ+/ciKdzzVV6LEFCnDEeW7vzwpmI1FnFyTZlYKg="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112082232.0_1639053912677_0.22298530910535108"},"_hasShrinkwrap":false},"1.2111242025.1":{"name":"@bentoproject/instagram","version":"1.2111242025.1","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2111242025.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-FQaMvPOGyroPxaIQLrZD2cK7t2XqJ31gN50XxdcLC/cxvd5D2yNrhCF+sggGFSVceKRJhhU0lmUrPIwh9ON6AA==","shasum":"db431bf630fb7e059b943809a35396943bd333a2","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2111242025.1.tgz","fileCount":27,"unpackedSize":1829234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsps2CRA9TVsSAnZWagAAbBAQAJGPyDYhQiUEJHVSE1xh\nRRxD9Zt2cdzOQniBobrncTHGvLoxayZ46qiZZMc8YMyi0uRXG7fQ93Mz7p0H\nzAHNTeCmjYYgAN91N9+pHRv91oSp0Lq/wLnGJtk8h5t9STErVn+gq/8P8ipv\nEH/6rvMazABqNAXH0XSe+PfBp1llBAQFD4xv4oN0Q6g6ElON+XXYQ+/A5wVI\n85sGwQHGoUKSi8byYOKh3llE0mA7OpPc9a6iFMb6k0lgRGeXpwrI/M9g57Dp\n44R5ftVCTCT6kR4NNM/4kCb+Dnm3hS4yy2rwmECV3frt194tTYClQxbGdOJt\nJuUhXwuIwKeUKH9Tizkpd7DX+frwm/TkbpJb9+UrE2+KOufEFcYqoJGRy5/K\nLFcO1h3wb/tLHeKRUjMLFn0/kxFBdbzht1lMUX0G47/5by1n1aYGFMfjylW0\nL63n1lbdcW2FNxdMQlUetKh57LtygI5FVfEfuj+QHQ4DurlGFkvLFy391X8s\nmPbYUux1IzDl/W/J6AW3utGZh9ZsogidQL4iT9PH+ACIDYEo6CUH/n4REb1x\ncMdtg8w7MK7Rb2dX9jEmE4LQN7WBLr10AjRlvTuCrUB5j1IDmdJvMSxcyqZI\nC9tW5r6rqmz+1ePjJOL7nqSfxnkJEP+plJ2zgEJ4e8XBxsJmSHIb6Dj/HP0/\nUOW8\r\n=DhP1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICAZt+UJfsvQSKVMwvRT30QuK67EPyYbiFlJiu2gJRyLAiBgYbNZSVQ8DmYy5ZiGYVn5UE+uElytBXc64PI/itMJRQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2111242025.1_1639095094073_0.41428277906144406"},"_hasShrinkwrap":false},"1.2112091956.0":{"name":"@bentoproject/instagram","version":"1.2112091956.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112091956.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ePikjxHUjiOfrodFTcQgq4s5e6RCBpb8QpuYtAm81Fb2OG6Vm22WzgoCkftd1ghJrjZMIRbg2ZkNJB2LMOvBqA==","shasum":"c8b8476bc92bc56bb00e98b959ee5ffc5ce3f648","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112091956.0.tgz","fileCount":27,"unpackedSize":1829234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs0wbCRA9TVsSAnZWagAAITkP/3hm042TLvHVV/vLh7B2\nZUfY5LMqUeD65+DmpF+a7AZd6r10/At3NVvNdNn1Luw7JHnOe2f1t0ScG3MC\n7Eqzjc+GlyDtsspGDc7wOCchzrchR2j0sJTURO5gQ+zYMQJNxZcvX/3ok31u\nNogdz4mycTYvP0lnmKJGTx9cnRWmcQhfp0gNVcrr8jTZro2govPU5fbWTXgu\nrFjrwSL3JrLxdH/Y4G8IsD58CJbLAplAzkGEwJlw8v0n7ZRjdhzBjetPUBMs\nE0yZD7C2fvSQL7u2KtruPYP5UIh1z1MH90pYay0Mn8F2BccTIkcFmOYM/sFF\nyFEIwxnGUaVv1vTQ0hBBurKZ6mc6RSRRnVB9GROdXvk/cCYVgi72RIxxzwM8\nTn5z5RXWI67lKW1YKTQQvGke4IdtnSbS7u5d++I5IyM5RajUYCLe+fQeILX1\nFbpfQBrVRnje4zxnxk2D6IWnz7lp5SrYHszggdFpsxEeDQVZ8uB72hDXIQD3\n46MX5N503foJHijbDX/A72Bv8hEa+ozie012ZMsRegCv/0yFULIsj0y/RShK\nzwDQuZJQN5eEUCUe4uvFmV39DCAbXU8JfDn0+zDB73ihwFiX59eRiL+e67+R\nAl4CfO+NUVU9TQp0C0TBFe9RC1T9ZctDk3568ywol27Nyn1UAYwEBDHoN9Vo\nUhXB\r\n=Xwfq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD52M+iiYpUzghYKXQRFd0szg+zCFkD++JqUdNpNfwgNgIhAM4rWSGunFnyqciCtRyHJtJ5/sw8jBWQKjxoxJFm9sLB"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112091956.0_1639140379502_0.946862193468855"},"_hasShrinkwrap":false},"1.2112102136.0":{"name":"@bentoproject/instagram","version":"1.2112102136.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"07236921f8e25ede71217e1921f8aac93c30ab6b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112102136.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-JyHn4O9bLP7/GZVFGiz6v2l/gy9CHGmk94IskZyjA0Ten95S3cFUV894DHPecc2m3mxkO79iXMGhel5OtxKZPQ==","shasum":"f7f15fcccaa1b7fcf5ba71b3ff705f76e0c1b403","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112102136.0.tgz","fileCount":27,"unpackedSize":1840358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtJodCRA9TVsSAnZWagAAJOAP+wSiiPHeaNqse3N0S+dM\nA7ppyrkI8H8B8rI37Va3/mJbj4ePUd1YHT2bzRElLdAlR7J44hMQB3QOn1M1\nfO8JLdz+INAQJtiH9BalmUDH1LE6H4hzsjl2u4NiSetq0NxuCDLJOCxfyKrA\nW0IE/JUHXh4qmMXRU59of2643bimrgF8jQOB/YLpzdXo3BnHMGxGrBChDRqu\nALpJYjSTUd29e98V1zZXLfNYAXsYEF7bf19eCiduUF2jgORDWfqcXznhgUq2\nx/+jt3EPyodgF+lS7DFgjFvgz3peNmmeiqTAh/cUQO10t2Z3zngM6ds/MEgS\nr90Wptb04JSVsLNhr1tjPY0oaUh7OcoX1vAKMYG4MfdfQsyvK3ev5YFH7XOQ\nLpIBYHTyU06EnKzxGNtfeywk5e14JBOirJEgHVKzk/cATHv5OcKJxYsVGwPm\nw7xNoFT2tiUhCfqCL1X3qM2SHukhMr4IDtLZQNIh0Trel3SA+wwSKb6f2WeF\n1vIE2n4HuJWWOeb8yHokBHKspvD8r8bjIsWwYDtEIc9EWTXOIgkKFbRSOrBw\napWzS4iWHTtpgAoScQEO5Gx6bJDllFfvlXL6mEPC40uyNiEd0NLOSzCKPuXb\nMR2sQ03xkv03VZ/jRJ3aTIOmRByZWhKAE9lNKfJ+EymbZTAygW6j5nL6o3tN\naVS6\r\n=ieuU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtFQuJW/dpUjR8Kbl3U75tACzhEuoIXp1pKItI4axbPQIhAOauNa2pwRM87bdCxXG96jHK1LL43mUWw2sFEGrUKgV3"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112102136.0_1639225885715_0.49703888932213114"},"_hasShrinkwrap":false},"1.2112132331.0":{"name":"@bentoproject/instagram","version":"1.2112132331.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"cf62ae1d6a12b70dfb6a7bd8ce66ed5bc6e30d1b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112132331.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-0aWPa0Ji739n1OhxKvak4ecHAZvMXS+e+3FPwHjlDPGtsA5n6B2N5cTnKb5rLI3qt1b4uy80xiJA8oK2VxMfvw==","shasum":"39c5d138f788ef8731ae67b52adf188eaa37e194","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112132331.0.tgz","fileCount":27,"unpackedSize":1838069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuJU1CRA9TVsSAnZWagAAW7EP/iwd0JRNrckaKhE4JIwy\nBaA8CPqcNVzAyJGrTkGtlKTLxKe9n61hdzmNDUEMDqAUQwHtd22qDWo4iK1p\nBzrkLlNqiix/GqcRLM+89sC7XP1EquhL0quj7uhEAGxTz6z3F/RtLlnsn0Nj\nrHb8Sz3/BuGg/c7oflPjb/53Egwv0HqqW7m5sMHZNsftjFuST7Q7P80oSMG/\nacj2f0QmwXPta790wI5bm/pJNQqbyaAPptVsOS5eC37m8L28rXkyPwHAJ7f9\nvtmrq72Hr9wHW53uY0zq2sRlISXjEkIXHZqh/6bgeS0UCVm5uphxojlTSF2t\nuAHsuioJln+rVUj/xneNc824FAPRP8yKghxu6dh+vFP9BbNiG2TiprV8zzdx\nXE5ZsmJpgnk7+0PjUkKbzpTrjpp8rFf4dcO2HR25dkMtLVlH43Y8M88XrT/p\nkIfvAQ/EFLyjgwRy6uKcKBD9NXzWvhUQFlmDxfMEa2CQR7N8YV5+mRpQPcem\nrUBXBJ/6rGLF8gAFuvfwgV4hzNxZftxPlHCcSUwNfxd0zNLSLwok/8f93kx0\nG6w2QLEsUKB2AvetbycxZPgpRlFuVeL7yfXaWFUDY0QEncbi8Wqpat95xre+\n09LxbYUFQZ/2PVSNiY43Ioph3gRRTVr3duzzdQ5bhqIHiv7ePmt40sgnIYW+\n1MJw\r\n=EEgU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICMazC3Frk6CTSmukjpwbY+q7Tn6R3ufaBPupKKjeXtpAiEA3zxGRmd6sUnfY18ZiD7qcFaCvJBB7k7CbEg1AIxJlJI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112132331.0_1639486772874_0.5193245926608248"},"_hasShrinkwrap":false},"1.2112160003.0":{"name":"@bentoproject/instagram","version":"1.2112160003.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"2bfd164830b15f49d7d86cf73821410a039d9039","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112160003.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-6UpKGtNYitrU0NbfOxWr/sRyzsJdJs3O9aOsMHCzxFXClyg3AcFulCoi+ITyqTo/leVo26z6L3zDwwPCliiS8Q==","shasum":"cefabb956cf5cd09906dd0542483baf37e525519","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112160003.0.tgz","fileCount":27,"unpackedSize":1838069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuy7WCRA9TVsSAnZWagAAui0P/R9CKJHFQ9yLq5xBV5tw\nldKb01ZyTdBRXwk4/paVk7nvLxGQVTsPtJ3cpS/3AVqCU8H4TKB6S006W8mC\n+By13fC/w3G80+KJXVw9eIqmdn+JN+ouVKa0Gw8/W0RX+0pMjoHT7LpdZe7m\nw/6BNeeQFH21gPk/Ji1E2mkW1WDkoPcH98zvKM3eTp2K1Fr1+NHTAD+vP2uG\n+tqnmCTJbaSrjZ3pvdLVLs0hW0eK+a9MRqAJ1W8UTWB+inuobPG94dhz1i0x\nhcNjQPYAHdEMWKrChPJLQ5LU372ipPvdcY2qoojz4FEG6me9peu7SYCzPaiV\nccc56z2RjU4o/Hx/B3oKSgc+vAwYHYYWX7CeSPlH3yRhqCeG1FUaYKMesY4+\nQENaRncbOcmyCnFMVSpoMF0DkAoAROx1Xh0Hg2GQmjgtQulzHGLVRhzJPuNT\nEqRxUhl47/C5JRsFFUy8XAVNdpN6eQKtOuu0xxDNUym4JcrkqN3my07Ea7jA\nd5AZ9bOodBC/6xdp9P4hV+CBtPUiHCJDjDEgdsM2gwazoZVFaXYe5T7Pbvrl\nXpB0x2C1U8/H34HDecmLHmkEKoSyLnfnvkfDS7IQmZkqPtnmkwEUnlyLybpe\nMdsxrpsQdOazYvfoWXas9lTaiVHf7PiM6e6beB4I0hd+EuRMu+RurFJviEvM\n49Hl\r\n=Cu0h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE3RwEGAxkGe1sII7G6KX5WHYWcqUkwCXlskBZ4DE1tkAiBYF4iyGW6wBKPaof6P2LO0fEmQ0Qtu+HhWJ86Sqwapqg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112160003.0_1639657174234_0.20170461865382983"},"_hasShrinkwrap":false},"1.2112162055.0":{"name":"@bentoproject/instagram","version":"1.2112162055.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"e3242ec094a87348831cbdd342f5187068444994","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112162055.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-fKpkatmbv/Bf9T1D8HMidO2wjQS9KlHtgsMIblCzUwwSRhBaODO0v3JRP7gU9KJLHQFS+dq+L8Tsn5RFBoTh9w==","shasum":"e4598125ac0afe13bfc26031b0f5caa7c820261f","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112162055.0.tgz","fileCount":27,"unpackedSize":1837973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvH/XCRA9TVsSAnZWagAAq4oP/AhkxrlYQ8r179r6sieC\nLiQqsAILwFy2/ZxSH+n8jQh4Emd+V2URaJjCGqXgOp7lcvO8il8vLOc9nMDv\n2yhBa/kY3n72SqZ3ZvrLWoV1k6D7lg87nwWGyeKYa9GBLFZSCFgzxTs5jzQ1\n2ocsGmtusyTd+XarEA765RyI/439DJ6yUur79G4r8H1tDXdcwupQG0G/qz+V\n+8Ck9cvf+cRzjXUTQM7dbSjHFhf0UhhIRc6qyvNPIa6GP0zOye4QHREX0wzI\ndLsD5GSVs2zsvsPO1YRyrg/DaYU+CM9zqdSTEelksRKigc1MPTIv6bkKZSK8\nHHvjbnRMERiGqsfhSz02at3bBMDNDwnic/OIUaeHaGKtR9o5oIa2qX1rDnAX\niJF4+cvjcI3kT5bUfKmUnx8134+Bb0L7uZ52ec/zTFY4OuZWYj9zqga+eJEh\nYeJdWFyHFc2FX15SqAOnI0Knrs56JnUy/D4mkUGEG4w5xv/b77MrG0HCs/DA\nb+Wky8/+VyyS5GG0zxgDMkAfmVkS1LSYo4pWzy8pTg4QYP5sFtxTgSVg3AVe\nzf/LGB8JuPfqpqrghrFBh35ump5/1+5jxeujt7MSsfaHkByUiCgV1K9I2lUZ\nmZbfLiW/4UWansyuNznoI6D+NHjN4jh/w0+Si8Nv+jsrwLctxqlh6PHnRBD/\nIY+4\r\n=fmBD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICn65QaEoOhGzpfuVW/5D6eJml39PgfRjGtNDJthW/ezAiBYnPQzxJYrG6fWD03uGvS94FoWowU9rzfzKWrvoHBOfQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112162055.0_1639743447216_0.7202474622930544"},"_hasShrinkwrap":false},"1.2112170012.0":{"name":"@bentoproject/instagram","version":"1.2112170012.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"38e50237c04e29792bd0ccfdc13308940a873817","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112170012.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-7ZtFU5UBG6UCPqo0ljl3+TJRr40EoPTcsQRlouoWOHs9GTGMvWZ2DtB2n8zCrIkiqsCv6XEUpSSQ+7/JtyzJLA==","shasum":"7d9255eb1dfaa2276cf2ec2e5c27930d976733fa","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112170012.0.tgz","fileCount":27,"unpackedSize":1837973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvdFeCRA9TVsSAnZWagAAfb8P/RYc4fT384S++X2tLel4\nqSL67ByHt4MwOwkc/+1YgDj+rwqaeaTK3K+D/NzEIWSu60hnFRTQzpyXjGW4\nGW4vVjS5DNhMqweAAm9UummFqdmkrB4x2NGgwjysufWcs/0AQ8xdeVj2P17n\nEceXJthwcRHiAjB/u5ZEqRAcZkUmW2znLpBXHvrB/ysOyLp5c+/nVX4c+otR\nPelPcUfPvCClbu1tzGsaZ2vB9xl0mkSaZjeHXxQnTvyWLE3Z1/Xw86CDaJp+\nVOd2H9jeHBAltAzP7KQVFDUv0kgtApOTNBpWRPrCJP54qN+Z/LZfAAsQYhjp\npafnOdQHLsCf+CmWnrHI3F5fa+p8huMilltZ/4nhzDZFn6qHLfBQaaW4QCrb\n3Ua8jDQQegXzmydUeomzG0rnH7ucejErI904RKLJ69Km9QgsifhGwjilEn30\n30SD8/jYuQxAavuEgAQbmhe2V3Mx4jBpzOkYmQFEpqNGhg6PtSYfK/ZYUfld\neHzoO/57CeGZUWRrH4VZq/eQV06q5XjWhfBdIywIfhQ0tjlKZRrRd2Pq2eoe\nH5X5fXuoBdbDcnpKM3YpELhkigzBbpK7irzSmhzZ39bSZYxgvrDq2XPrL9g0\nXf6YHS5w82jvb3C0rx9Hm1XZXWSxp7ynNRV8VppjsOcAu58eeQNbvDA3jqtZ\nIrgw\r\n=YIUJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfnrOUrcDTYWpRYkocOEhHYiHvkg3GsWBarEPkyNmkOwIhAMm9GF3KaXRhpFoIYJWB9xWPQ+EH3uX9hQZwLjEpRZZI"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112170012.0_1639829854089_0.7571676160171321"},"_hasShrinkwrap":false},"1.2112201724.0":{"name":"@bentoproject/instagram","version":"1.2112201724.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"a8be9d1eaab4dcebc8c170c9911acf0c8a5e73c1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112201724.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-pg8960fKHz9epin1QYR1Rnk/aiJzzTqVNqlh0tz9cBSpRsSHxdzn1estToz78jZOJulU4nd87IolxyxSE9TRDg==","shasum":"02d43f041d31a81f138c130305376c033c067308","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112201724.0.tgz","fileCount":27,"unpackedSize":1837973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwcbICRA9TVsSAnZWagAAogoP/iIKgAH9dF1aPd8DkVao\nwFFWAJWlkHRn3sQmG21u+UBo4sQ77s7+30qV62Khe6h5Lis3lSMfsfn5nB0a\nrKm8KXXyE2lY07PRNnUp+6KJijWfhXItehRtvst9O5lT3DTJuXNnFS7nK1WZ\nA1hSDObr0rMmZE3EvPbYCKvff+2KdagDLEmQGLQqr7VQ1ZOMo9viLUWvz7VT\n7LFDzg5hHwpn65LCEzQlE1VJw8/nFnsSAD5SvWBg5rv5MnE8gNxGe5xG43Om\nieIzMDtk05qauXze4oiY9bxwGmaviSEmLkMS0W17tDVZ93wTlieHJGTsJdWM\nW8LBfJM/LViU6vyUbTGjR8x7RXS0qYjuKJHRp1lg5wwkj6aSwQUbWStoh++2\nWtgdcSs1Y2lPrJ+87vZ0AFswaloLN3bElKaYIxzH7va/jBhP4khhFheOt+57\nE6l5gkPFkZhR7Ir/cY8kQRdXzuyzBMseQJ4zqLDX3fVBdmTVdqxalFOhXhow\nFZ4zrw5BPj3YYi6O3jg3BvQh0aK956P/RINionK+wXRmoMBX+ZXPpMOIBaXc\nw+MXamaemi2WVmnTSiNFgxoqEz59r9n2fOhpAA1HE5YHObRcflR6yNwl7ahG\nIhwLOgrerPNoYNgIW8Yzcuwvyl82sor3EtXos8BwtVJwP5hZVMdc5vf3vOqC\nohq0\r\n=fSEB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCn5FYSqYUonWOoLr7JH+TSuvNf2gtQBvgYvsU/SNdFAgIgYx2NrfpSVLeDio01ygMFmHEjLDw4bvQlr2PPUEfXbeY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112201724.0_1640089288066_0.24737784682372466"},"_hasShrinkwrap":false},"1.2112212349.0":{"name":"@bentoproject/instagram","version":"1.2112212349.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"a6b6a6c259283b2cfcfb474966602c2ada072484","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112212349.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-uuKN8Ci5CtMNoVVDTtb0mCLWZA2pYj4MEJswLPSm1PB5JquwI0hV4clcCCTPhOgiUF3eevhdrxbZ4iPC0f7BMA==","shasum":"65e5232572934bd8c11dc3d7c09a6277783a9b13","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112212349.0.tgz","fileCount":27,"unpackedSize":1837973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxi/CRA9TVsSAnZWagAAUYgP/1XQBO/C3NH/Pck9murE\nomwx08Hqp6ZztJga/W3WbUqLak3lGcKqDtIaoCAos2DDfJxntmppDxayKCmx\naORSN5NDBEDDqoEEGQXApnB8LIWMeozbI+DRTq73rvvYjep1GE8qMp8xAIdd\nC6QoFTD3tmYawQ1H7DS9mUmRat4mUWlzgoihJXyNs1OjctRNYTBDIF79q81x\n3knKi94yCrx/0j+iIyKnyLXnD1zAR2eofsa2TdyPJOAeoQp1gBnc0akxL9ox\nbgnf2NFnC1K4Co4W/KgKJdj935DHRKgvZDUHgm/WJIVUs5Cyt6VtSeAGaHed\n42xNYvvgVCTIXSfBrBcGmUX4Bu2+V2Xq8piwYvbBwy2qTN+DNYQqST/CnaF0\nq5s5BacSMlgZ/r0OYHzjb2P2nXARGFHV5akV4FVu2ZFs3yqaHWFFK63cqSF8\nevYed6/6wQs85COR8ixU2926M9X2e7WcNWUuejAdSq9RIA/hsOlqurCtIy10\ne1T9RuFAqI6zh8XwVjFnirJ8hEpmFsmfLy8daFb9tJAzmAhJg5ykBT2QBiEY\n8+64wdtWpNSRPVp3Nx32uZ4E/PvTmqewHop94rY2AKdrVgeqop5IGrZPzmqR\nO/4dqPiTWhBUCbsEVUWmecO3B38jQU1Cj/ZqJS4P1hxFEqAJEOraK/p8oyRF\nLwKy\r\n=/kHQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGyaSiK4bfjHfLJl51P6MaWNIeKwI+B2Kv7GEKZB+vVfAiBWjvqmMqsHKNJrLJfKSIqGPsGZsCvqb3qKYq887wnh6A=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112212349.0_1640175806970_0.6988575837328623"},"_hasShrinkwrap":false},"1.2112221739.0":{"name":"@bentoproject/instagram","version":"1.2112221739.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"5d282652a97695e5ec57a655f76c0cb6d40de066","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112221739.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-og0KK8J/2jt2HWzRUqAKgXf/DC+onAD1lnUvaskRo1h+7cmP2dWxJKuN621SV9hVG3AnydZxhZGAFn2CDvV9Uw==","shasum":"3d8ccdef95fea90c9de0ee0ca6e92d5a7477419b","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112221739.0.tgz","fileCount":27,"unpackedSize":1837973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxGlECRA9TVsSAnZWagAAPJwP+QGb1LpzIvImUSv65Rea\njgF2s2Vir+bW9SMdDtZe3YRu/txWPlLNdEk8IsYGbRqrTFftUhhRB8uoyOrq\nn61N0VHedB5s1U0rT058ZT4dtzNAStfZ5fGIT8H0rF+BEWZMsyiKrwoNZjjX\n4hx90lIUTSk660Hzo1VDh36/HrwZXuv9I6iHEo1Q8qVViIBe3pa2fnqNnVav\n0rQ/APkvRJj6fndSdzUSfyfQTI9ykIyYxZsOmh14qbr7kfSk/BpR9IxE21oj\n7/CFK4jky+WV+gGeAxMe7oL95nbwoxU2yNTqf5Nbow/I7vx+HJVRDKAbGYI2\nmXA+6aZUKWfKaku/5tiFLuFUB/io/VM9eaOfzT2NJytg8OT0+8JkeKKgn04w\nB/kJNul5cHOrdjPov0PqDWU5+yj7nyME+wW3GkrZErpmS8e5DYWJQwgbDzUo\nM1KmG23byE1ZxR5WvlDrd1m8oRcGrKEjzsgXMtu2gzG3OhPihhxsvnsS+GRs\nSRg+erPzxaNZdwOL2LNCpFpR2l+OC/4aty9idK4OjgYoa+TQLArmZu9CWMo+\ne+yOiNHqB7XFDM1R9JCN6GplSfqx5rA0wLIfO/L0NPZshkeRzUJXnRHxGX4g\ny3OFMaCcYyyfAshxUs3yq12FRGjoakC2W63l68Q3c/4bD72z5zPXbkcIbA17\nilzH\r\n=Ae3V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDmLSLooseLLmUIK5oqJObsFG5B6pC1dcRLQ2t5BWT/wIgBMbMiW0aNzAf0Gow3YSrG28988Yq+I4OmPg/QISnHx0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112221739.0_1640261956667_0.09914814632451896"},"_hasShrinkwrap":false},"1.2112231523.0":{"name":"@bentoproject/instagram","version":"1.2112231523.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"3d06e61b6949affa49fa2c89bd550777f0fc8c3a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112231523.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Bq1pOvDVrwjt7vfrxOQFo5FO6dS2YT5pojTzTZ6g2PU3LxchEOtdxorBT+4uGbKgGyHjNVVysiW16iPOVLi6rA==","shasum":"2497c5b4d9806ebe3f34fdcb7c942c68aa167392","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112231523.0.tgz","fileCount":27,"unpackedSize":1837973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxbsSCRA9TVsSAnZWagAAe5cP/1CsSfsVPbgNo9+eNUYB\n3+xMlPYHdUzNA2XkP36hnnMdoO30MoHrcHX4f7csRXOKVlpBKHUpVvsgJ7uW\n5D6ZnoPXjnRY31XPQ0++OMKIXL3dE5RCenTG1WAh8sdiTZG06sKgV0DNg2up\nc5YW160mmOt/oHXQglr/RCKtPYGuVgEjIm8TfmQPz8j9TEBKWlivGCEoIyw8\nUXp35c8O5E5245QfaFTMQDz6QUl1OW1fXfX9ogs9dcqL6EHHCg6/okJuxWv0\n1/9ekilPZr1UGSOG3t4eGaQiq3kYSP0b79Vhj38C/GtfvDC6aHfgTO+5ZVuR\nIDpAlf92nkFSG3MV05ENd6ksXFMEnioLsSeyJJLiKkiBNEJT9SI2S4gEtJ48\nrgVvW9No2EDVmq6LXJ6VTI/mgRVRscB0oZTNfvKIx44dyprsM9xVEgUINGOa\nlWFF3+YQLs8LcIHx6QMasdS1ighGiaIWyQj+AwzCP/KQu2+Xv+djIY4x3N0n\nWwwBa6yBLJGFoQFFVgWj5rADV49mSh95BhfY8ty8357c0CbtPYIpqcHVUdTE\noA/8ouTVA3GbOPE69XbFPSXmusbT7eyfwI3c2ByLeT4oQj8vrppdAWk/AlwB\nJSqf4EAyftue3iBHphOLB/mct2S2jtMoOdbqVjIvlRDC+rqure8q9MAQktaX\nDAnK\r\n=swlm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4MV1gqWhdFj3gmz09OerlpB2up9Jikt4RQ/IqrIeVTwIhAKKyS86pWgu0ZuF34lE4eehmmlgep3DYaNI/Zn4BX1H/"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112231523.0_1640348433799_0.5014007794081445"},"_hasShrinkwrap":false},"1.2201042109.0":{"name":"@bentoproject/instagram","version":"1.2201042109.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"9526fe41f7489e55b2e2a8bf52d6b0e4367e19e8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2201042109.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-RQOjdN5GUrX2FuUaQMutjbvS+kNzsdYxhpQpER2081FGxMfV+oBlnPy9VJetEVIyQKxmE0uLcrnFizYg3QcW5A==","shasum":"87a83861a9b3483191d28cc3816cfd336f0241a0","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2201042109.0.tgz","fileCount":27,"unpackedSize":1808717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1Y98CRA9TVsSAnZWagAAwmwP/2PlNUAMirV0uOObu4g8\nWx6IJxP50KGFY8l6k9pgzuGVo4N5fQUEq3bbyi7XAejOJFQNlDY6RSHs1qXe\nvzd8kR87/KZYnue6hYronLEl4ygfUaS+cRdy/zc+yRdbTp/8s42HNL7p5vXW\nrUFB9K1c/VOel+CJ/j6pgqDam3qfOmH71rPOpzEEuoCv97jXTBYzwpc2RSq4\n3/Ro7Tl1B3wXEY+Y0qNUxBsR/wijtlgWRKSQC68URLUsNH3VzF5awGOrkITd\n0cF9C2Y4UD0lzKaRE3j9QtIDhkWc+wEYZzAHxj3Xb4TgVH2Y61t4Z4+9WBX9\nJ+dDPxe8v9AHUOlpZiAX5TamUcrgwgypIpWflTOqyDEsG1t05klVIoIpiPzH\nQT5g25iZUDvsHDJ8RiZYz5tBZae5Id2fgB/R+VN7bYXrl5ZGX1CtOmMJnRKb\nh6qEkDfUagJOsxhIebqdx9TEoM55kxSLSJlaIKH1zCxDuxYaTx+uwHr36pAX\n7EyD2v7PLRpHljcvik40kqNV0oGq2z53nWSaUf5zoQbcD4alt7NDOMQdm88o\nSp+4s/+5P/NEFrKraCWHVKdGv9D2P4wM3nWKYGlYsf31ouHvitkPcChQKMPf\nG748avq83OyMEifji0z5RY3WhOR5x7wtcTkU3tDUILDeeqDx+tJsfZkAawOp\nET/K\r\n=Rqoi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSRIhmvZEp/6IcUSFwQGe0fpa16hQNOloQ5Spu8gcSjwIhAPnzV19YOfIkwNSMsI7+xK5J/F805WUXKrVqxjmnl7IG"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2201042109.0_1641385852459_0.02230257580314121"},"_hasShrinkwrap":false},"1.2201052144.0":{"name":"@bentoproject/instagram","version":"1.2201052144.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"09cb7c2c04a007089967ccf35accd80cfaff0c83","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2201052144.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-kWVBZV1uKg9Ycvfale7fO7Hpl0VEcA01fvK30tkeXqHBp0OyODFyHnALFfneS9PVyYfbQYyiRzH98CVKLqtyAQ==","shasum":"3a55c02e81bc40254247d8fa169e30d417ac2e12","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2201052144.0.tgz","fileCount":27,"unpackedSize":1808717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1uNHCRA9TVsSAnZWagAAPe0P/iCDAGdEO/hJCcRqXca0\n8ibCold/mlsKyfCwP+tEEhtZTrjl9o/tdky+MPgpCS9xDSKtf8cX3vP6WgiX\n6W0k/vMvrCib6uCoJK84nOEEfZWFWCJc5sRrdisvTLy6c2GfMN7onRbbu2jt\nKnYvv5ZL4KUgA3yK6m8ql5qxdjEEoympEPZsfO9UlvqmKtL+1MwMdmPQtcQQ\njHOLGyNHTdL4rmnMtvcPZXF0Xk8o15vLUoRtwhfDdtww16Th0el20On3JdLW\n/ceDdrlYwITK/9WZ1u6RpWuw/4v+GTILvd3BkQRkTwOdmp1i1V04KGEoTGj0\nN++3mSu4n9RKRtjRNkMudsITN98xWDuNyXEo+alPcG4w5OKvNs1A9mS4nGVC\nB+gcW73O8Tkmed/jCYxjDV5gzAv7rh61P+APuzyamZz7jJBcaR17cM+oE56i\nf0z7mZUNFOMGRbUopgOCiYlozPj9a12RKjMJHHaj/ylAb3NF/spQ7Jn1J+EV\n2Zmox9nHLxyOsEPYWewkIH2lFF3h6lrDFVuzT3AYs0isfLzvAmPIySKEYXei\nVYpl3T0OlMvxasHs4f99Ki3SJEwgz56/Ic1LdENkDrnjKCitBtXF14BxV7Kn\nxtkK36ksLlATMWoNYymjPe3CDtHC/FKHhQZ3i4L+sXObxAj33V2BWHZwdrXe\nBSey\r\n=4iwz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDlYqS06F7VgdDbaqXElSQJcrLw6Q+6Z0bGjtibWFpJ8AiEAj1VxK4TEQUXSak8INVfLolkd8A3xx74JskBS8XBUPH0="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2201052144.0_1641472838986_0.5537680882409952"},"_hasShrinkwrap":false},"1.2201061922.0":{"name":"@bentoproject/instagram","version":"1.2201061922.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"737b882748278c09f4270720744c1618e36be6ba","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2201061922.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-NaV7n6jv36+UiTsOfiGsGbliXkJZZpjfWdMFoE/pURBFRJ2ExkoeX6lwJH0mB72mCfeLqA74dvaELaGpqIt4qA==","shasum":"c56d0fcb62c123cbe2d178da2f6a8a759b9fb360","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2201061922.0.tgz","fileCount":27,"unpackedSize":867911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2DLICRA9TVsSAnZWagAA5gcQAIWy093Kb1f6TniopYd9\nmSITbor221cyynwB5rqMJG/aFv23dRPXPhb/Dzz9sfabXSbdc8ldiPA2kxTo\nOXQxbgS/2T7R6FeJmu9WRd2gGOHI3UlfJH1STiLdp6uxtg53I9M0njUiPfbw\nweLyMm2o3XsZ8DU5WlsEHmFk6nu7JaR+Esj381IikiLTilY6WFc63Ph1PG+X\nwmq0nJTmiYcUsmLsXpVf+KPFGKYC3R8xOfAZ9DB9d2sWDnEotQXzF4dpNoE/\noZbVD7GsTpNDCQXUVkbFhejUlNuh2ou+wQPNLgKlTiXFHHlldYQ2eQlU+XQS\n0rJ7FFG6X5VNyHZgbWRQWpDx0oRfQqA2YI76Os7Hn+IqvnEXUSUMb5XpZeCY\nziQ6wLsrAdwTphsOW3jBsHt6wnGd4YNhV1LRmxVIxu8P6R4rRJEL9UR5p0Gl\nvX87V/Rc/k0Nf8muTbtCLcP3RFbq5W+PVKqauKo0rR02zt8zDwgfGAoNXKGY\nq4YlA79V/uMpSE89gNQL7zJOGCJXSNo1BgYhMUAqefsseFEvuNkfgmcNN0Bj\ndpJc5ednEn4lEumdQ9KQQDaL+MZc0MGXvXsIGn8Cat6MlgGzVtVeGUo3N1AA\nGk/0YaqA8Y3m2IfApTW2VvsRLeT92XCCQNwa34eOQ5me9WmiSgrzsoXXsaEf\nJZLM\r\n=voDe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHYvO13FyH13eHidlrEunY1RthEEIOimi/yc8KV49YBxAiBx1ATMW683NA3z/DHumvc6XgvZyRTMc7xqKPjYcRdm6w=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2201061922.0_1641558728723_0.002273893507636293"},"_hasShrinkwrap":false},"1.2201071715.0":{"name":"@bentoproject/instagram","version":"1.2201071715.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"e40a24fdddceb1c635f67571d9cf513c7e58800e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2201071715.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-on6UoC1Ncd3ZxCpNpN5ePJ4sl7ONC/9Fh3w3Q3rULWInEIfYnn3p9XenOpFoKVlyQtNUPWqZAXFHCZsBYKqeKw==","shasum":"795edea53e885187644b476e9c38f1bd9262008f","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2201071715.0.tgz","fileCount":27,"unpackedSize":867911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2YHMCRA9TVsSAnZWagAAzmgP+QH2kUJ56V9K0RiyKMbk\nmfPl3D6+4uIc5622zUnSduNRRq8x4+4FwMlbah397F2bq4p8p5WcfT+dgCF/\naU1g4JmwydFWdOvnFHlGhRHxqSDdL3y4lcqCCiAhyzmaWDGttxBopVH+IB9x\nUs+chy+keuNLtgqeoVc8QCUFslSbrk++lBdM9nqv3QxPSMoxoSoM93W4ZyQW\nrXdZYFT895tZTajY4x3xVDAUvd7NC3QAStxTQPZYrbVRxuz1SvuQFKAt61pn\nxnd5bIGXI12a3565zGx6rLJ2fAeQsLX6QbDSKXbfR/gbVDBbDTp8BFLeMDym\nffsNkuAduI9k9WktM7eRysYbW+sS6+x+kGUrBubT4/lKtfyRQTSJrakNeGak\nxDOyZOvBlj6Vpr7HPjfXKnm30iywaIYYnNv52KgANf9Aux+S4wa2hH4CD3bu\nhSFSSZtjMdUxSzfUztfk2hiRVV3QUh5gkxFiiR0ofnIZmGQy+NCmnYsIl/wt\nP7ursUbvN9VqU2qawIso7GvVy3ZBLU/MrQMWGODdU3Fn/z53358cz+v8PZ2d\nkow55VAj8LgRrdciAiijtcTkpPEfty+RLa1H9wRo73ea5D4s9QwV0isEoYvw\nqED14V21zvNOTXRZYTSupGbFu0eQs5p/ub3YBcPlgdlf9hx70FcIrw+WSz0H\nKCmO\r\n=oJWq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhW1YPNt+rVlqt+FH8f6RXthYz1O5zDHPEefQrIyxntAiEA7S6dFA9VXticL9nEtA2mRDi0keOtCY4tL7UgAJor0Xk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2201071715.0_1641644491758_0.8339363563731852"},"_hasShrinkwrap":false},"1.2201101902.0":{"name":"@bentoproject/instagram","version":"1.2201101902.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"f0b7ffe685c60b51cfbab92bada4e0c87e0377a1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2201101902.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-j9j2KSY3Goq2wQjkcPZZICvb1hOjRhWsIDaMcDRTDAozoblBT+JJE3J9Dc9G1jGpJiOeogDC2bB6c2u2Yo+Uhw==","shasum":"484adc4970e7cb80792a5c82c486a06875e08715","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2201101902.0.tgz","fileCount":27,"unpackedSize":867911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3Xg4CRA9TVsSAnZWagAAg5QP/0gkll7WYM/IAXIMbfAI\nEUY2dEw/lAJTmFEZT0xJ5wPvfmIjddFzPs9J0Nm8agt4t4AKi41vtTMTv01u\nft/gl7CKmOexNWOlOQuu46IFtKUX8Y2SU717ynVohsUKJ5/BgtVggECwZ6q+\n5eGTgiJ/OLKH0uwJvr++SjYKJINlYHz3l5Fgg06153iaHcN+uEFF8Q0hae1N\n/ufbNca7PwMzGfgzaekMeKi4hpcDaO0IUZKc+dYru4RduR0opF3XPvbBzWBH\nZCbcaEgx8HJgJfdzsACoo44IxLQUkSUbKKQMF5aug4gt1H+NOjKayu4Eq0vh\nd94j5vPkyFJB8KbwWxkX3g46emwgY3pukKOw6IrxB1g0ietGggc6hIQiC2M3\ni8pm/cCvjiVMurJhMiRmV7e5BkyCsqIMSLCb1KYYCVf/k7OHwdhumXvcGJqU\nA0HT9pramC54HtmQVVmb2AKMx8G8oPJB3jryGzrX1jRtOgl8uHY8P5bvtHrG\nZC2urqSMUcAc1ySpD6pAKXJUmkTBirHN3Igyct9v9KVI8ZhhbJtZ5W/UZu/J\nQ/2dLa34uf097ISMbRdzghRhqlHOdHNjQSWz6aYBCRf7faDHztTprg+pu9dT\nw6jdBaan4cr4QOKoq/m/qn4QMUIOV15Ch1Qx3s9FbjupxsuGBCGL1ywX1ykz\nmNKN\r\n=xGbV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZ75srzy4xPJUymjqqaS4ba44tcM5xIt+VhmaoG9BIUAiEAv5kqmifrqijpdSXjVvoIu+/IbfPLDSGEsCOJNzaBHrY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2201101902.0_1641904183985_0.24489620087692865"},"_hasShrinkwrap":false},"1.2112231523.1":{"name":"@bentoproject/instagram","version":"1.2112231523.1","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1ba2e6854831868cfbd5aecf8a74b09bb0fbc2ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112231523.1","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-KyVQ6mtwlLNXmbCn5xRXktBUUOz2buacfvrDAIjs+lXSvbw+5o7RU15sU8MdfHdp37oeDnRguXU08jBQhYSM6w==","shasum":"56bb6c7aad21a2b292645fb107217abbe6e6603d","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112231523.1.tgz","fileCount":27,"unpackedSize":867911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3dmjCRA9TVsSAnZWagAAPngP/0aJR96cjIwy2q96RqSC\nCDFpuM1009kuxbEPQZ2yWzsoCD6FcpDTfTG0C2Zb9Bm94LK40WKqOixFIXyh\nCCdTdEcb/TYi2OlcJ1IKjh763pMh/bdAWVWBQF0k+XszwuYo8x5hvuU50gjf\nB9KCVWlmOfPy1qffp9CfWHAmiOKpqe1qxRHWbnTk4Zw9eyFe1SuoCfL3gQpD\nkMqgNAK/omb6XRMIcNsvvtsmpopz0ZIrYtxo4KDpAD+radHKTB6rM2uyN99T\nPq+mpPS8YTwFjFwLqLqY2LtcDc7z+LkUtLrsWqtd616vK14bNaiM0rkWs6/g\nDu7a7mJwLZbwzi0A6trSwTwN+ohRxjXAD5srIFTbuK8c+QEj2jx3495BmwxM\npQ7fQAOiZsuvTZSD30ib5Baf4HN6nWM7+6yVsxmtctvQvvbnsDoBHEp6Hl3b\nhWWB1hqnb9y0aeVnBvWaGbS48w8cDOrwLoofkKm9JOZn33WvThJt4dcSVG7t\nRCm/JkYMRVtb3EbJ+m29/N1i71dooARlLCSEwOHM0mS0ajTE+dvlqs5AQJun\nTWN6pGtBu0mSD8w8WFRhad3l/+Hed9MYhd5wYCAql36G1nG5wNXODdmdehUL\n49iTw8nC6u6F4Tc9pVyj4BdN03Bhmquc/pjVyA7npNAEsKFUIf00ZZfEPlw9\nT+y/\r\n=Nva4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGH470J0OtDDZtny0yZdSrg/qq/iPXc3K1XiBATla0paAiBsJ8Ol+f56DMwikJhVqBpygcT8qii/wgUNhDO8jBVQXQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112231523.1_1641929123385_0.993318624233728"},"_hasShrinkwrap":false},"1.2201120015.0":{"name":"@bentoproject/instagram","version":"1.2201120015.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"c592aa0f3999a8b6109a8a31a07cae6a83115d8e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2201120015.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-tJScI0mCmYGrygWqbDzyMaguY98Lb1O6eY5Bpm3w+HosJ9Z5jNWE6MirosAFzWv5kwZFKm29Mjm2Azi32bHLXQ==","shasum":"2acb9c71e11b48c0a27ebc557780366e1f74aeba","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2201120015.0.tgz","fileCount":27,"unpackedSize":851522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3sn2CRA9TVsSAnZWagAAzJYP/2hrfswpbDr0gJUXHZDt\ne+JTqpGlKyegTpWLgQhw+2I1XyDn1K3gZqvDuedFMk740wtZ8oN4Sgr+C7X1\nLPqlHkxozrg6FZ9C8PMyuxd8IIDFknF2iv1thosQh5225NXZbVoZ33E91Hbt\nI7danSvX93ubXn6xFaOB618ebUeqyc1qgvIeDjLjEGR9LYoAVg6CihrDZZCI\nyYxmiHAEzZpXzMTvxw+eRhyYI0BSlgktMKIwdxltJGtTkw8oudn03D/zuc1Z\nJGBCzhAYfWpb7GsYVnGg6QKWS5m2mr/ccm8Dh6V7uhJxrkvFdHsAh4fFx189\nASITsObs3weNCOYT9WE6ySs5Sgd1kxgcj/5ZYAePVJM41DmSr85Vl6rsLRWF\nd0FIaY2BdXXKp/DNc+6x1W4SiRN6rzjUEN8iRONngUEs+42S/GmGm7wdN4dA\nPp1ZU3ViL0ZEVNqluDd3v/ybPJhMUVru1mY7cdhJD4qS9Gwa22K+ZzpBHJ9+\n/7SjzKKsoSIonyDn5Ywlbjh9D3s+SYW9t1Zg89elHsIWfqsv0qxuDf/Fp93O\n0jpUCKoAr5MGdF85t1z6NjpDwMM12Yxjgiu0QWAYw+EXhyyV0PkDcYBHaOBd\n9kW8kjASLyIdriQcf8i1r/C54HFFKwfF0nQCQkk0AiWl5XIDQ/AM4X9fRpFY\ndVnU\r\n=8QvI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/vgCdiWmlCJEKoI58o4wAvIRw8rqrOInKaPUImZ8oIAiBr1aaABVCMvP3hjT11v0cOmGgU2XtMnFx9Rcj6s8graQ=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2201120015.0_1641990646333_0.02284033275402364"},"_hasShrinkwrap":false},"1.2112231523.2":{"name":"@bentoproject/instagram","version":"1.2112231523.2","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"036fd40f8ecb160f2d6c65688c6ff4765a670bf8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2112231523.2","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-tOzD0/7xQArZ6cQmZNizb9LQ2y35jmy4OktJWXaWAwa/MDYremW+OIVv6mEg9AoudEpZCYZX+ioC7GLt/wG6YA==","shasum":"f69b7115f89e3f5426f9640f8694e232e30d7f37","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2112231523.2.tgz","fileCount":27,"unpackedSize":847888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh31h9CRA9TVsSAnZWagAAZ5sP/2lyuBS9ywu/OlxxFf9S\nHn8oMPC1R6HoACSS17xjO8LQKjIhxgrHOhh0ydK/7y80IDvcge9mWxQqgr1M\nE5vPEn3BLSiQqGorCv/ciuLwH4rgu7zCSQ856YNPVEwj/PfYukqNJqWV/g13\nA8iI5js6mk0UZ8iyF9ekOhdmLeMNzBjDiXYxCNecuYbmh+NUQuwJ2rJbP103\nD5JeyN/jvuWEJ0/CaE0LpyYzoUXS50NzfiuWzDfrYqOLZGb9eBdAHxEzaW4p\no7Hppe8tWjXVPsHykf+JVPcoGdSuKTRMYtDO3TcHU59Fh7ucyKQEvlRLBOXe\nTaCIdGLK4Hdq6ze/dWHfaIJ37HdWbGDQvQW39zhwYLmuBg2rs4+gPC5HUGF3\nDBkexxtSJMy9a3XFfu2kNkIL6/i1lIG9LCDXxRfLmDqHSDN6g5tIH0U6qnQT\naQYM0bNisDOUc7HMc5msNTYD1PtonsuKzBfRjSWKq3V5B0vsmN73DOUwkvNp\nZJOsC4xaN1rcqletC8WPN2YCu46lXgsMswsgrL7Tkgxt/Ibd92/t5tD4xp/N\ngLUppHJrkpLA4KL3xkEqHqg42kRwAk7Tt0PzIe+ewI6qGvQ3iMgL5oLJYhui\n0NXEkvwpNZyd4Uijhhq9YyElkFmXoHiGq/H2JSuzsxUchkoE43+5XSfjgkPa\n8fKh\r\n=wCbx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAphoqktBBxNuf7RJpO+7eAz3eqp+vuLsPeGubBVSHJ8AiBN+R/cwp1ayP3vluHy4NT8OQjOVrBLR3xwzD8773eTxg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2112231523.2_1642027133295_0.5070480003419462"},"_hasShrinkwrap":false},"1.2201122239.0":{"name":"@bentoproject/instagram","version":"1.2201122239.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"c04895bc1c2e1d0b7b874427b9bf1cec2b4b9f72","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2201122239.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-VZl8toHWR5VmGKl87xSPqvgHqd9njfm7S8j8NpoC74jYlFNXbIHJWwzUX5vnxl5tIGLCVeJbsBDeFn/qWndi3Q==","shasum":"2ae1753609d2c612731b2536958ea7f21576d317","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2201122239.0.tgz","fileCount":27,"unpackedSize":847888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4CJWCRA9TVsSAnZWagAAT5oP/2DcYgnIwAwebGJRwLA+\npJ2BiSGkCj6QxqEvjCgfSfKzGoA7EA0REawqoHH4YxQb+n0c5nR0nsd2i+Dl\nKy+0e+Y9NYJi/GdEIMntLolHBFGdhuK4XxICEbtB56eHowplMdCGyumCRIg6\nlbYvVkzRBGwp8HARJ3sZEYeYOs8eWTQBp5sNN5ct+8fNSHtCbFctsBGD6Xve\nNCzP1ddGAhxmMZ2/CqWLef00ZETR2QLeFNzdj2uXFyeYcT3WMMw6uZfGQjk5\noHfV5NLJR5rXDdw6g4RD/p3gag76abcA9URc9Ob9igPlmYHXyjFcVQG1Rskq\nwl42p7wBG5c3Ww92HrWoj7aOzZk/TSGJVoq8De3pY53bcnXrssElL7Fj1kuq\npFLzaR56rX8c5yTGPjCw3ecaIIdcEChN4LaM00NfoCzJKLIO9q2T5j6YS9Wu\nij8LxeO9RhTw1QAzGwFVwOP5RKIQsY8gTmFBJi8f51ERcA6zOcLYEEPETTle\naYe47fUFuy2ymvnHIT5v0uTYiA+ISItOEjVnNqLYqkqzsojDaKO4IyCmDPQ+\nHIhbIqt9lRAd2TAqbjgZKz7LQYdXe4/D79sK9NVof8hiuCflkeu5f7YzjiEG\nGia2n6Lsf8NbmUZweDxRQ3za19gKP65Meke3a8l/q9TfpLezPqFqXHGxmwQk\nKt2b\r\n=hQaX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSznMl14676zyiZCwu6Vzwm40jIUOrrtourtCxFEgrkwIgQSppc+IyxnboxNGtlpTsdhsA8P0xPqjNkW079LzUS5U="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2201122239.0_1642078806446_0.7739803146068696"},"_hasShrinkwrap":false},"1.2201131702.0":{"name":"@bentoproject/instagram","version":"1.2201131702.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"e9b16ad7a5cee398ceaabf6ba7990488624e098b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2201131702.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-yj0ettLg+vbF3yPCMqTKoenvkrVyIwNfjMYlXy/aoujunoFkpENdtSPR8fVArXblvHUjW6Lu1vHBLapdPJT2/g==","shasum":"26dd5188e87deadd685177895bcf90b51100fa41","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2201131702.0.tgz","fileCount":27,"unpackedSize":850712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4XS2CRA9TVsSAnZWagAAXlgP/328ICtmhwpI9gDpzobH\nW4dZ2ZWRqPKI+CixCzF+RDsRzBiODokx1ukZGfC5bcAzePsSgMF4aO0gKel4\nuy+XmO0pmFl1cYBaW2fmCo7UvFqGxDuVLr07fvXAkDQw8S0E8iZBzFFiKYac\niBb+qvs9ECa9LqnwNSWSCRgcsSRgh3hlhoxug8ke4d5mQrqJtAO5NZom3JBZ\n9QXsaiKtsIXGm9xecyu3neOdZCLap9bRV81gZxyEvn49p/w5ezkCOd2/9RoC\nh7tBTOjK91KRQiACrR1F4Cqz9VsFugqfrKA0rT5jQFrGbp6aVd/KiMjHHCSv\naqznG5yolAQ/3tGl+6yy4d2jabnd+KeeMa8CvIbWI+dumc6X4CfxI+ibggws\nlABVIYw7xU+nU7xPRw3kG50LUMFa56lNNhJVT52aKYp+D+UYnFKMN2GH04RF\nlciq7Uvzi0GdSH3EWuaibHjgJL13TMzR1RAbV7OfYaUL+FbsAj6csJTSNNIb\nJKim1/ERyXs2QFvv7Q0UbNrtoC6BjT+jcehn6QvMP6zaQazZF/rdX3LVUDcM\n8tQ0FEi9rIY/Y8ORXwSkNTVGetFdCx8hAfFSodw8i9kJX06krnTh7Slxqv5e\n0Uu0ABRZEiDaCMUgr5Eeep+2TtJePRr7B/sM3l3tldzUIJZkbYhlNUFSTS51\nuAWz\r\n=joqx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGVdmBHua3r+mCqq8GPQJqVpErdLDEJAodDlyOcTjhnwIhAMIFzJ4+Fu/NQrc7Iul+rEuSbTTLxQJiDsqcn6ucctLJ"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2201131702.0_1642165430577_0.8652912753497815"},"_hasShrinkwrap":false},"1.2201141909.0":{"name":"@bentoproject/instagram","version":"1.2201141909.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"96bebbc98d1f79b185c5ff6c58442ddc2092547d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2201141909.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-OrWN3c/T7e5u7tCLai+emDKjW7uvB9TI3TgB+F2d6M+WTRtCneb7zjdZK0CYdDyy9Q4xupPNWGpdPKvBrSd3RA==","shasum":"6c9ca046e8c4ebfaed578857cd794a9759c12f04","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2201141909.0.tgz","fileCount":27,"unpackedSize":849064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4rxSCRA9TVsSAnZWagAAToYP/1ffnoL8TIeXD8kDZ6td\nNZHBVW/9bAWiZQu3ckPmmVlcOC01vIEZPqHRNokgq45EVOIzsT8LsOiDU5o2\nHuR4V6jU6U0v75EOGSrYEiBGrZNa+sw5iOiUdR6U6R7/Wd5P+5Q1RZNpbiq/\nw8g+bMzGNoLbAxKfjBU0KaLyBydUFpAY5m+1H0NO4S8UZchflXby7uMmpaKP\nungD2IANcuJjRwUz6EBsC/uG+SfJRdwE1pGzPqAcAzVISzxYC0sVPWm+dohL\n+bRJ2heWp7YryzSxQJN7TcDBgrBXYkAgb7Sr7D5foeEPF5CPBGvTjGrb9Vqm\ngkbSWWHgL9HFbmmPoC72wTBo9x0n3mxMMSMgNRIwXVzMKEf9utaVyTB3Bz67\nh9gDa/s2HfNVpemPRnsfMK82jnstrSqmFvMPSUwwtO45hZZajgnd7u+LMugU\nSFTMEqtNK6UJ4ex9oRAhU+rmaZ7/1RQZ+cnmheiARDJd7Y7wLZYQLfJCM+Xs\nxdyXKuxzyq92oZ7/zLu6fJ1p0c55KJiWLOkzivspRn5l6gIHc9SMAWr9mgna\nGnPBqLFZp3tDYHQxV9uQVhlydz8DkzagufVqnz2s5DlUIThXM1Hdnv3MRh28\nWiC+vlzhr1YrbXsA6gtoUN9ktDjqElwJnism3Nq3e6+Ffm7Azf7+7vIo/R76\nxu2o\r\n=YJg7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFDFdpwV+azCQnA/0LW6Skfc1TwmNG/EYYCmPxu2jwnFAiEAmKB1HFuBgK6sdRf13M2yyC4eNTpQs9cKsfzAARGoNfI="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2201141909.0_1642249298301_0.8703612598627672"},"_hasShrinkwrap":false},"1.2201141909.1":{"name":"@bentoproject/instagram","version":"1.2201141909.1","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6474ad58b0a7e1997cf1472b09ba21af402b09fd","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2201141909.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-b6pUx2d7kZS5p7+EMga8qjTSUDQ0AJ52JjzNdLiJqwtkj4YZCexU/NZXzPnzFytsnWfxR0EIeEZpU5C+zNeHtA==","shasum":"ce251a5f47ea0595927204bbbbfb7b0ab6bf6583","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2201141909.1.tgz","fileCount":27,"unpackedSize":838434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8FRHCRA9TVsSAnZWagAAdW4QAIHGNO4FKAqDPjZCD+fC\nNB0G5V2hFvWSj6UG4uBIoyeR8L0zHwYh7uzDkqGKcOh9TECp2NGaYN0EVfpk\nBqtky7xH1WwVYOWGVsXlOJpH66EkcdF8+dns0Axvs+2HsMV26vwp8210CTTc\nZPVZ1ddGgCl5dyGnqs5pnOcu46h3yQVse7UIpe/mprDdYYbdJMVlrMPuw4lb\nddgesXlIMv1WmzcnvvEM1L/13IBLfoNa4/ldDBu0Trx5/yF41da7kU4py+Fv\nSrlp1ip3MJzhNyuoSXKFmxiu28rs02oBxEEqg6gIVG5z0HKX4+U6LmmnPnxG\ni4HX6XwVXJ9UKsNoar9IWXgbNO+WkUKSoREX72PuLn6dwzqASu9PlHus77D8\nZzAyLBBa+gBQenBPVh46zZMdzkvwNjwon1ujDEvKhBFixsqxqHRNVYSNPTbz\nYsvPrEznqJf9MuVxDeXKEhM2tnWASGOg0R8WaMkiruSecCGAD+ot+H6iEzrg\nPoXo8A3L0cRSrxZXev7B5fBturd/GN5U3JVya/rpPdJzFnlRxB/oOiwgPIuO\n1MxVPf0cPuSNBVu71Icmoe7ZCwU85+/CVajiiwvjQJ3sSouC4O+PrJSzlmGJ\naUlLzqCpJ25wgDhPc/XcZcU236v24FD+AbmEJuyk41F6/YrgSBNEgKKFLuMC\nj70O\r\n=Ofky\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgI98tGFLEGo/TRVpaVzsatbn98aCyLAX1BWPptcB6pQIhALyXCpWXpKBwKQ6DjUN6x5+EuoVHQsNiL5wPyLHgoqEF"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2201141909.1_1643140167775_0.46532462268962105"},"_hasShrinkwrap":false},"1.2201141909.3":{"name":"@bentoproject/instagram","version":"1.2201141909.3","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1edf4ae1e7a533868a19fad5b3b4da9917432bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2201141909.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-G0oz8PcuYpyep9ZFx90nDoeSUtL/mtDEokW2LRZ2GcJLyRxjimREWpsOVP5WYjIUEpUByGCksS7/taTYFtyLmg==","shasum":"30d16234f2f57ec401f413d28db6ba0ff923be59","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2201141909.3.tgz","fileCount":27,"unpackedSize":840824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8bX+CRA9TVsSAnZWagAA6gcP/1Y6A2GXSU3inD6p92/A\nMQE2fxb8gtaf8hHKxh2MPb9iBINt0Q96LTKu3IVqSPgSxTriwcaX9popw+0A\ngiO6mei3FLzVCeafsMZ+VEP0ay0tx78wgXssEc+OaEwbZkDamhGtmZf4loUA\nWw6y6m0H08yiis65tofNPhCAYNgqYJsItdGfPWu2sC4iged4fGUT3fnFvM43\nzAD8QgIVofYalVjUHwQzxDz0PxkyfPti1pJx51wQW7jr0/C5O0GoMZjVuHap\nkTXq7WWdH3D7sgE1zM6VD0TqBmj0knrCIfInHJFVodfyIW5xrTHoDh5OhfuR\n2GRuSOMiQV/L7UjvXY3GfSK/PLs44qZm2d7sFCUTfSlxcFiLGbAV5jTtALr3\nu+dgk77A/0TJbZ7peD/NRUIjrnrF+iWYGpDJkeXZ0w1MvGQNgG+zz+8EDV2C\nkltE7Eo1qt+ua2JjCTp7sxid/QIzs5338KE4CM5CjnXoZtPEFDYPfdBPzbUP\n0FUw3+VpP0BQ6BBtsD6Z+++3m6jUnW8CE0c2wTHAZikSWYp/tS1ikD9SPviP\nbGQtksIY1o4VkG4AMYZr6X79qXtNg4lj8qDTwzkaJWUiNFoksOb8JQTWOz3j\nVUL3aoodf5SSO7eVtj7v/aE/T7lWAr6FiVeN/bxfuHoOi63nq/n0Xw2HXdH1\n2IOT\r\n=ySjM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrFuY+CNDIqknqvCwHufiCJG0xl+mmSFmY129OJq39KQIgZNNBXad9kA9bOWS+HzcQu3GWv3ITdsNDHFWZwcKl+1U="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2201141909.3_1643230717984_0.9833398003092255"},"_hasShrinkwrap":false},"1.2201141909.4":{"name":"@bentoproject/instagram","version":"1.2201141909.4","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6e60d79b180fd0983c9644d325b45bd569c6da2d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2201141909.4","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ipdglkPURArEJ+BJ3HnkTpGzwpliZom54VFHjVbhw7psfoRP9avqdz9uU/iqIwWQH65R7NUdAX2k5eer8BpfUA==","shasum":"336e9ba8d6b7d38abdc888639b5c9016f1457df6","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2201141909.4.tgz","fileCount":27,"unpackedSize":841538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+agrCRA9TVsSAnZWagAAUk0P/ilglqL7Neupz1BiTcI1\nJwh5t6w3MBTqrfu0mf6xiza7g336bGAeBYZu+uvDPmAI7bOACsl4TKwl+tmj\nRTONBWAXrbw9AE1Z7FHl4KUrJOhYJBr6G178aSAwJrPQc3v6jh9p11jsBx09\nasaFR/8lpP18IZDPWHzLpHCkdtIK/kuKGQQ7e44qjgGriiXcbocwEF9sr120\nFZROMfuvVhquxN2ag/8ThqXuScxhseyS8FLdSMnLzxbYEsHTxtkY1NjE7Tx+\nQT2+EcfCuEE3ePgpwzafllMaT2yjouwXQucMc2X7AIwLnYFrnJ7Hi3jRpqv2\nHPS1+7JIlFlcpE5c3WZVhbEzNtviCFUo0xhi5QgfkTJ944i9gC48KrAwKMvU\njR9iVfE8KBbqqtGcSQyST41Ylgq8p2amG3npPnwQuPfpiCvnLn8lDUlF4vv8\nCKIEANgdcNZjUkXYhWojRJHuXtsmW6rwV/C9dAZtUUrSywYSE1aD9g/GbqZA\nHXzEoOcFvXEWVi7/6ALqweKoRDei8UyO4isK0tROpvyZSI85KqSmIwdHgyDE\nib53mCyCgIA/6LPfHmtJtCiA133bG8SzNBS/qdCBgTpf3FlONXWCc5+N1dbD\nju56UvzRYyKyMeso+PmyPnt0EkOzClixp6OeZXQECMmx0vV8lXX1jNm2GWWj\n9r4E\r\n=6zUt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2am/WwKEymJTKcyE3/q/WBvFt1qupWKKc87YleGfbZAiBjwn4taaflrJ9DXkmSV+EgDhlEzTEpjvMeHeyHyVwm7Q=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2201141909.4_1643751467632_0.8547118880688982"},"_hasShrinkwrap":false},"1.2201212122.3":{"name":"@bentoproject/instagram","version":"1.2201212122.3","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"ca1c7d4b4b4a72f4913d7c304b5368187458574a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2201212122.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-YQWlsK25wQHp6kYv78Vn5kXqU0p9lgoxC8h/vbbKIow2TLe8Qgz0vQ8T3RKKag9AkL+p2yGALC8djr2ZjMEKig==","shasum":"d234e0d855fe7cce9494fa0abb667abc2ba3da82","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2201212122.3.tgz","fileCount":27,"unpackedSize":841538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+sYzCRA9TVsSAnZWagAAAR4P/2rutNzPAyM/0AVXv5sV\n7WBqCIO4ns8AGpWgNh3NQUoWDzClCashOagvvl5g7ACrz6pEFZdXZlPZb7x7\nvjXlzasrCVaIT9zXrDvocdgzXv8E9tQJU+gbxtj+TYaeGDW/Z/D6JJkX1DNd\noIKRlPNR+yc21flyMmuHcPdU4To2Hcn00uyocxEnb4UmbQrBqSsOVq1tfGAO\ncu4gtNKOYtPY2H4cvnRcTjpzCp0uIUjCRiOm+mqAE74FHihBBiOdg8D9HHQB\nlc0Oo5ke0prpyLgpeemrpZQ1u3lxHOwUUKME5tlv4XJwFXN3zfmdOYgaol7a\nb/XwuaNyoSRECAws4LsMkYd2k4JHcusuptctH/nMHcDosp618ifWOdTh+gsw\n4isIfXvUVPKwfgD8qAHNf9TEAKLrIjGB/VohwRvLpKtwFxVadRaoF1EBIFxs\nJtWVn1+mnWRlsCj91iiUeG6acP/1IbQIYmDK/1gGsBTSSaOagF+kGgbt2bG5\nenYAfVG43lpPVFVOa2awWKyohYywlT0uywwa3dWb5ooMrFJv3yj9h4ASdCli\nz4zN4qkNva0Mf7uLqD5QolN08YdRV0fqv134a8tMGw1PGCg4JRzDKxEVnPdt\n32WefO4v09P3YrDSGjjB1OqQB040gAsRNjyx8t+so3FrtHsK9ZW7spSnmv5e\nipPh\r\n=71ps\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFfWFr497eKLhcxk59Gz3SFrYc3fQ6sccgSvLoTHZGMXAiAxifSHjRJ8KIjGRxjjVLYspa4/32zRdSZyEQqhQIYEHg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2201212122.3_1643824690984_0.5097492707756051"},"_hasShrinkwrap":false},"1.2202012258.0":{"name":"@bentoproject/instagram","version":"1.2202012258.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"fb0c4a54446b5abfcc53d1d446f24370c05507c2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202012258.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-5nQMz1CKcD/+2kesU4ynmKf4wNPKxghH+iEzpbtaTO/9HmPAsbCOXDEOtVWDl3s/tspJ7Keg3+lmDj9RoVEtLg==","shasum":"e4f104d5900147705e634f01f707caf93250b424","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202012258.0.tgz","fileCount":27,"unpackedSize":841538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+te4CRA9TVsSAnZWagAATl8QAJ4qCeZksOuoh3dk6466\nDmVazimK1LJ1Gg6PO0SYuFTV/TFC51R0SbZ4CdKfpg5CJRG6QIg9YwZDLy7u\npDvSksdtszKxYZ3zs3FvYWcq9YwNe7K+Y2nBEMe++NQoSKJKrQHizCSxGU6D\nc8s6LGKgtNRyDEv4+PsagwJD1lqFAGrY2TjqxZ9VUpjGCIv3fdcnGldI8Wkb\nRRrISaNh0nr5xob2/DYtvfDT6SfY1f444PVtihWhDwPZ72y5/YbBBVb66g+3\nZ/D7u7LaUUkai6fCM9NkvccjOH2jSnqh7e1op2zgSmvxzKqa88C2cr/WTNkT\n8LmZj2pmk6PoHhovVJSmBZy/FLvoZKiK34HNtucioSp0AYcjNdkTyUwQCnNY\n09Ucd93s3DFrwIAa4vGkK7Qzx+oRYYNbbSqYsrafa1Vx4EbD0y69Bna69M4q\nl+BKFUJnvv3UJYMg6beND5drNT/mHg/Qim6xqFkzHaZ3z+MW4MxMlWtFRQ2f\n+sC5TSNZ4Q9yfosIgu3BZyeLm8KarjscitrMx3bYGPsgS2dLaAyUbU+BAnnt\nxBeCjsORblwB45PTkIO/XVnSRSxiL++Bv59DkRjvIbafoAwVyulWwy8WSaeC\nCcduykzlBQ9La2ADZaEi/aM/0pTFXrfRFjxRgOGdjCsRPSYyp5bhRCVLRkxX\naktn\r\n=c66t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAp/VmygJrCP9Hcx71y2J/q+FqF4dfXfbkf1Xx0mfqDoAiAT4BwPIjMPIkKF8mFmFRHsZSPYo3Y+YBm+07XUGfkjfg=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202012258.0_1643829176233_0.7191658771270479"},"_hasShrinkwrap":false},"1.2202022130.0":{"name":"@bentoproject/instagram","version":"1.2202022130.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"76b8fbdfc923fb90c4ecf4dededfbae0a5978ff5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202022130.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-7nf1ymXJyUStZdnVaTvBGJ65DV6roQ9kqy3VukjOyX5j5ixr/BcxKeX0kl8qhm9/N+NXKCKmz2Cg/GQQiWVE3g==","shasum":"af5200995d1944389304d0a7b066e4dcc6eb6ec8","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202022130.0.tgz","fileCount":27,"unpackedSize":841538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/AlgCRA9TVsSAnZWagAAhisP/2Xm4RnaaI9HC0pzBkAv\nlXT+eooY6v+rqR+0jNT4NkhHIK7SUrOcCrnBedVRLSK20brsjjKlchpgqJgI\n0jx3dMcVUpfU4TbieUmh1gGfoMoujW3WEQ2v4AiQsXwzTlFCnrBDEcK0g1wT\nDC7I3yWm7hJeKHXCkfQCXuLuWs63xsNy8TqAdO/aav5JWLbeWzgYICiHWh3p\nCgt1dbmM02h69XAc3Olp8R0GPdAGMOiHMXd8XQssaVRGX5W87zyJWPcF1feF\nVYXPEzis62xlTAmMlBiDz802mbQVhDFMULWn5oCAkKj5BLekJIBwX5zERW/n\ndpEEN+pxl3oLryWBiyWLdI5ckw7oSR1bslwkAr8xX+wNJrtYlijr20MASKIp\n86HAq7jSkOtdatfaWNOHuxIwSJ+hsQBWanIO0EOl6uF8mBASFgH5DfpTwF5I\nKv3WUoMsdTteMT30JEETLgism+eMNY0XeEWyqtErZz0lg/w1TP1NkM2V7Ren\n2rFsm3aGxAEoCqWjCuroHoLjNhJ+vkIe3GrxIdRhn50xkYHI3Qpsk7IJJBla\nhNUAuLZgS0jXD3RX/h+4Uo+/vlHQwwAmcwlKKO3y1yfkzPShNCF5E4RUhk7U\noGGpt8UeyoXYk5y+IkF/zj7RoMKCOfO24sH3jnRAvQiIl7RJSlAzeA0LwyNq\naqy9\r\n=ZJQA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2m0EoPg0xT/yxL6rUB7bt2xz6QyolLcn4fNLoI8gmzQIgHR369ENvbxN1kkl6V/J6BfReZgoyqDTB88+NjdxE10k="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202022130.0_1643907424708_0.7469925901104786"},"_hasShrinkwrap":false},"1.2202031816.0":{"name":"@bentoproject/instagram","version":"1.2202031816.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"b29dbd478c93a5298a18f8df14e6c1f5184879e3","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202031816.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-EumF/sCKgDDDakdEhwLbI18xRTEWnM8HDOEaomJu29zvtTGs69aSSAi1IA5iZkQ61xCiq2MBwO1GUrazxdeSYg==","shasum":"927209b7a5327d21b44d23d5c6cad29a4252bc9c","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202031816.0.tgz","fileCount":27,"unpackedSize":841538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/Up/CRA9TVsSAnZWagAA+rkP/3/cizEvq2HH7n9oLqkk\njJw8v/dg0O/5AsrlPMKUhy052eQFrNNgpUA51AyAXzu2Xz0fT/mwUX4aoSMk\n7/PdQguLlbxq54VL+2cejQMDnLgtGmlA9wFRersgDcDXFYgQzTrV0+c2bzMD\n6r5Y8L9Mokoe1LVRXeh6Y7BPzA039M1XWGh4Ybe+8cUKbRg9OeQixyElySYe\nxP9SJbgJyWz0bqJqxtMqUgTvHywNieLlMLcQQN0jQacWwxha4yzJo8RpBSGQ\nXV0pIdpVGuXfrNRHR2kAwglBHwI391pbOeczmhYPjAsRMj0Zp0TKYNDhjsYe\nggsXpgMXSOVvr5NNm7+c8ypN7TYIJ42jZZjeC2Cp6Dsl3X9g4ZLp/V3ALk9B\nsotnD1geG1l8ahT0YMrOUY4Rb280InHgVteidLdm+pP6TcHzq00e4jAXP+9O\nYl++638GoqrjJoBWDkP7hSAJ5jizE/Qiej41AkEuEaftCIJ+foh5CLgq6j/t\n3RvrKDDexYFztclYG2nlU2xvey/Pw2lZVMzrphkg8nflbxxAvpKfhVA+AJrw\nG9SrHk07vjUzJCW2W6Cn4pZFLAItUmtdRn4mAQ+N/vEUSqx4tw0mpbfMdorZ\nzypf3Ta3/ChO4cFmgpj3KdGtZURLkzlRr+0c+R8G3Tz06mgO3V1cvnTXLrKj\nNFz1\r\n=iLjk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC+rmOoQBTQSbAM9Ol8nOrdqwGEXB2TNhB2mbQmumzYtAiAaKS9NxTTNGY7hfuRI3mQnyoAFSy7wOM7BKaMwbiJS0w=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202031816.0_1643989631412_0.5595623513143"},"_hasShrinkwrap":false},"1.2202042210.0":{"name":"@bentoproject/instagram","version":"1.2202042210.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"04d031e10759f2ab3f4a10cacd2b776e3de93812","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202042210.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-WJGCUOiF9WC+DewABOiekKgc5LSSx41DPP/QvYcAWosKAPZaOPyMT9TPJtQrmmV0Pz4FH7JVZA7iFlk4mlxLPg==","shasum":"e5dc30aca1e6bdc776bb3100d92b5080ed133b36","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202042210.0.tgz","fileCount":27,"unpackedSize":843081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/kC4CRA9TVsSAnZWagAAJscQAImFgW7vlwypEMAHqtTN\n53U+GrfK6pwoGh4lM1KgS1CpiVuGw5rxJDCUY2oHZ7HQJWsvRsl5S00R5uHc\n27Skkc0Z6rjNvdJzLrbN3JwDZ4yDWDMqNqhsp5pWFPaAQpyGviZN2wOmSXKC\nx1nZ3qVLUfEYAoXs5d3DRL58cp4epCyPRBNN/Yqpj2VXxqjg9y7tL14ideY5\nxw3zQ60/ZXe9oJ52O0Zd+/kK5LdUP0aMsrKBEL2X7+4RGfLBUjYSHtYTo2uV\n89uH0+yfKJqMBieU3ot8jFt+Y7pp7bwSDxQ53ZqTwO2RTLbupJya6PJMisxY\nC7yuWQTpQCKgpoG7+iemMRV/Jb+W2iWfSnUG7gQnkAzlzMIStC9DsXf2ViPA\n796cDJtFHdaWWQcw/ZcGuB58/UZkUjIitIt4D0dAFcGlft0wgZ9IYcZa3qqD\nQyPSDw5kVy2xVnJQGgNAiWecTjvi9oqgqd0P4EuxtHLVUKOeTfaOhHS8lbMV\n0zzggq7jcEI0EoAAX208Obm/CnUsuXNinRsDqKWau1D4hDTMNXtVB37T+0vt\nOaD6pmyBzEcXpDdYc/L0mO4B15/qU44E3Lepov6j6Kyz+onAqIFgvYe1K6s5\nl9WfzD1//noj6lQeUmVatAq+pYb1cC59T7+s5JHU2KqqX/W9/rtN1e8zkPOs\nT/B1\r\n=EMuY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHsteUXpU66/wUC4FUr+65qVqS7LA6YMhB5IdXYoaA71AiEA8Xu79U9WRG4sLJBj103vg8gfuoIz8KQFEXbyU/6u/L8="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202042210.0_1644052663905_0.8713991644901873"},"_hasShrinkwrap":false},"1.2202072236.0":{"name":"@bentoproject/instagram","version":"1.2202072236.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"}},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"1d8443e81e44defe1ab915032668da75884187d8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202072236.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ks8Z/WF8d6SYu548VoE4DNbdFjdTIy5MeZQ8o2Ar4UYvsaiIet8NSGCDqFXesQwG1EwGAkiWz5MDU7Kf9z1Gpw==","shasum":"e2515cbefd1bf515dd571066ccfdfd0803399d14","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202072236.0.tgz","fileCount":27,"unpackedSize":843081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAjX4CRA9TVsSAnZWagAA+RoP+QC26g8v4jV0K1p47hVn\n2Hpo5yuYxHVIS1aGN8u3b5mLXd60Q+XuwutII+dom7rzRfTo3dZgS0L3EQ/G\nNx4SCcBUJqmZHNs8i+uIDTZ5dYE9pRuWdYX8CnkbF5XggwljwxXwSpj3hWeg\nNFHOEtt0T2gI9Z4FrJIZUXtJI78R9cDJhDg4xJd2xSlF52Ti3cDwHjk64zmY\nzGy4Bz1XfC5oYWqAkSziX8ZrgUd+UCA5lCavmO80vUBotTU8ywg85UrMlTw5\nY6ahML2cqghz4/K3ei9ttLC5kf82jE7knrIFrE+9TaN9sweuCBT2jO1nY6WD\nC2PsSmrpzUG6SSrW7ggQ1vfYE2wl9tGGLfiHZVGbGOFZfWAbZm5CRQXaOPvM\nZqkGydKhjrP/JCERxDs7gDdZJ1aiGWs1AsgvO8upIMLs94oenBHKWrpvr5M4\n+VxslNr5YyGfzIgDZMYczcOp0UIAAvtiaYYPONMdbX/XUBC52o1qAn9KUSoF\nl3POuyUNzg+MLXYZNeItMsJFWqdgmoB3bA1sXPjUiRJlGjZPuYlbm5aT+4Sa\n8bhzAco2IRJArMI4Pd6FWYaOiEjM36bP/GaaMyWZf7kkWpg2eH55lZO+z7mP\n8FqVbO8JwMs9Ne6RCLpG5MSVVP9zRHWJRCfXDR+Bwb2mEdBEN89Nkl3TCBv3\nR+g/\r\n=D80m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHpxqxcxaNGZ9vcnMEmZ+kx/hAnpWtzbqX4jGErG0OjjAiEAgO6UHOaXOht+RRP2W3oOmxo8CGWyOUchS3u0APiKF3g="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202072236.0_1644312055831_0.5493706848615825"},"_hasShrinkwrap":false},"1.2201262038.1":{"name":"@bentoproject/instagram","version":"1.2201262038.1","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"cb2af7d382510037805d85242e3f21a88654a20b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2201262038.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-99tKG0sH/ybuTvVpVi1eTpr1rs+0WMiIBneouiOBVxF0DKU6Qzp2h/L4RZY5tC8a7gf5Zcg2k0l7YdDgQGNrJw==","shasum":"0c96b392bcb74b10a02ce7a0acce17c2d330a78e","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2201262038.1.tgz","fileCount":28,"unpackedSize":849241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAtzyCRA9TVsSAnZWagAAEUsP/3ITasReVt5XtsX1e6We\n17Q8TF+HHExfNkDv8DRVf4IaT1qcijwJ1j5w9vSgbY/V/S/yCvBXddCJV9W1\n5aTvSx27ubUYFICkARe7j/CLH6cRH3+Rd9eicZWRQ1K37Jzs4wjyfQx0L4TW\nXLeNPqtyD+BJwpHYzUPrSwDlZp6UPgikYmU/z5EWpsaa1r/j62kUOWNlVgwk\nTmKnK8VvUPbOir0PgDEFHn+eHJYJpo9sdRp5sTvGzwIIj6uPpY/DxtyLsm/8\nHOhV+hZHeqjSpb9KlFEsk/kNPKEPDGjm130so/u5w96KrGseBkq0HnyZDDB2\nSO+ZHEfJ4srxVvsuU7mGC0lXJYl+vpaYnUGpx7TTf7QyT9atLqg2PGinnW6r\nIvLj9dYLD8DVNhs/HdAgP5+wX3EF0PAjMD5gyrX8UEXBmEy1lXVx86VmKBzD\nLW3CG6eHZvpj8LgjGOTKnESkQIpwM/cz7M0XFV8DIFzt5CDt/yFSZgVT+jtT\nTsVisOWKi3TUyq1Fy4eUF/d3whO5FHeqPkRHlpox9UthcnvP3HyuYeRn7x3i\nEOEZ5wjbcUA2RAMhyZRcDNyE+lSilvunazOIAgpNQi6BUjgxI9hVJNjrtTae\n0aM/r23VfK2WdVNb/NF/tssdsBkgLZODgHRzkJtIk8xEC7LP8F4vmZvAQNzN\ngC3w\r\n=X6rl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGCF8MzHGhMYxMQc19JLrmPykfo+ApPaolH1xJlgytUcAiEAmRJAKstLq+/Z5OtIxGQCaecGzinGnXnLZl7TMIFIzyg="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2201262038.1_1644354802487_0.8971183828598297"},"_hasShrinkwrap":false},"1.2202082004.0":{"name":"@bentoproject/instagram","version":"1.2202082004.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"572ca92abd38a7a42e381c556e12e2d929f26802","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202082004.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-mPu70doqfprjv9Nrfw0owq/PrVvR5Vi8ZqWq/rosaIqUbn6805kt4GvNotnHgtcabz9CRHqBOgeA36n9fE42QQ==","shasum":"50d73fae12e0882dfe22e87b81be89494e6f0327","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202082004.0.tgz","fileCount":28,"unpackedSize":849241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBD04CRA9TVsSAnZWagAAZr0P+QEBe4eGHgg8TsIOP9l4\nWBg2ZcCmocZkoY7oYpGC0p5L/Qpfq/c9GkWljn93Ijg8ZmerOAt0AWVmIjBF\n17AFvdmHzkP1QEKfShs1ZJ//n1hVoSHE1d6HDle/xIZkIgD7rFUL7RCURMpy\nDykmo53CMYEkgWmcYqBvUWatSCDT/lEXxHwXSekEpAFfPR7rFw97iTX7HTHY\nduJnONTOhaa9b7uoflEQOjiJO4Monmou7ePxTdRTSa5kM1E2aYsX23ktwfTR\nYXdtPqKPBD+0IVFMTSSlMvLSziAqHn/HHoagjyvAo1f1EX0ImUDuFKZcHQqg\nXol5l44XqMNuQicwJZlGLiJ1QJ5SGHEsc1Ax6A0tWRPOlJ7fx0y5z0a+i2Fd\nZbS7ZYbbuAz+0xjSpqCyGsDZFkRf5qQ9bP+9iRMkPpVAat3OVflnmxh4qYIn\nX8MPrug6EZok5xFPjil0Piz4nmeqdkGmnrUtC+B9uhEPVF1sfnR7JmGz48wE\n7S9KnUg8ixl5yf+bEXuxVh1ZdRkKOTHausk0zfEFI+yjx7T6yr0Eq+UV1fh3\nUwq4pws13PposbHA5N9srBjiqBSwr9wh4KmlnBt3kSt/uYCHjYt9rtPxlYYF\nYZOzZXMWJVUeszxLJVgA8K3ScXgq6Cy6RRshUUA5HXO2fDxqaqt565HjSkrQ\nX7l0\r\n=/Hs3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6b2BSpD/akfxdYjhlzTWG4XO0wlGpjAmcqmYGXViP4AiBB/gbUfTSSJGJlEMybsyW7Se1Hb8gSFtcquw6pWEuKLw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202082004.0_1644444984703_0.28532783251174165"},"_hasShrinkwrap":false},"1.2202092050.0":{"name":"@bentoproject/instagram","version":"1.2202092050.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"37b830a030b935fcd922e108d5afe28be61d68c7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202092050.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Ik3WbG2mMHQ8m3kD4NEmokLNErDJETavZvdYVYj6cMFkC9vq6TmrkShDA1oXzuW0ASN/omKL3aeQ0sS9PXXdiQ==","shasum":"928d3d976ff83756f1823cf1df8261a6caf15c06","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202092050.0.tgz","fileCount":28,"unpackedSize":849241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBVHjCRA9TVsSAnZWagAAHMsP/0A3yz4SSg1u106LRvo7\nvElJ6zn0BsjUC/m32Dk6LpgipzdnETrPJuCwQYeIwigjp46bPps9WwTvvVfD\nxuFX4lQOP0ZlSuCcLQM4ZagtyfYc8xuN0iAN9KTf0dI7lW5YkA65odFghKfV\nsRanl8UhukEXKhQYdjxremUY3Lj0yQMvRuaTBxSp7XgM6RupSSW96n4HIVs5\n70RuCWb+ayUEKxFyY7lsQvtSycwxZNqcE2JAla2qh3NvkLzg0TSOSQHaNAfk\n+nB1XdpP0jsGiPEuRnGQ1gQ3vyxxJGgdgQsilQDweADiHk+lzvGI3KfOdUx6\nVSY71HVUg9DfziEEYBGWe5J9TgQw0ccQ3m3MrW+7HHW7iUGHQuMONrxDTqzi\nohNMrrF3FXSGCD5ITH461onfoyaA4ll+pGtcdslk5sIOohXS+TrD6tqk2eT6\ntkyxOyjJ/f/14ysxNSkBS623gLvI4cZzvNTxMLHPlZ3PWL7YLlY33N3gFug7\nRYhLqBWm20iLDlNDZENelF4LDzy44+34BQa9Mo9WZvxLLtzz3NqAT0/dEWuS\nwjuTqCkt1/+kIihZKqG5PUbRBllRqZL/o59F8+cmecdLEftMbOPGDXKE8rzX\nP8z+jBq5C+4f6QZHKk5lsxqApF0Hrxe6FhvEQZlUs9i8BLsHzL1y/NdIiZO5\nxs/x\r\n=h+Hw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID77SUyYiv4pMEIsWCblomLW40asEtPkNZdLZ7A2msxwAiEAgyWkRJ5qROYfzNa5/OfTF7x125FrG3R1wp9X+yMn9eY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202092050.0_1644515810756_0.9054087679212135"},"_hasShrinkwrap":false},"1.2202112230.0":{"name":"@bentoproject/instagram","version":"1.2202112230.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"42cc51fbf53c86e33b0a12004dfe9c35b8f5d0fa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202112230.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-NWWNB0YYxaIMdS1FDBW6mYJgmica2Oj0r1xFtEuiaArWD9cxwxChHxihkRNAQalsiRA3APpBd1hjrznRFguQpw==","shasum":"cdd82e3bd704a1667030a9a3c3ccaf3aa64ad844","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202112230.0.tgz","fileCount":28,"unpackedSize":846949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCsRVCRA9TVsSAnZWagAA0vAP+wUm189LPHnZnEmTpF7V\n+HRcsy9YznafssvlrLAgSFqZqFIVyohLeXkKVTslYcOq/6Vh64GBRjG88YbH\nH0kKBkmYpKPJsKpiP9D9Sj23AcVO0UzaYfVGvxtWSVNOooqTNgtTpRcsQry+\nvmAyL6oHGaEMEEXqLCBS5U7C5C8AXC86iYVBXimpK11y4YvrmYOrkLOtTd+u\nTKd0swXKevdoonz+p4Gcen9qXvAEv2UgDMPK4+T8cNYlHggiDzsGpKdzV1TW\nY7N7DggRU9nuTloLzHLPe2KWZej0Suc5J8T9CDkIZARH2C3SKFsc/nW6mv/t\nIKqXhwGohRhiTow0QDIxEjV18nJdDWGT1Wuy4FM4oYqFkS4TDKcqy66BG2Hi\nXSNJ5t9yNTFFrG62pF6hYrCwGBoke5+F63VpBZJ8yZobf4od9rjOQ3teu/V3\n8Pudv64uR+oKIufGSLt89lkw7MJBBYhryfaDvu/oWZHdB+4cfBhwECXaWN9d\nnB8d+bbZj1+uLygSl+BJ1wRcOU60aQJCm9P4hzQ6LBM01tN4H3PbNarfANq5\nkvytooE5Mxlen5OiFbCoFcLrsHu36HexmP6ItGb80j8jab19QDtafH/UaJso\nJGXZmP5WVhA0bCOiPe35RykZZhbgcU14dYMiKGehmM3nD+Wb8BaKKO3eqAF9\nvYOV\r\n=tXuU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRL1H1jv/reSGJkPTe+RfycJp+zPrmtiU2EkqtgL9uVAIgOXM3aNMcqKC+xTAiDKl2Bn3R9RJv3uUdu7WTmfgW9nY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202112230.0_1644872789676_0.657849230476304"},"_hasShrinkwrap":false},"1.2202142035.0":{"name":"@bentoproject/instagram","version":"1.2202142035.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"4bb5570c3d04ec8e2a88418e8ed8b420e5b31ce2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202142035.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-885qkaqdE9lemcITgB5V9xIlI7nXsBzs77LBXiw5hHJwPOOQk+IJysAcYhYLOYbyd5om5YV5XhC5oGDVkx9RFA==","shasum":"bfc417614f864e8f6c8354605086f168946c2f7a","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202142035.0.tgz","fileCount":28,"unpackedSize":846949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC3FmCRA9TVsSAnZWagAAsu8QAJ4o5csePBgnAdKvGYRz\nyDvUdqS2q38jJxs6erhhPpmqOHGBSJedLIcXnloAqVBn+EXcw9VnSe+fMlL3\nAefSjgItv/q29zuTfuoiDFUQbktc2JmqNKpXcdsa7tOd2Kxs+sv3qlY0Gj8Y\nuiCDif/9lq3tBtnYVO78HDTL04iwTQyxDSxB2mh69yyCGU9/zYDBfs9ve0aV\n49+3qwrqNgOG+AOfxi+nkRU74YX3NPciTmgyc1bBgsA380LblO9ULYRbPUt6\n4sjCoMZat0dCcQcteJgTxI+QJrRDP89S2O6egHdxLcH19TlpY8T2gYu/39Lz\nwZ3KdDDIP+8Qa2NI14DzzALFilr9SnfvrP11KLj4TZW+sPCPDdlAXOY8ZOXs\nYW2smZtW2tjiktHfajfLXmpORL2BesWZseaKZLiovOvT5TJ3Z8ZJbdz0eCC+\nDXlen3EkU7897ApjU/cZ5ah2tvc8CXuwCZLm27nvA6uD5aQNGiuV1mDRq5CM\nVqdDEereIdT/G9OVv325hpJ9feV0jr7TUi+vSCLWfCwAVpMyj/f7o3KiPbpo\n6Rq0Qhs0iIh25Q+m64RF5eQ5CXMIRA8w14l8pm6HxlKnh2fijcMtzF27xYqI\nSpgeMTbFqXGhQvUxAjFMISKGhp3VWuPFXcj6fSZbBUFdHQMCWAhqVpEd0ia+\nN4ht\r\n=FW3a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAxjUWeh8p7PR4hTP3RUr140i5b6INIV/sShIObux90jAiEAusSSfqm/3W2BSFu0XDjmWTA8ag/gKtQ9sSPxlGP+aZc="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202142035.0_1644917094294_0.9758016138102708"},"_hasShrinkwrap":false},"1.2202042210.1":{"name":"@bentoproject/instagram","version":"1.2202042210.1","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"a656b221ffc7e0c9f092bede5668a546628e9512","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202042210.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Euygvlw9sM567IQp22bFZD2JwmsHceyu0ORDCyRWnfg8nntjyKcRhJxoQCpttSpFRGXo53CDl7yMmup6XfeFbA==","shasum":"268305bcbb92ac0202157ea431f753752d6e7f9c","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202042210.1.tgz","fileCount":28,"unpackedSize":847457,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC++TCRA9TVsSAnZWagAALgQP/3GqwbkzdESJXTgyDroL\nThT1jEgj40UCtczeH+EqxGm4HAwlY0r3NJfi1oOrwbPzon7KxUOkw7BQrp5I\nojWmF8+/8cSvHsGM7Pns3QWezPqD2XQcQCso6i7JgnV+3bclUjuVLj9IC+sV\n/4+1c0s1CsXdZ6gtwUH3Rcxj9P9TqLTtiIs7jAIsmmJlqhninjZcxvZpR4ax\nrtjCScZdnP7husvBgBgoc2ZV1eYX4MB4e2+b+ifK+clju49x44aEiI/ScSZe\n3ajVeCpi7kyuVvNFr0Efqpe3Ve3BAg09mb8OsKmQXhE4GUcVG21glr7JXgBd\ngYTacj8tPz4ezSBnuKx4Pu8HXdnRI+Ipb1MSQ6OezDBeT0qVC0OfmqU3cYxT\nPQ2l4O+lv7qqs3qDtcUxR5nBcs3aNX0LeomP0s/JPj6eLR3zKwbfQsrR0fru\n4xmOSdMPO/kW2kk9dopDz2zQWUJaVEJHXEYqxcCtrvl6ZubbExnAcjHn3xMi\nck/01q+QmhPbo9ibSbg713jsHrN2tHGmvGPVGdORZm+BVH5g7fC3LX0PwcYc\nftZEV3DzqEofmJSOa2RritdkPgVyFL5Lp1L8XS90p1selQqwhg4Y8/aqRNOt\nIP1192ibE6B5layUcHMZlDZuB/fV0NqO05Sv2OwzcIoqwcLxc6nWJ9neDIBP\nGKq+\r\n=iJoW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZ/U59bpYgNNmC+qYqT4x2chAyxHeXLamVf1TP1yiRZgIhANKlfZzQqR2w/C3homYbZHJxR8iXBw/uawykCZ91JPKp"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202042210.1_1644949395561_0.7210881029289189"},"_hasShrinkwrap":false},"1.2202152253.0":{"name":"@bentoproject/instagram","version":"1.2202152253.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"a50f1711cb8aecae95387e7f6b1fd1862206166b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202152253.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-q6AcIVVL5IfPXFMEpwyYDVg44pHxRaGkf5P/Pk0SL5kNbAMz5OlCyIc0pA+fdVsU+vaHuWPeg6Fevm4oIY+v5w==","shasum":"6ef5f8b1d29418a6ae9d326986e059c8b985ffb6","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202152253.0.tgz","fileCount":28,"unpackedSize":846949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDL8ECRA9TVsSAnZWagAAUCkP/i/jqIgLrKLXkUM5TxTi\ndOFTfyzmAV8nwLy8bVpizIJn48uEAUHT4gd+2oqMHQ4DxyCZBXAKk6iVpNak\n3Lzla/eQor/1f2qUnEBCQyS2VDbPubG6lXRjHRMfODhnefiyX0R55XDy6Iwh\nysGxAlUvGPzVyiBlBD8IOa0uxSgDpIh0IbxrtlU/yti1d4jz//IR9HBNsekA\nfXe+S23ZQ+Efgmamnu08Drnh1OBvqe/lDCTA/pIwQlnvGM9aCN5sSimbk+MD\nGIs9G4pO/L270uxGaN8tjotVnC3kyJqoYJaOPipsHR7WQKjbwqCx7+5c/fpY\nodnjAE8EEnfzUxuier8/IeKeagKx/6REpdsB3hlQR3h03NCSALW3x5lTpl7G\nuI84cbejvG3ZtddUFQ+etU5/H6cn20s0Gs+uJn/sFDBwGs1cX27whDroiq4x\nHxi0r/M4ytVF2XUdfP12PcO8LSH60ObPd2mbHgj4ST1X8SU+9x+L/UyIcLC1\n93xS1YkXJYMhnA5G1ecAxw23+Z2HMLqtj/1BCSdWaSz7WoQPA1/q4k8n42WH\nuKUDTxV/UAHwbJT6VYAUsL4sbRY8TqLzr1Wm5jEp5yxiPY6eDnbAIYilrSfX\nMCf1WL/0vgL8RskYUnbzRRdiqwpxNvUI6dEaC4xZ+6Xxa/dcP1MGlSjCOFCT\nl6yg\r\n=IFbR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHYqZ9R2gONtMHIqmMqLpbm7hwxbbVIhcBH5BsOjMRq7AiEA22yVD2ZseOeTSMH3gj8HU1IsVfjWOJC/V8zszRd8nkk="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202152253.0_1645002500138_0.8118493878128565"},"_hasShrinkwrap":false},"1.2202162256.0":{"name":"@bentoproject/instagram","version":"1.2202162256.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"7548b64f77fe070829e46481b6fa247b8813958a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202162256.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-k5Mme+fvV7AGFlaDH3pc1RlbDJLeD2nPP65l79H0oYzwPjL/1hnQ6asUQ/P+vLVFnCOUvowNVTFexj1iVoBebw==","shasum":"0dc63c194fcd3eb98fae12a4c40ad02220617ff5","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202162256.0.tgz","fileCount":28,"unpackedSize":846949,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDhWAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFxA//Ub+Izs0tv6KQTf3qdvZoX1k5ejhAvl0P0anPmPLRbJTKHnm9\r\nW/62epJnIuUzyKwYoq5yfzow2W96cs3BteSFWm6mbm13TWkzBEbxneZcY0Yo\r\nt+/9uerYdLdztywSY5UN5jLhRzL8CPsjizWd1hst3LiR2yZ9pG6BV+J0DP+U\r\nucghwmSjJasFQugNFrN4mwVmKf1lzK+y3JkRTheWBnnkWfSWeFmAhToLVh8z\r\n1X3D2cF02LL3ZitoANKeQyUIol1ztCosZPdTnxJ2qpvAOVXaHFHRN/AOQP3e\r\n6gin4G1II3iR6CKuHLvQjstq9F3GcXhXSlC/XVnY4+DrTxpvJqXhKw2KdvQf\r\nxqnDt0cyMY+VjnOodOgQfauug6r7OkTfOCKV26/1TJrTBOZydQS1tUlp1m10\r\nPjxbXT5WHZVKATYuOkoXdWpYFpMXhSIDYBaVAsiefOhGR0VyIVvSTdecv82x\r\n9PpgyjHfsDHjI4fVuB+sBXL50n36GfKK3wcEjwA543nOwaV12cAIP02DA9dm\r\nq3M8D4raqbWM8h0bNGkl8XbCiI7L5uwO/CN2HX1XVrEcee4G+eKdtipB69pz\r\ne4zUBXuzpiQW9qpjfpN71z09TIdppMYlbJRT8nN5xt4XigS8CbOXmXT7yo5y\r\nL9jz3aus9v48kwngHwr0xzn4Dl4yKu7w/Hk=\r\n=wy0s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxzalKEDd5kV+x+GQ9sr1BpG1M9YqzX7PaSkw7M9DnBwIhAN+1QR8w7sn+xnlRV4M0jQyDyjCROgF4FNZnKFP3ZFYg"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202162256.0_1645090176078_0.8883269140279721"},"_hasShrinkwrap":false},"1.2202180255.0":{"name":"@bentoproject/instagram","version":"1.2202180255.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"8708c2591965df37c54fa25ae829421f10de58aa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202180255.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-Ljyapr499o3E3b9AqGB4ihFBhqv8Mzj9sjduYpdHxGQFPFv3GdbnnVktGQ64pf9Dvmyt3dLThkhIoXUt2lpApQ==","shasum":"756bb361ba6d983bd018c8db2c85ecf293f34c9a","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202180255.0.tgz","fileCount":28,"unpackedSize":1781521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD2qPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCpRAAjhxvTG+DhTJcQbFxmS3efEsEEXpD19zyPLIOM1vdc9UeSiTk\r\nJNoCJl+p3sP0w5wscvcIb9XV2Pt87C+deNk3x2SOb+9dlzBZ+7JndTJJ8z4J\r\ndu9K4p6VtyDywqcP7Rx7AsTT9ajoYJ8eVU8iPLf99zXLzClNS6XUSVXY8ckF\r\nhBYtW2bvh5euTYQJvnmoDhv3z0mDOcCbVwSmGIc+a8OkteDrm6cHWwG5N9SY\r\nnPMBrrTLlYMzY7oxtafGdRXfLM/vPBGPVNcayyIzkf1KuDvwNoSAKlaOyU44\r\nOTodfT6L62kay9eMnCGCaXb3yMzl4zSZuLNSuM8adC5vWLW8Dzheoioky+YC\r\nAW57tXjz4Ui8zE5iA6m05sbZqvYsUsNhB4spkc8tbXfyNuVfOi2XEkgEalHD\r\nLy5VgXFz3JgepNCOfH2qJqt9BgeS3yUOiQdFZnNR/dhC2VEoL21uUfCEC1QF\r\nSzvtlY9RGfwfmQBz2/i2RARdKcBQY6moAQv7E1MeTgb8lPzCb3aQ5f/WLNQW\r\nhXrWxU+rVbFFr8oywj9VmhFoqxrdURlsAiCj/RaDPuheIG3cLvLHzHofgVm9\r\nmCYUC0Hk7nx+y/SznIF+lm3EkvvGKXw29FuQiYSmaH3zYaTYiy9l4pCVx/rw\r\nVhG9es1KleodtI06OExeD9UQ1uwFET1AgWQ=\r\n=W10j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdhjc55LWriTxA27PPj/xGOOIEnSIIerfN7g0/izAc0QIhAJAP2O4wsN/+DjPIkKJEFZT7yjFMc3uzIWkQwFqYAbc/"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202180255.0_1645177487791_0.34894377248986497"},"_hasShrinkwrap":false},"1.2202230359.0":{"name":"@bentoproject/instagram","version":"1.2202230359.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"02e5f5f51d0375b35a2a20b27815ab79d9767e51","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202230359.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-f2kFU3sVXcTZGKyptu3rCark1CJCk/b75N2xMKVlMfVW+AjTiAORQv01zPUmAjzMTjrvvlhJW9mj2Htsb9SQHA==","shasum":"e8d546837bdf9dee25693b32931cea8a8807183a","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202230359.0.tgz","fileCount":28,"unpackedSize":1782050,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFf6BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0oxAAo4WiMFb27xiYF8xNxoQbNOlYJEqRdyCNryDcY06OecPt5uo8\r\ny10Ods7yOlB9hQhDohX1VgTmSKYaVWIZKy29pE5wY2CH+ov3v64WeS0Dj+dx\r\nC1+6xbEF10KKUBqzJXLDvZE+Q7j2nT4Ajst8nQ/+GJtBMjw2KSa+6P5Pi/g3\r\nFM9SVIo0jOOu0bRlu1T7UGvwVkfYdnIWuILCGLQM5g6yBOlfJWdAKRfW33Xt\r\nylX/2WjYgKcM+lDfGWSbSFIQ7NIc8BhrAJfCn2vmfcUs13I64Oyq/JfaXg3K\r\nKZYH6uiyOGWQdtYIhoLPnzj7T2hEJ5giYlO0bGM9ay5PQURSCGqCXf7/5A2a\r\nWfytIlFgcWl9YsqFnS5m1WZo+awcHRnRjASBt0k2oveAHnAb8yUW3P/yu/eV\r\n4eqZxO3OqKhohOewo0JyRR+5ryTUFGCmNSV9Ri7WuwSGZVD93KNptlTKbLL2\r\n2jVJnBSYQsEk1u1+96IbRttQOQRAt1yDq3v83e5IIm2tC1Rrs1KoprnC9Y+x\r\nGihO3pKfwlql5EjpIBYSymjFTx4mfCABDCPQnSmc5LKpPkU+9EvolhV7m5H3\r\nmeViXELxU7W/yZ1RE/CZ5xONCyt6M9ehntLZwE72q33lDpnooeRVizNI+bTP\r\n/fuIjSoP/BaHel+5NFBSKL/biR4T6u+sBtQ=\r\n=K22y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHM71XQHOlx5HxOlI3UIwen44VMza2h/BC1OpOv80+SJAiEA03Ca6gVX68l5mbRabyLz31/QiJFp+J3AD485QuTPVOM="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202230359.0_1645608577313_0.35297729692355007"},"_hasShrinkwrap":false},"1.2202232232.0":{"name":"@bentoproject/instagram","version":"1.2202232232.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"66c8923bb334f4cf267bf8feebf822629a9129ac","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202232232.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-WQqV/FHQEg/bjAlDYEA3TOHNympsi1EcT9plVrT0PFqnZXbluwmUpXSvXiYKPHEzNU75lJkpSNn9wSzNQe0rlg==","shasum":"7da253e7260b82732f3f13a76b29a34ca81608bd","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202232232.0.tgz","fileCount":28,"unpackedSize":1782652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF6LHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP/w/+OwPclYnZ945iL/omFmUTRHIIorKYXi8CeCKHrvY4BKy2gD9E\r\neUyMk0qEkOiImdFqGmAn1qi+Kjzesb30ZU2rJkF6GB1lWc5JXCHq3IWNzLkh\r\nAPqQ6rzlx64Z0V+UwEwEUqSy+vYXJmJ3aSg3buUeTm8cMpHML3VWlJ08Yup2\r\nZO8dwImfGQUj8fxZhZf/BvGxwOmJ4ULWsjr+UDcU1HQGEnkRyS1ioxhpuvqQ\r\noZBCyv6T2UaorAI0+u8xV1XFk+m3xF7p9kIq8nUuvAdPQCRpp10Vam4yMBZC\r\nV5TAXDPpzZAveTkVJcVM2pZt2kUN897UXn/OyzNxJLEZTh5oHCeAyh0MDUGa\r\n7RDHM8NA4dh8RvcldV3E6EAmMIZf6Dgt5uSt6Q55G9YvJDffe5WZDpMVp9sC\r\nqtr2iSg3q6veN8tXljendbnRSCt4nQDCh4ndv2MHI37fyUnXFK1+bj3k+ZCJ\r\n5UOFNRzecdfll+4hUSPXXjjJPEDyQsRE4GE4cDZtIJUwMhVYYSjeLUfrPoBK\r\n/KOubck+O49iHFHeKDE1UTa239JfKFwApDCKOelyVWsj2AL2hCRyli614yNZ\r\nvSoVkz6Yd6mkp2SV1qjf1nzT+IKdgH2CNq9Z4AXAgDg1VFrjclL2vArfpPux\r\nb2mTFHe2i997lMDiKezzKRV52MCW7DnwBwU=\r\n=jvIm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlEc8PiflrSKpVO5weR11HTVEqKTSWbTkKW2Q9AWcHUgIhAIH7gvok68C4l96UGP/0ggyH6LKXxrw5kHQiLEoqA6kW"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202232232.0_1645716167591_0.6617576812208903"},"_hasShrinkwrap":false},"1.2202241911.0":{"name":"@bentoproject/instagram","version":"1.2202241911.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"d0f22f13b53d3b67847e18749e07ae4640258f87","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202241911.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-hRHrg6pitmGnu3Img+55xS3DANhYxYsdhPiKyj+rq3nd7oBIDthyfs9zg/GhdTdb1RHS4tMtgSordylY41ywUg==","shasum":"86582578cfb8d046e3af036642759bd317620afa","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202241911.0.tgz","fileCount":28,"unpackedSize":1782652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGPMyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp98BAAoA/iB9eq83eoT3qr9FhjLSycS8RtZQTbH1wu8xZy2xnLgE+K\r\nS61s2IzGOjxIAIsMBfMIeekNoOUeyrVqjEGdFdvQcoRC//Pejiarr3PK5ji/\r\npaK9VdvfwARtK9ckSa1Q/8mmCrQSjeWibwjPPkSZMLr36eObxHdRFXC2sOzV\r\n0SJRYSRYH+Bqo6WlPeRACC9QmoNF2P45OR6wkJZ3DB0wkYNg8pTzguC4paKB\r\n72XfT9Q8WLhSwYtICbPFaczjUmxsoVJMOaIaYGKvHUqc2jF8hamsXIQZIRNF\r\nUVCn77fytthRzM9LkBTsV1yZqfUc8Rbc4sp4mL68C4fDzY0C7pmFw0ZLcdZl\r\nOkXGgHHWBqvfBOEXeIvi8O+/vk3U65UD/BQhxweEtyOEyjlKQXhlkehpqlkB\r\n7LFZTdLL/0+AMCcUSN6PuUrr2t5HIRPeVuUZv0dSBA9vwP1P2ynllsP7+cHv\r\nzW5A5eauz6stQJO78okyb+0V/EKkgZm8+6Yf7QpXHC9LwNve+Kt7KfMES2yb\r\nh/jeGw+NJMXimfUdP7I/M1a2nMC/oqDtHd9Pz7ntT4S4TJ0l+arX4T23yIch\r\nhb5e58Q6YoA8hSAgEDLwR/+fY0cYSeGbAeLgvw+qfp5yW1OAlU8+bv5fcODw\r\n+C3ul7W4NisnjBw4TVyOnfyYv0D3jlZJHVM=\r\n=e2f5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAJglo+6nNz8FYL+p8xssFfeyUIJr+uj9qNLMLo6JNYqAiEAhkBu8QXmXGCRIkBEtwIXG6YLDVluw50qzzZK/EPqhjY="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202241911.0_1645802290011_0.651529601407824"},"_hasShrinkwrap":false},"1.2202252101.0":{"name":"@bentoproject/instagram","version":"1.2202252101.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"fa0da0bef1bacbbaabdd17ebdc31b018e6450c58","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202252101.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-Yq35a6y8QcRcjoUqzb7SjpC3BDL8NZsBnWYr2rESc+NZQ/szB1mSiJuK10dTD05LLHW/V/SmsKV51P1UNiPnZA==","shasum":"afb9ff0881653cd0548b6ca241908e6d28e3c05c","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202252101.0.tgz","fileCount":28,"unpackedSize":1782652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHPx4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0DQ//Y2MHKueX+6tO6m9/fWEckU6LmIhOnrgYLT8DByWDKfyNpKlr\r\nzloAsvJuO4p8/cgTX+c+PglpxfP+/TxenrMxDHr44biSH4v9+2XHJrisgwVh\r\naIj3PPNxEWgmiZh6cULhicKMtkTSLqvB8mDJpdBOVlkMWwsKF0/ElNXkKy6q\r\na3gWKhobbz8xzsWHrshzbWBDrPGkKC5JcLhIgwJSWxjaQrEOAksDJ/eoA0ZM\r\n8Iq4/6Wa3mPkUfzPf2xsT0d1w5yafn6RpXNs0weONKyMAcQszJCWLmi1GdZ3\r\n8z6cUp6zwdNuohrgpzLRA9IvmFeq0PQuLwpbxAzVahOkTmALsxO1SmmEaktQ\r\nUJN4X788/5zoaLfX2DPL8BqA/kOcD5lvMRcjaGB2Uo/iXf5cWRoIZ5OxiTQ5\r\n/onmW7V99VGbwEqCP+fLwDeEwisIatJDtUaegRknODp5PbdPAOsAUUwNQ5VD\r\n/y3RbA0WMltDb/dT8HVTOLlX6pkIgtBGeg1k69UmO26kq8JILCczlPXg2pYs\r\nwiUZRmnOzQMFLziGh8uL45tB8SZyRhu5e4iEVHCCEF+/etTdazNnUzItT89+\r\nn+RSB8P+Pt3ebwCTR8AnmIBqm1XedOXQ6IySnuGgKq/pGP0RJhzQYcYnJKHy\r\nH5CKhbenTQSqgX6aKXuqorLngid73u3idyM=\r\n=W98Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtGq6E+KwBD8RD71h2F9XAygXrvuPykWnxlCUzYdDnZAiBAj/Ood41Oah1+nVyrGSfQrt8H3gKpdByrubTwUelBNA=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202252101.0_1646066807857_0.6235567220782525"},"_hasShrinkwrap":false},"1.2202230359.1":{"name":"@bentoproject/instagram","version":"1.2202230359.1","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f459124bb58e0a0d2076f658b8fbe3c9db13a04e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2202230359.1","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-Z2BZGvLIzDIhuBhrhSY1+DeEEO6FTLKUvXv3NVZZITv2UwhVHLyR02HrpRJdObC78wcdtUe1MBhm/qcSlsadkQ==","shasum":"39f960d27a5069611739544b62a012e22ff3d0f9","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2202230359.1.tgz","fileCount":28,"unpackedSize":1782652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHpijACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpl/Q/+Jqg2W+FqWmnEc+ZN9kJ4gBmUZB2n20CH8Ok94hoF+CtrpQz2\r\nrlZco1EyKtd4q6n7Mndlm0R/C9Fc4hw9g3SMr6H3Bw7c9tTZ8pxRb/7lSq3O\r\nvjWuOJyoh7/IPh7PB97rYGcMaE8zeFGaW2IP7dk91/6bG4ip2j+hPvDAngLg\r\neY48MslflmdqYAdfazJZVVIDSonast35M/1emiJjVM/+w7NGqnn0TOLPPOll\r\nIghvJCBsBswhKt0tig/t9Z2jLHqMJz/eLIjAMe5ZQtbqHYPyrxmAiDcfYdIm\r\nLqJqPPmcezwmnl3eOo62CPc3+eipRCpiN6HEj1EOux4b4+HRUrlpgbwTZvxc\r\nQyjYZ5kuQKThquSt3ZCytsZJlujx4Gkyt4ejwQ3m9K2tNGp9YI+Nl8HnIEgM\r\nO+04a3X5U0qOCHZ0SnvJ4T2nLdisFfryuDnya80GKMcTZaEnynjVUm+AWUQZ\r\n7xfTz7uUxI+EzwAQTcfoEHHvYAaNhe7cjmNSYnYQUYEC+aVl1nuXvRUGfgyy\r\n2+YxL6juJVXEtZ2PyhgISnlNqoFleP/mYydxYZo01iFc4FRV/NyTNImCqe4/\r\nJvzmyPKxqJwtH2pj66o8gYKaA8dGds5PiMXU8S1g2d559A24/D9MZOCsB+aK\r\nJ6RP8Gu1AejzQB+qrjqf1KEk416OEOJFGzY=\r\n=UN95\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBUgm3xP5gMlf2y+Rgjj8lxplzz6k9kwwk9eIcnB+JNgIgJ3Q4MDKnLdpLSN87v7trNrwvgWt2kA9oyBrrwUR6VEc="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2202230359.1_1646172323484_0.25517718328227423"},"_hasShrinkwrap":false},"1.2203041950.0":{"name":"@bentoproject/instagram","version":"1.2203041950.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203041950.0"},"gitHead":"419d49d2920fbdf4bf88e8efc3421f7c37ec209b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2203041950.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-774TwqUcpmXZZfbt+kQ+psGcXFLO4C1jIp5PiQnKSJvlEpNQ6hAWv15AB4B50EitvLfSq/t/2flZdbPTIEQkLA==","shasum":"8411b74631206ede838f34457e6c3440cd31da6a","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2203041950.0.tgz","fileCount":28,"unpackedSize":538621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMNztACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYrw/+PDGorGaVFV7VYTs4rLfJBPx/3bnDlthpTGlUEjdl+Cay+YKj\r\neAfYV/j7Pb+n8AvqQ2Gh8dan3ZE8DD+VFj3OYcksnKHDhfmK3xfPC6mEl0DE\r\n5r04Znkc+iW1IkrFCNuH/FFeJEkZ5MkRu70AuHsZkX8akeax3e92pJ9mNRKC\r\nhnTRTUD7Ub3kLOvTMYNs1/O292WXcbNT37LbiXWsEmEZGhk8EfEOMnOnmViX\r\nGK5DDgANiR15LWqVpYJNyJiQiBYyGkmDwsZE5wQfxVPG7GbpHKujPnXpsXMC\r\nrdObDSmHXPrecZoI1ypHWhHutDCuTwVWAy+lCIhv7C2d6oZBC303WK4aGdMB\r\nWZ3NEeciNK1GfjtOo2m8O3eFsAAcCufFGN+73T/V4qIe0Nn06N99xsK5wkk6\r\n3ya4u2zJbmth2J6pD3mMQ8XsD7dM+gHPLebwmp+ctVaN6qfY1O24l6xsnZzt\r\n3RvGNX8BiVYISG76AJmrXC3Us4yDxeI9yjvPH3JZiepHa0pIGAADA73due6U\r\nle9VV0OrKKnLwOEvXM0aAG7jU1w5VPAgwD/hJYpS0WMKvxCSItNH5IYN2ifs\r\nGhTew+QPitv11oXdxXIZm64FbrCRyNkMhucgbbxJPwnoN6rvH0g3Sd03B1VA\r\n+ZAV2uKMSZxuemCP0f1W/7WU/51+ThOObx4=\r\n=+UeU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj92VwbLCajtTWIR6+F/+nQkKnUPxRCc25kF4CZyNi/AIgWz32xtgDZr0UhecviHCyFoRcOciO/pBgc+4/vbfF/+w="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2203041950.0_1647369452782_0.26747856699826045"},"_hasShrinkwrap":false},"1.2203151539.0":{"name":"@bentoproject/instagram","version":"1.2203151539.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203151539.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"fc739c0d339dbae236fa53a87188f5f7ca58f25c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2203151539.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-LsfM0KeFMMWeS7Ph13aHs8yjY+uyg35Mi/XH6OGN7X4X949jknYUGodcETDlsvWxDTi38YbcDYefhwEArn9zXw==","shasum":"18fccaf94da1fde246e2422e586613cf14e11beb","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2203151539.0.tgz","fileCount":28,"unpackedSize":538621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMZ52ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqahAAhwEmP/P7bDVtwjvz4WJ9FzPKervtW+nVQPzG2xwKaFf3JvaD\r\nvOw73T5375bW+Vxof563wnAdA0LLy3uZ+fEF3qVcYHLJab5Ft+/x6d+y11Ev\r\npY8b3hjTGBIa0DEJDNHp+OzandrGIuOMPWMXRsZreybzHOCDTPzJBeQ0PigK\r\n5kUKWURWzS0iSLo0TmYIyqRem1X6UOsN40Pw2V2rI4GrRue45IHYWJvcgLB1\r\nxYqXYS3pP9agLXkcMl3Rdhsu5dHR8/Tgbo1UTWakbGNfwzfrjxvbgglNcLq9\r\nFTClOPd31VrCL+dvMQ60Eo+pau0m5fRv3wAKn0DzeTSEE3lR9pvdExC1rvzP\r\npXHaXyr9hdXn0ULeBXMy0UXmpG3yk+iyMZ1ilneerXagaQPEOYbJrSgO3JzB\r\nVCFpOvpxLkHPAT636CHMINqwuAhCcKvuOgAZgo4dEYsOC5uKpGkzq4TL1qAs\r\nu/8fLOwFYFDHpe661dR0zbdloRVEmo7/a3AiNjVFl1llPIGtR1adV0jSrx1D\r\noVeQQvbzJjlvb4ZN1//bKhq17wWXZzlXLj6Uac35LzE+399+W3pXZQR1J+EP\r\nriC1Jf4yq2/OhR/N7PYnQafNrpHVySp6EHFsCm0nBt8jog1SkZSoRMPJu3H0\r\na+ZafNBzqTk//ujJJLI6w4bBfTVT1mtd0+0=\r\n=b1/Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDo8A0W0wiTs1rcY8CuSYmRmaQNs5QzDLp309CBsAaRbQIhAPk3CB4b+7rWU1hkB/2Vh/qbBtuV39dfEk0ZNJPT4Rz1"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2203151539.0_1647418998283_0.05774829244808122"},"_hasShrinkwrap":false},"1.2203172113.0":{"name":"@bentoproject/instagram","version":"1.2203172113.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203172113.0"},"gitHead":"96b2159ef70d24edf6c33303cb76a623a4669cfb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2203172113.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-wuvKpBNnhPmTzdGYpvi1oxR5XWxqFO1nBnBt75MNgBZgQ0GdGa9lzk1mdOMQkfsIb4FEcNPz0atWYrlaxSZSRw==","shasum":"73fbf1cb1d73bc4491dda60e5cb261deacd37cb1","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2203172113.0.tgz","fileCount":28,"unpackedSize":538621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNEH0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpX9A/9Gcob9IbHKXpc7EXYbqa/qXb3a4mIBjvHRONDTrOK6qx2jccg\r\nmpdS7JPjUVH3JvEAaERM7Qo2vkfgB4y2rSudXEzaAGNUPMGHxzNwZKid4rbe\r\n29tdTfSO+bgCNHMjKNF9ztAkT61JLd5bL0BIsPdb30x8pG/aCCc2yA/QvpkU\r\nwAFz9nFVI1gbYZaeI3fAjyBwVtzqi/R2och2XhbS7yf3azdozJmYnVnArmBq\r\nyMhUT4hstdhWFRvdhUjzP4Hri4P6egMN/c2pwsarOkAnUcOqCmJhHtiOLFz9\r\nvwk/5tV8xoAh3os0JoDqbLVc51amHUvF9/LnxNW/rseJDd1gKI74ivBofC2K\r\n84lZqv4iAGou9V7Ag9o3j2knqHFU9iQPjJIesW5HwS1VOXWhuLhosgd4Sg6G\r\nWwDRcc41wMP4AuSxywxa/7vfkvae/TRo0Wh8efC8zYyZJUStTqDe5pO97AYQ\r\nSCfvxydvbnGnExD0BqTxURHz++8Ko1RzD+YJvcLYnIdyvQwCA3LUty2SHsfg\r\nU4o9CwwIf5GiYuK4KB8Axx4CDKlb76w3pmH3oVT10IvM2uS/SaCAZkqDgquB\r\nxdyqk7Xjf5byGXRk4kPhvYQEDWOjH995IEx7vm/EcfPE8sVqFwt2bhGzTTUX\r\n/IR9sLoJCft91E9EAaxSTgIpWP43rzlerck=\r\n=KL68\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICFE91efdC+VH/wlzurg1idN18Qo27hvlZuxDcealqNEAiEAnYLRax9g/VI2DdFcQkeogDm8zpxjPkTtYAGrsTVx5g4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2203172113.0_1647591924317_0.2986076226785064"},"_hasShrinkwrap":false},"1.2203221937.0":{"name":"@bentoproject/instagram","version":"1.2203221937.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203221937.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"11fb2607ccf78c526a38e31bc141dbd3ac75d326","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2203221937.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-ZMsZeAUTSXWEeh/N5pY2FwqTFwd+AiyKWy7e1dtDjkl/cTI+GR2nn82YZOfgmUxBu9MWQwXKsVyAN9Cm7KO+/A==","shasum":"14bb2e6d10c3c1e475d5f962ec43728072c212e5","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2203221937.0.tgz","fileCount":28,"unpackedSize":538621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOtnXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLvg//WJ3Fv/FKxMYLjDxNm4BbFXuNp3RcCEcL9H848OMqpdZcB7J0\r\nJCiau/HuRDRAgv1nNAtP3X4ILcDUV2DVdtbQ2P1uz2YTs+qQ9YFAtgNjwAem\r\nbHxPHDY9wrX6+muRuCjb9KAi50rxR0U2KEn6SWNVm37SzPenWInGauzHtBjI\r\nCOBYGpqhtdhkjOfzSLE/W0Zwj50WEcG/9Gcu27R9YKt1RUchi0PySYB2FzqG\r\nIElJ5fEh2AgzyZey4ymZhru8bh6wynXR+mmizUx1zsExzZBzwSeA4pditxj5\r\nMyMz/2XgZhJ7QD0Evf9VLrt0cXQrjCwR6MPv4figToDjRvU63StFj6nQBiE7\r\nuGYptYIQffkSS0iweAKXXSYPxWqhl0F3jibWidAcVku4ySHSIpJaartH0JA5\r\n/3ZzOJm/w+Fu2gY1Pz1Z9X6MU6FFPo28tM0LylHTjEPG2/yMNWCNM6+kMpIb\r\n/PZqdgK8Vbe2BfM3SRoX7dE0xwVXG1L5CY002xb8rbRaUG8/trnEQXdCS/DS\r\n4J5f/+5udgpv0Ga72CxDHSClsaRuHGqmQ9q1hLzjsoms/dQ7B0+8KHq3PSc0\r\nU2AbJ0QVPoog5br6tbi2ivXu7VXOufYLG/vkM6HEtfMlGUl5kCsuhGKhefaF\r\nG2rORNUNtStSbMnZXFCLAoGR0J1UtGQiWKc=\r\n=mMZu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/yyynjDJyC6UuYS5UCec4jj7uNH7u4S0cbQ1RQrGBIAIgFI5wqUVfJ2wZud2NF+APNev6kHLW6mvuntqFJ5WN9p8="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2203221937.0_1648024023378_0.6632902544280228"},"_hasShrinkwrap":false},"1.2203231914.0":{"name":"@bentoproject/instagram","version":"1.2203231914.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203231914.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"9bf7cbdf0dbb4de2bc6b81fe042e52c990576b61","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2203231914.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-/o13qG5+RXGi6xdlZhWa+zGwHx2QUAKc+B9uCI3N3jv2xb3gZdH6iyjXzbegODcTXpkCC7tMNoYmYjK32qnVLw==","shasum":"2be8aad19b56651d76b678deb96d43c027dc0ba6","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2203231914.0.tgz","fileCount":28,"unpackedSize":538736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPCrbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV+g/9HGcPtIVbABI8Ip5le52jbmzSUh0S/F1LRifnQhuKHV7bL+KJ\r\n+OW3GqXxG0rpslvkyu0FSTjZYUXZnlF95fm+DMA61n1jenxcnEukgVc5ohn5\r\nU+s8wd3epH+gO/VGiz10qLA2dOBks1btrwdvQc+PYNRyxZEcc1atdwshnuw+\r\nrfy7iB73xqotdNwHVmLOaEDe129iZq036eB4oIsRhNUPLvCfUAllGB+8CkKf\r\nmUzz/fafIV6Tw+2WEQ/mLArh36BD9bURZBUZcDinN9padqER6ws10YqgQN+z\r\nI+9JrWSqdYj2Ia7QwS/QCOYgzjBBr3QqYeT6Nzjpui6Ly7G2RaMkyVcl/aUP\r\nweQcbosa/LwROB+6t/+EGznVQvpBxhdqVN9Aeq96QzMbcEe0lf3El1y8msw/\r\n58bmf7IoK+9niaqKN/Ow/Z6FMLLy8TrjFaKlZjP+3AiaYp+gSl0hlYSDRB7+\r\nb2Cz9oTDUjxILL3pLMlfmGYK52c9s/NyZT2zd5CFE07zv3NWEYBEKafFd6Wz\r\nGlo86URF3CzsnU6QXc7snYtVmCsZ/+om53wdHqd8xUuIGb3wmEB62qjBEiSF\r\n8qyqTofaZL46a4IERZYABfJNdUbrVDw7w3Ovk9SJsgdj5rX6gBt6HOGlUGpl\r\nZH+5/EiL4GdewQ915QWTktQsFINptgfmeDM=\r\n=rMFp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErbk2BZDQUcRV404goIpnOfU3eBK1aYfq/iAiVJbPuDAiAZTeVye94GrOh0vONHRAaYh3RkF2J5guya+y5eNlltUw=="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2203231914.0_1648110299688_0.37080186184253683"},"_hasShrinkwrap":false},"1.2203101844.0":{"name":"@bentoproject/instagram","version":"1.2203101844.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203101844.0"},"gitHead":"9bf7cbdf0dbb4de2bc6b81fe042e52c990576b61","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2203101844.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-S9bgo6UEJYHNR4fIKQiNVHkLklCzH/4oD19Qdt5mNONAya4vwP3t5D35ddgx24pHUKu/cqLmNdkJBhPxpLrfmw==","shasum":"ff2dbf1b640e90998c88508808c744ce16b1d797","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2203101844.0.tgz","fileCount":28,"unpackedSize":538736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNB0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFuhAAhhsJYrG3VBWn6nOKBD8rm+50UfERUsbhTZs5SwJ3p/xck6bk\r\nbuXt9/EcG/o30bYFXvpQpk1m6cz2/rhEQc7cp8vD1ePbu3sQlq1hFoPP2Eh5\r\n9rQ7ne41nQjqSOSkfm2hziz+t+KfQYCk7xxssLdQPfkm3zGwSqNH25yqnUcz\r\nK+g+VOcbyo4UW00Hko0pW7obTJBCzDVo6LSDrG+Rb5EbhyG9cJL5XYWrLQA5\r\n35IB9XcrDcSVkjVwJsSGUXe00hYC5IJ+Xl+g63e9Bit3TzOKmZ0mBP32XGdA\r\nFor902OWFMiuH46UoRn5iFBUaEaLW9rE8sPuQGUC54Jc7AwuvhUrsOW7jqgR\r\n3D9rgMLB9C6KND/5sA+jSOr4Mo/Hs0Mju+SFBSvVgzXRnChCbIQB9GWwJwH7\r\nuTr3kdByceDt2F4EiVzchjPuC+/LFl6aF1mRgIWftsPCGrFRBUoSOHb+3MHh\r\n2JlEpBQhP6l9Ln63HFeDz7SZQ4BZVIj8kSqwSV0jM4bpQ7CrM0VwhVDKRE2U\r\n6B2sfRaj/M6BZMszg3BGtWFr5zZ1Pfjl76fR+xJAqLqji+aaZxMrSeIhQquI\r\nSXGdbPvRPiQR3f+wcrmH1UOYLkLT3pAaG2/7W/nKwuKv7QYJN7vhcopoT8C6\r\np3zhXBvtD5Nz0VvblAZxdx+QbZu2t+a4pUs=\r\n=JcwS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/p5wCdsPw44OxWTCoGqVukY1+SVu+7G5k9c/+3Qc4qAiEAwSEI4MEA8c1ufkx4cEyT7I+ggLgKj6eW5f2PCM6gVC4="}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2203101844.0_1648152692591_0.09055766840260793"},"_hasShrinkwrap":false},"1.2203281422.0":{"name":"@bentoproject/instagram","version":"1.2203281422.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203281422.0"},"gitHead":"f74833d1e2b0d9176900cb183c4edacc4ae53986","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2203281422.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-PHfcHDhCQdDAkv1of+h4CKfWxD74yPX8K0uju5d7HybtnOyZUjLJtVmdKnltY5RIDhittVzXKM4zFo+x/ANGIQ==","shasum":"d8dbb273ede117ebfbe19eecb0630c641eb8fbc1","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2203281422.0.tgz","fileCount":28,"unpackedSize":538736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQsOSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoW2hAAo2YNMdhfa8H8MgHFXuN8XqR9da7stJ2hMPKhc/fZjlGiyKYd\r\nfJgk3RGM86oU3XjpUD/0jG49Y2QCl+y3O5/rTJox7t6yoIMWwrCkIiRcHTvV\r\nKaE3Qv1tQBfF1/5R9wPvIk+fRzJghn2Y5wJ/1pgIBDko1TnhetB72uRTcWer\r\nHxwK56GpzqgBeqVEIGyzMqf0vv5t9GJiAN+PpAS37Bm4opxahp3RgmpdEN1D\r\nc+QQ+WP06Hxd2A5hHo5iEivZra1suGP6LGSYWfeJncGKnBB0Kp87tcyoM+7K\r\nOt8lk+7XadK2eCBWxBB6G+frlP9Q0/VeJY5WlfFeOG5ZSON9DZo2W1YX1mZ6\r\nwoZMVFMn3hZZ2c6PtyGHVfWDoWc/YTZZtt/jr70V9yl2FYZobluJIVMV/DvE\r\n3Pw9kQeAF9BglONgukilhf2317nXsE2itwB7un7e/pHSbGDNreO+KYncFdl4\r\no71FVzHHSsJEz2UaShKK4B0nEk+hTO6GPaS4rEEtzc3kuHQ8//6qLYqJv86h\r\nifNVvf2qtUVIf5MKiSf1YUT/wpIzA9mZGxMro8U8UmbINIQGiajV0HWR0yHS\r\nELKPQ9in94m9sa2ZoNUlZm0F8oyUoS0St/gIjYQozt5TuGUd8jg1NAeWB2zK\r\nD8GfCYCcFqXg8rnmA0Gp3O3F48PTP7ZjDQk=\r\n=/6F3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqkI+Hh0m5g1/7g5oSIrJIB+dnrKg0Hox5++DqyPkhCQIhAM2jjU/9qJtxa8jlHOeQpk09EmvYbAWLO+QeKbrOKgIL"}]},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2203281422.0_1648542610318_0.7619547287184856"},"_hasShrinkwrap":false},"1.2204121632.0":{"name":"@bentoproject/instagram","version":"1.2204121632.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204121632.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"dce11ee1542a2d10e47b8e9875dae137f4cc1b0a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2204121632.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-14YN0OlmtRlRYtwjGscndjyq2HAaqxjw7rWZ32oD1qLjqpEpnQTwIj6GyMDqLnpMXyGkqz3XLPAj2YWwprVXfw==","shasum":"4900a95c7b838200e683e7c55047056ae4ab3ef3","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2204121632.0.tgz","fileCount":28,"unpackedSize":535063,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICKg6nW4xs2JIJ30lYmcBHs4M5GrnFhLN4rkvL1t2zCTAiEAwXcyaakhFFFA2Ny6tIGrhYBR4HVLiwt0SIvvAsXbzxU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVcIgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSbRAAgaC7HwmWYiSZrrlseuH/kkzrI/sRs8mYNbui/vlO98S29F8X\r\nH1Y5fCIcQQawmxHKtzFN7ufIA7JeC1YHnMhsD3RtETwKwGVbwYB7VYiZOPRo\r\nXInd5ZdQT+nUUqVNxdOijuJr7/xzriNoNOjLml8ta1sPnO5JckWV029Mlgrp\r\nvAlTjMCmcDVXrOq2t/97ceJxmr6ftaKk8LAYScNj9KQnGwCdw0g3eODQrffi\r\nvTM6hwZfjHQz/0AiHogqcEq4QrEAYBpAaSu4tUPQx8VyQDNW2/mG7UlYFnA/\r\nkd6D/RG4RczbmSvULqHGtvKyMLSMpOhEvM4Zf2JlprbsD8e8Rh3Bth/YNOaS\r\nPwKCDjSiB7GGxVUhaVlboG2lPGc7l35iq1tvjYtArsVarg1Ry48vV+pHNsWW\r\nG1JXTI68y1CG7IFDk+rYRCaZl8+U6ziC67Q2WCt5q4W3eTYjjV3sfHXhBl4+\r\nqo8Hj7+vf2cYEe+NqvaaAuRAnzRy8slmttnBble0I2Ibr954lj3Yv/7mBa8u\r\nNg4rYeZVJA42uwma6M9wvV2Dwts3dH2wM4D/BZkHMJ0yC73GoChLUNioncw3\r\nAcPQi0tmh2aGMLo61+F8tXbi6mKQNHqWwv9S8PIJO5N9Mq/ATnGSr1JS7ByN\r\n+KE8wPGHoUNxUehzPp6IjoUxZAjKODPMjyI=\r\n=oTlv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2204121632.0_1649787424013_0.16603623267829448"},"_hasShrinkwrap":false},"1.2204122000.0":{"name":"@bentoproject/instagram","version":"1.2204122000.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204122000.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"9d10200b5a9784c35ca9fa16b1a4b3078aab3180","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2204122000.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-yXdfbSuejV5Cx4P+HuRWDHchqrp5RV385H7csqLUjF2/aXnIEmTjSJRRvJ9jt/th0mqLbShif31T+tW25IAsNg==","shasum":"4ebf75c0a0c49f0098f28949cab29bb958bab2a1","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2204122000.0.tgz","fileCount":28,"unpackedSize":534847,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBKCQ5nuDYQInOvQ3EC8y6vN6jUER5djXQbimhLgXV6JAiAWR8q3Abvb3eDK2aR5P4e0sdYpI92SDk+cseLj9Ys1cA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVoqXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqq6g/+M0WS2ke8t96Bn9WJAPONqDlAiDCrR7La4FSxasz16TdLOTix\r\nj03l+2FbL4R6Pd1L7wKVx+Z3vUZhJz+6UDT1tH11bhfcaxGGzTVVysT2w33G\r\nZu3PRD7i42o8Y+rRCarh6b1eDfzX2l3O+iQDipjEnwCrRrCKCvzJwNyujx8X\r\nxqVi0KCmVbWZNM15+eShqROXAvKo0j6UXKFsMBgcOhk0KTl1WEN3OUu22mhR\r\nMJo6LGX0gAL3bOxn1AAPeRnBYOLgwtg+pZWWnPLKZQw4awtW6TkY5r3QYSk7\r\nnWf4KL0gVw3uOSVzxAXG39MUPctLvyLLcD/pft4DEnzi7WBhoYJtBDU/4aIv\r\nN95K+gbtrobb+y0Ek7sw5HRMmbvO/POJXbo0OMwcr139DJ1ddtPTHHrSP6nH\r\nM/6Ytr3YnKX3jaKNqh3SzwUbfMcZr9+X0mlz+Jguz4Z44vaXYsY1PwZlcDtV\r\nXwsRrss5WUtqVHeGVS7w06aWFUhGFRD+gFMMXZMT8N6KDreun74nidrbGAav\r\n6IXlbbPIhhRBBhaY1kXArtct4hBsApykAzV3FWrI/LqV20QijNT27SnOV2Vz\r\nDgSCHmuluBt9xtHd8iROopKDEe7GKdtIpTQnTh8qDRsocnVHRlHYdyV5uSzF\r\nZj4PP0/4q1dYtpbnbVlyGk8Lq3YrPR5crXg=\r\n=qK2y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2204122000.0_1649838743013_0.033577581787729294"},"_hasShrinkwrap":false},"1.2204132005.0":{"name":"@bentoproject/instagram","version":"1.2204132005.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204132005.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"26ab90e1d3f7c29ac76e3fe33cdbeec9e828eff1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2204132005.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-0oKKfuUWS7cQV8lhXP0XRDdD7mQ+/Uz8crL8Ozlwt6R8hkXHGUzN7EtMqeJJQWLQ0QKFosni0SuRb/CDQM0/rg==","shasum":"7b890eab552b45b094f12cee6bec0121a910cdb1","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2204132005.0.tgz","fileCount":28,"unpackedSize":534847,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCnH5y9XDEIEkBNtkOEWh1cGDqJXSvmquOUljD7pC17QIhAL7fW+EeBgvtMc3HI2DSWkaLm7XGe/Ws4Cm2zECRZSDA"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV9x7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSGBAAkXI8ZgUBEtRLrgfuu8qp8mwYyoybxd6/zImbMojPxDdyPTQl\r\ngP5MVcdB0EsFEcWhLQAdAXG0blwlQ4O5YN86V9jTkjkQEGDYhK207NE9vXux\r\n0ruG5XBmEAmLecvDwPw1H6PAVS/ucGZzxNlegyPjRd2KJxUViXb0vl6GxO2W\r\ndbvxRRWPflfCTyXOIIx3gJGrCT69NhQxs10/pJtVBcfQhRKxNm+yIx/j62gZ\r\nPMkq5876LWV7qVD1VIAN69n2k+dlyLTdFgEKYqFb/CXrW7NmSkHAuLtkiZ9h\r\nwAV1C7VzdYMWuD8Gu9B5FZTG5zBa6u5GiDmpuHMxcDywtfAPWMDN4wbssz+i\r\nwBLvA3Uwn0XQrqV9Nh/252U/hKEkcAC++CU5xTM6SlcjfrFo5F4bZlHWXnZB\r\nNlBrKptCWifG2A3sllCxCtLC9CaaAWEtja+shD3pnsY15ldhr+LfIjUt/K/X\r\n//ae20GeU1hMH2gRW5UI+nSOv5OcfwZhEv+MM1eFBMtgFzyp/APTzcfltWY6\r\nhvyOmT+PUjzNBTvNQgMt24x4hirpB1JpxBuGAbHfqVT+IkmyRFxbM5dk6KEi\r\nPmlJbbwXLe/nHIdbdT7i6CvBYgvoEwUkOTisXQtPEECk+XfRaoaUN6kHgKvj\r\nQSsjaotJK1oF+zAyVLwvF+bMPZa6LJii8ME=\r\n=9JTr\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2204132005.0_1649925242796_0.26346545209521266"},"_hasShrinkwrap":false},"1.2204142048.0":{"name":"@bentoproject/instagram","version":"1.2204142048.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204142048.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"32d29a09afd66bca55e024a4f21b1cdf6690cfdb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2204142048.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-cZUfYJ8acjX8QYlMjaz+yuwadvPVW9mgFnwhyQm7IKnYyZvosHChsYjeezyJx4Gc0i2DzWMREiNipEPzuhyroQ==","shasum":"f0818edc0d0e6f73f8f6c13ab808076276d8127c","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2204142048.0.tgz","fileCount":28,"unpackedSize":534847,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICdhH+PA68vZYk4oqsgdDPdJ9SoPgLEnMiL5F7MAQ+DoAiBDwiTwjCfN3GeYCpnwlyQzwvCymmjags7PtVbzigzstA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWSyRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsPQ//e5QdKuAevkQ9rCzHdJkhvCBJH07vddMSXQ3OAOK+ku4nSXsC\r\nBBKerznWrzBBOOBXqfQdSTf1auSPn0cki5Pc2iRN561roiuNDZS3WQJyvttR\r\nKa7ft5IWnt6rjWLShAd3tJJKfJm68CbMylblxnFx/7A4F2GrlJrMbNWJTJr0\r\ndjV4rVWOjpCnnneHkd1C1N/YXb4gcrmF5RbZ5mO3NLtQbf+ZX9vscmmcJlRS\r\nvi6H//6Es9QpXhcUrnlRthNDOxx8XUEZJBQbH92TX+hlu6jjbhKyj8mINUAE\r\nA73sp3xXew7Ar675787Fn8ZFH2Ox/EDGgh3kR4FdbKJU+5yPcPBY14uZLfi3\r\nwCRI5pKz0L1OBuuVi030Gk59Zz2mUAmWnQCan0cRkwCZX89edOSHyYAoL30i\r\nbOpxtf/S+B0O5tGvxXmhzDHQpH4fem8RbHi+NzSOaXqMJ/ytTZesm5UpAS1K\r\n4ZuzRIPa0u7U1Q00MZNf0akvLaACtiTZg9v22Lxmm5V9YXkKRKV8pG20ovcX\r\ndmnSP0QHr+oeKHzRUVAxjCbChSDr/5UL17Qu3JDNSH/arkkXUoTYxg7fbK/a\r\nNC9iOoW0pzVdts3Rm/k+V0QS5G67huZKeZ2pA/1xdij8ZyrfBlIVJcBBBdSK\r\nGsvrEa3tfuR8zdJT2UaOIcscLe6aEc2bdd4=\r\n=NK0W\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2204142048.0_1650011280927_0.018739548041147414"},"_hasShrinkwrap":false},"1.2204160405.0":{"name":"@bentoproject/instagram","version":"1.2204160405.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204160405.0"},"gitHead":"a26d51722a65f29aa7f77872b7906f6e7ed62e9a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2204160405.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-73NZrYxRNJhGWZsVCCTa5vT1yzWWwOtWUZPnDSzWgyEwksvDu0tssEoNqh2Rwo8erCYhK2QdJpI+ZV/Wc6pwJA==","shasum":"804728eea466115274624baa3a771e0ecaf085b7","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2204160405.0.tgz","fileCount":28,"unpackedSize":534847,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB61bJWW/153fhF8S7RD7AYd9LoJ16xv4hdCDn+GH0eFAiAKazqVQv3RUKoIZW4GxFvgh1KQ9hPR/MDeDk2p50ZNYg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWn2HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1Kg/+Jre64135lEwqFIp5tdtGlwtO0Fn5Dln/QcHneZ/xt3NtACl/\r\njnpD0tNgBGxuiTA5FggEQOQHt8tFEd9g5hNgD23H+vVceCDhoT7Q8oAijvwD\r\nZXHT2rbnqpqWNZltD8SKP434s4bWBZ9wdiG5EnpfReeswZBfaz+r5/kd2SH0\r\ne2+LZgxiPbPpPeuWy+6yRKvsaM89BPXb7cPzmZkZtW5B04Y3Zt6wdt6d6i8M\r\nj32iWmjbjUnXWQDU/RCeuX54yLilbt0PVjPh1ivWi8zBzEwS5BgPfSCF2sqh\r\nXEMr+DcwNPv33x72M7dAdlwKhivbH+XdkNiNXNm7gpEZpNoxo2nKun5rFsXb\r\nn/TBFKzvui4HhFWdqwDYPg/395CRPEsu0/7WpX5GhpfngXz6GnaZPOMjkuyp\r\nnkscUFAGMByU8IdP0LpdlexlZwW2oGRzkisi/My67ED193irTKBECZb08hW4\r\nMMOld95Az2e9fFu9Eh7SATt8cMijePUjqnTHp/RArYrtIQGVmH0OWlJ9sGhv\r\n3d8gtp+3UNWY+E9D0LJauYcDPy92MI3M/VWBdME0Pue1wNVIQHtLqazqkFjO\r\nuXxQ1qNFP2cb5khurq7FQ9rXD4xtw9Q6hLqLzh5D5psjt9QOQTIbXO7PWKfb\r\n1lSFscql2ZNTQONy4VoJMWDVd5KV31rQWZs=\r\n=nQoK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2204160405.0_1650097543081_0.08369673113540088"},"_hasShrinkwrap":false},"1.2204182206.0":{"name":"@bentoproject/instagram","version":"1.2204182206.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204182206.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"83e7c80d7406923369ada8c1a7a5dc660ebdcad6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2204182206.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-VEsEPjEELounhSAfDHCLmGOxGTO5Txjd2747MbD1y2VP0SdTlAcXTC34hSvMdlIBzlq2xDlCr35L3JHCyFJwbw==","shasum":"38746e56dc4483c07a3eb4c01ba2e8a89da187e7","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2204182206.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqYLGlmWG0PQ8/OcpNZsgICifiHtZvQDe/0WPYy/fzuwIgEVV4zMXF0NZ/oJYyEb01IBgC8KqxvJxd+8hBPLdSomI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXnNbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3dA//YEHGdXkNGU61ammchPLR75DdpZxl2qzvQDDc+teaNoNZ71Qk\r\nWDBjM5Zk//2J85H8w+0t8miA6su59qcfi5+RHuhEewAuGFcWSoswdzik9qMe\r\nfMlCOj+7PiWcLj952l1wxefspKZ3OO58ZGegSgCPtcyBsVIO/vQtEv8S9FWC\r\ndfGcb8ylFTwdljRfVlyp5HDfXeCp+TH0TFEaFOk7GRKNv/O5ovL/23tu0QiO\r\nePcA687PbTP8blkx8UCIdtPwr6QTxQYAn+5MyYEjxfw16y00NYfGmRXHW0Yf\r\n6zb8tLYf0OfFfstGY/mVLvFRSqfmQC8e2NRXXNK1UDCK98r/oQpExC6JpGfr\r\nH38T/SiUyadRhEDtRJUzSrMiqAnMaeom2GNNCdvBbGHtkZYAx2+JrG8GxYar\r\nlE0m6eq+I4iGtNNYTryvTXHH5bN2Im0QSb1y1Ku0rjv8yn2Ks7vHYX/2jPQd\r\nQOKyY/oL2cF3KdaeDsOb2CNaTdZCzP50nMRwyTyApeNvDakeOJA/nfhugpK/\r\nWt4su6gBQBWtlgaJcxDpBlfNCCpQLQMZoGCl79PASwEOnEZrNZ9TU+CJ8EaX\r\nx8WX/0vbw6Cp0m9xVhTKbB5p/ahisP2odKt3KWqOvlrPCnVlYVAJZZ3zLBFe\r\ne7vSCcYyT5d1UwvUi5XD3/wS8mmBTSBlSo0=\r\n=P9pN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2204182206.0_1650357082791_0.591004010152971"},"_hasShrinkwrap":false},"1.2204191429.0":{"name":"@bentoproject/instagram","version":"1.2204191429.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204191429.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"2ef2d96efb4624b0ef0313b60134c9e35a4e8429","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2204191429.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-29VhZCnB4PfYcl3drEWIDgpkgLS4KmPFfbjXg1GqD56akHH2n9wKO1rIPJfjFELbaLZk532KoeKaVn8CMkyfxw==","shasum":"6acf66ade19613bf4b42bab01e656fc8ccb82140","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2204191429.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3GdTEdTe0gZPdw+TcqghLn1i7sh++3UZEfetJD+krwQIgfepbrHKY66ipoaPEVhLJC+YtHt7krwwa7n5me7fj884="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiX8VBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZYg//Y5+SEgcxRoQrDxdESdQfg6xcl+/Vu66NAEXj4HEmJm5Xw4so\r\nykZpOyB/Mgv2j8+sni3G1zeVN7UKphRxUKD0Ii2K/t2trL0Rl3NMH4tKPB1W\r\n+alrEcu9zXYEnS/+0iIBEOVNuWLKRTT/ipH+mdYdjYyY9leYEv9bZ1v57645\r\nSX54fa/GfczWcLebakvLLKxuROrD/ZO79csrFeFRD+vpEVgvHxdWXlpWf19n\r\nltg5SWhQCpH03f2GT4fUhqlPldh00zkHeeO9XpE9NfZvc1jg4uytjWRSMpTr\r\n7Uvkz9Qo7XmgfwY431UptkJ658BnW4zWdHFxHSbX/ofTjdJoBJbyKqkMWHsF\r\nkUlBn+vDQbaGrz0AJ/I/V4c029hu09hD9mckIhhuOAqXXPDR48uCUQY4jM/R\r\nO4n0GfnPUu5wMxZbo5nzXZFHK9EhGFbvxaMT5YE3CkjfdXdi624uJFcdHBJv\r\nuhcw+LUuok5jSVba8XQt/pqCo4T0ITK0HiclnCfW0wiFpOCVaEgV9gXn3Ozo\r\nig8WBVyj5QfdTRVUrugQuXLCndEFG+wkQvHnDG06l7zZF6z4tBU9jLun5ZR2\r\n0J/Xhj2y5ug05JeS48/5x5WMTvueij+6FqUnpSW8lbCtO49fIDcSPuPVggUC\r\n6Mlf4beOnu7UBhw3qyky2Tml3gM18zkyyLs=\r\n=qQub\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2204191429.0_1650443585593_0.04513384479525606"},"_hasShrinkwrap":false},"1.2204211736.0":{"name":"@bentoproject/instagram","version":"1.2204211736.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204211736.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"01dad70364e4b2b9707441c2c8ec973e1547b195","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2204211736.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-n+B9MfKBOtJfiBRJ3vFE7/47+j2vxxVzMjTWZhjBoA1aJ+oRfc2gs/BiudZ2sJitNxcXbt2Ui3k3QqspKNsIwg==","shasum":"6ee8b5d0b60d55e0f5e9567ff64a94be17622954","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2204211736.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC5nivoVy2AeggEnj/sxg6yxYXTdsLdhUb5HptodcjvjAiAk6KlX98e6TXcAMhReBnxS7H4HXAtpRU05wIFbGHCQ0A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYmbpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOlxAAgtJrE6RLLzbC7oJXp3l/lHRKswDuystZVKR8OJ5lY8N36SbP\r\nwu58MBDPaTw0AUrf5AImGYtNw9etgb2MQo3ihSttvj2lVYqNEJf9vimuHSZG\r\nSwoJqTRzsO98NkmqujCTO/uD8XQSA+hWiGNkShr3P+T7WTX4GzHCIt5wQvik\r\nAPoIkr5sazpHY3RRzOkAURJvnBJLp8hYI9UoI2M3ryV2/o5tPSCuvlgPKvdn\r\nlA72czlBpH1aD5zFNic9dsyQ10GZZ2qOAHZmDCBxQq4ObeCKvYKivkJVJtOq\r\nbZ+0l3T8XE/FvJ1wRzCtWrL6uIwzJeKozTqWDLJCQgvjPcR7OZJ6VBm2itBm\r\nkWpxIIrb3PzPv1QkIHRmMaO6fRmAe4DxYBMLROSvsVkjcBFgsDHs5lVS5jbk\r\nj/5rn+wBU7pcAA6AFsx04yLykSaQ5cL+fZMdqzbonAG9VSAXZl0WqD+PWY/C\r\noyCtXAaSbTXkbk7DBuOVTSTDyb0xZ5dB+HVBgtG3LfJnLVHi2WaJ+CkepxIP\r\neiHuRLglK90tIIo3i0Y1u8vNPqfHXL8+fT7rnvn3HRkeB73xN/NJ+hzheTIw\r\npracGyLSLAwVcPbIi95pDV1wuTHYk5nhsPWs/2jfVmRt1S6BzMTAxbo84UD6\r\nQA/MIjln1KGGkQzrByBJEO5VtHCb8RhnW78=\r\n=f7Rz\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2204211736.0_1650616041749_0.7785746962083351"},"_hasShrinkwrap":false},"1.2204221712.0":{"name":"@bentoproject/instagram","version":"1.2204221712.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204221712.0"},"gitHead":"fd84f283465064f90218f67c2964f8c0ecc248fe","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2204221712.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-XECrJx2gSaTqxDnAaEvHBUTLzzou2U7SLBXUjDIJ2eVv45DM3wPl/KSnMrriLuo9T7jbSIjeUAijW6H/E6DTwQ==","shasum":"6e86af27c985b549fde3fcc30229bb63c8cae425","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2204221712.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCHx9XWSPAdFqjiDAtDTR0rd5CV+9BiB5cfYXH+dngKG0CIGYZnqLVKewwdLQYbv4K2yfzqxtNNKXQtpndhLNR/fII"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiY7gxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosBQ/+NFzyOtajtmXcK3UGbmcLelEy4EwcRtNYnJzG+0k7vRXGjPD8\r\nM0DBhDdD4NlYWknX3lkyQhWXeWzx+lbJxg23AHt6b2Em+OnQuvkZnT7WcsYw\r\nQJ+g2a9fNTWDPtb0eo1X2qqXdSqyrw+aHA5BmQxeykuh/wj9KixeBxIANp4t\r\ncEYPVu8QmTa3PrWOS2VaBKKZEwRfD45TgcliggcDlucCdEeDE5cdU+Z0yqph\r\nl7JfW7Q7Ib2a7ASQeUKPAtDiNylR7mOz20IsirnR0PCmZsrFkJfbL4bCRmQK\r\n9nshSA0Xkd2l0XnFdH4+P/liJ8jIKNDVeP9+V6aegd0Wd83nzirfz5tqqICr\r\nkgcppajwQ2Yw7Q/yu4jT1APwYFBn/F54HYB5AXD4o0skcU/nUIzv3j6Se7m6\r\nS7e9H/jTclIxL3e18EVjt3Dnu18jL7grRcZ3VU1n8r6SXU99Fb8sxW+vSrTC\r\nEZlyZKlTxXFhUtjZqcoXeVxsQKJsYvs/ghJIHOZZTru64A1lNueIq7F/QecU\r\nNZ29NT9VFKUsl+ANDwm1/NcJvt3z8NM3zurQOplcrWVu0bDUuFKPi0Vyytd9\r\nDhyboxtKVS2vLAgADlg/vce1yqW+QW34sTkpO5zWiF9SmShGHF3dEaBkbx9t\r\nrbkstYozEZpdlmiOTlsjqqjMbUV7c48RvxU=\r\n=1CXY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2204221712.0_1650702384854_0.7950150739754749"},"_hasShrinkwrap":false},"1.2204252045.0":{"name":"@bentoproject/instagram","version":"1.2204252045.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204252045.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"9dcb73514b52c635b732b72b56561ac680ea344e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2204252045.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-NsnqMe3qFlyFivl/flC/9aNG6kvuotnsax9VsnlKO0S/m+lkvKOUEFIjiaeY0w1AKxIyEsgSeFtswG0Gf4o1rA==","shasum":"86f08443de57abdd573a98c2574f01e9c8fafc31","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2204252045.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcqRhxeiN/g7bphYwwaXUtrhIj9706PL/5jtWLwXJjkgIhAM5dBee8KPMKhYsNhDTRwsfVMcoMmW6rI/G+KIgb+L48"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ64rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeJA//YGhZWT8DbaND6/yb1d/GABsWpRzU7ygqFHnchCJji990RyY3\r\n/OgQqvbH0Qgl4/D/Mtil2XqK7InIsK+5zKMsTC3/cuVQpWi7hmZ3woyZUX7D\r\nISLeA55AyItgQJ7k4VAJLeq2LySoVw56HrE4Vt/wOTqhKH/SNCcq0Hrfl46y\r\nFdOQP8B9RLYTZVmj8M33DZwWw59ltvKAl1caw0PGmq6pOuAHQdtTuP5exAmj\r\n0BEDeRJ6PcYo8NNp9i81SUwHGHgP+JUP0h+X/+J+aCpbYoaW/mzQ7F8acF4U\r\nkkCQVAfLcgH72wpbqWF1QT4ESPRr/JzYzmkgI0KB6DUvtBj0WvRb9UprjWwR\r\nSms4+y+NiMD8Maasj0+ybMXKRJwiGLttq+osdQ5Oc0UzpZ2AdLZkpw70G+Kf\r\nHdKF2Suh1iBSutzRkgL8HLMfH6hNwUNIA+myl3kzFK2991EAX+VqtzBvH3RL\r\nZENe2WgAtCtzZ0UNcYOEG6/rqBbZ/Trx2aPkJ/NIQdc7tANuTTEnSLjR64hc\r\n+AfjYZ8SiM+/ob3fLRRuwdPQiZRDsYMpksdnEcbazmT2ts7R1sxBvtBF5Rbv\r\nc/KWoqNFIcWhW8aiJYnWZ9ABUZ9OIizD108+83jdosmhDDReP0UKY+RY2UMx\r\nilpstmn5NUySNxA6hHfupHrIww5GszZuZs8=\r\n=8KmQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2204252045.0_1650961962641_0.7956478638001989"},"_hasShrinkwrap":false},"1.2204272205.0":{"name":"@bentoproject/instagram","version":"1.2204272205.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204272205.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"c2397d28837191a7d145806840ca6ca9a73823d4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2204272205.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-vNs7YVW7wb+fJkBsCS2mxMfRXGMea8d1K6I1pCrwiIvzW71DxiLlcDLf/WQPJZnCa0teq/SVzCuFGU243xBDvw==","shasum":"62ffb3051f6e9d88c6a48a62261eb013f6e42a1a","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2204272205.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDk0mJIz05hY940tW1Z6p4UJdpQRBW/iNzFxINPGw9QnAiEA4VPSI/HsKipV8QLuqO4M9u6+2CLOVHcILszHbz0ZWls="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJialE2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7ihAAny/C0ooPzoQqjkSk5SwhmAQBJUbdTsyaGeTagV5oOM56QUqo\r\nJeLa9SM5EuaDct0YgVPUnaI98IYg14tbWk8LGnCkl5+PHmSf8vp9o6PH6xuI\r\nnzbGANoxJF60wmj42bJYM3MrHaTNRPNUzE+dA80vF47cC3oqsODKeimL7II+\r\nY3qvoPa1b7WfLAJf45VdMRdXYAXuQhpx+qgBGdJERF/vfjJzoDHBhaq4yg9D\r\nTRMln/nqJHDGYywitsPTo86B1CQGgOQ9w8Z9oneaUgfqPKtLDCqKSERdeJFT\r\nP9gENo7fGoV5jl/n/K4BxqqqydqvnEJ3QwG+KILGZL7LUYHPGFl8sJb1REgV\r\nLEGAIFdA5CkaYbh1lJbt9ATlaP13RvEUJ3fKDYJ2/5lyCQzZNqqPyJZig6gq\r\ngHKr2ThU2fl7sWOIEfvKYjp6Frgt3uOLfxHyEmowbMuC4JUY0YQdHjYgNKHF\r\ni2XO8Exyie5VnhkiomXI6WjtxWpQsenLwNzsYwXfnFPIhFdHLloi80kbAzTJ\r\ndUGE6M2pf0Ktu5UP6tIikFh7H+dlyR/NcK+0tcg5P3NHaXtSSjD89z0CsfjA\r\nGP+b4rw6XKllkjDk/PAxIwzLas1Mw+0OolNuJZNMeRiKhaxAfEuCtHEfDq9B\r\nW990Ll+cr5Je4tPuZcN30lVmc5/wLs8eU1c=\r\n=B2nY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2204272205.0_1651134774352_0.47668237671861324"},"_hasShrinkwrap":false},"1.2204281949.0":{"name":"@bentoproject/instagram","version":"1.2204281949.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204281949.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"8bd4749759e81fea16cc216637d7a185eea3402e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2204281949.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-/jmYWAS5UWn1bNREoFNgHbRrod7GOoTn0sAOv63811mdlQC6wxSPi4K3Y600RReE4esagJS1eNQbRmpCNXyLoA==","shasum":"3eb58b3c2d7de5a0314a501bee268a91ba1dc8ed","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2204281949.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTAErta68Gwu/rUVmqb4nEY8KgX8s7z7pw9rz2IOFNdgIhALjVM4qBxQ7NqRa4ZOdugMFr7jnsVOQseaqt56JwEJGH"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia6GlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgTxAAglhc+AkE5cYxKPwNgTh8/nc6uAyC+TeeiVbeitIIn/IU5Urg\r\ngnu3RZQG98ajkNDwShfrSqZIj/leu08Ej5vfJZvwmha1bwHzq8f3L6w49V+2\r\nVUT3dHyzaDRRWv55Ra9xdBY+GaX8E3MpVssiAI5WD1XLwYFG5047wborEPDJ\r\nZXdAPHfNAQhIuD2SKtViHj3ilqVoNXBcbs6nRcIuNfCQmDbpuIOTvAnDyj3V\r\nqOCE8ceN91Rullyr2ECR4AKOYrbY0SHec/JXi7yZf+p2gdlTP9TPvlKjnhPQ\r\nEcR6LkEIwnYC05x4EHojN9aNW/MR6YkwZclv3P9KW7z/9Ra9WD9Uc2zwKkzb\r\nT+enpWHFYc+b0jUYw3vknMwS/kmcsvRmPQupGw2+uQ9QsWkJCve7lFbo5zds\r\nzz1JWQjZb8EpNZ0rLj0rkBsBVAHUNROyFL8LPtcHWYcMRSVw99bCoUdf4zje\r\nCvg+i3qe4RbzPQY4+iBk/N9aA8PTUhfrzLQC7eQkUY+1LZQnvMdtAQ0wXM68\r\nH7k0CGqy8N6Iggpfi9hY8D/HyQNag+CWX+osN/d6ddAbsaRgUmu8sdqANQDD\r\nFEjj93stEdDAqp22mCgw+4O0ICuDw5e0VdtsXJvDwswS/efc2xwHsLv2wrNo\r\nOzT1zJYyGzYSxzYiwWGb+9wwBRpC0Vgx0Sc=\r\n=vaDy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2204281949.0_1651220901239_0.6801492975042323"},"_hasShrinkwrap":false},"1.2204292129.0":{"name":"@bentoproject/instagram","version":"1.2204292129.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204292129.0"},"gitHead":"266c274e2aa669399dede55e9fc55b8917069279","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2204292129.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-oEfBMqcvKqDWaosxZ9DnPSPnkMlMTCK2qo+R29w+jQt6jFiNZZP4G2eY4d1Gqn2GUOfYWfGa4+kEG1bUmuYAWA==","shasum":"f80131eda063361500c735e65096bf4166409be7","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2204292129.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfpSJ3TqEPxbAjyDFp/xePisYGsgrr0ZrJOdc2NS17PwIgcWVjYuyIC2uqWjzGSj8Z2DRO82z9axr5YBe8gV/FjZk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibPLQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCFg//ZOQrfoFq49ZU44vYDjE7u+kGwhFDxK8cntj0qRaTxiZRg3wh\r\nUIkKaFU8QSiIGjxugbzCql9fhIOCko/X4T0eLMV0x28C+d/C1HY3jb9S6Oej\r\nHwftRdfkX6TvUhh7aMIyV6ShBM77vewvS1JnxSjCtqXBtkClEyiCX9rcwRBE\r\nslvjpgbMXbhq8nZ3Z6bEWl1X7pLZi/iF7JfbOtOJfxf5uEv56IbV8Yr/T1EW\r\nFdGbqWBFVxCPoNFinJ0uzqsgu60AMku1lNEHCjSNTciygacw8F02iU1hJU5J\r\nr0phQjdb9QrsdU1OvaUM22Zfm83M6lE6A+vYalYCa3NUCYoPkPlwHK9RuPiI\r\na+IPWdPMssBf2e5zIZOsQAZoefSHTZtfneq1f3RFQjep3GWI5juSdMVeU4j9\r\n6vW2gYXUVnjatPqICdkBUVV5BeqpZtjl6/E00wLehvN77QMbb2YtfDNYu13L\r\ncJV8M2KHdURZc8pYfcj15LAIQ3X97STjJ+ZjXZ2PvxkMN5CTmCKPCHZe+ukr\r\nTAMhrAUBGHRs2EMuQRNXnQ4vt2C82ll46EhC6Usf1KeAbubviayeR6b//oRF\r\nOMdmHClhyjGjD2BRwd5Rs2YtKySlQtjygRHnBkhkUcW7XyKehgQwDyf1tADa\r\nI2+NPKM5fYm2DiegQvdpEWssfJID2gPKC8k=\r\n=FXMK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2204292129.0_1651307215911_0.08408479346617748"},"_hasShrinkwrap":false},"1.2205031420.0":{"name":"@bentoproject/instagram","version":"1.2205031420.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205031420.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"d3652194dae7f17865db127c7135ec194907b7fb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2205031420.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-6w4IWYTA37gCiUsXiRci1U1oeCNJOjpAxNc2AhU8a9g0nC8oH8AJTPTedTfE9VP7JO4mq7VW2+w1C4aVtZPnSw==","shasum":"7d404dd2683487206555ccc25bba25b2fff61ce7","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2205031420.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6tvR2OxRJUI7UlADt9lkid3Z2hh7zWQFkI5qUJuu03QIhAOhq2avDaw59iHzIIbAGSW0Cax3JNdjcaqa64g6i0aFL"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicjjwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7OA/8D0+WM40cOclRqXp1oRE56hzYwC9ZChe2Vtjdn6TeDUg4DXua\r\nN7j9ymf81x1U3gn9vZqQnZUV+jwnubYze1qHlegZsgYOU8NIeSXLp3xP7jRv\r\ntiWyhOfLLNS7dmz9FsbubPy6nF0tuz5DFDa9ihZgGR13UsLixtcBCJvCoUTb\r\n+D3KNdgMZZvyZDjNoDTnSqUcQeuYSMO3Mhmp3kkaLwJRYIv7M2MmYPiwlSE3\r\nY8D5xi8bic/oTWk60QIRwDA84CtHZluL6QzTthfE4XYC50tcUWVawmj61QDy\r\n6B2IjhP6xt8x7H5jjg3bDukU+73f8ehpXluZA7X2KQiyeTPnwcZecVr4k2X8\r\nZASHBZhsLJD2of3JDi11tumTTc7bSBT664HmOOZTSdZibaQ4QmG8qY3xBguJ\r\nzoZ2Lq2eptFEDffWOvScP9lyawGhXbE73g40344Zmpk9p7+0LNMvjAnpAb0C\r\nuFGO0jRbZhvJ3bkwHqPfAmJjFqgILtY/6wCZ+VNFSOEFv9vQqZr64g3qaNRS\r\nFCSQBLX1zMrd+iUZKV3hiNiXhqqF/72FR6BF00pykWjTwHhLJL0Bl+HTmx4/\r\nZQk6dh1jqFrXDbGNjMx/QhTOJ91eFZwRJwcEHKmVURuQX3+iqT5NoektaE9t\r\ne6IS/gVAzXJAO3icLHcu5V9ZVEUwIclQHBA=\r\n=N2Rm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2205031420.0_1651652848165_0.5700653013389703"},"_hasShrinkwrap":false},"1.2205041533.0":{"name":"@bentoproject/instagram","version":"1.2205041533.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205041533.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"8c9c66c7b1ace99b28d77b82807f84e9e8cb305b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2205041533.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-F/uSX71xzWtDNVHox8pbG8dL2DMkK6LcmkxDJkYNY/aF/8JzG6B14QHTQ+fozkahlM00rVWEFhqZzEmUeHPz9A==","shasum":"8c87f3d3ee15082158ef8caf48e3029127c00e86","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2205041533.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZAonuHfX3YEVu5UQnIEzQlnqDZq+DW1bhnvcnfsf/2QIhAMeW9xCTwhDoF3q7CcfZ6NlAJLgf/QkyNAlhypaNIpbo"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic4piACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofHxAAiAyPVRAi+BnOHzCi/tQ8JuVW2wwnaH1skjVB01bjC7PQbe10\r\noY0q9Hy1iVswlvneQk2BcoY8c1FPQYvK6Cnb6gntVZEBg3A3CXHrAlmocU8B\r\nMkCnAFCsrYefOc28l+EjC1B9P35oTg8JnDl791nozl32bwum/WlfdhzDqKsa\r\nsdE7/fs5DzV2FiGRMIt9SxW5sKSK5s7+w3tLnRJN+9Pz+CkeGOe9O9pm5w+F\r\nM4lrvKajpOoLwokfIQzR5vJ7k+9bsf9L0e1B5hLNf/RDxwsxWjuBU2CTgd89\r\nbxOa5dCWKLciYUpeh1/cJoQZXAgmvOZL88D5nFjjpeLjYIbtu7lOOdA5teSc\r\nsmX58i31QcowNwGSw/h/zIMdE1GR7eCI4yANXrRr3QZizP4LePxN60247Ptq\r\n8PDww40HjL2QaXtBDuQjEOCWgOmGZmnYKRtRk1tJWBUS8yZ4LQh90CVPXf5/\r\nbiU0zv2s60+w13LkqfyieTTbkrselh1XXAwMuabz+DyZvJS9Jtcdl6tkr/Xo\r\nqy1bQLek8Yq6pRsUtqo1jZKjDhOczCacriRf6DKYAe97mkRfgaqL4G0/S8fF\r\nKR+KRq8LHSuTyw+w7dTrlyRZhwt844WdYNZ7Mex0FWAIBsLztD/NxyNLBWI1\r\n1ICqUBQFp9+F++5hMOLSZgIk6XvkV8MtMoM=\r\n=9uCS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2205041533.0_1651739234577_0.9372163986398332"},"_hasShrinkwrap":false},"1.2205051832.0":{"name":"@bentoproject/instagram","version":"1.2205051832.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205051832.0"},"gitHead":"3658b8bf865c7e71c605f93088560c0657af9cb4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2205051832.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-ljFEkHTkngPawrqf9Fu8DL/oEdzoTYwprSTvihB0rF8NESShY7aKS5J/TxKxFVBjXMfsinOCUn2pvi8EENRedQ==","shasum":"61723e4080d8ce86eaf8003b56c9a16c51e5ec8d","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2205051832.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBlfhDDE1xW3LSVRu9O2DbXCkOJUUZjyXRFSY9u1hKzKAiEA0+vqWP88X0aeR0pg24hmyieml8tzxmDcrZxvckBuGaw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidNvmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQQQ//ewr2Eev8pMi/2dzFiZLcL4Q3ghwzPy6y/5rik87zvWHq3VsX\r\naeVcSyWZgiKBXME/IS6bCsoax3xk3IN7JFd190gAPRiUdjdm4dPuet5UFIqQ\r\nbzdx4HxAb/ARP07acBLpL7lHXDiPc2F4iso8rcjNFcxOzF8v+aohPvcozJ/R\r\nODr0S4n4fZYCN0tHVBD2Re046WT2waAPY7NPnEPHYAhOGWp6P7HEw/w6TMMh\r\ni1C/9+RpoSDp0YjKgOIq2TY3yRS1Cq6O6CQFHQ9yuydZTonkDLL8xhRoN8sg\r\nent5i+3pv49QF1LQnlGyCbJTQrPhim6jUxLISxfd5jiatwrO4Ikf2A/EA/UE\r\nYkas+Zw2iJy/s3LsMhBRGKHzz1svLlwUUcJX945IQNBdc/4s7TJiR93Kxvjm\r\n9Q3Ait/v3Kni14GhnJQU9RrFag1kwNt7rzv4KEL89ELBJpJgmrJxxq+wMJiL\r\nHjtVSBe+71b/7ulFOApdCBqY9/FrdnnUQx5S4T0xNzzjTlkdEYTpx2pk4l1p\r\ng6qWCFb2nuKPpKXsGvTXhv/MS0dn0b+tqPY0uz3jOCe0YGs82V1VxP+yHmz+\r\n6RDnaz6NHayff90fE/gH7EGjOEqj4qdTy8yXu6bHT27Aa0Byenio463DoBu6\r\nWH5hrcrA2xPqrPVqmJlmUrzW1zzKrVU4XRk=\r\n=MSeh\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2205051832.0_1651825637868_0.6582061817064475"},"_hasShrinkwrap":false},"1.2205090810.0":{"name":"@bentoproject/instagram","version":"1.2205090810.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205090810.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"3fe2ae4108e8ce4355c90640458d13cf81af160c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2205090810.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-VyowBgIv0T9XmEjTNQFsLsyjhzVxrmKkZG0Jcg8eki+z7XOb+0P2nbVK/RarwELKnZZu0eddNnkwkk7HbbrakA==","shasum":"9e3b10baa7efdf584967e66c6651d93b4af4ce67","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2205090810.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQn2MjqKLuVyFIv2+++0gg1aYkMd2mXUannjOdlHkLrAIgQTSlAWxfp74SCuqpxk1U/F+EsAtYvDG9GpiDYjxofhY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieiNEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojDg//e5uKh5XWjxzOUFxR7ZcdHqdmt7iudWL24Z6Lr1k3gpnNii7W\r\nrTrwNOAeqdFQKQl3VxHtnw883ql5IAh3NqlVVF2w2y1vVrU2KLbXvispc9/1\r\nsHf/wKGOl3i7dLmQ2ge+G0IAoNuGoj5FSyVPyDGvIVq4uQZXYGdxxWDdIwC3\r\nEszmRQ98ESkDOB/pyEwmVMfp9npsQ4vWiT+xXCVscGv7TFwWDzQFAMFGIx3I\r\nuymRRGtDU1uhik3JxXSJ09UfljHe98hbUZeamRrvGOVtadrZUYiBTe5pD+Ua\r\nFAMGpN3rpER7oHVSZBsI7yjLrj9i5mf4r76ErOdU0ueNJhnEFb5Uy9HoAH19\r\nLXMoE4O38GHAw9puzMAO62Ozag0V0CVhqiRemR72Yd6hm7pa5g36rlaAWhp4\r\nog9tcgYK11GKbG5RznFjN/HI35LvhMKa0DA2EzdMvq0GWJhG+msA/9Yf9zKW\r\n7zbyxfUdXAZ7ceb7m1MhBVb5WjiQewDbLGVBM4Ou+n+0cyGOpz7n03QKT9+V\r\nxsrWZ9XeXt/31R/H+OUrOo5XJ8zZzbjTrxddmEr0oopsWoo48qsoij/IKLln\r\nFsUxQoolB2LHwznRonm7gvsfS/XwThD8mP3noM5tfdyM1F9nzZTKLAlRQtN1\r\npI6qAV+Dt0VydWXNLOfw1YcEmZDLF6g298w=\r\n=PuIu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2205090810.0_1652171588051_0.11938872906572584"},"_hasShrinkwrap":false},"1.2205101904.0":{"name":"@bentoproject/instagram","version":"1.2205101904.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205101904.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"43d879755f765aee2d0eab657533b493a025713f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2205101904.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-U5ef7KsQG15iT4b7Z/VL73k5yFKw8G/QMEwNu+O9C0NYCJWR58WelW0WsAoR4hc24mWbPkSaTictndEzQosTSQ==","shasum":"4f2237950b17d70a2f6445c73d8b59f0fbacd475","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2205101904.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAgpzRB+2D1ZWyTvs6dEH7qjSMXam5nd8e7MSVZkR9ZoAiEAvMmw0YXSLmYW/wt8ndaEObl+yOTA+EtlWr5pvWFewoE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie3SzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodMw/+L990+m//H8qbiidJP72f2YuW2yjWV7C8KwQ4tbxp/az3G6Dd\r\n5RJKM30SzIrCTF3cln6E3gPAZpUIvAOsaLyZ0uDUHsmN9NEUvUax2aCucdz5\r\nl7l+lk/LEQ9k2dQo6muPQhdH4kqV1FAcsrl/k0a0oax9NLxw2ailNa6EVNbi\r\nC9NI+psCc3QCP/ySzzBQkingDKbQmbYsCCbCMqch46p2pkFnbncVAcSObK82\r\nWdT+ruZ4+zAsLu+sBGNlTF0f/5s8VLKis9xhjZPvKhwYEFeqpfdl00BNtGnQ\r\nP4MMuZI8TNlEYwPeUCOADy5z57dZ4zcLZRishVehSMFdLR01HaMZ7DLC9vWN\r\nyqo21BQyjGelGW2UA11f7l/vYQddf+BINZB1hHxOnQsWwSG7uedn/NhjlmXN\r\n9CxV0PqbjwHo4DnWsbrGCu0fykCgWBpw4hMO6ON+2O8x3qbTVEUF1DAvT+/8\r\nDD04ttP6r4X678mRGzB6ZMHd+/gEDqI01KZ59lul331lL8lyOahrf7Qbi1TF\r\ninGDBYEAILQXIL/8L6TmXylXIbID3j5EYLovOkQZ8qq2pUKbcq6wsDm0ygIz\r\n+RqcGa75gwmOwLCC+vPzxFMVpV6MK7+wgrktNzQA84q0F7lQwpnOisRi/8J7\r\nB1YYujig9i/jckoLRLCJHcwApPGY5Syutmc=\r\n=4dU9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2205101904.0_1652257971315_0.20804966222183952"},"_hasShrinkwrap":false},"1.2205120110.0":{"name":"@bentoproject/instagram","version":"1.2205120110.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205120110.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"46f34860b9f501caf0eda81977d1ae3aef4a947c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2205120110.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-35c4/MHuHZ2Jwxu2LuXcXbpotxvwEdC7Y73XHVL5m46Ffv7MftCDJpIfM+fLhHM9FlBumpP+uiLGLtR5dkfhIg==","shasum":"94be0e4a8fb6d86e396870e843a861764a3170ad","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2205120110.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC82d8gZ9bnDPBA2ufXzMlE7xiW4GSrcpAAw1kuy/isagIgcFFXiM7M04Ruvlff2VS3nkcl5qWSVPElSqsZnHqdugM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifMYIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriTQ/+L8Hsi1kWBBnSUQgPFRkC0IhTgKWmNydAY7YsuvkCKtG6Z2hQ\r\ndaAuv1dDq7XPT+8o4kS9J9CStIova916CmwtLKr1kHV5TjkT25vKVwbXaH5c\r\nkiF4r3w4+jN8rv7KHFrhL3NhMUIQFuJRbEKYRp3/44ynQ6V9pdMa53FaX8dZ\r\nIYfftOXQSpzjdvxDK6U62vLpyspcWP4HbeBsHPEqgFSQa6qPSkEvkRw08Vri\r\nbytMJtJprcdPNCY3cci2XmEj1swqtFM7KSdQKMr9enCcu22of4G4vnci32Op\r\nC1Y82atEAYHWPjvHls2UTrxPB4eKJfTFH2Zlc1wvNbsILfie5c9UttJ0qU/4\r\nptrUF30hwMQxwUPfRujMPdtJIFPR8Cdg7aVP6I6LKf/PhpRDBlaAMT8MH7wr\r\nbVcp9cr6u31DTBqDCku9T3D15XMLVuWKh7/jrObJv0HjXeBYdqk/LF25o2mY\r\niFXmyZ3EyGZP79mUcbt4eC7ZjJ5aEatZoVhLhZwJOLn92loITDXywvFOaC5S\r\nedaxo6eBFB2bHfSwVl01TlumOiHAxiXlkCFGjJKY4kIBVQxfPQHDxQn3NmkN\r\nd7EaC+js/HnPHCx6MqDLf765XdVYX4qCdzXKzCUKEmT+IOLyfTy9NUtN/CxC\r\n5A2OnFt/wYPiNVnrhj/Qy7HbzyM+NVRfKBI=\r\n=bFdf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2205120110.0_1652344328460_0.9326918729274798"},"_hasShrinkwrap":false},"1.2205161914.0":{"name":"@bentoproject/instagram","version":"1.2205161914.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205161914.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"2fb4e151488ba4d856b33f836151d66b45ca457e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2205161914.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-QNwemRUfnKVvQQHCCdg16JqwrTC/Pdr0Zt4Ab6dQ+Z2Fu4rVpv0IxqJ7dGYXk4jtojpFpIddskU6CrQrPDSHLQ==","shasum":"454301254625ef82a61895ef917170ffc916c314","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2205161914.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9edHhqP196DVx39YRKNzXrDfdp6MUs/1I7w/YUOLQPgIgFYacgeWnL/NHs6CdxMr9BBD4ZqJpT/Lefy5jNAUIMtM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig1yGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqDg//SflnSKYVqDYsnucEKuLnCGiaKpmNIqo0rndXV9WtBW4hlzes\r\n7zyI4X4utkk0+9E5YScYFWLkoEvynRl2M+cciWJ91EYN0r3Kt0OeCi0dqnOR\r\nJxMllo1/HGvH+7RKYElojSOwWu2tGWZKzSR5qkktgus0lxhc8JqVh0KmVtT1\r\nKzYoI9I3DwcAKBlVrWJefJWQuiGzaKalIprBdBhPdFI1wYvKMQuFP4BHeKh1\r\n8fv2Czbl8IzE8X5hrWowm9ECgjo9Zw/OqCO6bnFW0k0irXB6m0q6Qh2kzti1\r\nVch4BYrc07vEJ+w6M2PeEuqInqx6q/ZF+vMGxT4WkT3FhRFBjyGeiZsXWYoU\r\nvrTtYAXnKdt9M3ciNEmeHPCN2QeMjIziyYjBiFR8p3a4C2yg45iYeqZ9JLTt\r\n+S8EnPYL2Wr9diqu8szJXsi9otY8/k52LCFLu1J02vb+yX3uOdqJg7/NM81p\r\nWQUdQoGVfiAxYVzFi4S0IE7Ys2c3NVT9hhd4AzIBqRhCy8kTUNvCvGRbcmsa\r\nkOrkY5TW4ncSdZHgYvjFbzq308Zzh4FfnwAOIepsd24cUhatqISY/JVu1Pfv\r\nkdOFvTucaEfBvEgKoEoT3RcWoKJLM5QKWEQZI6voAV7huXNaPmuzC4nPZ8lW\r\n7UT5ygCmZeFssJgiMSzrVcCA/z0prPXMFes=\r\n=0rTH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2205161914.0_1652776069904_0.3724485011215055"},"_hasShrinkwrap":false},"1.2205181800.0":{"name":"@bentoproject/instagram","version":"1.2205181800.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205181800.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"fb3f61c46e2221f0f2e1dd836127cce386c7bbda","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2205181800.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-1lte4OWT3odj8d77uqSgKUYG2omy9MzyFZ6XyFyspgxdpQ8MWNNrUD9Em43Vl4C/PlB4+b3uEofrpWpFDB36xg==","shasum":"c4a0b55932696e0955d57c66c1b427713ff495f5","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2205181800.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAZq+J2KnBgAwQcR7gyA6bF+zPML9fnf3Lmdf9/lkEg1AiAT7vZMt5a4hxiLGtKvUo7w0ZwDt0yxySbMvB+mPxDspg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihf+uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNRA//RcD0+OiOvwEEBGxSA5hE7I9D2Uq8PzPfwnLow3RMamRowyUW\r\nf7mnU49W8iRfPpi3mEgvWbt1YLcVpxXfPuiWZ3AJt8Jsjbruc1clOnEhCEqR\r\nVq3o5T1VJIldReZ4yei3Wt9oHOyz6SaJRPlCcG7LDXP2VqCG2aVL8zrIJvHJ\r\nUOsOdrbRm26tGgITSAbyd55UswffJzPRFTw8xgvLiIRuLqff/jy6EZYY6dpO\r\nGcbdVPqxjrVBQzPtsDPdicrptzYdLe2+hbeuFAN0pBwiiFlMRv3g9Fz/fKBD\r\nPwsth7OJsxJSp6cFmHmGT3gEZk/Bqm+MAB7PGz58RsFXp+e5NfUu31cZ0jtk\r\ntaPCaayRTZ2BDTIWwdqUAaSE1X4adcdcyyh3RLJ4Xy0GXoPQnbGUUKdN8Aiu\r\nxBmytBmBn+a8/1OnmhkyGRHZ2nKcvqMQvjnCIEl0kb5ly9r9o3HzGAkN3SXc\r\nyRV7HDNjHJKq8xvscw7Q68xLqEgOqpf/dDBw4qF7sGb1A16Oom8uEE1Iw0Cd\r\n0hyJmHnqGHXKrtbwI6c9oVT0ZL6YdZUsi/TSPjvp4iDsrjmAtpahxbsi6z+p\r\nNqsCbiyQ05oYBxvuttQgkDLRFj1mnPIV5VgyZouezbcAQ3W/8UfpGXvAOyqn\r\nPTQUpzvIAfo+oKFB/qLAxqx7OKarFf1xvUo=\r\n=5X4i\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2205181800.0_1652948910365_0.09387162821641115"},"_hasShrinkwrap":false},"1.2205191749.0":{"name":"@bentoproject/instagram","version":"1.2205191749.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205191749.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"83c369066eb9c7dfccb12aea936f29a84bad30fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2205191749.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-AfTPYz4qxNck467W4jV9ZVEuEIr2ah8meFR5vSLMD7nL2OJyItEaQ1zVIw/979h1L8tsS1KXUwkk4HyqVSGZJA==","shasum":"cab882d01c6a8cc4f5920a8b93ee3876b46b31a9","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2205191749.0.tgz","fileCount":29,"unpackedSize":536013,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID3sska49oeGI1pYnVyXVu35KulLLNCHng/vBFqFrjTiAiEA5Lc7d7B958uchycFAWDSgmumbWPEKgXWY0DpVcKTje8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih1E2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNBg/9Enhs/Q2SVDnhaLVkh9TuFcI+JLnP9L0E/0PNt7wtoUnNcbUd\r\nrTSt/ahDzsB91n8b7wxg2yBZaFXGx1ZNozoJmRjUzLWesT1cNi3GpPtoBYAs\r\nvrHqdlbE6ASY8OqJxVHTiF5wP4+Bw5e7fTmcta09cwqfqq4io+rje0TsWH+7\r\nFvER0At6ZC4JI6PcBcxYU4WyDA9UMUIqQAid3sxh9pZCmDEGqIGWyFauajDE\r\nn4HIGNt0hIDYFbCRclOwF5MvXQZXy6BIdaODoX8817f5KrTiw9qz5T8s4Bn9\r\ncRuYmgyCLnfzESjvJHHpweJPV7r6PbvnBLhdJ2PqSaHIWURYXfK9IM9EySKL\r\nIS7wVDWgcTRKXZUz+DQ2KnF2DszcP7OUnHlrcojsorma/t6ZRuS+L0VV+WDS\r\nC8HX/e1bZTA6n9qwJtt2eA9rBq8dQMYymb89+EB1aCOK9scSLiFt1dUTIocq\r\ndPFqfhb18cb2pIXzqhBN8K7+UBTH96CxItxo8lSypJYOzo0ENvheuxQnlBdS\r\nO47fuDGQ1JIjbrI7gB6gQ+2a4/9vI3rApjbtsZu2x39Yq0sYNjuq/hMRN8+f\r\nk30ayzvzCbRvKrL6a06ZJx9AICRpgtKBeshZ9eU4qgaMwRlE7mLm3CqKV0Tx\r\nhEd8gZh8is9uC6Khc12ZSTGnAtrzpblXv9s=\r\n=3ara\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2205191749.0_1653035318394_0.9217472524570443"},"_hasShrinkwrap":false},"1.2205232225.0":{"name":"@bentoproject/instagram","version":"1.2205232225.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205232225.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"ed0c674bfc87fac47bc1360a13f5d69611a1228f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2205232225.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-ahF42r3JD2yaoOc4ssLdWfKlRSoEqAzWNXTSBnYCGKnn74lYYMnt3cyPGo2dmdHS+8uP9UJNHZ9Z+epF+3V7ZA==","shasum":"06d7b91823b438a9069ce9172b09c272c48a9afa","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2205232225.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCf98oRBo61RjCFCrmX6Kgj7O5QPI6jxXq+9B9rFGGU8gIhANPx8L0WPt37jfuWfPYaLF5CcdJjCqHjsEBx3TyPY0Ad"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJbZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZpRAAl+BVlf5G0mqBy1xhzB3tFcEJ2kxCoV/FE137t8mlVRPBOy4e\r\nZ7tN8sESs/AMzIcDhbQqJJ/JC9HjCEk8619ZxY25xtSl+6e1Y03Ww4HsL9CG\r\nS574Nf+8vI4DbhLnnrWGxbHQaSXc43b9hb7bVKbQY9Lvrm0DHu0cC12p1ual\r\nOSbcOdx7Kgb/N2339G8yQNuncYWqKYGrzMi5Nl7mvgAa7VfNvuEvP8XUgN3M\r\nKxF3gLYuF1vfCaNPPaI+jJTnRWR0py9GbW8rkFR6YCcbX3QE1Fgi4VjQylnh\r\naGa2rfx6NbJJmAYyEHreFZvUdb593PimL13QlZvfWJilhaC/IE7zz/Jt78DN\r\nMnh8tCXyUUF3nb6Ddjhz9o7NbKHHR64CdADQiUDy3zpqCvsX0Uk28brUxO8a\r\n9Rqf4x88U4e02i/1o9jPVshRoux3dXAu3V9ezUgkExXBC0wEUzAHg/PTKcDj\r\nuyCL9DesgpO/K3cZgVrIASFubn6rK+/Gmhc5ac4bGyxzqYQpK9iihAJk4IZp\r\n+/uELlG9fI3g7SkdhMFgfC/amcZbhHVXA69UJPG5PB8Qh1Rvbp4qrS1sIf9M\r\nXTc+dqjMj04osrtv3FlsEsRUG6eG/JhkhJgk9LC7GWVxHZLQufPRTayc7Z22\r\n997MEwc/J54EGPtXIFkldbxSlagA3/T24Ic=\r\n=zMk4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2205232225.0_1653380825075_0.5230784407528075"},"_hasShrinkwrap":false},"1.2205120110.1":{"name":"@bentoproject/instagram","version":"1.2205120110.1","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205120110.1"},"gitHead":"ed0c674bfc87fac47bc1360a13f5d69611a1228f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2205120110.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-wv4ixSKK5jWNPDtv4hoACeWHUqZRvLDw/NR+hXYFXrZZ1PLP+Mnt8At18nHpCMuy9DvKmbhaec8/wphb/Zpinw==","shasum":"0bee44a45b424a1920b6d9d69c41a69b7d721b80","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2205120110.1.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnsjyJUlK7Z5PwGF3m85rjAwfka6HQyN3QTFjnaNC4MAiEArqdmTvUr6XD2N6lXvsy2iPyqQSmQcRx23gf8u5PxuZY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijS5kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGnA/7BIUZf41Wk6vSNdxhgL76esaKL9HYFNP98D+VOFQBStNq5vxO\r\nKO0GYa6e8kHlQL+lZzeyvNUV/ViqOPB13UuiN6LhtBaWoM+2zh+/vEIEhuNj\r\nfN74VfhmTgBO29S943QpIOuX0fJkCEdX7f5L7FfM3BMQlsRyiXyhdpkOZGh1\r\ntTsh80x5hy/RRmR4TWAeiQ5GWhvXQIlLhZmuF927EEsA01hs/dHhidTq60A+\r\n6TZiLpd0EccrKXLfHA6e7QUd2k2Uik4e0oqaJa5+bJjNPsZuAVLJNgeffG/N\r\nNBo97Qig2Mk7SthaGPRTrKzbXnWz7QHnpf+ZJze8maUHh2JM989RZrvL22YI\r\n2FrKuLVQBtahJ76KZUzUYX/iDSJF5EMnHkAAKCRZP1OgCQ66wVI4IwgT+2/P\r\nR2LqsVojLdFpZx6ZMvuFnPFA26iZSO4s2aMYSJvxZEtLDQMjIoZa3cM6cnVW\r\nHIeeKvxue+i0o9NdDk231rwf9iF0zc+gqz+1y21f8TmfjL09vuEvAA/BQJAA\r\nN54lJ93MVYiAwRsE8NANPVEaBzO7Y8S2b6M76dEjy7vgYzAzMKVSK71D4Upu\r\nHlKciEj62prBiUOpYLBFM/Rn5xGugM6TdrGU+El+xRXSUJYOpX2h9BlNJjhl\r\nNute6+j2BK7tymXOam3dGj4vfzTuARNH3i4=\r\n=ru8S\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2205120110.1_1653419620161_0.6626100446604823"},"_hasShrinkwrap":false},"1.2205251942.0":{"name":"@bentoproject/instagram","version":"1.2205251942.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205251942.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"e2f9546e2689785f0d9b4ba72e61759323c45bef","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2205251942.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Q5huZYpeQy3pdYCparZ/M0X34UJ0voJnQiIfme/MT+dJ/5DWMidBBE8khhOP54IqlyIg+ZM70m3gOTcoZAIL4w==","shasum":"674978e46b06a7b55ae39121e3f3b4852f65420d","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2205251942.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBFY/wjHR6MRk5lTzjOGrMCdOL37MXscUvuYDHHSL/0KAiBlBkEuNUY4jveJkgG579ypo5bioABYE4fP0KA5yl/GPw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijzoQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyWg//coxIjlGjFZyRdvdhkhljuoq+4HiYq2zqhSVY5hu30qrOxBjs\r\nmtRj3wIAgsRP1rTTtxOST0aWBMIOHz35xrmWQmAUThOWbJt6zs57SLGT/FEO\r\nCDvx86DbSuajwYM0kX504AxT2RLPoB4ApOObcWnrLT+wcmSOQ2kr9RUZR6eu\r\nqA0VDDcgfyCabtp3O+LWIS0JOtlB/5fUja29xSF55hzJ2doOW2tZW7P48pdM\r\nxV1PJrgcUqTmqOHKVXsiiiEFWIJ8HjoD10k1Eng6ZF2mlo4hnyKV3mCC8lqC\r\nwnVx8Dz+DsMfjs2ZwQtsiFjajtIc3XKjRWWPq4MYrHh0/6rHzpk85gu5eNsc\r\nMFD0v3Y87tssmKTFO4gyxv3TVj7AylYN3dIs4Joh2UhenvNflk761zOsv9r9\r\n70F6n1ZroPzUwu9BRCsvEQCYdfdGb2rVFocgEOkpwqXB5p+CFG1GzoMkHWEq\r\nNrkULDIV3wFLq9APnLErbAdlHTQs9qAvjciy3Pr09G8wPFqKj2VlzRZM+LNf\r\nf7VLS6AV31ic9cQfYG2DdnezSWEOmAKw6P1N1ET+J+NJuJaMA1XR9NuNYnSm\r\nShcsp2E/Jo7BdgdR/kKtxwmCbr0y/kakO1Iot32Bs1qJ4WaWd3lXQJzn0KBz\r\nwinSv7qSET3EacHQlyMoz1cyHKzGsUEW9aM=\r\n=6kyX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2205251942.0_1653553679785_0.3405512522298766"},"_hasShrinkwrap":false},"1.2205270638.0":{"name":"@bentoproject/instagram","version":"1.2205270638.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205270638.0"},"gitHead":"11e6020f1ca745e65b5d80408e0beca2a8d38004","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2205270638.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-ZUXa6s5opgR7W8AWJQeqp+IQ0wXzLK9H5bOx+o/FvyuJd0MNRYkFE4desxBymJuSexX4N5jNF81ZqA/RyV0Uew==","shasum":"4efd7ae049f935397981087f5d608b758ed7463b","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2205270638.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC+fdNyQJoPekYVKbtHmPWWllyqhA/swVL31ajc0BygCAiB+YqtXd/IKkLdk4CGw/zTPeYI8w+qZbgIsxAMAsi4yRg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikIt3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovaQ//VyzSJrUIGF0xhYgfsaMhlkv3uu71t+yddKFC/a3mMgc3r5dw\r\ntKuM1Oq+Rk7D9m9pNz0kgJdrWgtqlwwYOawee6tm3uYXg54kf5Nn6hISkljA\r\nqmRupW5xrQe2lRwaisejx1lcle9wf04fmyQfzk69PrrV9sz+7B6ZhVAUQs9i\r\nXgKx87EgElYoahf9TOoa93+1wKuy25NOnTWEf6XcMYYe+zO7r2EQkUHtZfa2\r\ndwADAABOdVW2m8R+6/KB4vnhc5MtINFXrNpUWBWuID0lnD2FnISdfTeYWAwW\r\nEXCZFwXG4Q5dDpYx7iS8VCVpNTzpWSKRdDwit2eeaph9qJ8W/r7vQj3dPXnB\r\n8tV1mjkpzgymHdvzA5SV5Y9Vi8LrVavTZ4oIWvq9Pwd6d6jzacjE0qDDt0ed\r\nc+Otjc0AVHvzy2/jQBzfL9kNElSGkM/emzUy1Da1p3h+vQWQZae4nXBEf4J9\r\nVHwyzfPtOx8McvRDKvOMuXCuHb9OOlbpfGopKdacqf6qdTKNlT84F38KeUAu\r\nl6mW1K6zgYI4cAwrkzr8Mx1z/b6grz89lDhbbEijTdNgzotuWy4wCzDhP19J\r\nHwaCXi/SLXvapPlA6CtEcqeyb+6pH93jHc8Qqy/OngJf3/dbCwQrg94z9oef\r\nDu3vZrHsD5uvi0vQw9k0XKJ12+QXpp+EoOg=\r\n=s6in\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2205270638.0_1653640055756_0.28623765573828064"},"_hasShrinkwrap":false},"1.2206071918.0":{"name":"@bentoproject/instagram","version":"1.2206071918.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206071918.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"f200c815cb7bd0e1495bd9c338425aed1887a459","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2206071918.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-e/gZc5bLY3BrPM14VM4XmHx0/1lJ4Qk6MB3ZnknoLmnancP04QqHlZ326uQ92nXiDaBIz1x3lC+iVXGNILT+pg==","shasum":"3500aa6c685678b8ccbe7293e3021fa2a611c2ce","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2206071918.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXHBXpvAPaqFrAiEXdQbtKahf9EEX8RYmDTeWGhVIZEgIgWGLJ02rN9fcPLFDjBlI1QDOi3GsBgoBhrbl3ocwfdRY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin9EvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroVg/9FsoNUP0mIhzqiOJljws5UTi82m5BgQKRo+65LSM/mXTarxyl\r\nOEYqnB8qzOmzrmM4uWY1v1IKAH3FwP8gYhzryqQx6g4UDZbNyvkOL3oZUyC2\r\nrxuUlamtNICDaQ662sudIs+nLE/AyBGI5HY/kymyQs97qJA1WpChBCf+YiKc\r\nKyMWTSc4KKYymXej6mWwbefkS5A8ZZ9y/ByMsty4OaxNtmww5aKvW6IlfQ99\r\n0pW664Wv3pXLdRRVbzYgVJivWz6mN9NgDFZ2sKXIrysFhCu5G1+nCGXj6kCM\r\nh5W8rH7emENrJzhzZtSxhaXS2jNZcGb6TGAtcHab2aKiDj9UvmMalFj+MaOp\r\nIm9SAIE2d7mUaWSZ0sw5UoGjui3XdDv/kfGZz0nHsw7QGKVRiwCQP8+MNrke\r\n5ONtJ60/jcG5g2gmwNePMHy2ISEkdZZs+hJb+rlGd3RSwdLW5ZQDh28AQ5j1\r\nvhz+u5fOuBF9S+WMoQF+/7PgRLCbJvbcaAqKbCwnhJXx16W6tGWYw0bO0Axr\r\nO6zOABKv/SmTapQOAL+qpjAAl4tgDdf8XPca/tVOo21bIFyBWFeOkUzRdzzH\r\nXegarRqXQp/5wM3P3rZpqKbEvpclf/onI7XT+0DrckhXx6cmOJXFc9s0AM3p\r\nbxb8rOzHfPI038SYPQX/VA5RtOTKmLz69Ww=\r\n=B6r4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2206071918.0_1654640943119_0.8743310234911965"},"_hasShrinkwrap":false},"1.2206072228.0":{"name":"@bentoproject/instagram","version":"1.2206072228.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206072228.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"9cfa89fc95b4eedfeb00b4eec539909f0b0c0f6e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2206072228.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-3IrGD4m4yJNUNqqQb9fwtqDtrJu0pFvN4f4xyXtBuUohTXxIDF879jxGEzFmHCJrlCT30N/yqMhcCn+4X249pA==","shasum":"b9e247d57f83732dfea6acb4fb56719f7a229503","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2206072228.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHpccouLLmHueozcyU35JtjRFuOci7BKOSFOsLrSTp6NAiBMgiLQYhbStDzSFi8Lw+WzmR1D/TEr9DGRb9RZHicTTQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioF2fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGKA//ZPWI9vEg8+Xxi/f468/MjULRepIfhYQUFwBjB9ko28LDeezs\r\n5q2sITNBbVELcTBBYzwD/A/snoBIlH3d1J+zSelJdZD3eF7dIZcncjHUqin7\r\nmWyinyNOi6zzyegpLiGGTdlVyPsMJKXpxmNbTSeRTz73Vd63F8Vs6L6PPMp7\r\nZ00UluQDWNtWjZrvFmw84XRIMKWJmNF6fCX2vn+8krqDOMVXXa91pN1oM/QU\r\nls/yAAukwA/gzKgTFoyGt1ohZQXq5auMom9q1fL+KBwuJgC9Y66U3njY+Tca\r\nVMAfWXcxbtDwXLlCRH0BN4CAWtGLdE0j0yFuj1PuL6uJuO8HRfwHG/Tz3+ci\r\nWdMOy0UsyRB9yd17CEI8YkLimJzQdx9dk96iVlNejvMJYJEGk/rqCf1P2GO3\r\n1szuA5h+mga+QD31ozepaZFaJsT3eGANPa+6nRq8YQoqMZbLonEqhMIb1qZf\r\nxeqMG8Pi3jUXSCxGCBeQI+FMxq/Qpczsbs37CZQwe2xIbvLltwuzxrzPWR6m\r\nI3SRa4q19Cy+pdvdWwPFoZtcDR44foSW8S8hv6hYN0vOJpqlZxL1H14ONe5l\r\nzeMT7xv09X1HOQhF7ePH69rUIfiHJJRxtBVBcJjIY5YGleHZWT51jLlGToW8\r\nhQbEWDvLsE5+EieW2spLqwl+rBQ132B8nUM=\r\n=euoW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2206072228.0_1654676895393_0.06330496328035973"},"_hasShrinkwrap":false},"1.2206082301.0":{"name":"@bentoproject/instagram","version":"1.2206082301.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206082301.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"32e83d3790f33da4840247d996ed3f6b256a796d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2206082301.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-fpAZBh4Wv1xvhldsR0NnHnrCovsT9BKSE15Q7snI2HtWWr6I1YetX3pqIpiCmNghyFTNVfaDbm7Hl36QSgrR8A==","shasum":"de93196bf9e6ed6e46326d86110d0e665cba332b","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2206082301.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGdDvjqSjreb7eETqv24ZD+k62rATMyo5gKb+r+E2eXgIgTPJg1FpRAS+Tha8QFGjgC6LlxE0dxeyw0LCHeETzwIw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioa/qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxqhAAgpp1vJJj+WUgJXGorUIXjb5U+ZILgxE6Oc9clGzlmZLjZZGT\r\n9ocFTpkcOIpE+Kx64X0dds4aqjM+f2ztTDg8YP6Rg7dpjkOGAE3tA3+hLJxW\r\nu1/CvMHK2SAmgQHmod+sETVuSbFrgLqfwagTIpqXTXmGEEYUSz7OLAijjqj9\r\nkzUT0K71A9x7MpPtR1Ji13vvPwhc6vQMRBih9u2wqOIXPPtYRrol1b+5OHjr\r\nYtjsZylgg/4mySYQo8m2KF/PjhZUYAnzbQ0aSgqlD7Cr++wwrrIHZfgJTUUC\r\nDeFX/cgHn60xV4i58b1ab33FerC4jVMT1u7OCfg8IDWoZ69bvikFaSWt2oAU\r\nZz6mkGhCC8uqGTYSPCaFpF184LHkUlX9i/pQt6zwzWWakvu+YgaIcUgYw3RZ\r\nrqNvALluraZuzyXfl4ks4xphxMBPzFEaHNWSphvzDXfRXk/NWmlKtvx+9C9Z\r\nP9tW6x1oczl+GIXmcFAlVY6Vuw22u9CZbGK7QRRYxs+/Pp42oVQu1rSBsVHt\r\ngTKfjcPkrl8/0fTgFglbvE2LTb/vnRwWYHLPY9WnAE4s7KXQw7btRzjxjQXl\r\nbWGwQM3uWcO6PaLI7QhvCp/o1Y/BEMcJrFDkR/obKTbRwMm/KXEy1+xqyMjH\r\nB+tUK9VS8Nbu7f+cJroDbMuX7zVT5ccbywc=\r\n=SxsQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2206082301.0_1654763497757_0.13665183870279107"},"_hasShrinkwrap":false},"1.2205270638.4":{"name":"@bentoproject/instagram","version":"1.2205270638.4","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205270638.4"},"gitHead":"89e43e107472144de698a2c3ebc9e78ef35d58b9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2205270638.4","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-gYAfLmGWJ4WGTr3kNuiw4D1DczkiiOSBIm6zGrlSNzfOYJXqmAouclFFEUrg+EmQRu+IpnHkzQcped656p3ylA==","shasum":"5b5a49b33cf55b26756e8153ce09f2e18550ab3d","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2205270638.4.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC0+G8kIwh4d+BiFnXsPjVuTyibsb1egYb6gPfZIoUvFAiEA2fN9e2Cb9aN4REcGVMFq6R7sn6Sxn+0FSrWzBwUP6Gs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJio7lGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoM8g//ZVVm/syg5wOz188xD61SWwgH5AeESZ7WhFccMs9huMUB0iZV\r\nomWBqnxtwUTvoeZjOPQTk3zFXNQIAaGQKUfgL1VStBL0jsMB9nnPqsupH1V9\r\nQPkkxoiVif02X5DdSA+tgWdglw5ABzsXgcy/Ch3FaVDDiMlb1tCRz0ycbASs\r\nVAIpQ5U8fVt9/RTB6X18XigNFGZgqTT7RpLlnjSb/yp5ACySKz4TxJEex9iP\r\nWWMJtxXrU9F4B+T/XOMLAQL0ZZSChsBteE7mod4uMzONI4aTtS5T3awZymSm\r\nGWDMJ6tNk+eTX8vUWC9327izN2+5tjH61xBrn49+d2z2TcUdGEqxiHxedlYy\r\nGEQKXa79/Eoo2gnAbcNqgO6HZqKiEQ3PDXDRJBwX1tq9b1JqicoY1oa8VxI2\r\nxteRM96pzEhyiefeMpvvXTbjr2Gm8q+/hpxZvl5b7FmhKZXsysWAdyowb8tc\r\nHH/vOEV2Q97ltvTH64lRY2Hs9EhWujei18IOm/jY2BOsCQ6vefjhzXmD9C4Z\r\no1GdcgnALfXR5YAwE8JD/6V2glqsinTlPmDxTaZgAGn4OetSyAqNPhKGPS2K\r\nV7qEp0nUeOvKhCEGET61iMnfHPXU74CoJlCu4/QS/SeZBc+oiTrlVK4cOODp\r\nbZtbF/EjYCWpdW2epyfHrmvs93/CKexen2w=\r\n=Vv3a\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2205270638.4_1654896965975_0.18341869919893683"},"_hasShrinkwrap":false},"1.2206101637.0":{"name":"@bentoproject/instagram","version":"1.2206101637.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206101637.0"},"gitHead":"89e43e107472144de698a2c3ebc9e78ef35d58b9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2206101637.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-vHFhUJhqCOS8mJQjxs7D/ICzpsbjxVWunktXL0qCX3Ru8iy+RwK4XlBWyUr7RXo4/e5DByBdiRpOxkuxehwMvg==","shasum":"1896fa493766746aa96b19da9eaedca6caeff42c","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2206101637.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWHe1hiECf1NPk6Gix0zB6p5sIT3jJB1srM24K7daLygIgIrPwlkVvoFxgsJ+CDQgtSI8J78ClxPhbw5hW+Ve5jk8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipFIEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9bg/+OzSEnru8r1/GzW5OFZ5QJLcgFz3LxhSoeJ6lP3mOv0DWZ26Y\r\ncnpxGpV9+7JyCVK0PcSuH1VEfBPp6+jF7/IH1Q0CFSRAGFoz8mTboZUb831p\r\nZrYYastnN+YdOjuGO6LAto0vVECq4VkuyVjbnjJKVvIeNmMN+R7H/D4XcHEW\r\nJn5uNxe9jeRglYQknCDKDs+wJ4MyYZdecSonK6Kwsp43AiZjSBFZU6FfCA6+\r\nMFs696IJGj7tkGc/XmvKXeh1cRW22XnyV94mt0r3mmMmM1Qs6Z3k1pl1o5/+\r\nnwWLx5O5AUboITwk6AZ6WMh3zKzuaoJ84lf4QtQVJJDLzrqQM+tizDlTp++n\r\njXEeI/PSnNFI4jfXe10ORuanVmM3wEVHxLC2Whpv/dobbFxgROuW4YiG/fn+\r\nxliVPxaf9NRnswREBUfTnwzTlYAAbk2DDTMGe3rD/EzZx3cIkObvajsE+4Gg\r\nTlbzu3uQq0pSA2iNPi3QjA1PSRij9XGeKSzKXuxgobhp/MGS14eCNlMr6BQA\r\n8D0uUmNuCwCWWwjj7M2jbJCDpySYJj7I0pahfmNssulJZFyK2gxzLBPedLfy\r\ni4yl2i8wW2ISzoBLB1AXTVZppDgeSh6AqTOgdQpNs7FctxGMdzvtZEZwcr++\r\nYWmCd8c/vj6UD16FNbs4Cwe4JPfK1qX8RsE=\r\n=J0M+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2206101637.0_1654936068114_0.18655190771677432"},"_hasShrinkwrap":false},"1.2206131450.0":{"name":"@bentoproject/instagram","version":"1.2206131450.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206131450.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"f8fbcf58e78ea43df73b529ed4a25e79ac758981","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2206131450.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-QnPkUu74wZ1KtoB8eprzhR1eO/pC7i6OcJLqt4L2s6jwwvG6i3kH02WDf07EfoBa9B6ZglK6Px1tZuHLCgOZVA==","shasum":"60c00d161042f3f1c4a5e1ce5b0184b3c1bd5cdb","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2206131450.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICf6THr2WU2nau464SMOJ54wyAM5rQIwWI5D5q1B1s59AiEA2p1/P6nHcjOVDt6OtmF9rn3CU4sOVQ025sbah+Enw3I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqEbIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4tA/+JtWt52FvOqRPIaOj3G/uJHV+cc7FaPXjIAw5pqq80drZ1qWK\r\nwSjF919WeYcKCD/w88EkgTgSrvGnCxbyM2lhCoIKC1HecdBDi27z3pL0ILok\r\ntLfnrpH5qW2sRSCtr2U3REwZedPHgYGyHHpkHkn0z/nwE3ceH+PxajCd/brV\r\nvvuLG1gRT9gWYokQHpfJ38ETm4jhWX73IVcmh5GlEA/uWGErkhrrPKQwoJqH\r\nlC78wxbmyPOzPMw0z4bb+2i1IEFa9pP8RDuVjWcLNhMAedi6bSgN01LPyJom\r\ngzmQ4L5oGD16uOks506auq+s/hrdJkHhAf5ZuG6o6K1bnrupDMqg4ywJYfQh\r\n+h+4eDFNd8vc8mWAtLPOROqq6T3HuHD2TDOpyWp0qbmehEvM4lWRUnHFEogH\r\n27pVSBIgQaoPG9guSm/KjtHuDQg2JDQHBPVX/iXvtE+bJrUeSa53TmrmPVFW\r\nQ899+2v+8oSLImcXuIME6mnIEQIwg/0mbsLgybGm/fISzuDesvJbN3PHH84B\r\nFZuNnb0Ybm/ABxaqZk3yg7ME/F9gTcEMRVqjua/XtfN30rqrEHU//OeLCbFx\r\ngjFRiWPaAk/zNDUQxGKracEwIQ7zGnEIqR1VW7YEr7KB/sFMlN1zvHNDDijR\r\nPPal2QYUFUc8aJjphPImZ99/l+tZSzuPSFQ=\r\n=IARZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2206131450.0_1655195336526_0.6095906080268041"},"_hasShrinkwrap":false},"1.2206071918.1":{"name":"@bentoproject/instagram","version":"1.2206071918.1","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206071918.1"},"gitHead":"fb620756f1e66d99fa06cbc467207602e4aeafee","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2206071918.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-eMEdyydqYsPoRn5jiyjz5C/N4qJHuCymk07Rh/yUCSDJgHT1QBYCE9Z/KvyEaqPla8WZUrBxcXRv1gUemAub4w==","shasum":"0b599b7b2a2917a58cf3f6bc6211ace5c95a2ecc","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2206071918.1.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMeByVossbkUDw0o01uLOyAtRKNSyIbYVfPp4sDUluUAIhAI8xH4vIfrufaZPveq5GGf2TxZ5ah3rG2lO9M7nsWeQo"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqP15ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1Lg//TuvnpB2YVYjhomebnp8E/3pFU4i9pYQ07HwuRXkDnfS07dMz\r\nWfaneOLfqlcSML2bHsNNm+9utbb/rqHCjOUs1Vtz9hlL9HVmo1i0ckAlNPlK\r\nLtJFl2fdKgomVdAvPoSfp8DwGi5XIENc5V2OtiY4u3ZkoFGOLMLodbVP11HH\r\ngRo0bT2q9sEACaISupJOe/rTiDcj/h/j4rdqja5f15UjNgpXCbgdn5huekJk\r\n65O9xQ7uauOzSqW2ofZt0KHI+dwPvvwoTRKyoaZIGZ5olbon6A9F7BQgIoDY\r\nMhpuRE0zFcFK/PoAbt11EfdihiA7FyKn8/o83x+3s6hf6aSlbCI7yFwBl6Z5\r\n+shgq4+bD1YUWFm/EHqHXT1f4V1bIqCpPGxVx6FEJwwNEd1dLQbG3kYjgOjm\r\nft4Mcl4Kx86kU1tBGhr+MjZc34n7KcubcztT765vEoS1sHIP1mVGiZCAdIdd\r\nLS+m23ITG5Z+Xdy9Hib3h2lrcjSvMO1w4uFNX950QLIXTtDjSQedLWGVO7ux\r\ne/Bv4NuD3cfogUQwe2e93m+TlzSYO9/Vfb6Ad11U22kBuvsOecRTMxJlmiqC\r\nN0JySmb5HOMcJx4EiGOsVEW9JYz0BJQzE9c9Qipl2GcRDs3gTsYawUB+qOxn\r\n+KpvHo23GubJcBDo4xuSiGhAOFLdERQMqvA=\r\n=GTZc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2206071918.1_1655242105573_0.6664473946233589"},"_hasShrinkwrap":false},"1.2206162023.0":{"name":"@bentoproject/instagram","version":"1.2206162023.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206162023.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"15781b541aae254d04a1cc777016aa40759100cb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2206162023.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-8xMLgkMZ/FG0XRCFVSlz8RD3JWKHBbZeWCOMtJp64WK49EHQu6ao6ctGwOwNJ//eJ+v5MxRoTdMSyHddg3Oz3Q==","shasum":"2c558225a9643aacf546c7561fd348b62ac6105c","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2206162023.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkhxpGVChujbZMm327H3k6ZH/lmXY67T1N4iRSfRDqIgIhAMdrF7WaPLZ1mAOCftvK8NR32MZikMeM728TEh1tLyfH"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirDseACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcOBAAj/3k2IZlclPbX8ZK4EOUiBz2cIOE2Sr2fHtFmTgCNKW6FL+r\r\nUF645m0OsmrnJeGgqbmFX1mB/FMPM+NOqfrcDN30UWOZ6NXpG57q3rmLxqgB\r\nCA54GEsA4k/NWilT+C1O4PcBJNUtSPB+N5wCcusdXOnkEnIp0WOaqomnA9KT\r\ngQ7UvbOITB/jxHJR+xjCFAmZCc4FDRIZzoVtub14RyifAeM2wCKINW/7RrC6\r\n0s+RHdOhcxnpLt+fZgdtVmyCX06ryHbgFRmG9x7RuQ6QS7kM0pUhc52Rh+yo\r\nTXc5osoG4YXWYptNX68ybe/qNZ1UIzaFVxU1oL1EVfkaHd6Y8Dp/Oyn0MQmP\r\nmHUfdJhXKX3ZAAr7A9aO9zmENB5mWw8yWBvoYmkX8vBoDerCuYp/Vtgs5Z/9\r\nxRK/B+yrcqAOrrXuAT7dAPT55LXk8y/LgWvl+bMg5Fp0GBQHadM2YCRXj+yU\r\n14pMTEbU932zXrO+iJrNdIMy6OL9SnRtKjxiR0t13j10ACSLUrrAUUiBGU03\r\nk7XcWoQBG54Bmv1S1+u3uRXCpm+gjuHJM2HoxNqI6qmsjwOaPdGQVFiLN7Qo\r\nApyV+6fodUSZukl+kERYREDLGeIIYOA703M9Rt6H28URKQxco9CglIR9sUud\r\nCVsn4sxj7JjT1tqgedlt37kE+CcemCsbMm4=\r\n=hQUw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2206162023.0_1655454493860_0.5223105553518641"},"_hasShrinkwrap":false},"1.2206221455.0":{"name":"@bentoproject/instagram","version":"1.2206221455.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206221455.0"},"gitHead":"0f6cdcebd462d3dcf580d8df0a7dfcdc02de9061","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2206221455.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-q05h/sq5P19vGcZg3lpNfRYhewiOeMkapMbOdiZM4ubvgHI7ur1iG0K2jYQlTeUnO0q9PlMPA2Q9A1GdNlKrAA==","shasum":"6f72b6b7ea24a3c6dd08c4e40d7477e43b052c5a","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2206221455.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHYgb8sNh5SP4oOpGIOC+V8gJ2evIIgvsUGt1M+ow4nQAiAYC3q3DsiCBz+4gaHCszxeEwQg1pdoOO8GIPJbKNs8Dw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitCQkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGVg/+Ph0qmBeRdeJqfO2FTsngLfgd/VS4wsb1faFd8NjxuWwKfK94\r\nifa915c0JFXPfwCTfI96zCD7941vj9RcyNjremNnhQxI+Vf8o9NeGUeRRLlj\r\n6GJnDUH0YpuKkhWFIONJM/LMJXnuSCAY7DjatI5s1BUz9LsOIlMpwIKu3+ca\r\nNPM7iJYcviEpYwFUWosemSfLPHP6rZFqFXm74FJIZ9rceYkrGj7bv8XaiD01\r\nlu37G+AwSr3VA0Mw9fhW6j97nfb0IufP14Egxarkuts6JFJRe8hpE1dQkmB5\r\nCzeSHspb0dHUhiJJgEFsZXUMllR+jqNdZ6MgmRannC1CsYUwxbE6K7NKGybm\r\ndyfsYlLuFx/67G5GzWXVsImo4M3JuD/jbCy8XBMdi7I70ziKOc5Th+uFdYik\r\nqVKl8gjVMK9UEuVoIvu5MjURcUX7F/Sia7rFFFTy7Fz8iZfnRonk3EQ+NnuV\r\niIFakUht1sQHLcpdHzLPJOu3eSW41mNdTtbjEViq5Q87DYK8CGZz2BqysQI3\r\nvJlJFuQHeaotE8pto9VPbBQ/7PsW68yGOi5AHqT4xjJBuZSkeWqO050xm+Ip\r\nGsdm5zDPK38mPn8cWDz3qLDOLGXnuWozKIgpgII4oH/2ROfQMy1rIu5DbA4x\r\nnOkLFi7vaUazyDLxjTwSCVw+x2/++wLuzsE=\r\n=b17/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2206221455.0_1655972900271_0.7615569893405876"},"_hasShrinkwrap":false},"1.2206291614.0":{"name":"@bentoproject/instagram","version":"1.2206291614.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206291614.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"34fbeda57c3cc9d01ab3c39cf9618342ec840187","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2206291614.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Ns4OtWF8PKRMy2tI3JngZBwG1UkXXebir6BNS6jmnIYhLaGR1xSS6XRtMufh/MmSSAmbUnxpT2d3ovrs5DbveQ==","shasum":"ba80821db09e80bdad84b5081371bf2b7034d0a9","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2206291614.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgxUyqzR7tDr251h3ZCHh/oQW7h6TXEEMfbGcsEdxZ3wIgRSPJZZiZ6JRrC6n8dAtPn7VNxg70VRkS38zkQ+91/0A="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivcqWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMfQ//arGR41fhb0/esbw0O8BKssDijnZeTh6XG+MlUXhPCB1NdjW0\r\ni9vfXN5lH1ob+ZbYjNrFHi0FY+tOVkK6AbFpbakD/N1C0Svz1DZuBIrQQEGp\r\nWpdFVkqs2Ip6PpKCshrb1uy1CQ9ZgV6BH0/2elwngM2ms+a6rM/fTl9DFRRW\r\n25MAsmIxAnbb3O7jl7qyhQloxNU33EhK5feIqh9lgaXTNrwjOVJ+z7TvmEiQ\r\nakzoyVmGzW8S+n85HQ9fd8XbH7FSHEEGG5spo/IkYe8YoNBLEK7UEW2f90Dv\r\nSTc1MoWGZAOKxBF6f3dohPjVmZumrDvB200uX0gaG4Zvd2qCvSvkdxPnoW9g\r\n8vY3t4aCj8LnVWhwV0+EZZv6ueHjqtrR27G1fEU8yxcEeyIYc50EnwrHIOGO\r\nVzkq++u72oiwVxJ8J48RqIzlZNbOcuGZMjTRwKRTxPlvjE23+ssikgRM91In\r\n85+jew8haNKWbZPFe1JYyTdZAVMOv/4VUMe6VlP5cv5dSB9TIKYsem6MypVH\r\nJcNqzpPLnICtUKFV62xQwj5QpkRgE9R2YMYRCqWSzOthEQBqXy0NUp2125M8\r\nNjvI29Che0GlsLSyduriqPPgY5/Z5d2zIsmB/pdKSjs5T97i0f7TIBXBUsvQ\r\n0PGKhR2C9fIbQsng4fsaKBsW8Th3T3T9hzM=\r\n=Y9XF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2206291614.0_1656605334004_0.4997484697077865"},"_hasShrinkwrap":false},"1.2207071723.0":{"name":"@bentoproject/instagram","version":"1.2207071723.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207071723.0"},"gitHead":"4ab5ca14023804a1af71c15bba775c5805e2085d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2207071723.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-uqS1tO0UzJSRKq2ixGRndWZNcUPMutsKbOp4txx+7X5tHjDAB6ZSg2B8MuVO3km7cjAjM06Be1YwZ3NZ1wnhZw==","shasum":"4adf8fe12ce5dd03912ffee545f27ffce217054f","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2207071723.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIALrk5R2LTYCFkiqOBnu9m8hyxDTcksqCJIvHVeNVtOSAiEA+WTxmUlqyyX9zCD6dHbwwDaR5hm1auA0/pjvNrHbcg4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix+weACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXvg//UbK6d5YD7yMyl/iRaPfxc3iYINWkwxwLZl+1NgER+yHPQIxP\r\nv5Xmkc4yt9uFZr8PKqYDuZe/pSfXkX8ewCbpOlJkzhaqisbrAuyuoC7jp6hi\r\nGSthraSb2S0qWTSsO4X0JYXt2IOKBWewIIocVW4sTslxaKiqNvrUB81VxDSE\r\nII50el4N8SdYcfSU82SOr8OCB90X9NnzccDwa9gyfNcMYnKjtHfWtGKejUFG\r\njs7q0ZUf59YkE/U8KuT9Zf/aGO/d4SGhI/S/FUb+Zoh7VD3ZJaIC5hrU11LB\r\n4RtO+cVQV1ud8yckrAWUd6fJXHm6kpBOps+AhXbRKawvYiQ+XIrzM4wn8ZD/\r\n8hjDlnabWtcLk5nJxX33X2u7Fjv41cEc8qK2coxiUd+Al1uc65urxxXhGWqR\r\nLI6TgfeTlpy5G9ZDVVUwTZWakKES2kBe0r8w+hkHMBR/J30QnqLsJY85QxlM\r\n8JpiFG9T5l7jAZmavfV6WlvNU5iK71vNS4oUvuqUjjsN197Ai0TpT9lzyUMx\r\n/mcg+gbxPigHY+bUuEpKMqAj1STG8SKZZc3aYBw6klfW7QprMGH06oYUoWzB\r\nD33Gj7J7kOQvqKhAXuhhGPE1r713f9ZPOMj9zNYTpL/f/AG+iVjEQOrxSjpN\r\nMRMB2q5xO8SeDKgHWn/D066v5DOl+Emzwp4=\r\n=Oqtx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2207071723.0_1657269278491_0.5973412662261113"},"_hasShrinkwrap":false},"1.2207181727.0":{"name":"@bentoproject/instagram","version":"1.2207181727.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207181727.0"},"gitHead":"78802d83c6c9791cd4400e761bf22f9909218a58","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2207181727.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-banGDIn0saP0qdfqBTOuOLBt9QKL/Clu5Nc0Tfj14lea0pLcEZchxrymlq9kf6RIeyUrmA074TbBW3SclY5FEw==","shasum":"c2ba66d5dd315a1d4f59ff2219c0c3bfe99e4d0a","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2207181727.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDCHZ0nu+SIqsmpsmx1u+Xhl4P+Zutq5XYF9GUSz8UcuAiEA2H+FvtilR4L3cyVu4HAilqHrXKuTyEAXuN6sCE9kRhk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1msBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8FQ//YrFxAXkMoXBaaXEOjMc8309+J3QJdqRpt5+EDWPGXMBEF1mo\r\naIp5boKhg3uiHDbpP3Lfr/feGeqICbClJjqBmrXWZqneozrRtrDJHq5obl5T\r\nAZXJQyjHY2f/HXPJH6YVxChLfnWQegKxzt0vpohKqSS6kOgV+Y/NtXMQFvFW\r\nKk5gARpmVPvlixG/IzmuOL7Ixf2GWOTge46ifGYw9kWYqwXe1zNvYuTDv0Vn\r\nkFaWD7DZkGTRLnn3YrqqOL8Zf0oWEj5fm7nO0b6EO7eW+j9g9Gc9pS0SE4LX\r\nqVFSVLnAsrm+s18etl0dAxUr1L1ga3kFVnz99zmwz9mU5rbhUpR7tZVib2H+\r\nkcVHnkaVondwnBHMERL4diQwRvUFsI/MJ/DkUHm0NHPPviaIR4uV+d19NEVp\r\ntQhO/GG56OY3iImaKxV4+Qfovq8B13XbN1iiCqKsOVzhFSpBvpQ+I7/uMz95\r\nJf0dYfx31Yodx9bDcLf6ovQ1bIN0mff42SugqEckZRn2fOdeajkHW0Odnlkx\r\n//2WQYJe5pP1b84CshQMa1V6j2QQn0LTCtlQgOMc7+8yg8BfS0U8xIZpdy7A\r\nTtYrKhkSTZurqYt8gGd4HPBzoL9ejp+C80l7eb3DUo4AoULBupdG45lGryEw\r\nAaY8GOqkIz1cB0QPF9lx83FuryEL3NSFtuY=\r\n=I2O/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2207181727.0_1658219265421_0.6655948074996385"},"_hasShrinkwrap":false},"1.2207201724.0":{"name":"@bentoproject/instagram","version":"1.2207201724.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207201724.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"62d86212e783d34fd2dfa8bd02ffb0e447c0538b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2207201724.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-W2JO1lJorqYYYiXa5h/8sG5O859aXdfTavq/NAcPFf8bGATIbweES9bZ6/BY1a8Vaa/Fh0J+fZ3M1hjvsoFs7g==","shasum":"e810872515b3c43287eefe43135ebbe03fd78426","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2207201724.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWP+8HWLw5vSYU2iXLBfFRem6QYVayNg40GE+WOKEGmQIhAMKnIBPBzx8pXtwznvAG4Ggzj8cYIwRRhSuYKyB2BvRx"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Q4ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoa8g/6AgZM6JpaXsDCGxDa3/gsorkTrxncHuvl2xWTYhbOGr3A9cod\r\nGcY9sTDIDRjlMc3MN05W9jvq4x1dKv84xSs5YUz66cv53fgXIi2YWdB4mkL5\r\nU/CODS99lh+jkEkQTUS11HMcCOcn5ZkkWp5p1Kq1mejiF0H22V1zs2guFRg0\r\nKfxzdP5M/EphSGeZXrZ5kNZozmMTZiuQCeuRmmgihzMzePwk7F+tLunRqzSS\r\nQ7Rlw4vwqzR6qEq6dR8Xk2XOEv9+t2LY73DWE3fQwz9WpB7XrYzrHmChUCsz\r\n+MRQC3g2YNc9pIPDw5Y1KkeXBcgsyxqznUJ1dokT/ANqKpmw+jPUJpm7jwlD\r\nO67EN8fAt3x67WdQkjXtxRKNbYheKymtWmTjDT8jpm7lRIvnLxT5wo6p7z1n\r\nmLIaUUlYe3qdnJpPzI4/IHVF0wtnwVWUTOtbljzilyzsb8Vy/MqWUTl68zv9\r\nnAVh4+QZvjZBtpW0cN8v1TraHw7ww6eUgoKYmY8d8z/IHCu0pWISEsQV1klW\r\nzZQjCThc1Mwmwn4jsxU92g4mxQfSAIWHNfhElDvkw4lg5U9D3uTUkUnag9MN\r\n+o3LflFLsEUm2rEHeAa1chBS1yVs4wgqjFuC3fznj0hqbwRvZyovt7UDmGBn\r\nVAGwo/I9bxamlWC5RJYY9v5FnbgjLkHNo5Y=\r\n=6jr1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2207201724.0_1658392089436_0.13030691879672984"},"_hasShrinkwrap":false},"1.2207221643.0":{"name":"@bentoproject/instagram","version":"1.2207221643.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207221643.0"},"gitHead":"83270c82c0130eff7988664c86a7482098f9477e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2207221643.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-MCg65TmaQU70XczHWma/RZtjiGbw+ceOA/7OCj4Bkw5aEiBL2yxVW/5SRSrB8WZz+EvTjxbTGtMLSQo3BB+0Lw==","shasum":"828a8c3feee47ef7f20025ac296f3eec8cd229a6","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2207221643.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLONMZi9KNV67yVLIoStyl3BGo1so67er+M7VNG/1qagIhAIyjE2/OlwWkRqACyWkPeN3D0T+YkznetKEbyHxs/LAh"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi27D/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfNA//VeQJux2UqH35QkIn97zhuIgWTk4kqI587EExIlTt6K6TshUm\r\nzdg5gBJkfelOxYdx8UyIgTXqRMXUQNgi3LpV07N9JDrRF3X8pNF7a83mTbka\r\nfXlTIazbuB5JWEUyjPjDnaCzu3j5vc+mX1vpMqf/lpV38KU0LckzkIZBjoGO\r\nJx+UUgWqNanSTTppjzhxJ1eX1a9leFke330Iv0DVrCVCQFEgEiyQXR60zqVT\r\nLfr/refKlXaPwzZ2CYi/lOeUKqDQVyJSN58dIOUAQRzKujuK0n/aQDt0QVkB\r\nYFkIBcVB5BosdvNMhIR1MvfIJencwoWSUU4TekKgBMfKJVW3oiidhbIijucW\r\nl3QQrBgxpnlvikVmjxkIP7vA0I9ZywEJE3edp5aASwxZPrPI8tDlg7sjxbfi\r\n0UCS0cVDlz6JWHYePSHYtUcPsbOZ6B/rQQvVrSb70aJVClv+0DVUDNjpjgo9\r\nM1wUwqtipEV7jyjH6uEPen1hZKA4fBPQurfyMfsRENOe7B4XuA7yzBiFPG92\r\n907KBRQPLp1KSeG2wwbMwBzEL2nFQYr5ywAqn0LJae1pI448A48d3HtwdGaf\r\nXdsmKFB+MDyYQdgvYr+/mrLYUeMZAC8nvLPxE1l3f8aLmlcNNC/yeFWtM/F9\r\n6w6F5sJi61Bgm5e/0E/D3TB3fpR8vDw4zJ8=\r\n=dSvS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2207221643.0_1658564862915_0.7507833183579158"},"_hasShrinkwrap":false},"1.2207261725.0":{"name":"@bentoproject/instagram","version":"1.2207261725.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207261725.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"b73520d61dc1a279ec10d2a27f58891e2e2d5d93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2207261725.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-uWOWRgKipcCIu4k8wGKyrB9vGqQcv9CfAX25m3I9H1svGXhnnRG6Rr4GoJx5xGQDhUS7gWsGALdmzHu5IRwUdg==","shasum":"8acfd5232ddbdb9d5382253afd1642f6c789bdc7","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2207261725.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHUe36e/0DlPnUZidFm8V5H5RjTSFjHeKcxFWRLoSK9nAiEAgq+5eexzspewrZvW/YWs+RJX0GY6wbf29Iqv2/nxFXI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4PbjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn3Q//V3uZhpPiq5CgSwttFj4N6KsrV6Fm2Z9rTOQSQnurKKehn+zn\r\n7YWWoVUD4Z+vr0Ws4GmnaaI49WqMghJVkxL03AG5lvZVjxyuCd2c19JE1Jer\r\nfwUVrjvjpKemSys7e2QzIFdvFfjYxIHKPubABqnJII+gkyzeQkiQmp2j55nc\r\n4I5e8BpIfYPQF8ftKFxP9t8d2zEquDvkcKVr7xe/oWE7SXt/yBYGSk1MnMQo\r\nhhUqfV1Uy5PrGeVasGmBBV7WN3oRBPSfUp6Qpy3M0JkLh1MybUYhxSs0TCQr\r\nxtWWDQXAowHM/Xk3AbAoFROD5QMDFGax8i7qAANcrUumB3NIj3YVgPOkGdL8\r\n9317b1YRUsVXfiCXT2WGngSp1dr9+r8QuQadQbVohFfFjnREldkdo9TJthIn\r\nqD0woP1UFiENrYKLeQHWT8Pm9ej4zxmRUZLno5mNaKJItjHvns+FuRcV0zhC\r\nUi7bft+IUnkAAzM05TWpXulqk/27/JP7HwzQ7esgkdVEwOYM6bFoKxf+icCw\r\nTZQsOhLVYrZPzBIY+8OEQp8M1q4zX1F2R5CXV8Id48U7iXoo0AR8CV8Zw2im\r\npxrWVku91K9wMx5C+ujZEwybd8NTmWQ/hFBuMkEXTXNtHsE1OoUpGKggtZbS\r\nmDGCevC24D7CFzUInOyWs1Ys9rfJXcbJytI=\r\n=mlZ2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2207261725.0_1658910435695_0.6278733820724045"},"_hasShrinkwrap":false},"1.2207281718.0":{"name":"@bentoproject/instagram","version":"1.2207281718.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"5e3f3eee6148e0ebb57aabc48ef987e9b5528611","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2207281718.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Jd5Xl6DC4bXyiW9QqjFn7l9PAMSJlGNaIZJnszLILeyvXD+Le17glUxHMw4v4BLQn3iBlKKB384u9e8TGnpF4Q==","shasum":"c7a9eeb6c5d337e6ff2171f1faea5ff00a3e8bc0","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2207281718.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCISUplTCWlj20X/fyWnvDXas4YFpP1YPTDs99xWAuErQIhALLHDkWFhrzWM4criHAJA8YH7nD2ICOSLkV9272yZVm2"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi45qOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn2xAAoCoHAvy6bKNldzM2CxfX+BnPz5bdi7Jv2jxhtgxFZzH2Zjwi\r\nIK2EMFw4AAuqtNfmfXvhYQLFtvkDSfDdv6Id0sV8B4WxPHvwjCqvXlmnupYx\r\npp2N59jCOP3oR7QpcbqcrbaFUKfQVbwyyWMn1oy7Ye3/uAFZB/Te/nRtJejv\r\nfbTMEgfexHwddSrf9Mk6wqFJyqeX2643JLs8G+SeIiw0veDNEIqDfMsmsN0/\r\ndRrd1KBdaAsv4RTfun10vO5Gy0skgIHHRqV3wZlTNy7FII6hWip7PsKJ/mTD\r\nv4nxbbohWI2DjRP8WTR1qKxQ0GRHwQ/deRB3hjsOxxPytoWEUx3gNfEkbR+5\r\nBF2sUvHljNF3NbalXIoOgzzE6X4CATi1d1HRMNynEgdju5pGS5z3hHtbHNKx\r\nwueKhTzGZaHnhFFtYdMYMeHHozmpuUQcB5VT3cmBj/tZNGtEPtWJbyd1QFwj\r\nsjW/jso01tgidHVQHJU6Y5aa2inphZ+85w5YU5U6JCe/Qa7lgVTYXsDhLKaZ\r\nBNTNGkIiIu4w51+8qgD44lQOz05Br3S/PpLXx35/RHFtMs+5/V+H/tmrAsdB\r\niprLHIy+jd7lEOF4Ls65MXIoYvyqDt799/sLffzma5E/INg0mxswKK4HVZcy\r\nAoyyPVsYH96hPrNwkpN2y7iDAv75JDew+EE=\r\n=ckGe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2207281718.0_1659083406597_0.1984318978967048"},"_hasShrinkwrap":false},"1.2208021808.0":{"name":"@bentoproject/instagram","version":"1.2208021808.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208021808.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"b82b832cae23ff854449af280f1b02f4dfeb99f4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2208021808.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-D/tMCoZNMaR+b0a+WBT74sIdIP0NRDUwmHez8Lc0inLwJOSIU9DJzej9a3XQA0xQlLAkqxOUmA+NEfrciFllKA==","shasum":"6e4ad68129cb540bb8022adaaa675ce16085d4f6","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2208021808.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGN5580d1s9a8MQpIUGv9/75q4N1GmGoW+iBXNDVdxSbAiEAxqnZD0uKtWF00H2jCl2MytTGTx6VR4P3xEM8EmqJ8O0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6jGnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowGBAAhtwgWNJS1CAFRJrlXx8jdfG+bJ2vFpnNWKFpLpYtJk+0k32x\r\n5/4bvjM0Sp/3SJ5mWwfnI70vqw0oAZmOngda7Tq6oPvdmgGSTmN2Qtzp1fTr\r\nuTRua933SAIiH3mN1oSd4XsIK0bunzbEcRKvVUeWnXf9RW38AxCpP71GePfI\r\nZo7jEABToFWweTBHAB09DxZxvrsIQF8bXu0vQRymasHKmr+oWs/pwf8OhIdy\r\nMCTOdDMm6iGK9tVC3BxncgrQc93AE79AlWSGCDSDIv3aCM3AYh8coWmJ//Sp\r\nNuQmhPbahFqpXFe+XVWpksa+i2sGZJLn4Z2cTQp90yz0umXeFgnQwUJXa+wo\r\n7R+fm6Ebgv36/LHzkfvpQaAP/qLNY6GG+Nxcq6L0yZ+aNRbsNAb5uM/iakuJ\r\nEH5AwuuMILXIm22eJQjMu3ZQiEhNRc+dspG5BmA7eBjXaEbnkORoOWsvs52n\r\nroMtwWeTkwfCQaIGYza8+5KEMbZBWEOkqMvQoJF4Zl57A6p+psDf4Q/J5YFj\r\nAjgExu/QwWKI6oneZ0gDZ42DaId4aVNAXh0WeSxcOH+eINLHfHSMxQvYvQgK\r\nWCN/4CGWigprF4Ce8OqvdiANRrpp2R2H1MDencTJTlBIosUym5BbWcwCpWHb\r\napQtw5K4q7AKUFVdDDiov6ci+xIQBOSCRbU=\r\n=z8M0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2208021808.0_1659515303380_0.989596513833104"},"_hasShrinkwrap":false},"1.2208042017.0":{"name":"@bentoproject/instagram","version":"1.2208042017.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208042017.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"598aa15d3922507a106666aca29a90334c7b2c05","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2208042017.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-UAHKBkv0HVJVFqTvwzU82fm+Si72eme+9wjy1MQUisqjYc66GQw0KP6pR2SlzsSlrrWzM3jL7JaBLFrAid7Rbg==","shasum":"28adff4f5ff2506f4d95bfd4f80cbc8be58e7fcc","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2208042017.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkgl9XrzBxKBL/FmVch6ZK3PIeH0tTQdZoTUGiOgMYVgIgfU2AEKqgeAhmHMKw1RGQ8XaLnXfEblE9lFGI0FvnSok="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7NUUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7Sg/+I40UXHp9czCeO8FPDt/7tin+4R51O4g1iPXmtA+o+AA1guP7\r\nMcBJBLTwDU7KkwINPQNJjVv4o0G//hlb/AB0bnm4YX1ZYpYY4ksCXGZkFam9\r\ntrPZUhOkgUWlETPpnj65M+gJHAt1b9L61yr94AaFDaRySPvKygYPLIONqhCH\r\nHCzlBj0y1uA9RqcO0K1BrW1Z9Ypj02HTo7m68kUPHlZY4t+1hphJVDtW9jX8\r\nsg6KDBNjdZTbEDkNgFmJyscUmDHh5HC+T12chQZsnadkKR5P8fnLjCLnj+Tm\r\n09LYJqTyTOBTisoFWC34fHo/yM16e/qrXEaL0rF07Cy7EUxV+vgXBlSk9Muc\r\nnzwNJAfpBFWAAqET45l8/sxHebKqPf0eXpl10cPpRtQtKItSY0IIKhvUZw5M\r\nYa04HQV7FJTEJeebD5jZxEGS2Ex52t6QCar7n7O6eyFiOiVG46ACRQK9Q1NJ\r\nwjGhUCdx9pNXv85eb6ntls71J8Zkscc0unxI9+PDPrcL2EH8+D5wxV2aEmkD\r\nOYm4T9iM9Jm0+i9wfmfxZV90UsNKBjEp5ufu/4kKkjdn9/DXGfeNjyyZGx3e\r\nCBSqB9BuWQm3Hx/93hv+35y40E2LwscvPjQ6j4A7cf5tEyRq6D4w8up7TE4f\r\nRwkC8ikw86J5m882E7VMv4ZL86kscMy+r1Y=\r\n=DvP9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2208042017.0_1659688212231_0.1711635410584329"},"_hasShrinkwrap":false},"1.2208051912.0":{"name":"@bentoproject/instagram","version":"1.2208051912.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208051912.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"5f50e49dee3435f3a242126437de7cc8263c2ea8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2208051912.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-IIwyx2o7i2LJrx+WzofBe9//v2VDr+baGlA99rttWLnC8U6hiaH5L+C9ObBRM4PgCTdyoluBiAPYeyVm6sJCNg==","shasum":"d8167e0e0abf9202dbdf1df257888a16b4a247e2","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2208051912.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDr/CmNldoOkNAt27CemLk0cF9ievwFeNGnwzKhG3HmqQIgFug6uGv3B2Zb2Tx/knrmzg4JVFWh/GUg+Wsu0WJWZS0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7iZJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHQg/9Fb6MLBDxtQu4bT6DHlyeglU3wvN5ZnxBasQqHVfj3AP5Gfg0\r\ndVnl1Ul0P134TGcHbnRR4N2Ul1q3qu3KE3M7bPZ4KWke+RPRKgPhXyH8vMjG\r\nebNi82iCf2BtSUMpw+p6cBnVuM583f37FeKVp+VrLdfqQvvgMuKWZeFksBZS\r\nZOSHIaAv1AuTKm1mTde/4L5jdmrW42DRoj53FYNK9vQwrkATTAKgO8Rw8i2+\r\nw4iwjqdp07LyHxPbWsB8dBstIhGNcalxF967EESp/WlyZHBulEHDYHGm9PmI\r\nIk1rgE7e0LSM2My6GlIgUiX+taSL5c0aI/P1AOZ0mlc3osqwhAFwgYqPYvYl\r\nFLhvZ+54LFIyBVSmi7PYOfN3lz6EFq+vLKXg/avh9qM1+Vd/j8AEfo4gb/g+\r\nnpOjRHLI4TYiBxTT2pNCKVA1RYs2C5ddRX0D7nLmoQlM6mi6GOfrThiX5So+\r\nEXgS1oyVAZ/AxGp4vHT4bod/0KyZQ2YTG41/tHJY574GWD2da8hC4pZBuJH1\r\nKLDGoUNS16ddQwEUeuAaNo2bf3qu2Zi3pkZEK5wTSjrmeJwsOSy1dMk2+950\r\nCCtA8z+ReKP04dSeKfroRND+/khgRHI0ZqCio/OTubRohcK3xNkAJ5Yx6APq\r\n3nbQbkpNqd+ho5b/RDfmRYYsk/rR0VVxbrs=\r\n=StsI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2208051912.0_1659774536750_0.27256970836463745"},"_hasShrinkwrap":false},"1.2208081650.0":{"name":"@bentoproject/instagram","version":"1.2208081650.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208081650.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"beb9a33429ef933995a664a1aa534cf7ac0984f5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2208081650.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-NYmayD29ff2TMvZUiV+kIEZBhZYIuOLB9VIG0+auzViD9do0spgV1TbTHFEKTdtMYwbfKTkwoWB/sCo6737Kng==","shasum":"71483572dee4b8512bf42ae0996728beb5e74c37","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2208081650.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEeIDd8eoKbf6lmt0QXQyLykMwM9oDPn0DuqkEyxWEA5AiEAxFVHFMFVGBpQrt+wakFhrIR6BrAVAR1yGucirAp/gZQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8hrFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRVhAAhew+NKxOsDYBnD1m55n9PrFrg9t/VO0+ATsq/R+aM/hoa1ZO\r\nLuLSuPwArkmVTKoaBCpQwfSPuBNc8CPFt3bI0OMuBqPMrCea3uvnmAPBDkCC\r\n6g+yWT/YFT2ZehbyMfIq42REsmSUskwfVtKczjmCNQhMNEaezbFKafRqh4bM\r\nUgYBLQbovvfIwBPZw45IOl/MAmAo5tjhg8EPim0oVPCDhYXGrC4OJSdG+wnu\r\nV8gPjiegEsLt2prgIhgWomsSqCQoEKIT1KRH22EnnC5YhgL882fE9mLARgmG\r\nPrfctGdbEb394w4gr5zvFewLUWAnzgda5JlhhTd22VeUMiO0rlZ1JnP+RWrC\r\nbyzLAFsyuqaJ09k7kVUU9TUrtnAlqi+IU4O61raaoG0iFegdcWvkj75yEZTg\r\npUfxmPhm8tyAkBd/MWCqmXIy/7AiPWsvdBIuuJo0x5wTVFyjkLIVKc6XUktA\r\nTnmbVcgmuJ5BfAFtnU2WRUk7Z0n4W4E600n/zoFw7KVyZG2pay9XAdNV7pi3\r\nHK+UcsZqnpH0oOtbQ5fClnp1FcUc5cGFeLrWSKCOMbJwCTovECwgWgKXDg5l\r\nZjEQxl9dSKSyn8TBmAIw+kz0Tdg1GDJkV7/5Vkwe+wEKUUKV4bi8KVkQ0IIG\r\neLKOco2MU1rP8R3aiqFIBn6ntXO+MAwBrAY=\r\n=wA6B\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2208081650.0_1660033733587_0.45979963963677184"},"_hasShrinkwrap":false},"1.2208092047.0":{"name":"@bentoproject/instagram","version":"1.2208092047.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208092047.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"5147b5f8b54805bbea52be75a64d125a06f88aea","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2208092047.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-1IfvpV8syVGg1yPkYvZWOK7E92pxoyuedfeq8CHHgSwBKwRSlVnp1nY5mCVflwAbK3rdauT1OACOpXJyetMieA==","shasum":"496ad6fcbbb299d7feb3f56565344d96f7ca3603","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2208092047.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIArW2sx+JTPRsuBCUOjauZKiVJnNed1eezDTWpxuDnWIAiBaXNwKZu/mg8ZDLsbfZRYZne4FGcZcLYGX4QCnH2uPGg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi82w7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmSxAAks+SsLc0ixLK5bFr2zwBDfpERXzEAHFQH+wfsNld8sEgnZGz\r\ncadp8uPbvTTXTmpalk58c5xMD0nxvTx05kU+goCivNgAd1ymmuy2lVR/OChp\r\nYuvP4rktZT7FYQMfrbKZ9mDldzW3HfEy4IfGS648XVyyeVUJaazqcH9p6umJ\r\nxg3JLzQi+wRoIC+ZQTqtQ5bs2VZUEXnE7X5L/UXljPPBMXU+A61oTnRqNCA1\r\n1YX5c+NCDCLWS7lLj6G+OqRDLjF8Roz0XDh/kovsjE29WAI8Vx2q+Q9wWme5\r\nTTdHowBiORGLd8CURzoVRMyHflJksiUk8OEkSP577ZvkAsnlSedcAHG7tIdG\r\nGBmDlENeb9x8j8AFDABd7bTSDDnzcBm4tWh3krTMiTw6H+HdFoVVA2T+5HSp\r\neoLd9zL07SbjOFDmGb/OLAFjv/AEH0dttvv8aAwQ4l5riYoWpq4bC6lFCo/i\r\nADNwCihigmdyMA4LPCktFHVRaFQf8a4ZdBPaYFDySQrhlHyD6chXwf3J/MSA\r\nrQkl2JgGMznpCrzkeYIuMMofVhL+X01bTPgVmvxS7IEp+yTxGIV/zcSz0veL\r\n2BtV2bWnlGn6SD50cRdAszgU26+g3gEaS48NvrGq479FjXnh0qcOjCrrJoyI\r\nTa/E5JLlD72eigM/OjvLIHxoxim1CfLqcWo=\r\n=QvMs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2208092047.0_1660120122656_0.5204984528623147"},"_hasShrinkwrap":false},"1.2207281718.1":{"name":"@bentoproject/instagram","version":"1.2207281718.1","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.1"},"gitHead":"b2cc07c9f0ea3633ed63866b9243ad0bc964dfe1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2207281718.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-vrog9loE1sJHHoGuDT68gqcFEPlYuLE7msv4Rx3vYZrxFTMfKyRMHHP4Ms3CdIfNwNJva1V+UR2TZ5078WVqEg==","shasum":"92cbfcc1d77ead9d67718ef53d3aa1b8ec7d3402","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2207281718.1.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDXzTN511rxJTFuGcuGg235Lcf0ZReTui7FonnateK6zAiAlSiOxprMrK6gCutYD6/O6eLco1WPUhJE86kI9JgIxfA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8+PzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpRRAAorGrs1cxyqsHiPVdiHU0NFwXwhCGCbCI7vkZtxbt7vyEShql\r\nZ/l9TpWvb7tFbJeH+JH22PvggQK05qippEfdziJ6RZQPqJangbyROhjVh9X0\r\nJnjHdEoG0q01ic9zzERbs6TV+gkUUUBV4AWeNEgd5oK2vu7Czu2rk5PbdksB\r\nZUujQHNMexD4vGzNB/OAiEGHjSvlNEw21f21gQ3RnuE8dUxvhQ008JP8we5D\r\n2aPC2qLT1ssQ5GJrrbpg7z9nPdHUD6caEJ7BRD00HpMkxVSsQmI99kRGQPO0\r\nR4GFMmMq2prqhhEHhdoat9Vm8N8bdG+g6QOhWCyPcG0F64hxhv99KDV3LHwy\r\nQQ30s77N3WAueD6Jhxc7+ANTnEsWPYn71/shUG7oEo6shmGKBJwAreZgxIrn\r\n6ugvxB0merdyTrUJPXcaELUm5OFS800ujqT8b71qs1sxMayBV5x0sSjDH1B9\r\n63EWs6EqehVU6bk8hkuwZuBGFyxHLIZaAoiKGuCsTDpIem0Wj+sPh4SjJl4I\r\nDBZUAi7ANwcxXq2LEW6PB2iRAMx3eofH/BgVObQBpUy9enIzFpKGmyvgU1Cj\r\nn1nM8Lhl5hTMF6s82+mBHvfPRJrJdjX4ZIlX2UGd+dnWSnfvPeD7d46YYNxr\r\njcgKLfifkF9FsDh5K8g9AB/n7tboN8U6QEk=\r\n=SmQQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2207281718.1_1660150771294_0.38513952003716145"},"_hasShrinkwrap":false},"1.2207281718.2":{"name":"@bentoproject/instagram","version":"1.2207281718.2","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.2"},"gitHead":"b2cc07c9f0ea3633ed63866b9243ad0bc964dfe1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2207281718.2","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-pCQXAcrCj0f2dYTk9WkoN7GtMkAW4UADCUMufr3PM2tmqE4OJZYCB9QaTPeFZDoX4sQPL0rxbpv1zvkRYKAEZg==","shasum":"ee0dcaf7e929d2499618596b05690b0cb52a1189","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2207281718.2.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7fj950HIocDt1RzKXCrhOUvsd4Ed/kCNgYlV4wpk6iAIgcJI7YCoM2OBvgaapw9EwrSG83rQvVziZ+VXf8wteytI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8/YZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9aw/6AoeBFtE/38rV6I19yNinwdAKjFhloqkBzaqf+pck6VmsDbcu\r\nHN+CpvzUqRGyKbFFu418DFQHPuvwrR0ak8N/ejqzjX/KbHwVCzh6Ov+CHqTf\r\nAO3hecfrUOOm32P4a8TRnMau1nWPuny6v0GxhkQEiz5EuTrnijK6xJc4Ngf/\r\nKra/W1q8DIf3TFe+iWEZYUKon+w1uCQGo3iuj2UJpqspN155oee1tv90MIxq\r\nGa8kdW0b/Y5hJOa6ffLOfd1/b3vInF2GubL0CPcHVWs1d2sNwYRyBHe+7CWA\r\n80LNT1LFc5m8oDPhUqQzgeReHoApyV0Xlsi1FNcHUirgncgfGwaiiIWrXP1L\r\nPD9izjwcPdEgh6i1fGP/XO/XDOKL7t0GUgGJ7JAzGUxjj9eWx3PYNfoMXtRW\r\nZLH4+bkBOtWFzKXD8OVDy+EUNRDwx8p3+Cp1U+VIyRHdmR+TZCmw8SXQ27+c\r\nyqfa/Onva6XKMuTL+8uGz4d1IJk9eCobzjsRq+O+HEdHiBosFFNmkn6xrdVf\r\nJltRD9f1E/jgHjuWk5Rg0we0K6CFc1vroWbXRqTjrWJOIPIxdh2cqa+h7r92\r\nUPWWnTNBVIvsAOfE7S5DGQfDQdmEC/Ek0U3q5cXIhDTaI2hrr5SLcJlFLjnl\r\n6oka5uYh5/KlKrb646TGXLNLY7+P0Lv6ZE8=\r\n=vVSv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2207281718.2_1660155417775_0.732979825768203"},"_hasShrinkwrap":false},"1.2208112015.0":{"name":"@bentoproject/instagram","version":"1.2208112015.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208112015.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"83d345ea27d61c78ced5f68848c4f342e947fab2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2208112015.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-DE58P5/1FZmR6LRVltiTlU6JfP8x3XSt7odAgX5Q5xVhOID4wVpgWoUkIZ7hqh5wahIWkQaYE8A84obNzJr1iA==","shasum":"252a0d5bf9d389a0a6a95a101fd598a42c7f7511","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2208112015.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD17/qna0dEzqrlLV6W7yvVG+409gf7fe3Z8tph8sdTygIhAJv9W5k4LOFV7VS80G2DjW86moIrTJBaAOU888NcF122"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9g9iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoU0RAAmmR0vmOUpuAiQHVsoRn5R0jrKunFlf9ReO5ITsZwXRJ0NiT4\r\nOYr6RD0lIeUjZbQlStt1WOV/7s1efAAAyk47fNa1KghlpsOqzgbXArCb0aJq\r\nylxWbqrZjyGS6TeV2vQPsI25oz/nhNwVnf55D3XR+h37HFJQ05cd4urTDbrM\r\n/bpQpJz0ucqNmPXy66N/det3qvM40v53c0iimyVzVTnt4PQDUgXRNZDkeVGO\r\nmhFW20K6ZER4kMisij6m0ofl+3SZmiD28QLZ+pJBNHU5kRuNwkxVM0WrZpJp\r\n5FYFmW87In9qZJeGTaTbtPoZjL8QNPS3esA7oiaxv3zEWpIbnqAbqn4MBR3S\r\n5jqMTayIYBo0/mw9WUANTp0v8Yg3fH84Eq1w5SFw6KORo10cyyI7A62X+CVB\r\npNu1gbVj+IRP65Ezll/gu20ILEHl3clfepxbK9IClBNNDdbRpVSNKUCdqNQh\r\nWHRAOhgwLw54ncBWiaX7c4uwIjulGrKtFJI7AmtCe0VpGbpTUqwcm2n1eqS5\r\nYcbqlvV2kH7sm4GklPw4Yu5F5GP2/Ii7hxaLrgDTB3LST2zqUZjbT8+7rkDz\r\nLWv7IoENlQymTZRJDjFAjJvaWI4l5mCKKv0Yk9X4S3VWbio/s0t2ip/5il5b\r\n+y1W9/VcjeTJf0TmlFuUqk8sUHZ6K6Vc8GU=\r\n=hqFJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2208112015.0_1660292962479_0.570639345615418"},"_hasShrinkwrap":false},"1.2208121708.0":{"name":"@bentoproject/instagram","version":"1.2208121708.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208121708.0"},"gitHead":"c9c6de085436b10c2fcf8e6c10541d6d2658af93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2208121708.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-4O/yK4bDKDotKgth2TttBaEnu870awPygF7cRvff1bevNm6jFPFVKdPuuTq6Vztc2H8zKIIYoLNxmvwBjiaKgQ==","shasum":"b79802582465055e19efeff9fffe2028bee6455a","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2208121708.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDdJ0dGOTMArZ/KcryWMCkXLmJOliwwPKaWMQzgjQAu7AiBBm+p1GCcXrOfFOn3fVoflbKEwQo8KBDNEOacJ9MiBng=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi92CFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLuw//YV3Hh8hL/o6S01QpNdEMUxq0Xj9fJEoSqTBnZMAUl2z0vdYi\r\ngAOwXWFoKCPbIt54FW+BmSqDRiuBstg5Q2AVf64VUqRr09kCuJG3M7f5Wkiz\r\nXZyNzqGbFvNwQTcTrnKRtsP8g3THKfWcWqJiz0u2eEZOU9EkUIQF/SmRyS0j\r\nI+zKkEKMtK84of/8Y38OyRGeGT7jjbhvnhlHh6nmYaWKxFTrV4I5wa7TiSzV\r\njPpOQRRhsPhweUC4a1VCuV7fKLItZZaKh/s/OO+g1fvJDOSJxs2P6Awg6OXA\r\nEDOm+qJS9I7roQ0qB8ta6B6q8a6z+1kbtOpYQRTErdZbHRjGvG/giJNhSsDA\r\nwIp+8mcmQ7c/O9sZ7X4FOc+T98t1BrS2BcW3nmsndWG7klNFm3BXB97hyvUY\r\nKjIhadHWr2wHOZjwoJQoKD8FOhu8v0E7xQC5Hv3euNuDi/dqYNru5nht/+7J\r\n2E/GoZOlzAAUgtbItO/NZogHj2f/cG7+VT38b6+NH4TdNyvUefE5O+ge81P2\r\n0SHwCw767afgIeqQZR3z+Yockw6KJMehxvtKYA6oSWcT0rqaB5jNcToaI1co\r\nFYK5WmKYylYxKlFjGJTY38pNDBiosS98c+g2WzqYhrcvCIpq5SPUvkAdeerE\r\n3fJRbDMR55OvTmuRkoceTYuXoF1mBrGwIt4=\r\n=Fy+t\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2208121708.0_1660379269047_0.4373346135755707"},"_hasShrinkwrap":false},"1.2208051912.1":{"name":"@bentoproject/instagram","version":"1.2208051912.1","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208051912.1"},"gitHead":"c9c6de085436b10c2fcf8e6c10541d6d2658af93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2208051912.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-FWsuzZXwLEAKJV52yXaD8esN7AjaYSagoK9D4VTfhfH1esLYFc7+CqA72dQJAFcjBFcpp4tTyolr1ca/f4BnIQ==","shasum":"05a25d0777e5ccea9778cfe63d1cb9bcb21ffbed","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2208051912.1.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyN6vEEo3+1Un+67ccHKGE3yAfJbV2sBuMqAmCjTq95gIgUh5U1kNlC+6PiibnV7Qul4cw9Nn50flM4YBfsd+GrYI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/CMhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUww//QS7FAHnvHzI8GuK4H21v6olNIV9Jzu7VPgSJ3ydjg96kyRuc\r\nZfSUOyK9IevXQiVBjQ59XovaEtLSPvYhrPe1afdAYZKyC9Jsb7IXdegi1h/u\r\nuM1nU5SVN0eypHgclSgELleLQiv3Av9eoTYBV0f9iOHL1z4kWIifRTNOu/Lc\r\n3qtH0cMiSafVgNReZ8OH36J9SAcZGOCgQbTTIhVu4iExvnEEWdj3e31aS2yn\r\nT0r56o+3eUlN9KNU9OX4VSFIkoqVQSHEKrUcBBVpivc4aCLv7GieGyS86oyO\r\nDk4Eeb/8s4KhtQf7jNuQVvSXVxVaVx2JlVA9k65z6na0vffZzdDlxtliMo2G\r\nJ2yyUfYV2uZ6GykPBAPYv0VkNznUmdxpOPHk6+cP0kkQAkMsPfNpIzfCgmGL\r\nIfbGYHdD25Mft6wMhp/7CPph3DLAaK97g9sgrxL7BlStDBiv8laTEoKtif5W\r\n1T2ki3ulJL6ZisWkvXCnpdwjxaOAIWs+nsGixVr9cfaHVGqLAEXeoRhnSTxO\r\nj8GKvG3mVApG9HUzPxyaFGoRM18eO6jwxSFXSwPQUE1keYCwc+eiH6XXSDhd\r\ngxKgIcQ1O9POXTvaqJ6qIjXGuob/lehu+KSX9JaneT4VfRwmnH05peWaBQqK\r\nwQfYnZUXTFhm8xtNpoIJoIteCYR51f+d1kY=\r\n=ogL3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2208051912.1_1660691232696_0.7967705679227499"},"_hasShrinkwrap":false},"1.2208172101.0":{"name":"@bentoproject/instagram","version":"1.2208172101.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208172101.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"372d5623dc25138bb97bd48cd5f97f3be8008658","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2208172101.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-+ATbv8pDBTgsvstU/9DsVIednzRN54ErJhb8FbUvT1w8R9hj3ap9B/VqxLKC9RN+zeVe0pB5TPiHD9K1hULp8w==","shasum":"434085219666abc0f9286821b2cecf33a950436a","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2208172101.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDK4pM1W2i0cjU+oB2ec/V/1ZPbMyzPQWAYcuSuAI9fIgIhAMPb+5nzt6GUS1lOipzOTTHhjnsjUAz7I/TikF67xpXJ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBpCHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBbhAAg4J5RL9tArc87Qg0ARpKoGZT9ZPbeSrgYmYj9M+/70JefMJp\r\n4yg4VOmZgzKnaTh0/Mqzu271PoXvtQllkyRFu7lG8D1wvYTIMEIAN1mOhPxu\r\nRh3Ct/egeSVCIPgRonC2+23a+mSbE417wTIl5JESrZLuEBroFwkEcHxXkdAA\r\nFDJP8hWKyQRIM2bucMkBSXeCSgTX0jBPsKLqW+pDR9saZZyfaRm5Z9xjHL+n\r\noD2omchl4HWBGG2W5G3LKO+35khZNe0Ql52B3ungiC74iOqx+3/SH05Unp6X\r\ntYioMV5iD9B+jMOlWyOnNxUIsYTfYBjyaINcbFtuUV7qv3idrxSrdZP+PgqT\r\nZC2plWv6MceyAD1IqylhsOX0kzm2Jn07XDPS9ybjnxMK4h1DkCni4+hUkL7g\r\n9Yt6EyubQKF5kvGhiOF40XsczxenVPP21jeGeTsuJqP/HLlb0xEGuxA6Jrsp\r\nreWAvAh/Y19Jt0+6yo0o85DVS7ETxLvyzjID6eSQGdxipIYEQHQSLaikbAYj\r\nNyORVIq8yTmdY0V1Rka0lTmPuNE0ScGILEJhj1dnyitpZvywxPYXITsaLTDE\r\nRVby3GLgz9TH4A4OJrp09HSldLF4lwzTTaYaQMDhW91Qw7qoucyfS2exRgbI\r\n5LP5FnUcOOORSKpECn2qclcP5zQ1t1FeSZ4=\r\n=tHj7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2208172101.0_1661374599399_0.5161325040585065"},"_hasShrinkwrap":false},"1.2208242209.0":{"name":"@bentoproject/instagram","version":"1.2208242209.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208242209.0"},"gitHead":"0775e3db3f5e3447749a9de6b4ef38433f6db4d3","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2208242209.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Q7BcI23VavIxOyM2PJ3AATUYsVNEDF9JI9817o9+ksOxVzUvnQGHLePLlhcQ0v+wRAaft4bBHR6wUwthej9JSA==","shasum":"498ccab9ebbe3f92de0806cddfea0210f9733343","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2208242209.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDW9+XRHGhF1D44L6C5cwD47GDoNPJgUA+HTmmtAcw9/QIgHVOhD1CXHteP28d3Jth/XSewCe2nbw1NVgEy+fr1Lyc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBzKXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr7Q/7B+e7VqLAmbSUgQtFKF/vxpGczEIPHRlIOL85zsvnW7wRZnKr\r\n0QwLZv7xGkgNgDUlfW0SZNH1r9GH4qPQMczIvCvMjmdRJn0npcHZYI7UcQop\r\ng7cYhe9kUUkoIrrTRdXQ2iqmhCzMfDYLJtARpTIMfj6TDAvvkZ0Sv3+0KmEp\r\nD8liaGzXOicyjmN4vnSqr2P1Go9WuFnk82dV6EpcxfrZ+R8yyzfPxpiJOANN\r\nzAtfmJbsWpSiGLm47flX+yB/q8Ew6hdC/zt9P9Sq7gp8dzvPIN5KkHvcac4E\r\nmGBM33vm3vmezB/GdUUVsrbQt3256AlGd8ZMtgHkY1ZyhVVMLfOlw0EJPjPc\r\ngLbfQNA8pERVrp59gzhHd02lbhFHvVHpWC/oy+dwYHm/9mTKWnqcc2Zce2ri\r\ndj7ElzdGiE1mrK5Nse4kWplCMFP9KZqbSR+gbBpVA9bS2mDB8gns2mq3pMnN\r\njhZxx2bES1GLhfSffpqQQEMSwv7IBA/7pkHl+XXAKxppItIo3gPhZUPraCq1\r\nNKEw14BcrBVVmKI3Ixno9PxoqXzTftoZI1wvTi5JhuIPr6SgENpJjcLDL8Ut\r\nlQwH22hEmh1Mq7U4hyk3V02LMgWAM8CtXJRTC+jOtbVAodfzTOW1Aa0sEIiq\r\nzCSHSrUAU/zhSwJboh9gWKduiQx03MnotdA=\r\n=1x/L\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2208242209.0_1661416086828_0.5613911862789831"},"_hasShrinkwrap":false},"1.2209072154.0":{"name":"@bentoproject/instagram","version":"1.2209072154.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209072154.0"},"gitHead":"b0743385edcd11eb02b6e380c4fb5a18793960fe","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2209072154.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-NFS+K15oL68pe6Dd8N9fnXggWx8pAQIFVw85Z796qG+oNLT7czE3wMtwOCiRg5EhthVkDe2EMTXHqsgkBhIGzQ==","shasum":"3b79f40580f9af724575fdf5c1f16b8e620323a6","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2209072154.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF2feEP+oKczesw1H3DUnplbZYlCkv+vcZHRfbnLxx0yAiEAya9wwhiigCnH3+JbRj/y9QZlB/BQOFNbE4/3oJ09dDY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGacUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6Dg//Wvm6z53nUYpDRRTy7Dr/sWQOFFNMlUNMzvKH3Irf5JuLxHkr\r\nFxms8lQ4u07GMo240GPyAlPhc+9LFevyq/PUXKBZaFUUvZ11SyjA7qCDrYpZ\r\nPvge5wQPQA7t4PXlu55J6Rp7IZBcSTVZPR0o6ifKfo3RsHqgneasAYqpgtL3\r\nygr1ciP+oBwZs9vZLVQHaYPSKC76fXCP/KubkXCaeau+aXTVxZUeWnSwiGRS\r\nZtQF7TDPl0YDEHeOJuHphYyRUnOHwncNTWLjZHlEaXeDHOrG0u+LgMz3jtJK\r\noeJf0R8ZNhi3bbcuUSoQP56fa98fFJgEs5isvaDKqXTyisjTxnogLRAOmFFh\r\nqKSPpx9a1vlTh3gAxIo9HC+MlhNc1hcH23e05ractskzhC0cbwvNrLgvUdPT\r\nqVUQdGTMtxH8zJAaF6CeiXF+0cFoQwjJEIR1TxNhtW5umdlQPbX2TuirgQAZ\r\nLQ5D7Lo2apW7Nf8ZLtzIbVKUBGhc3cwoxzp1J5RMJbOAHqZtDsKFeMfyuYig\r\nCeIrPfLzmKDjxCSsNQKI85HTfimZKpPyh32l68tBfhc1VMMNimsnF3yTfYuD\r\nsaic+OI9HWZJNenXxh7mhecJ6+3ostSay4s0LYUI3fhVrnFPySztq4oaapE/\r\nVNyLzgOtqYB1bU/3nw5g7mF3zbBlcw+c7jg=\r\n=iUCL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2209072154.0_1662625556237_0.16774265609534678"},"_hasShrinkwrap":false},"1.2209131909.0":{"name":"@bentoproject/instagram","version":"1.2209131909.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209131909.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"b912a3976adc47e6a81ae645cb98e51d1e778150","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2209131909.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-boPArOUs0rxqWno7SYtdJei6Dg+2PjPVYqoR+EKjuPyMhkteVr5K6/QjF897ZA/27E0DkwEFYck8Jvgrvhkr3Q==","shasum":"fdf9ab0ce49d1cc464005ebd06cd48844250ba98","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2209131909.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTBvPACt6EB27/YgFmuApTJVfOG3gOfIuSXUgM6DtrcQIhAOV6Ow5qqzeCdlQgrrPcXeY6vB7OlJ0yS8z0IZ0ht7E4"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIZSUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDPA//cXVC25Ul+Co+pIaY5pBk3fPgjNqlDLoyb/r7I8aO6Wy3UyKN\r\nTyL/d7GIZsQmQASyU9PJM2V4NKPtNCvbeVPFZzD+hTQX6SLErpI8c0Kho3jY\r\nfiquI4VbiW8QqGD15TLmUQmqsGuyH6nLwcQ+T/W1OOwJD+BaWK6BPGxcpcYl\r\nAUZpTpYe7Ff99+HUtH9HzxL7bLYDpsiJ1hPyOdeGvhssyW4fLmwF9fNKEeYG\r\nspk7h9Dy7vvs8v9XsTKWM0N/O819ojTIiRITuKmjmdU/6PEew9vW1zKm+Nxt\r\npMUs1KI9m5XErQMVW5lzti2k/S/iRbH1vzAy9UKojrwTQXRi+uAYZzlFrL/A\r\nu9liWmeOryUAsEIjfdnzAtE2sRlktbumPxJtZSIzp452ZCFK+smxTGZe4fm1\r\nYDVbHECOUNRqvRLGIN9ofWwNlflrZyWDVTpcBiMSzlr7jrfNNG34i8v9BqDO\r\nW+7x9AhT/rJ5yAWFoT9RrEuSngVa1V4duoR49DEhYC6BVUjm6BEYOtGRyamV\r\nAU/TxjKYZYK5uuFszM2pgBT3LBQc2e8L4kVvY/waIz2VYfcGB/FqsMcRyk1M\r\nlRqkmg9vZbHafMupt4N4WMuZZoSaTXSKXP6PMAth3wJs3hCmnWF6LSVl5K3r\r\ngDW2pWV0CIqsg6Q+v0bYQm2cPSBsSzgYSHI=\r\n=z58c\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2209131909.0_1663145107799_0.11797171183042732"},"_hasShrinkwrap":false},"1.2208242209.1":{"name":"@bentoproject/instagram","version":"1.2208242209.1","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208242209.1"},"gitHead":"a64b6c7fbfdfb75c935b112118bddb3fff58ba57","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2208242209.1","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-WSbR/1dKUmIafxN8MsWu2o4UhkP3Kr981cu8eemDxilFOxIG1bl46rGGXxEhQWYwoK5oic0L/NWxIY15vgco7A==","shasum":"8bd04e8bedcc37f8cd8eadbd198611c538d9ac2e","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2208242209.1.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIcn8+g17s/yt5WY2x3KriYaqW2XrIY66JhHv/45XSmAIhAL+3z3LgHPhX77TTA6qH73BBruGDk3dpQ8B9z46c/JLE"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjI1ZRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoITBAAovij8BgnV9ty2RDuw2aLYQhiexcSZIyot+jLwpej5+70vL3H\r\nI2Lq+tNzRQQrfjQavKrtXsKYWreTo1Gf8Qd5HaSZY7hYbTgZnfpmQI6zgE7R\r\nq8AYJCNEwClrqakL3/ytoljImtxgGb7IPkD4NjCbKa+mcuDMNA2RbRRJPN4L\r\n+A6xRh1SIUvPzyhUyIJ8y/Z6lagghJdAyFQj7D2nk7W3VQssXYz0hXF0ogC4\r\nRAqOO5GdLM+i0BpJpt8Ro9vvVXsB2qSe7R4jabOs+GNoy1C2/gL8DolcBd67\r\nrpHUCin0cCNQNv8KnGZQ8T1iEAqsJ+r2H8Ch6hdhtLzaWQYDs9OS+mQudrCn\r\neKhcYSU30ZXxWBkps0OYw7wBTBaU4M8Xagi4nQIN8l9KN7i8BjLBGd0psE7r\r\nkN3FV2+eBJ5R7s6kQ+81l+vPrx9AhDHrCHu3V52j6vCtWiohNAW3aCD3pXB2\r\n3ap+CK9sli+Kw0OmasPiT8SLCrx6gpwwMFj0ub0PcjG0rNDDketHUJKa/+LV\r\nR9CuTZI1yols+0WKBeW/Q/fUot97k8MVfF9/PtG/tU+NQxWnHTZ3SCi9yX9d\r\nOx1sGy3mlUPQGm5Qm/G93Xeo2NmUxJwVqPM4vXuiyIAaG/Um2g3fEOE7O9RR\r\nphKDCma3sFtI/+9urY41+yfIpWuF5tySrbg=\r\n=bklj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2208242209.1_1663260240954_0.08780584399971736"},"_hasShrinkwrap":false},"1.2209142312.0":{"name":"@bentoproject/instagram","version":"1.2209142312.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209142312.0"},"gitHead":"8484b3b1dc31fb138a231b2368acfe2cb4eb913d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2209142312.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-VjpPzghHp+AC1ErnUI+IoxtEs7YknO8LI/EV5sCSg+VWm2nVDBPMAISi/FzLZ4jl6SpzNPPKHXuoeD2gKVpWbQ==","shasum":"efe0b7b16d527423175d0bd386afdb2cf57beff5","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2209142312.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICOgTj11hApzO7y/CiUvKkGqWDcz3e8I3Znvj/0+KHkQAiBDtnfACLRWCpXo8vayEROdTP7a2+ik6P32/WqejeGq5A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKjnzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS2hAAoYm0wY4fC9IbKou1WCBA8DgxDiENirr2OGu0hE3Dponua+DS\r\ncwoYw/Y0jt58t+4BlZfO7ME9LLhPav5MjFtrk+HAgjSaViZHr4iC+MBcKARj\r\nGvZ2XkrGp/4AMbYOTtCTkKairVg9gYjqktb19W6cJZaiuodewQ6KJqviOyx5\r\nyy88pjxruxdoZRg67kbQr2L9mbX6fsLNfsCZ5eh1sjUBx163Z4/4sUOxKRGs\r\nxizVQfGwklCUlTKAwlYOdckDxIHbkuVKpqQNfJbVIbL9tfIjErKiU6ukSIDn\r\nrHKEdge9ZwTbm55wTq5amsMdH/RBTHYmeRzJ3ioOe/OW5+nEKQEMr58WHwyz\r\nyXfk1OKFlm++4DSCEpQdAmNQNnLVUefdhorsMYmtprQ2OAsRUOGIGNvZB9wR\r\ngHYTlKASSjj2xIRe/FSNDcnFljmP+8C6/1sLi/GXYszrxnEjYXpyYAK4Ef9P\r\nSVyUFQ0fA+N2lWR1IP1MwBOy7QRlC9GiHw6RjTybBd8FuXJN+pbrTodte9km\r\nBFW4AHE9ZOMscvpaeTMOV0/VlJevLUY9Ti2YYmTx1sVovlePw4TfRiclKq91\r\n4IwBDdN1Mbyw/eX2g/3zWo5km3v1WpirYibCVtNCUkBuRsy7V96Eo3xJA+2N\r\nt01vdbvauVuXA5XGtL8o1Cm5gIECJEVi/a8=\r\n=Nwv9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2209142312.0_1663711730725_0.6698777434105849"},"_hasShrinkwrap":false},"1.2210010655.0":{"name":"@bentoproject/instagram","version":"1.2210010655.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210010655.0"},"gitHead":"b0c5acce5be2019b787b6f4bf7feb13b045ca7ff","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2210010655.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-7gnQBm85j9Unncv0M6g32H80/byKXk7Vg9ZqOT3MjA865boQq+7H7Ef6WvXg26tBUvuCsvfKqP7rT1CO8U3Cng==","shasum":"bc2e523ba5331f77e183be703ed4c59f8faeed2d","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2210010655.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhu2m9BG0BR9OZOR/4gYhsZZE70e+b69MmvRhQfv5FwQIgNoBHUjnEZsx4ziPbqre7b646hNRyfyq2s174TI7voy8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGRWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiZxAAkehXI12l80KIPdaaCmI3q6QDjgqp8X4NfBahBScWgVU4zTFX\r\nSYk5q3FVedum2UU9pG0A2Vx0dsoSBwy6B4RMZvhvrL28AVdzE7XprfKNpU1e\r\njdtTAVHJAldzqemI7HHOzQswnHiL90FaHI0vvW3+7wKikeV/z+I5x69ZVzHB\r\nb50IYxGTS+G6sPG8CXbQFykZjLMVrbG8KoY4JFqexaO79MXEDynjBl6UqTTL\r\nHX2+mioaNp09kNi9XTgQQu1496Ij70RIXc8QlpGIMZYh8NPU+vbSvKUXQ0UX\r\nNKmqdL/m9hsXtfrqpYbQxWLBl4XvNTyXGAQjUMuKb5ims0ULXPMFfVv7JNk4\r\nWZ8U9+iZGgJoEI8bOzOMmgv2kzbSTl1v2BC8AsWs4RXjiimIHv4iFiy1f5jB\r\neQKSwPnVErJsu2/+NR+6rHoVB3B6eijDmBWnPntZ1U22B73zf4+AMKrJTt0I\r\n8wj/5KodyOqYBG2m+a3GaspG8OmEirHb96fSkcg7F+J8R6yVvFkeRNcyZXLt\r\nz9WzOlm/X93yl7iyYBAGswZYfXK33OV0vdfvBdVzRDZJ+vjbbX8La9tUDnWJ\r\nenxADuyjHip4t9B4E+8MZm1HFnoBPFmchTiA5QXpV9CzAGy99GlmQqLHIdck\r\nJEDSHymrid0Wom9Yx0UAp9S5PE6jrLSz8Vk=\r\n=h7oX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2210010655.0_1664902230180_0.4326417606998023"},"_hasShrinkwrap":false},"1.2210041838.0":{"name":"@bentoproject/instagram","version":"1.2210041838.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210041838.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"e79aecc1c4639b06a7f2843d961bb14f293a53ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2210041838.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-Gn2yR5ucGCmL0ehjyl+XG4wWKL19LLMHY8gA9nryK9yzpwWK+I14PPqFpqRXEb+V58mz7natv4L5S1HZFDC9Mw==","shasum":"455c293d84511f25e5e677fdc6e8e926efdc70da","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2210041838.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWVMuHS5v2eG8V+pcyE2qTNfe7fd14UvuVL9Tw8zqF5QIhAP8e6gBz/H81FMSgkcdZ/KuEx66DSPb4aUXoPgcf76xl"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPUDcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFHg/+NUw9BJYbhYYhhFcK5JwP7krCGILlBlNsLvVBZ+3F3lf7BqDB\r\nwXSAs0uXsX50T4UTG3Op9RnO44WhvnFs0uzPMaQ4XzafImg62stVYtWlw2qy\r\nRocCDWsnSHo60LSMYvkuzLN6m610QL3sjjMQVHWJrnJ/OGEV2BaC+/b0iqSK\r\n6LnHbzEKnkEvsxJxPDPh5yhOjlQqTneI8k85WWlUFOzb//AWQzn/NYO6Xast\r\nABGh/yWzGDF5S26Ushod/qbneKFXkKZHL1o9tqatVwe7xKWB/5Wy1UYaCmuv\r\nySI0u0wcY425xKO/7+A7WKUIpqG1UVwZhgIL5neM3DXHqfj6WtJOi1pj4Hco\r\n7UdN7jtW+vOuWb9CvalyI+6KzksUhTxZHk+7XU4a3h5B7UCatb9yL2TDFZPG\r\nqcEjibo1JROOPodqZFzLgf+hyUSpaApiNLgOVjIfhpXI34vTzShGHpZXD7CP\r\nC6Zikye4CS1TgLwbf/aRxpF3jhNpQa0FWfG3c4DuWycSoixOsLaxKknfH7y2\r\nZppmvRqUYPADQ7qQb0AUUf2LAfkNorwKQTWMXPil8kp39idExRFnOyw9k+cx\r\nx2PhFt+5aoC5EYhiWsd1wUvPoHYnU3hj6wDP2T62m0emR9Us05hbZUSyeMTZ\r\nfHQnlQHeO1sLHeLL9yN2y6HdMYTZEl186M8=\r\n=N1oJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2210041838.0_1664958684133_0.09791764224949895"},"_hasShrinkwrap":false},"1.2210052034.0":{"name":"@bentoproject/instagram","version":"1.2210052034.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210052034.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"8a0a0067f57f89d0566ee1db3d4bfeea072d3c56","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2210052034.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-u0fJ7onfuBxJpR5GOQ84bb9IcTsuiVeOp3q4gTADDMeMB26InIe6PnEG0h+KBnkVjL3fDfSmcn94Qy9XeFy3lQ==","shasum":"dbec72301a62b272a6243077d313379da1dbd68b","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2210052034.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIDuyK0amhj/hjM4ru/5NDf3OJULedUilNBDnk3iNOWDBAh9P2I7tMtRhZo5YCf62j4yFCe+n2bnrDMPhEA3Fuarf"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPpEzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqh7BAAjozzKLzSi+ZFDMmeVoCn4KNImFIrlNIJ9uGq5kB/A1QLic+J\r\n3zbiR4lnF//PqPPSosewB5KYAX7v3sFuzcVygUDeHn6XP9sK4W0oCeDr6YVF\r\nfGxzLLAoo2u4srqhHYGMEvva1sJUPtC4zo5iV3NlV1pPD5nD2ZQr90tnXWHn\r\nb9sc//3EE1c/kjnY84ahtUhFyOhGiT0YlMYF3zdG+cr1c5A9IsYbpto/BC6j\r\nKq1z3czeWZ38dH/m16QL3ViuOAjzyk1rU5D+O0XxJILszOCy+6yOAcU0/upO\r\n4c9JhYgc9e6liwSfAZW5CAfZhD+kRMuWQVsnE/y/rE061DZShj/CqUM9QUnm\r\ncqjhmq2sCpcZ9SzbERoeuf7Mxjoq8cTb0TX8m/LjozLhXqU/Ru51uYV4C1rL\r\nTZ9HFFe/2qCI816g9DN4zxGqCI1PCHf2rXCDnjUImtQEYcpBtQLmGNFvmBid\r\nu1RRy3OM8qNSH50BPZ4bVkELgn3INrlESHS2FOw8IU6y2RvdI4GF1RIG+nEV\r\nemYDbGj55R//DTO4BAg/7sBB5niaJ0bKHvVdiD59tX91GCrxaJMQUPdpeTNu\r\n10Eb2yOC2zHNSRnf6hKMJG3to+YTeaLeyywh5l1uei4tTPYf4mKkX69X0i9R\r\nHCUZPERW+eJkqxQdK/MsD8bZUkw1bqtV3V0=\r\n=2lE7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2210052034.0_1665044787239_0.5614409867309145"},"_hasShrinkwrap":false},"1.2210071758.0":{"name":"@bentoproject/instagram","version":"1.2210071758.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210071758.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"7c969ff5fd5406304f6a9867fa0db59b74e94524","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2210071758.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-NdlgZdVZocyncVPc0vQKFH9iaPGIpjrM8mFnfRBHw8yDs9fVh9UWl/Tr3fls1PTZqB3eLQLBl5SR9QTBrGszTg==","shasum":"7e8c5b685737d3b68d1b6ffa4939c888be33991a","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2210071758.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQDby9Tipaz6aznnf0KfqhZAaovrbHCl3zNnnKI542ugIgBtnQtFOkqhV+brd3fp+gH89OgxEqDg4gmZheNjZMM9M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQTRVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq31w//YgO9AMFhvRoIRPUaQNSspNZ6jN1GxUDOxCoXlzsBn6hej2zU\r\n3wS6MQTCVhYgY6EtJxd+uQdKSyalbUkS3XblQQDsUok8pmtSrMbpqZnuK70P\r\nshoEawA47H7dn0dmH2Mu6Br45L9SDQ2rDwdZ3EMS+5nEYs+rxPDWHhTWo2j1\r\nCe6Z3nZlV4mhyUBeWbk5iuL7DFhb9faMNktMrr6+A6T0VcpW0k2iDwsIqqxA\r\nxFN+eFKkOQoHRMhB39GrzTZgs3oiNne0Enh6QA33PYBJcKQpic57+xrp4qa1\r\n7Tf732eHRLh1glITlO2+8lqUsXiUwAbGspYvI6K99ADAXqZMI3WgeQaNcw70\r\n76ISyV3M13WH35zlNdHpnIOp9QQK0QDQ6BTidwOM5ntjwFOJDqw8tDyO3lCq\r\nuBWBItvdEEssoc+KNsOCDcMqU9zajS0gQLWxD4CMPey2jZuB2eoVPkanL618\r\nAccP0Ocx9zI/nRfqSX+uzF34Ktr0XvTiXne8xN8Gfo+8x+Q7EPHfpohxSyZC\r\n2L1L9Ex9k7DGojrPbXcKMAbmYuXebv5nGI+8Rqb5iNefaBXmmOm2yqS07LrQ\r\nBH5jRET+gp58VNFt0TSrXV+dEyXdYSzXjr4HRMqDfy2SqiPq2m2GrfS0Rb6p\r\nOAvQCl5jbl05R4MUZvKlKcOWTPMV0VxCzzk=\r\n=MIyk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2210071758.0_1665217621623_0.1518809651962827"},"_hasShrinkwrap":false},"1.2210112333.0":{"name":"@bentoproject/instagram","version":"1.2210112333.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210112333.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"1d82bae06844d5413aeb632cfb2f3ef443548ad0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2210112333.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-QgHTsu+dUCWX3fcjzlWdED93Tgnyv4tsQkn13RlsG02VJugcGyal0lgGHXYWGe/HLme69EoABp+1g9Mo446NNA==","shasum":"716da3d00e8d17f39c9e9a2a18f9ff3630f1e231","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2210112333.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICPjn3kiVEtoxTH8mwuxfzJrA2+JWg2TpKF4SvRv5noeAiAAvCd5qbZxKf2qoAufE1nRHnHvg25Y48mDOPFVBzi6hA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRno1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVkw/+JOU/btUoC0ezxykQobckHgxONZi4zQ6r2508UvjWRFqchc6Q\r\nvivRaB1sPRfop1Ttxl/gssUAm0AbgxbkmNRlNKXRSwDd3fVJJC/DAV91ZAnr\r\nX4nb+uYvVmIdrG4pGCdRtJEToBF9bZzf+6IIj3tL1HY+PSMi+xywJ3dXyk6i\r\nqW1X+RjDsLQ+VQRQCCFWnnp08yEzqNEbhk8bfSGuAStFxw7qzjoBYWN9dCln\r\nFi1aBS8QQNr3Hj+9d3s1kkpW6ZkWfo49EL626XQrArrFrHh8FEb9y9z1PyEe\r\nFwF6lnSZ34x92BRFaSiPr01x5QTp3n2hNF3mNGH7G6zMq+WskaSr3Dj4XTE/\r\nmM2+js8s6Moy/5QcqmcL2FXXIdQt8GEXYA8SHjKoyxSmbrkJib8rFWof8ID0\r\nN4BRM4wrl2TZBkYePQkjOlGWvBRXV1KXfZ1x31ScQcxO3nRGJhzgJKshZ5YC\r\nw8PSuaKQTJrhkf8XjzXTjRBM5lqTTNrVa19XNJsiCESATGY88pc8rSKxrZOk\r\nSeRJ2hINvO7w5p4bR2rkyQ5LJ+Ds9PTREBbMN6N4h+JPKFY6aIJfBSMUceBo\r\n13NUtAMKNsA/ZlcUGxi/8rxGiaYFlo/nQ0bS/tonZZU+I5RLpoDEFFdu/eJd\r\nLvMnCXCuaIq+8Af0/oYUKqZZlBXcKRjUB0I=\r\n=02zV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2210112333.0_1665563189068_0.993803732059017"},"_hasShrinkwrap":false},"1.2210142102.0":{"name":"@bentoproject/instagram","version":"1.2210142102.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210142102.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"4cbbe2b23e7b0c5b0c005c94a574ea48a45f7693","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2210142102.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-OYsUq+FV3D60kqGSW0eCfS9AZMTcZE8+MZ0uOhbyIJpuPmdcHhfu1xLOjcS0A8g1tPfjgd0hLUeRNV+fXR4oYQ==","shasum":"3386269afbfcd2d4fee8d04021b654e3d7b47df2","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2210142102.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3XLU5cvB0/xpnai7kdMQ05UrVcXnFIEonfXMRjNsDiQIgQ7GsYyXS3wlT8IuKsnRgaLjNaZPUseZXuLvoeQTsNFo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSm6OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouTA//edU93Wh0xciLdM4IiGdNIBrvlL1Q/wf2t4OMZWqw+2DdDTAs\r\nkY5v/wAJvynJYeBSY5XU5wUi+ni+ld20gM6vZ+58quv4L4z2ZtiokYlxXjXI\r\nR3S0TDW/aQR5DUU2QauYe2f6hzDSYD0NDr+OLUE0pCg9cJrzqbMvKkFCwrwU\r\nv6p725Ux5xVhcAyal7Y3qVKzdc2Ep9cHrAxcNUjlXjjeL0f6XLXcBMwa42s3\r\nqaj5+bmChWrS/PwBQ4KHqFBgXgazgQVXdJTgDMYG73z868H0qs/Q6I2gd+Pw\r\nJLg+BR+Td6If0I8mQw+sPKdjhIEBl2stniqjWhBM3Z6793S3cKxIUdJRu0/T\r\no6WVIVXBnNa0DOjXgq/pzfxMFdlJLAyAzZJDc1zi9oVXK3Q1j52ZRWP32kKu\r\niiB1sr1vihPP4+eEzBP3Ip4jQewEwKiLGgPhyAwJRTuaDwx1Og89YQzguMSP\r\nrEzaFcJQ51e3gJvsnZ/OnlQG3zPj51VY0lCn24gDK1XMq2BYfP2nQrE2AsW6\r\nVVs5W4JoPOnI1MZEHU+Uvua/oqo1KuSXQl8YMjiEHLQH2kxhEBZPwrksxZWz\r\ndG1UqoruEeefCE+oqW66JuaYpq+ZeaH2XtYm/6qzX3DBfyvvbFbuwbl02LAN\r\n7KCWMzXRahj2QNrJIjXpzRjsGfDIr6Hlums=\r\n=vWlk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2210142102.0_1665822350246_0.4536768727360223"},"_hasShrinkwrap":false},"1.2210172057.0":{"name":"@bentoproject/instagram","version":"1.2210172057.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210172057.0"},"gitHead":"fde225e8d98aa5d96a939351e6e53cc7abb13cf6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2210172057.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-Jh6r9DeJpfv2y2X2+ms6D5ZamRrU5S8HO8i79Dz05YtmfqHvIjgKfvhqQESB544kF9Ymv56o0nm2CMZ38bCTQw==","shasum":"cd2fda6764eabf7acea2b56e06dc7c18f154074a","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2210172057.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDYnx/3fbbLOkQzZjnkPeU1brhovkpWTpk5Jsu3EKoD6AiBXoggzzzlR9D8KoeoNJbnHPnCwwZOCqg+ZENG2aDakig=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTmPRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeNA//SBnNOtUGbtdGdvbS3sTf6u5/kLc6aXgO8iNVsqKtRpwyTSOC\r\n8N23+mpkPFapk/U7ml0kHeI+MTsQ1ZD4hh9ttlQhfdGXEOTNYYKlrl8Ql23f\r\nI3+g+6WIGy1fyXYl12XaCu8WcfQrRIDFB9oNIF8ehKdVrWaJrgvh2/Buaf9Z\r\n1cAgwJs/dzP0SYt8l4wqTDXHBrC/IaRfKfPXE51vRCVwEOpeAK+hYINM26yP\r\nKo66jmITbOmsk0MU515+fvS404uOgqcYCQKFfnAVpt8jw7IYVpBh8EojlYGy\r\n5BipVp/zIC5gQO/xgV06TJRYBFLra1Gx25LqtF3NQkZc5RDJkxn2CGtwPWGs\r\njxLKV1vZeRxPgRznq4o+nf1Wn9d0ZVjlR9E7GNkn3H7b8+M0703RNiifE7Hn\r\nHkQasoUF0sxQkp6KTgnVwQhni+G3AMt607oLZKMjHxB+j3VueuMdQ1zM5iqx\r\n1qaslt7VgtzVM3ORF9reOaKFqXZHQy4v725ztSPhqD7JAgH7n523V3i4Rs9Z\r\no7Ohn/fGtVggr9Fe2YJOkcv0jfMnoNTtdNMF5O2pdcnxmz2Fnu662ey7/2eQ\r\n3QZgx8/5AOpQ3AsVLAusfdBpfoYlCpmo3+CHV8o/WjsEGx48qFYHMBHDgjci\r\ntfKWltPoKk7CG4T1pf28+OQvxAzrbr/QTYE=\r\n=vH/u\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2210172057.0_1666081745039_0.6525894349184518"},"_hasShrinkwrap":false},"1.2210191347.0":{"name":"@bentoproject/instagram","version":"1.2210191347.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210191347.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"b2888af97582abcfae901ed340328b22e9caf2fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2210191347.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-Voo/CJXBvH+7UNJs7BpAaJlnmX3mdkLjsgyeMYYoz1n4FyMml/CTtwuXH+60tNiKY3xrZzHzVSTIn+c8vuLtAw==","shasum":"c73214910394ae15d5590555ffec571f059e9cfe","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2210191347.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICvPyFNQiilBFaVZZXzoWI0auISTToBnQweMDEAVD1uXAiEA/ju5DHE7hgg+w//gjUHXPVZWbeX1DBUUwiOzHWo5f0I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUQZAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHtRAAhDqQIC7Fib0GGTOStCNSyq0BAY5RkoKjYOK/J2VoUeKP+osg\r\n4fVehPPaJFENG3qtMiHzlDj3K/HcuIW+yKH8/7XiHp9lJIrgZJOP9Yo5Mikl\r\nCws9kUK49UW1RI6APy4FGUfAexVo3quCJLwMzczpG1X3oskMOr7j6HzbisiL\r\npWf2sX2XP0MQwi95fXLpE76UA1p895YxQh4IWLmqigsUb4h6/oMM+5l72E9+\r\nZWuNgJ9kmvXMblRDz9YdTjsQTan56do5Y+sLaRQmcphADvnxf6WkFbrQHJcX\r\n7UJJ/D4lwot7EM81uKOSMXboiDaS/S6JNnTKF+Bz+jjp7CDGLsQA+aIoZc5A\r\nNMdK/kqVpRlCZ6nG5vTHTNZxCZ2WxnBelpRc3kPH2IAPljjNrOpoeWGKmiiL\r\n7uzGxjbZ1PG2beLUfiI9k8FFR7myvxyuS7tHbtxXoPNlwPmN0evQ1WBI3lDc\r\nSA6DTvQCLaEcqMUG8NrYMEj8PdNJSogqC/3CuUvck4UVP2bfcwxZs2JTdbpy\r\nsT7YstYAUNPPhsneGdZlTyjQiGDT+KZ7vNVhXWhoAtqm8EVfms+AvIAGC4Mk\r\nM1HkbWKGvcTh7FGBA72skVpCcl1/LriOkXwjAqCMYiBdM3+2ErMX2XLr2DDt\r\nTP7hDr0UP5KkDL1eq9ypmkxlOVvDFutnW5o=\r\n=Hv2v\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2210191347.0_1666254400667_0.48606524833395937"},"_hasShrinkwrap":false},"1.2210211855.0":{"name":"@bentoproject/instagram","version":"1.2210211855.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210211855.0"},"gitHead":"07d99f82baf83d9f0162a6c7b8790cef43e820fa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2210211855.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-9RwaZnyW6X7fSNBgM/AWuwO2LVvwBbq3tHEXqhghqP6PEYWe1g5x96m1ajwSp4Q1jWCdQkkbJxVZZhdGF6JCjw==","shasum":"5aeb5238fac8b0c0344fd24ee643cbf5c36af1bd","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2210211855.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2TKl57CP3NKI0ag8IxrRqr6fxkSF5BaEoy9D11AXBjgIgJdfeWglQ/l3ykAwIyzAVRCy6zbYa+L30aNdvFQsEXPM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjU6jOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqbjw/+Ih0Dv9x2wjjDBqFU+jhWYZ+ez5netBc+DpMyo764gq4lYaLw\r\nbXbNONJCx0nBN8rQTTo/VQBKZBTACp0qe17eOZmFFDYLMEUfrNQhVRXilpfu\r\nocISa4ybeush77pUpv3bNfRlJZXUwv5Oaz4PQmPV7aT8K0G/ZWW+q3lhzB0C\r\ndMM64c+84dALjiM7JuGPfMlkQgzjdPw+z514M/DzYfWRv9s+h8+sJKzyrOw4\r\nJtKatL1CiBCvkxD5WEYmv8Ajbzzxmmc0jmpp5XS5Pf+RszrDDY0Ek3Z2zQbx\r\nIAwHfaHlh2JS3J60XngjhLTGJsVU1yKqizI5CZfLT0jqmAPKS0nOQ5SNJeoE\r\n8iaITmiKA9H3hhS2DNyJ6NWneKkPIEjVBLNLQLBb7hrK7HQzGLgsuWYlleMC\r\nBBFWF42SLXNzVZMO5eJtwUgu5aui3Dzk/Km1eNAavJD4nax8IZQPch+hso7R\r\nqPxWNDRi/E8BBUc0ex5/4JxCP+JEbJesEV/w+eQMnOXSH7GzO76WADndfiW+\r\nAZLLZ5GxbdLFurXhmSjA8mUv7s8R88HxIItea0q6E51YkIgbIMjJK4ePfRaN\r\nn3hUfpbU39urnND+uX+cc/hbNMGGjwDd+YTfG6cOsOitLK8bD2dogAv/W44A\r\nJPToOxU0u8KG5eKpyYSsXCSZwqX/YmQC51E=\r\n=etWU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2210211855.0_1666427086058_0.723765015091828"},"_hasShrinkwrap":false},"1.2210251605.0":{"name":"@bentoproject/instagram","version":"1.2210251605.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210251605.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"a1f66509b5a6104dc33409f285dac1ab133942f6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2210251605.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-QPZ9ISH0PHIumuog2KyGbzQMVR/xO3/6SVgKXktdEvl47jPb6VdU7ID0fAanMiJ2PGJYuKiPFWLJUxB1gTUFew==","shasum":"7f1a5991f2ed2ef7faf46ac5e445345c10892433","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2210251605.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDU8mgE2BdF66av+0LmarhLV8FQ+pbdrbiD3McGi5D4AAiB4LvQjRgDFP071niS/QFrkpYCz2MQZxsL/zvono05pPQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWO+/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6vg//cGVAry/le2JREVPb/o8d0nA4s71x+l6F/oSZmETOygR+Aqjt\r\nP//7zpDjsR13o4uBMJ/S/CjQzTyYcn534bkodARWu0Xv2AQ/YimMWP6psLxV\r\nE/9IAV7tc9nfN5NN4SNtt8Ny1xx3PJuusPYG3SH8V7QLjmqEQuEW5GbS16JL\r\nWOlaqdiCu9BokkxDEiJ64LPHBQCGnoPIpZornnHfDdYBz+G0tMad0GADqQoh\r\nrFs3QhTZEJNYxeCPkSq3U7nMktyZ+kG2K2MMO/vln5XH/W297TKe2aOVAdwR\r\nzijtvL7Ig0GCvTIB61EFWbJ36tN99lEq6cqfxNvLz/7bnhjr17/j2EZTxawA\r\nc9A0a2rLjXKELV3fuPE3G3dVSvo8w7lt00VE93T8fQ5nP4JLcwvz3snSHhz6\r\n26Hk8EfqEWVSsbQ58BtlScotcerQs2dZp5aUWSyVph6y/9kscoE4s7UW4K1b\r\nezoBiMSytqRkWt++tp2PO86NqE3iCxzTxbUqtS1iS+R4gBMqHXOWOMxa7KmB\r\nYCK5lbZ6rXG7tfjKsje77zL7x2zYrNm9MM6F/FJz1Pb92EGfERLI8SRxbK5D\r\nedHxovjhft7XccG4QFHtE1FkRSqu67AKrXYfc2s1nLFlW+1yzGRqSJ3ip5Th\r\nTRU9kikPQYK++CB7utOn+OtZIAxyFI4O5R8=\r\n=MMhP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2210251605.0_1666772926795_0.6636044324594772"},"_hasShrinkwrap":false},"1.2210272257.0":{"name":"@bentoproject/instagram","version":"1.2210272257.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210272257.0"},"gitHead":"9664ef260a4ec8fcc997a65025bb11a20fea937c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2210272257.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-xA4q4+EeThhwsbo5qtsDhDCy63Ni0Boi/DBfxT+RyXvj1WQ9GzQtpCMEU96+/HavIH1/BexwR+b48fjXvq0LVg==","shasum":"7dfc14eff222dfb848ae94188818362a4b8227f6","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2210272257.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDBOVyfD3HKW3H+VvA4raM0c1s2yR2psgrzFD2BNmAQgIgTcmX8GIEdBv6LS1eEWCfK6JE5GMzLVU7dqWmLHHd1jg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjW5J3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIvA//eoHr5VjBEe4sUBgGOEAQXonben6KJSK8KdE7I3JsTiP2fwl2\r\npCHK8Z10ukX3qidXSkSHDmpKsc4nw+QgeBnSXhYgMj23bIldbWHITJmBxrBI\r\n7uELxJqKKuALqbM9v/sMw6tFBNL8KS2OuRfblHkGxaWY2Glik6/9X/Gr9QgY\r\n6aCArlZSj4ZrkXehaAetNeIJCAhXSzbk0+lCL8DPG+hwrK7zslmO1CkEK2JY\r\nwPB1icA2f0tUgYyVUnJ99N6gPr0bH9892HGjzP/66uVprxs+Tktv688DLVAz\r\nmZCkJCshsJUTq/b7eN+kg1sK092tmEHsUBaZHjf72frAgu78xV6yJBR1txgx\r\nYcA5pg6q/EbYumYrYxtl1Xf08X52qfzwKhAP6uDw7SZotONYryMiEEU8Pjly\r\nBcNYUFWvmR3q3tA1OQ3l8YNaQkuvQu9ZSGWEGRxz9jXCxC+9JWqMbjJWnjwG\r\nXT53yHxt77LW0tfPY/h0FcGvTvDHwtG9eyfZV13ebiobOD79i6wpzdv8OM4a\r\nlPCeKIuAftWDverm9lAAOX+uYaapptndFf6NgtetmTTT8Ste2DUiSFbVON5S\r\nNKRWwmpn0Zy2FSv9Q2VkUQ0TA63e7G+7h/E5Gf7EbjMl5oiAwoPx7CQ7o03u\r\nW0ecPaJ3/XHnz/xjDDb78SlChzI/d5ADlVs=\r\n=GUXq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2210272257.0_1666945655027_0.9628173910441622"},"_hasShrinkwrap":false},"1.2211042305.0":{"name":"@bentoproject/instagram","version":"1.2211042305.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211042305.0"},"gitHead":"592500a0e400703252086eb8ab7b1cd46d674ff2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2211042305.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-iteBGXdqnednC28p3W0A6A6H55PTs1iFE+gbEm+MdzJWcY766z+FhQ+7a3Aoqc1OxlG4liVLZrAXAmCqMvd4IQ==","shasum":"cbd904e57935de3577ab30acf4c3f65f26057bcb","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2211042305.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHde/z6q7J3/RZDOCgjdvCdwKs+UtcYPVr8dIzDMMupYAiEA/3hQod0fUjpfLHabKXKnmLcQSV2yHg9JczhGe7qRq8o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZh4HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOVA//Yf3+KDU3cUzgyh6TFg4uSnQX+fcu8jw7eH5r+zEApJbHEx0d\r\nbNh94N46M6vk1CbrvNoERji0Jhk6mFVSiVDLDsBR7KeocKGl5qPLDJBDES6N\r\nB4V8oRh6nYng78qcq4buHwHs2aA6WuMSpterVmgbZySsHK1jkzkNbNze4sN9\r\nNFT4CKV4c9aM4R88Ud31u4e1wMklOU1gwZvCkisxCXv+HydJimQGxe12cLtj\r\nVXUoUTSBU2H549EEI9Yt5Th0rttNjFl4JCpxXBhpxJxE7NeVBoYnn8wA0sHE\r\nlKmMgSrRkb/P/BanTShZt6vnxHLXys05TKeYPc1aJzlvKoLplyE4GhuBQ02c\r\npZ/BQGv/4DdMY0SX+E3QK4fB3C5UlrRqSZqKhdeZ59io4qpRTKQNeB9qncC6\r\n6DRXinhdAUvTa3ek9B+2pCa29YIhL8uc+uyJQqj6RIdRxBgsxi5DjoUpexgX\r\n8nueTyrjGcqSAZbjAjDjpDyzzJMK6S/BCrKu4PS6C9sf4p0m5abNPz4whU1M\r\nf35IJiHX1wULNlv9zzZLl1vpvGRn3Gi9BjxX1ooLCgrde+LNEjt6zOPZQ8IP\r\nghPHeDhqtixR6CPD/47fHABa+Rj2qpijg7b+KNHBECqSF5gLnNPGRk1zZgDE\r\nbpcSM7Ti1MdpyiOcIJ2uINiAnnKEpDExdU4=\r\n=E7iM\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2211042305.0_1667636743215_0.1376281962474435"},"_hasShrinkwrap":false},"1.2211060024.0":{"name":"@bentoproject/instagram","version":"1.2211060024.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211060024.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"f6dce0a3fbdbc90de3eb1773dbfc31ff1e476460","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2211060024.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-18XqlKplTUBFOOvpoNn0SQsEFsHL39OxEZ9j85L7k5V3/G9x1BGo54Jw7ZmPvT5mLQdrh1DH5eebta4PPagu7Q==","shasum":"0a52ee28ef78905b6ef150b18fbbddc14e1d1591","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2211060024.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBnEQC9AGyjMwDf//rumlOyAazkkKIGWbycb/eV6OTHeAiANgthGg4CoZyfDVKpwzGiPkeRXZzvm+Km5ZY4V7CaxuA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjahK7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKOw//SjXNxiXSbBA4RgZjS2Mae4f6jbDAnXiCBa370AC+2LqxxUHL\r\n/5kRvsE7A09MR0GkiduFtLMRU8rq4Rrpx9qMBneS0yOjS1ExvyitburIf333\r\nGDtwtmBJMcydTnJ2TWIrWWZ0slJtGr787kbJQvc5leNrjHEZece59i+X8GQH\r\nr6aRIneWAggS+wDH+3DPqha81PKV52cm+RztYfTJGv5Qj8ZiK3hlvsJyrZyw\r\n4vqh1Qryv+IoFpqf1Gm0HhuCItilfoP1x34aymkO1gaWVp0yKQKVfu+ZEcqP\r\nEp+KtvJH/G56nUYZNAhBvGeBGyBv44V3ozEDh5/f/NBB1DEPRLdSUsNSS2zX\r\nEpJ6BVNV13WC1JOA68FjsCpVS1KoWd0lF1TGAsvm/V5tOX81b5rt2rqYUkcZ\r\nT+/Wg3poI8+Tv3Jlx6fGOuGYeTeNi7uZY+i2cI72YoLtvm+m/X77JXPNd0QC\r\nAh/Md/OgWVSW7vH7gTsz1hWnDcQScR5JrQWchqmUmLjq1ltTPRTW2+jgm9zM\r\nVSxeCWgWfyTtjr794k8Po8u8tQFlZd7oAw3FT895CbTB+nVAg7kqt9uA76xp\r\nbB3qYlkoWPvZcRS/E8YSA9AzHL3T6oaDmX7573+RBnWP4/gMPEm524xsmOq5\r\ncZlah94mjtCJeW+EgvB955s1Xzbg2XhkTe8=\r\n=jiz5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2211060024.0_1667895995142_0.41864684147472153"},"_hasShrinkwrap":false},"1.2211111611.0":{"name":"@bentoproject/instagram","version":"1.2211111611.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211111611.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"f9c1138144838b5c4612a779bf407d2b2413d105","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2211111611.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-/WnLFJW3jM9IDQyfcA2kJDts4UgnvQT/0TMxnFTJVzXiPxNSUTc7mLV2glN1XpZ1HLouP/0mbJE5h5a0HWHf4Q==","shasum":"c7f43c4591c4be11c81f021ad5c0b8f9832c4cd0","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2211111611.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDs68X/iMlDN/c3s3UVPRN8Nhq7r2E3yg4u5dU0KFlUAwIgZu2YjNKUDScczZ5KtoIrWC7FGEbOZc7r9iwiL4l/4uE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjb1hpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZIA//eGpWyIQGNJ2Li8A3eHm9mYvcCifudTjQUBLsRCfvg3rMh7Qo\r\nt1thRQ0m9r6ftHQeFTZhU6D/i1BaIrbRmZPloSm+j87nzxnX4os7IaIw3L6G\r\n3zQDBcSpzTcmthk0I+og5ILHn8UyNYqwjtMryU8mfjXrRCTJrPTkqoGckOaP\r\nj0tHzqTdUkmHpW2BkD1nkFCeedeoNW2VGbNfaKZsLmsqMtIvHrHD5ohh9XKD\r\ntG5691XgrnBW900BnMhEM8H0+1h1kvPJYl3S3OwUEKoC9shAI/Yx71Qtwv57\r\nrSzAtR9CAyIIAaFNCJlLsNPPFK+xHSf7ceXoIX5Mp9jW893fwozNZhB/1FFt\r\nJkBvooASSGvzCLa7oah0frrI6cOH6wYxGR7y9tG7ueBiE56l7rptbpbIU1+h\r\nqqFl9vvSHbDsWZmaG7RTkfjNM+ADk+WSGzoFdFAgwaK89DtjBaf842CQgntO\r\nGqBYEnJmZhqJGv5q+cnR3LvrOK5VbruXRjmB0JPHyPTzP7r6ld5JimVORbw8\r\nWHm0fBk62RtoKjXBrVB4W/+Q/zSLGw3wJisUJitwu+ysO3y0ZI8M+t6LBZEl\r\nBkPT/qaTN4NFSTuWO8m1Pg+R4xWhTW1YFjViRwG9YMy42gBRGxPWlJNnctk1\r\nFUqa/yCN32U2rOd1k8oq+RzUhLs8mu098N4=\r\n=0RU5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2211111611.0_1668241513383_0.39348242180703563"},"_hasShrinkwrap":false},"1.2211151402.0":{"name":"@bentoproject/instagram","version":"1.2211151402.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211151402.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"db41c24bd071b6322e0a5188c4bd74aa94cb9d5f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2211151402.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-p0PrA5QUn49+2JdG4Fu0YT9mMRYCg1rC4jt6YwHNDCTHd5yfj/rNcA8rqkW+J8nA7V7AHzPiHaG8/o9DcKOEuw==","shasum":"4f8e5f6ceac4a3c3f1a165b8e6dc6784f4e72aa7","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2211151402.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgdOBzmkL7ZKUhojhiRxx4P7ZkZrJNNK4nmwpckRWTkQIgQIPyI0gC09QEZIPC5gJcXGE6UPneUvRG+UBY5pdVspo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS+hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnBw//SiFKLX4y0SkeourdPa/aI2a1BOMqKf8mwb0HB6zUZYfvCTJt\r\njyC9JmdRDW2goIu1OEv81l9rX7NRVEM7H0DcGgHPv33F3gyF/p4T3Uycg+rY\r\nCXpsqZ4bcTiPrpsSdbvbNqM6ya0nkO/aPRkJaJ5zzM2WFD9ocaUFv7noz3eV\r\neJX6pphSPR8eORsziXHeAkngoYBYXKljQ8qkeY7Gd1VjmTx/bFGGOht05Rn1\r\nwCW2SjB7bngntUOgjYWikIuB7oGNRCRG8/OglUZUd6J3fL1lKmaei9GS3Den\r\n6rwe7JY/W0bmiOeQVmRpxV9SM9Gdq/hj2xQQQwShb3+ElePz4S+7+xz0mtlh\r\nrOuWNBhCqNCFwJ1+qFsAu4MHcnzt4JVO6JF+ky53Uhp1WMH7x+aR0JIeK3r6\r\ndGkUf58V9sueLsZF97pIrwbpQyvlJ+d25PTIDUF5e7W7MAw5d8viCvXljoC8\r\nzw+C9qA/9SyJEh92BQ2scZrhO2IfQdtFnSMGdy+HT6RLydMvBhzjNNbeEdVN\r\nfs3y0A1Q/LFLC2KfdtiF2iCXg00Bp3b7+7mu2JP5K5Jp5xRV2bC5Z51bKkTs\r\nxzsE7xlAKvf4K72MN3CpUXBa2DOi6myqJDflRAzkE0rYI8f3hxQYKKMDpwNs\r\nQrA+wc11eik0i99WB0UC4r6fcfNUlvqvPsw=\r\n=RuCA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2211151402.0_1668624289302_0.673094592705483"},"_hasShrinkwrap":false},"1.2211182146.0":{"name":"@bentoproject/instagram","version":"1.2211182146.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211182146.0"},"gitHead":"d5bdbc6c36475eb2c4c14f2b02a112669f244641","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2211182146.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-mguglmVeZWbfbmllaB9ygcAxxrZlHETf8+iYkHqowA5BsHpfHPknjfAt4Ejn4oGsp1RSYwZ1oK/72Cqy8fFCfw==","shasum":"7db99694ea28d928b88610d6927e861031bae0ce","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2211182146.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH0/YNFxwax3/o0DV2jr/W/004x9+Aqwyp5jmAICXPtQCIQDsusJZ+3mjCCbNsZTsxkuSpnHhwuHx3CYwvbqxCQEiRg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJNNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoG1RAAlK1kkswh1Q279IWJOwUzbhXtDYUPnAu0JT0QoVOUYY4Uqv5z\r\nbrqysYXUij3krBLXD8pFayUJ4ahnRKEdZj1X5Cp3iNcBU2O+LrhAWsv1koSH\r\nTTmRWFurzI9JYGG+cOZ4+VXCYgUd9QJ4VHei+5H/1eO9uY5dJgtTxQ/uto2h\r\njsyqM3sRLvMFNcoFrDSmrxgd5PfcP6eKCPu+zbBw6PZ4X8eCBzN7hgO/64XV\r\nQNFot3A9PiArVllDyTc9xmpCxWQU6NpixpXx353SE8+gpr/L3KkBUX+rnbIj\r\n+W7Lct2vc/CJbbrVEnSyZwxGzsScs4cH7ccVAIqHqx54nDdFkMki2AgCF7Ey\r\nTSpZKTvdxpVE0VP1SUTmzzw1ht4vIHXmm8HL5zbymtrRvDUDIXgVHoFKVOeG\r\naNoAnpjodDJj3WnQa9dR5PFLGREUHsEDqDJ9nrbAPDy9SN9WxQqtnd+pX16m\r\n6xAV8l2iYrVFSZLDf2+znxPgQeQRFfR2wGdDgiDbtSLzR+Xgv0qaEnV6zs5A\r\n0lOpz7LDPTpUYvMHv+dew7g26yUO0z2+vN2J2B6WNK6NBXnykUqlVUqITGE3\r\nzQg8Owl5JjVTV3gfhazlwDIQdikxwbdM8cAUcD5PAeVh8jt7vIMVPL2edsMk\r\nONmXLrQd5LpQ1pRzbhEMuNRGGDUmdtVQvuc=\r\n=XGwI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2211182146.0_1668846412954_0.948693546526375"},"_hasShrinkwrap":false},"1.2211250451.0":{"name":"@bentoproject/instagram","version":"1.2211250451.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211250451.0"},"gitHead":"3f47d465c6e6f4ea83045b32b2c9f56eccb943e5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2211250451.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ZGnJ7ggFnsPjbs/RhOb2sgXFQ2lJ+P6owY1TajrPpdXSbfHJxh5l6+qyo2JOBiC6D7Sziawofe9C9yuJ/eyrLg==","shasum":"f78fec954ac2c4102436ed95aba88a25136ef720","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2211250451.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/9RSc06JgKI34uGIWHq5SXTw63es4pE2E4D2brdWzxAIgfFfsrGDUxN9dTAWepDyloR3/GhH4M18OaX5G8aqJhQU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjgHwUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmMxAAkk6iD67JHiBeckxsCuE/48RcgGov3rcvSQ4hHJS1UVdl8Lqu\r\nvhVgA4dP3b7iwbZT7EFDWI3jnYfrmEKc/7bnslYr2nkbd5LlkuyRvKnt8wtP\r\nuNdIGF/VnmQdwPmwxupp33pZ3FV3PO98T56PbWcjqj10GVhryZBr90MFnx/3\r\nayDZEHUHB/3aKe3srdjSl8H6IrTvyFwL9bNR4j9YHa4lt/HXmPh/hKxFqFvY\r\n51Xs4B6ZQNwu3Sw5FsMO5y8BH5LNbdNQwWFZD6+8byMo8f1VpY0hfRBUwYH/\r\nFbUG1mn0wkWFLXRFpCKfpvNzk1jAc8bm8mRKCjFEbS8HKDTm1wDnZcSmb6fQ\r\nQ3sevCVv9PS+OjiQjdqCrqtl+ikinnlbMOJT4in8AlfxgaSP796jgec4NNIv\r\nf5xUx2VRkzakkoebcMl4aJ86UXKSqhRYU05G4Zj4VQNghn88Z2ICjzOHgdsT\r\nx4MIFpSaVo6nv4RiaHFJn/LPlNIfuP4tH5nPYqvLCsFJP1CjDkfZ6+vCCsVY\r\nAh4se3JcjLbG3AH1pBQcMUhMyzDuhK5PJ/ko5wdVt7Letp85t+5QATLTsC/G\r\ntRIHb+E8VfcMJwN9yma37f91QZQDvcdXLGYqpulHpnq2bEPtBzbjxxFHbsRH\r\ngXTHWa/4yo+77ufktqKHKrSk5tyBoIhJBXQ=\r\n=5EHm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2211250451.0_1669364756329_0.3879997494918508"},"_hasShrinkwrap":false},"1.2211302304.0":{"name":"@bentoproject/instagram","version":"1.2211302304.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"8ec16ecf1bb95c1a6368ab455a6cfc7b1caddc46","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2211302304.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-px54zFvpmwpgdVdDUfyxd2uP0yYGy/X8sTm07XmzAcFV6cxDY0aDomLjoEt0EPdtH3YHwIErlHPXEfSUKeBTZg==","shasum":"d308d9df59c0590876c3bc18c584632981ae3963","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2211302304.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAHtFueCxIfWU2xWV6q9A6ALnoSztjYlXehzt7WQQZwuAiEAgzCZXhQ/WRk/S4ik3egC34urWDDyZtqYM/Id4clmufI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiGTwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoqmw/7BQXJGqt2jYfEv4fvaKP2hVyLfO1ntfLyKymLf0IxaGwfJRRO\r\nRDvydEmzne2l+N+EEY/eCTiNJF6Nurie/58wa0GER3YqmLuxTCkF9xrQYtfu\r\n+swzdz7RogX+Zx9R4+Ai6JeKnzG8BsosLFJRXdXYOUwO8OgZMqi/8VpOrHIc\r\n5oPVjKREv3BgBMQTgSRKq6e1SSHG1FAL6w+ASrT4E6rUASRHfFkBkTEU6I5i\r\n8utSaN/54kdHFJejZy9gS0SbHDxV2x12mdlp/FHvLk5N6JhjSmbaK3SIKMGO\r\ndZ6i1a/g2rxzzRLyOCpItrTKO+rmxOb+uClFwJ+xB0qy46wQsEof+lOv3bTz\r\nIfRZwK02oVjmHpDkPJJNZVQZG+UCm0QmGuNI/aeXjeGIUYAFzOBikMSSz3RV\r\n0XgAX8rm6X3tZg6ELNfo6o+4CPiySHMrgObfYCcREIOmSdVcoz5H/nqepFWE\r\nAlzXiYlmYpaGUQ9yw6V40Mex+Wa7SamTkwXxR+IpEbdRtEEWF58VpgnKyIPm\r\nXd4GFf1tUe30hpvRCiRLwSo5oxwlPZpZajbwnfBbfBTLzqShJivW3bPOaTmF\r\nMkskVeJQfPLAuONPpShUBB5JACiy8wl/T6QDx4cdToveAoVMm+l7Dam9nuEd\r\n5uPsdR2dRL8UiUtKSe84fN5n/1Q3KN9nhok=\r\n=56GN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2211302304.0_1669883120513_0.5281152398843856"},"_hasShrinkwrap":false},"1.2212071834.0":{"name":"@bentoproject/instagram","version":"1.2212071834.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212071834.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"9e7a659da459058028a29b649ceae3a2dda7771b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2212071834.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-UpHhJxP47UK9Db9q77/c4upRESVPq1WA2CMIh2pCS9iHSCcHoJFKPnB9kbYMR6hkE76NiqCPF1QzsjwCV42fJg==","shasum":"8fe39dcd58154b951fb7571fd7c07e3b054156e0","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2212071834.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHsjmSOEQjxmeoaRQ+MA7QJJRE8hlmDBiQmGBTpUKdiXAiEAyKcIPN3xy9tjl9oQZSGYnJMK3CIvAeN//lihEILOnVc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkOxKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJ4g//R0WjBiHq2vGPNOITKAoHmq1WjmRpj/jbJcwnwwSQbPTiZweV\r\nxHiloSvmbhnJ2m4VSF02JVm3KfbwR/yM5BkvPe+gc2RB8iXS2To/WrjMfVSJ\r\n4aL8GUqMDgpVIEhz3hfzWFBA/TCN7gnjMxntaqp+Bu4MpyxXKc5+8JdOa8/w\r\ne7dGzHygNF79C+EViZWyhXf9YQpTlkeY6D7wMCROUufijJuW5pVoHmxaxMxQ\r\nhW4xBRDD3yzSJXMl8S3/lm/GIo4vxcgf4yOC7bjeEOkxSYTNGs1n9xZ0BOAJ\r\neR2R1y+yufM2sO+m56H9ghV3w0NEEzpytQXRINEhZUVw/sZisxIxqEhQMOT0\r\nN3omB/VXPRklfB2P4vKIBNmwswQrGtnY5miNPEbOR/KnST+oryTold5ggqCQ\r\nq09eRxv9Vb7YcgoUE386tuzx23IQ4erAC6cmYxpECdmnVJKgS/JysU1Cztat\r\nlS0f3Pii/eCkoIEVPbqt/OOr2vK81t33uNxBfBaWjpoYpw1qVlT7ttg35lSz\r\nPa6XDharc95mEPeoumdkMyOXQ/VbP38Hrdz+0W3a48S0k/h+i+nx0mj+MIm4\r\noPL7NaHi1MHcJj/tSod2f4oZvQveSPV6D4u1BUW2j8U15wwhObQ4jTPp/sX6\r\nVgHzfP513HrSuU0oiE6w3ZrXTceSE71Uzqs=\r\n=j71n\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2212071834.0_1670442057906_0.7802273190378302"},"_hasShrinkwrap":false},"1.2212092023.0":{"name":"@bentoproject/instagram","version":"1.2212092023.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212092023.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"16bff17f2a3e911f517c49d1fd2c74c8089e78e0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2212092023.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-0O/b2P2MmS0//CIsyGRnc7NkPI1LkM3JglFal3qSQb7WixRpM/aweEjlMLwtjgknDZKOJwCeC+PJgCjfRE2eww==","shasum":"34ab5d201f3294f6f7d52a3e22760e0dd8b4fa7a","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2212092023.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDVqF7gelpY+6UMzHDb7kuzHKO3cUGn4lBrBVLSUAtK7AiA3bt8L3Zc3mLjZ1wIFJV36th+ZIqcBtro8F1/+P4+z5Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjlEK8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoa/Q/+MHrAk1cvlxJ5ZiPl2ixMOMtuOoeCQKslREWnTbe+EOCdpZtC\r\nNQ7kODtI7UFtsegbhb3jsPtaNvvzslrWs1FdpNnPVgeSwF/LisY879L4jf7h\r\nntInzWEXWJxk8mLk1XZay1MVuNwtY2jsZHSDHFLaRGNV4Kc5RpzkYHIPYsxG\r\nEY2BzFcT1Txz0pKm18SAhCHbt+iZqjMNxVqUu/u07DlQg08C9g8u8dKoS0C1\r\nm0OSTtSWINPE2YOe6aGS29tTkmM0pxE3afN71rk59ZoWmBwH2RvPG6X3vfE8\r\n3Yb9TVfyJGMK5ib25zPzUenl9QW6zn7N+X2ZMdOx15SFVoYzzQDAyhqvuRId\r\n99Qr+p8HDxyuLYfc29odD/uohdoJbQb64YmBOKX0zTxik1fpL2IHMz/56bDZ\r\nIJoeFV86X/HKVj5V3B+PoP5YHpZOlEIcgf+FreNBcaV61hRbB2a0LozhjoDQ\r\nGPLizvZr6ALj9EzG9oY+zYk7a13Z0nUXPDKJFPQveTk5YHobFayWaC7RtN6i\r\nqC5jp8CPiL7LtYvxsCmMCdX6o9a5jiNraQw3o8aiC2TZQGKzkTrHQgH7XhZR\r\ncx+Ccb/etfjr8xNAIeqOzFWGo5VvqJAiCJpnUqqjc/SGcNIRpFc/8y+3ARLf\r\nmjF8Zgy6ZRqKWZ229bcOTf4bqrzDJxLEpZ8=\r\n=lJs4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2212092023.0_1670660796191_0.3710892006514672"},"_hasShrinkwrap":false},"1.2211302304.1":{"name":"@bentoproject/instagram","version":"1.2211302304.1","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.1"},"gitHead":"16bff17f2a3e911f517c49d1fd2c74c8089e78e0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2211302304.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-+wmCIZ5q32mzGk6mGGAdvDxHqxhr0vnWNqdoT6dlAghNHavJhyJr0uCQm6BjpGT8zC19FEWJOcIuPVpBpnOcHg==","shasum":"fab476f0a908880d9f00785701785df95b7ff469","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2211302304.1.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiAOYqy/rQ6pwpZNeliEy7cXo/PKkqPD3vhfxlv/jdzwIhAJTeg5NoNfYku9zNK+VKXe7I1J5nTgto0ILxrsBCekqR"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPR9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrymA/+J0XJuZ5HmFn7D9ti4lD3JCaBnIEZgqIBmvbcEzmYA6DxEbEz\r\nuIQv5KbsyuH2xh8gTotgBVbDRH7xeQxvV3b+USZRK4ozxiPWPAiHxc0Ejyob\r\noxF1+3H6YriSNReMI2cwd1FZ0xZEe+B0jTdXq+OKN9lUcZjXudeijqQnNGb9\r\nJL571PTg6Q6kfYlIcDeLUDSr9NzPD6OhPENUjoQ/qm7MlOakML+ACriLzzeZ\r\njHbgY3NBgqh2Usj2jddf5VS0kWRTx/5uCpZ0URbcHjG2qQ/PSzsodQtuXIeE\r\nJEtH+Na48tyf5woAbK5ffPhfdUlwTgJQ8LP4Pi1eJtODcPLJXZVT7ep05tA2\r\nif2pLz9BS6122nimc6eKwwK03hK/EqqtzlypS9WbsBdLyZzXhmalX+GMEo65\r\nZHT5WtbMApop/ezTd+fBWVc5U+3Eyr6awRV7l4g+kiblTpWHk3irhauXe/Qt\r\nA2a+fmIEgJd+kplljIqBjfTgkJ/rNlXMLC7WmqG/OVbamHjlf2DUwnAFRQak\r\nutgfPmLeBRsbZaTPXTXhwpqt+s1I/tkqrZMZeznr5q+akDashELuAobItlv8\r\nBKPBJ+zeFWGBVoadWcCPWL8TUcpiVaTtgGXLLzsEPQKZRiNrsjULrqMS9IoJ\r\ntH+9b5ZmeP6C2cNUgbWmjPmjNNd41gA3ORA=\r\n=0QOW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2211302304.1_1670968445648_0.19743265729917203"},"_hasShrinkwrap":false},"1.2212151632.0":{"name":"@bentoproject/instagram","version":"1.2212151632.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"6754eb8b2feb7d6eadedb57776b91613ad5d6dcf","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2212151632.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-WRvSZwwfSZENkfBsz3kSe9oC9ADd0rcPZ58kj7w458fojqCvDVvb5oihNRen7W4ITzf07vPHAUfV1kQ8tBH7Lg==","shasum":"bfc0d0b731247b213cc2a30dde986ab26590d9f2","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2212151632.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE7C3Lknb/OInkOSDcqHvAoaqVEYT609Jno9eEc+SZmWAiEA+aXHGGSM74fKV6Q+GRs1YmM/zvcazv8rw1djiaWx3Ks="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjodqTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaZhAAnDxAfoY2vzieYF9CNu5xGFjbQK3s8ojB78o5Em0aYj6Rfocf\r\niEpYaygaoAkL0u9rNLIHSfREhFsmT9d91cc4dtvbuNHCWrjqc1mQP8rXhfD4\r\nfyV+Sh4LE2byO36DultVHWdNhoCcblxyhph0Fi/D6e9wM/QkULC+W+AXIuqT\r\n22qoqGNBVZeNGCyHqYCIJf1L5eM03YjEEhdcBCJM4nxHPYUPOl3XcWbIr7Xr\r\nVaCi8XbSV5w3zju0Lh6sW6AweZGKDkf/fwf7IDAj7uj2oQujLfVD1WZNtXn+\r\nLHQ7D7BvnMSA8QflAjwwxmvZZHdQBv8lZjXHS16DEqGxywh9iG9qmQUXi+5C\r\nYQ2aaUUNTw+72G7PPobgBv2lDbrVd4okx7bUwuiD+6rBdTcqIt6/HOkawiIK\r\n/IXNIPH/XbPi4uT41+c2NpojMDG4tNgadVgvyu2qDsZmHbjvjTj3j+bq5DKc\r\nIKb7vGYO3uwDGSb++lvhBhvofICMJaPzzDZHpyhykxtLwNQ1GWtwV+vYr4OH\r\nlIGQz9NYEdS9JcImvTdrg/MMEiViVrbo+FiKcjFsEtjmoBdPaJjG5zQOx454\r\nnVCtPAjVZLZyv1oFIyoN1HGsA2ExhpXE6iuxnsqk7QmU6+jFyTG+Fncl+tt8\r\n+VS2Hd3LjWL36qDnNVP5UZAy+ja4J2MkzQM=\r\n=bjx7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2212151632.0_1671551635324_0.3239798564227103"},"_hasShrinkwrap":false},"1.2212151632.1":{"name":"@bentoproject/instagram","version":"1.2212151632.1","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.1"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"0daa515ff1e284cb2e31dc8fda7f29c073e60b60","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2212151632.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-IPFbfYToHDlIfSyDon3q2hNUZnFVy5IzTsZiI0S9irRX/LarJ0q0/SpKmOqXLUHrtxVKtHEILx61eE+4hfCJHQ==","shasum":"356f949bebe406abcfcbe2b514d12ba0e39753fe","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2212151632.1.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAfdNZBZQtbn5nVU/QWMGKsv7sy2ldJRRrwtk2ojUKvlAiEAg6m/4ep5+zzhEXhKbMrkWBsYXab0xehaGzKOB6F7QmQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjohbfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqM8g//SJ75gN5pqQBErOqRSCpaEKHSAsSa/a31X7UnqD3eXWVE3yUn\r\ndyICrr0oly/sldDxYGwlJvZo31dfAnUn6rVHw4fxx0UsGuNjvFMUGYQyNdHJ\r\nrkCWg+d8CXeRDA9DEhqzKkbUVZbh2YCGsR6gpyPt48aMdi7qpG17xvuAPuzV\r\nNkfyEIs3rXXghPXq2ZypLvCUNdIsdUGXdks7A0VOliRzyWDFTQm4yHp3A70h\r\nDiadUcgp6zC39PKl2bdxfjaIpX2SVq+Mz+ZmUpMoIT6+EINso926GZXrBxlU\r\nf14jit+epyCVHIbuUJ4jdp703v1vwEoL5+qNyGkchAqIwOXjg4buuIv1pY4i\r\nkzoVQmIDQ6a+fO9BnKr2xj9wZWO/OICTXAD8wDCg8UHh7LpQ/3NfRljlGYl+\r\nEDcMHPvtQsQgQTSHOONsBUynenibwMDKqvdOk2tfmUsXq+gmAcvaD9LXs2Ex\r\nNbwGxhwpxRSHkrrziPbTkDJjv2Km8KQBa6Q5jEPiUDOlzTLigQFzNlQ0NNo3\r\ny//t1W8A4/GvRutYI6Qj2syua459Aeb5rLksg4XPZgaEmi7OFsXRMnCZL/2c\r\nkFxulM9oFs8QeTnkAM9ORD3mtqnzdbVrWIJBMDN6r8OI6rYgNe89eAFXz3hi\r\nSTfYiskVJB2ETB4S5Z9WvhSXAYf8dWdIc2w=\r\n=MmkV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2212151632.1_1671567071242_0.706297577234952"},"_hasShrinkwrap":false},"1.2211302304.2":{"name":"@bentoproject/instagram","version":"1.2211302304.2","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.2"},"gitHead":"910a4ee7a16075d9db8fd2c6c5bfb607f22bf54f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2211302304.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-6May7T+ti08H4UVmnQYy7CHQvu54S2vpVwvakso59+OlVia5PVhXtFDV/5mWGaRT+augVqMibLQQPHI7j2132Q==","shasum":"cdcc0827c297a23c0075c3c72cc916c5d31c64bc","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2211302304.2.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCefyf+SyWJVo8RgYl8Q7z2DZl2qhW1pI9OVyUQ8ELigAIhAI1Aamh5Pr3aZ3Yy6faRWNsBX4qWG00UQfk0XbDVG9B9"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjojhWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJjw/+JRj0Nhiz/K0e//RamU1D+aUTErEiouVpMT/ssWqJu6/98pPi\r\njdp9+M1aP52ugSHrhthZbTmA2F0yVVm6OMZDSBVtaPh1P3EpkXw9mlaRIdyN\r\n+wdKBA8JvZraAfUNypmGq6PDshRAOUPAXQhUxGpVSDc+r5lEvvCBYYgK5xTo\r\nkTcgiBrrwVf13ROzxFWcOXI9vbpoLoTUPmR3o28T7DzhpgaGLrRR8j2budz2\r\nytzFVLt55/L4Aoh76ZGUpvYPpT2LD2Sy2Ftr7OH2CmNpNi6VzbqTiV8+CKrJ\r\nsPB+0FSa2QilrROKalYqdxMTPkhW6j+eembuekpC/qjsEVLsve4tuw5Hesdm\r\nki/g9PHboV17cbSIrjpZO1SZW6X9g4G47SAfGUBCYfz2U1pgU2rnw/GTUrFd\r\nCVTFs3es3bu9L8ViXXqSetlXthqEYXRg4d4zSLkI2nd+wc0TJT3yVmqBn7ge\r\nB0B9ykPRdAi68XnfMryAqdrVvNHxXmG6zNEflUwMiuxJXO26iez4/15IQiWU\r\nQ5ShsTcSa+q7vfF6NZpb5q7PcRvIiwImmGwnNdrclcZno7yyAHXrmkLA5mr0\r\nXkQ0R0Z5Mr0tyA7HBE4ZcewxXYVK0uqfnHYYncyUdxHN8WW+3nABbRGsTMMU\r\nCS0J1BjbmZt0TLIR7ZR7ZefocZmsM1bnLbM=\r\n=4QVv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2211302304.2_1671575637836_0.4907967081084803"},"_hasShrinkwrap":false},"1.2212151632.2":{"name":"@bentoproject/instagram","version":"1.2212151632.2","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.2"},"gitHead":"e3ba25e45c2728fd6b1c91daacfcf7d0870ba6e9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2212151632.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-F5ByZNKYAx/dfs64q2faXzRQ7tZiUX/r3h5Xf3/4/O+Et9LUPSjJJ7ko/mM0FO50oOlqFS6OlDr3LQJfMRH2PA==","shasum":"07165eb86ed05623b5575992bbaca4b3da6011f5","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2212151632.2.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDlMVvwy14WMsN3UQPPoWRjgANV1mrG1OKPWV6kzm6biAiAdCgksm7Z4ydOcDc377kcs6JV2eNjD3qzzYNXxhdo1HQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtHA4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHFw/+KzkZDh3UHn6UlUG1qHhR7s6Mmbjza26StK0OsI3GHvRQWlZV\r\n0saY+oOcMmpgkz6mpVYIDisiBzAwezvwlpnbIrwgz3sjAKcNdtBVmf9Or5Ei\r\ne5Hu+y6h2Xc9+nOjkzBGFzTpBIRJFm3Lc40CwdnzkOFGgDujKuH13sBp0EnZ\r\nm84pd3TsuszNkxYnHDrhFxac3EmBdlpgIebp162wSjSTFFt9jgZ4JRUM/u/A\r\nzOLuEfj7obJGSfrjD4xGgIHTwxa8RWO6g2hjYgYktg/etnTxbK+UtcOfSyem\r\nrdaxraJ4t/Jb75ml2CrAY3U98Ak121GX2a8N7CQVqTvfYTqXH+vQevLATPIC\r\nqrI6kolBZGJEzE/GFFL2OQoy7Fu9ekw6jfk9ZRV/yzv6B9MP+LFQnXZVaRz1\r\n8R1uOxJGTCqvOHIYZwz6w75OLeS3tXGFRMhr7Raa2k6ohJromiOyilVcL3MT\r\nVIyDmAJoiugyf5CF+bdFhefYr8wjGWvWFmG/21dLpoPidCo3xNniGUYZiodR\r\nF7eE7w54zYe6GdWmCfTsbzhIlnIvWgk7eKI8Kc4zbMy35iLO7nxK5W0+4XyS\r\nm7BHqdYwar2d3rJnC2RPt8Jpm8ZlOpDrjp3Oi52MBGjwlZ5wW3KqCf+ie1Ol\r\nD5JC1tCVI7dm0x/SyXjIrLj76/WaYTCzCFc=\r\n=QBWm\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2212151632.2_1672769592482_0.8725482052378173"},"_hasShrinkwrap":false},"1.2301031703.0":{"name":"@bentoproject/instagram","version":"1.2301031703.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301031703.0"},"gitHead":"e3ba25e45c2728fd6b1c91daacfcf7d0870ba6e9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2301031703.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-B6bon8q1Cpfh9oNQVJQwfN5GHLPBJBfy9GcnPEXR0ZHFk7hgYM7X+22rvTJvMauuqwN0a2rNsTUbqi4LQ1aqmg==","shasum":"941549e9685253da8ed4dc2ac4263692ca49e8f7","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2301031703.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDM8zT5oS+YwqpH//hP20XJQG3BzR4GOOrT0HtMzq+NAIgY3nPSCwYmhDAuyfUIYY6kUp1cPP4lD0vdZcLkb//GNg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtJDHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovTg/+PbG+wWVK4htW7XrULWvm86pzWJkpI0eAYhzUlu/yRvCziGOG\r\n876UsGTP9aIJbPKYATSxesTIH8UoIJ3F52UHDiPpekTuG4K5iBxIaykTdCLs\r\nkuQd6DjRg5wbQvGXNffMpBefKqzMz0djiaE4vWcPAXNHXSMw4IaF2ZH3Oy09\r\nNGUYgTA9SG7CR0LA5hDhj3Z1wRGFk5JR3+GOsEDOO1Orzz6FTBagTQudfnaf\r\nTVxQzxGZEUhwkGz1F2qoiNAr3g1OmKACmjsVhbxW1k8f3uyrM+QibJn3QmIH\r\n88mtGXYELT2kOGg4v5lIsp4ljzBlVriaq9JQjl4p8b/bm6aPmeiJl17d/tuU\r\n2bcA7ip6TQlcuQRKCAGNwlr8/ZgpCAn1GDBgioNyk5t0lhseVFe/2MyKF6Xo\r\nS37A5SRbwuh3CqNc5UnijVzZywg9Un1Uc7w2MByfhM+L3PDBXMu72zocFXB/\r\nZRKWdn2f0rqA++TDUpqvbAVTMBikBusFPk6AcIKQBhsvqfQI8jVcnKABT8Cb\r\nyJ6izACR0rwpxCkJgSxTxb7mDwtWHu/pNhbPMGBMTx7/C5xRiyEYq2qU73d/\r\nV14dPGq0T1QtCEJ+t63ZUKXjkQBFhvFMXIzapuKt7Nudg98zNw+JZ41bAxKv\r\nN4QjAD1oszE1cx0AHk8zodQIO/guo9/1NFQ=\r\n=D9Rx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2301031703.0_1672777927226_0.5565012270970768"},"_hasShrinkwrap":false},"1.2301032153.0":{"name":"@bentoproject/instagram","version":"1.2301032153.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301032153.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"418b16026c82f72bf8e885668d34a40fe043c9b7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2301032153.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-yJqR+DIbjXbvciV2Ttx2IhxoYxy6sPGC0o2Keqlf9NlCpxcxlE0LmqAYa3kpC5fMfY66C2Oheo419TCk7L0I+Q==","shasum":"428b51ad4d1dc898f9876d157f14ccd14203756b","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2301032153.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRPxhEvBWy1ci64+7wpeiDm/RBSlg4N3kBqmh0Fi+//QIhAO42PAiE0FnaaCIXCgurCkQasirCN4EQLYnAySeV53Ee"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtThkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmomjw/9EyiQeS1f/W2melCPC+v9Ly6xOqSMv8A+XM7OXUvNda87V/xr\r\nSFr0k9C0ssHXY6cfzwooe31IPSQczZ+do0mv7lMN1JtmqprDA54hfxHnH/dl\r\nMx3CgUT8ixYpCFvk0NzMI6dPKO4RwrViO2r1mTl62df5eQS2G4ZpJVQ4GDj5\r\npTkDSBtqcboJEY8ziMiUjjmfDB7vAxVCZ892FvTyQ0jCMZ22hg4/axjacGr7\r\nVmbX/Pf+3Qd4JENqVhf6b+jWas3QDlFU3F6gAPU0zNzZiHqTXDf01bFraRky\r\nwRt4Ha6qNzLhObuBgKGnNygbF4I0UiaCHGRcocomBvdsPz868cFoyZalE0HJ\r\n+9JAHUi8HFKrLbiRC8s2MnYMPXPDbdwMQZJcjrhzQzaiL41zT0qSVOnkdDXX\r\nrKHlFITMXntiQZLDbdIOZud8FRwTOnfFEyUD+QR2N3KukNQGikXGNeuLVqQ7\r\nptsdYeSCcEttanotEGG0j5vvKMjXND1YTgTWKKQDIpUWVTZikV+BRuPBZ9wW\r\nW/KYIwlxphF30QLMdhAMifqs5oEcc7g0+QVGIdor17ZFVJjQW2m3Ids2STFq\r\nhj3fnuYoa7Kon+o05q930G/szOzUzmed+bgOdYDlXdf0LTfBnmQkULENn5b8\r\nBsnljp6c5hPalT+cJsUzt+zx5nwQvyMLY34=\r\n=EdvC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2301032153.0_1672820835676_0.1668118279257862"},"_hasShrinkwrap":false},"1.2301041800.0":{"name":"@bentoproject/instagram","version":"1.2301041800.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301041800.0"},"gitHead":"7026aa71b81896aaf30f29b822e1a578138e33e2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2301041800.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-BRyQff+/bvi3/zKn0Jqmw1b153CCPlpxlyIaGHvtk4xRZt60MnWeTgs14vqspPP0VwykTtYOtCpZgGONt0kSBg==","shasum":"b7d224e6887038ed8f27cb7e42fea2b567795a35","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2301041800.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFPt2TvJOgajibywQScMgB24PwYuxLMpzkXSLO/1S1cuAiEAts6GBXJnMGef/i/P8sM8KO2HuzvCKppUocUwRr4ltWQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtongACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqB3hAAg3Zvw0UlEpamCU/FLzjuyvLhbJBBruQuOlk7cOB+SE9DaX0F\r\n2y4onr/CechJ8NDUhlTo0wr9CvxixvbtTd+BKmVGxHrABEDx4vsXSehOQcyx\r\n0OQkU7u9Ko2fERFmwVBNcR8t/OTGo2uCDNrKHPryd1Fcv4S8FO85DReKkNRy\r\nNZvGP6P4PnrbILvJo1t6oMeuLypH6Y0apVtIABZqKn/qYqfffmPc7i0zvO9z\r\nmQC/jZORPw4Oceu5ZHuSJN+t6APrR9QaeZiQyO8CewSu9tf69TEV7AN583g2\r\nWFJKZPQHRfZJSal85usNj7G2uze5IxIk/ERP/bTCGG0caOSRpigPW6AuAT63\r\nahP3WYam9xRIx0oO3iNjB4ksgPGh3ouii0vpZHWk8rbnDmA4Bs9pmubSiYcq\r\nhvuhIGxK9vaaJGMPOo95SeM/hP0BQ0bJgQw1oWT8sTFurU2C9qYlBD5wMU15\r\nZ0TnEefTtpqiTdGA3e5pS/ZFUMoI4aYzBdh3muOeO+dtge7YoAkGR9sSQBiT\r\n2fwEERuWVl+dhijshf/5Dnu0JfZ5mrtzh+TK2cVcr5Xm3asgsif1nETFpr6g\r\nZB+Rd2BKRIsaa2I3MeRG1UVYWWM/+OBpA4i9xmq1Cw/MqgmMETBc1uzubFSC\r\np3C+YHa3YU34L1C8tM4Id/+j7AwwzqMhxqg=\r\n=lzvH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2301041800.0_1672907232091_0.2964176486172183"},"_hasShrinkwrap":false},"1.2301100345.0":{"name":"@bentoproject/instagram","version":"1.2301100345.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301100345.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"12a8a2eb9a3656064439da35b736023090e7c78a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2301100345.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-OQgfYbojsJ/095rDfks3ywUNnG8tHyIAbjU+mVF2G6OKIan5tKKpcakXpUuKVSbDRZ0A3DuGnEqDs+l1yQLCQA==","shasum":"12712ef3e988cfcd2ee9268e69625e1bc03dfdb5","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2301100345.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAj9SpuxhwFEC5/7pu2RU8pieEYfyrLz9bB01hPfV5M1AiEAzCoASsc+CH3nFAi1u9DtKDQ010Yv9SVaZfYHHPM9Mvc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvSFTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+gw/9FYAPhyFPP2uN1CTNVxx320Fr4wS0eNatSBEp4jarnts/DD/M\r\nAKfisAWCFFx59SfARCvn+Oz+C0ivPBWp41jaw43t4FsFvpD8Rt3M3vG/U5Ik\r\nYmbz0X0UcdZGnZ4rc/AlsorBY7WlZAiwTY6duYzj8WeBqBkNho8Xe5e4J3/o\r\nFyR9c0XDvPA+sUAULkkQpW5OlrjDCE5qXXI0F6OCeP8Wc9Ksh3f3gdJ5JrSJ\r\n+YIedtV9lA8crByteajamVWoZ75l8NvBjdLIYXKNM+RbzKZrmVAdTYQY9zEN\r\nELv0a+zPDEwzTphlNnVJDEl0sUJw5DrOfS6O+uJNa0JwNGp8Xig2WlzyH0wH\r\nODKqcfM3XlP15wsA5tXx1gYg7wIxIsdHrSS2saaAdYjpfk2YiU4uewKFN/5A\r\ncx1i1PG8cwzTHhBA6ZEUQR6zWgT5bFwme/+1RGihspWgM0yss3WGdWszhMSI\r\niG4BFGRpxZ902u5F1XhPCu3Wzup5w9bz0u5TR27HTO2stCVkIhW8VxvKL4TL\r\nEbiK5imIxxTUPhnJz4defXOiZOer2uxYnWtKX4Pk65vFld1g7Lntby9nk6iY\r\nCypkjQavnMHvgEs9erA2Arag7REyTvODY30JrMPMUGOGiBNbhfsXbGn066yp\r\nSrHZ4JAoSDjPwJJQFfcghuUcM6yhFJsXxTU=\r\n=4qF+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2301100345.0_1673339219701_0.36086370864619166"},"_hasShrinkwrap":false},"1.2301112346.0":{"name":"@bentoproject/instagram","version":"1.2301112346.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301112346.0"},"gitHead":"290809452fa1006da1ea148fc925beb127bc65a4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2301112346.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-NUQLPoNdAU4kH1IdfFHkchyKikO9CTknYM9NtX/Xn7CGizgrSZ2j1KUpyP1twYv6LqHM+8PTcNIAgyz82ool9A==","shasum":"fbb71c9d7a5e394a432927fcea59b46715600da3","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2301112346.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAOU8yMzTjXAh55fug/NUrGOKPJPM9b9BDyLfxllbSAKAiBRMvwXcta8P4cM1aLKHRXAVRYQtGXeK/9hm4ZYfdOPGg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjv8TFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2HQ//WsdR+JOHvM7dbVgDocBeWICWcCL27YmwXtmqJlLWIQRixFP3\r\n7u2l5z/HeSyi3XZ4Ji1UkTltp3YG1tdkvGVRLO1TUOgRjqpvbfO3pGJtGIoH\r\nxckHpfajHBs5hxXrM8gEVP8vFr8Idg64AmN7U+gdSSI8cgqPfYv3OmuoB2JO\r\n1yUt80b6je93aCfLBbRq3gFJG08pMRuED5p15F5Ef7g4OhyD52XkK7r3NegL\r\nYiDZP2Ln51Qvn9iXIeIX2W+yS2vAgBeHJVvG43tzV/M9972yiQmJEL7//fuc\r\nMGsZMmPgWTlQsJMo8HZbk+//ccwHtxn1ySYDeiycLW+LGs+7QRvidgQ4yAh5\r\n/6wWi5cqVIK2+iGpxDbgNapGqHYh2Zp7mUftDOy+C+QTsVykK8j46v0jG2c4\r\nTymo/xOdB72A72vtRH6JUpKn7fgSk3aVzGI56plCLBXF+lPax/YBXSmLrf5i\r\nwHq3HyobjGL1IyGJmAqVKK2Qbs4AVO9ycTFFwwGWfVpVGjkaTdGYaRju8d5q\r\n5tGdBISETAxdOp/RhNA6f1fM2r8obnaoHpT1Zv/9YbogEwIVdkhjGdNlVgSl\r\npwM/9F5UFCURcdwKdsHkn3XQ6LeazkdX/BJWkvpv6g6SdBjbgl3o+QEjYe3C\r\nIi/qTRVTVqxlfegGaPs/6Y+kAHszzPxL0Oc=\r\n=+8WE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2301112346.0_1673512133215_0.6187186777465197"},"_hasShrinkwrap":false},"1.2301181928.0":{"name":"@bentoproject/instagram","version":"1.2301181928.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301181928.0"},"gitHead":"8d4b04c8f4aed6f3fb83e6cdd785a334ecaa8a4f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2301181928.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-dJ8ojHi9LUBcImnhPx6Wj2O7b6Pis8pCTPALqQV0ZgG6kQTRJJDz6pha9niVXr0sZ6CCksC2DdJlwHQzyagooQ==","shasum":"b101030155a2443b60f9a5b92dbd94f5c2d1c432","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2301181928.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsdjuMT8DN1zl/OsYYa63LmJhIhGViTB97sHzbKZDPswIgJPk4+K3isfz5P9VFNhGUusZ0WGsqIFdlW2B4k7JSYvs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyP71ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrX2Q//Xsx4Z2KyuXMFhj7xCAZyrQwIX4B7wFToMToncNtNFoRKc+cK\r\nEdrGpGaFBkNcYiX4Z/Xnvx5ZqsYF1ua/CAEfIGMa9CbSuJXWpk6R31S7DtNr\r\nqxy/sIo77ZcRygOKv85kEdBy8m8tK1eHKLgrQou3LvBZBWKrn2S2/zud2ga1\r\nSvtWskKo7Yaho7VkVLwQrG/NxRV0jrEQ9bFXZgbhx3ifplHnSNVDplnMy4tK\r\nRyDkYLL7P2Prpp/LWNHaKQRH1OcNpvRZ06oFK40hnhHNDG6r0V8CPQmFL6XZ\r\n3YLosqwlob0Byxn2ac7aRmmapwZy5UIFDkV9rRLslHZHGMvX4tmGLSdf5iMf\r\nqOLbnL+nNuE5GY/CuDZk98VSvUrTB/EbhE9v/pihZ90DcHTtGMW5JkEm0Lu3\r\nA3+I4WZjsmT5usyhHtXXGBlnhwYQ2varY5bMLHo87smq8wrcOLSDp6sBD84j\r\n0jGVEVAsvfX//SZ8ezgfTy/uQF3nhGNSB1swW9f+FgFtQ2T+ypP4Gbab+f64\r\n38A8GBm7hgaPUdrdZtykOa+nZ1lA0810L5Xj3RCNRrl5iYQ9SRmMArWIB90p\r\nZRFmMVq00rS2uGU4erY6kvq2SMKnbm2yrMi32DyFKaqT0NwSP2Xf9cZ1hOOY\r\nSN1XR0XhlxnJHld0UZ2zNlA6Z6ciVF8Dm6s=\r\n=Cm15\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2301181928.0_1674116853630_0.4740057323041438"},"_hasShrinkwrap":false},"1.2301261900.0":{"name":"@bentoproject/instagram","version":"1.2301261900.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301261900.0"},"gitHead":"a6ea9dbc37fe6d4b0f68e25838c857835dd4f7e7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2301261900.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-zF9kfbLsJ57sE9AmRVtmliKaJEotxf36YKxd0lG8epApVKecVtGhnFKbYUwf65J/OVLOiLJ1aMcPZcueqXG32g==","shasum":"c84c5186c2bcef20b035e0bfaa8125c63aaf31a7","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2301261900.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+cUBMfFfGCIL1MgsHKOHLRFMXex/2/fBdxgstLev1vAIgQhsO/NbBEXNpqjma5pNLQE70CJGS7CTIsIFq743Ep1E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj04sdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZeQ//Y/LyB32Z5Nsbgj221z2hEQUncBYlfVb/HpBG6Mi1EL2nYzos\r\nJ0Oo2U0btRfuHZCGMkO7WAGm0h0FD4qLzgtJckZu6gjhUmAsnb/7jS7t8wFk\r\nn+H5Z2WlzFMq1P90yLZ09fglSKZdOlg39vMnY20fU6RzEs11b48NOkrSkdgf\r\nlw3wd6SvboTfeuXtMvqG+tt4gSQftUSuR1m2MjsXMs6Ub7pFNa5mvIT3JzL4\r\n4I8dmlQkOWQmJAt8oe6F9i7r/ccj3b53xyC0roxuvCdXTp/4NRhVsh2fAhRL\r\n92mHOKf+2px9JFBzKPiCcFpv992V5k7fPKC4jFTL15wCAmOSaZa/I5NIcTRa\r\nDXbfyOF8MwJM/8PR8mxfnHnW7PblkI9EV2gRB0mZn3ueN2ILT78BR1Y6Vf5m\r\nTJ1J+g7LLGZiHgkeJM+dy/tCNYsMPcbqQ2w0zdxGSkwbizqOnnpY342atKpV\r\nqaehZvJ+kzprb+Wx+GJNA466+f4g9GwobRlbmzc+KPDGj6fq/s4gVWI0NZ3A\r\n7CC0nuCbm3movMjHklVB0GDWmnKd9YrSeWAyi43U6b8NIxKRupCKKy5lGUG6\r\n3zdSwM703g2QtfgQrvROOoHxWaA+z/n5P0lXT6pjESKd/EgpYvyvKOVdfpzw\r\noLgY7oBr7fEiaJNjzMDuUtQTrVm/fxbKWfM=\r\n=CT2T\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2301261900.0_1674808093146_0.9094391767300856"},"_hasShrinkwrap":false},"1.2301301810.0":{"name":"@bentoproject/instagram","version":"1.2301301810.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301301810.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"06d7a2baddf76737d7cde110a7b4bb9351feb38d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2301301810.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-ertZgAyoN9CYTOegeG5y5ctNv6P6rzBlxoNlJAYJtf6iTJHrXDwtnmrBjhUXvjrx1gkZKlsnYo/LNboe8dsCfg==","shasum":"45a407c1981dd49bf736d01f179c3b5e3a7bc0de","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2301301810.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmZ9GG7MgYccb08AfhDioI5/1FyoYJX6Qkr/3oNH70WAiEA3RTPIR0RRNKthAdYXgftreI/37jrefpWs29Rc/zwMK0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2NEXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqqxAAmTyilLLiSZSqKWqOrzB9CDtAR2xTuIb0w4xz83BFC9/GG61T\r\n6k+7+Hv207+RFcvj+crdc4pLvnyT3WF0I9G8neNQ9Wy1sxWLAdBpjeByjr0N\r\ntAET6GzoJGp+dTEDdxIEqR0JM0qB3l4yhhu1srqg4+XE347g91HtKkzksHsW\r\nH2zm388ebNdQzh1nNnby7UlKDRkl+RCkG9Oi12HzZVb7iLObaayDAhqqdGte\r\n5HvkLgdEABERTLxzFORp0fArxaiqNsxTI2X8hMKrkX1Bd3yBbMtlc8nufEYc\r\nzvUC+DWQn3yq/dYji3LQRIr8eF4UBejcHncjUrzOVta88gkwY5PHCwHEwAob\r\nnMx/bzs76h5pCUWDDEIDCVvXTSettdGuRFzv3lW9Zhf1oxTMbFMZrTnrqeeJ\r\nrO2MSRPLpshqRy8Qorm6VOfZm6MyKu6dgPNlo8wpQtwA3itpSAED59TdelZ9\r\n5FiUWvL2oCFK0Fx9v+s3VggHrE04XJGAbplZC62nthHU/vTHoTySk2JNS2Pv\r\nmLYB4Vl5wa/B/dGvBdMtMagCE5SNF4nBN6p/LB3CHxtwSlwzPI2rruPaiYEC\r\nkEH/hj/as4q3gRY4qLwlJV3EPygZ2ltYPi0pmj7kxtdHkrFGi/JnS4zuaNnJ\r\nYOlg3pqvInf3kwKhXX4IhddWaMZD6oNRVcM=\r\n=3VXU\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2301301810.0_1675153687119_0.15971268781021575"},"_hasShrinkwrap":false},"1.2302012254.0":{"name":"@bentoproject/instagram","version":"1.2302012254.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302012254.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"e4c14ac075b71415995f07a6bcc3ca93a8af5cc0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2302012254.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-UUXiGAI/3Sr/07AIjiMtcqZ+qiHa5AefMMFaEymBmeckUxIq9TUYkm/8LT8wRT8hSAvIHLBhEgTa6rXQpK8qrw==","shasum":"cd66c032efb72f28d557a4814e6f7faae24ee6f2","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2302012254.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHdCys046pvRC+eZ/9S/OEdgAW6j209dcCCNzramK5yUAiBRN6u/j54xyw3IRbM+ma9m99Ltsg1jW+ILDiHc+MXWhA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj23OmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6lg//dzXQac+h159cDrVhrWtGWb8AllBm4obuBl9oh+JM2hzkDTfl\r\nBTcBC2MB62/9czEQ9opJbk3ud2ywgndYA7HZFUIW9X9DQ7qm/APAOh4fGDzO\r\ndfLd8ga4+2JSgoDbV8yN8no0MLd2L0zBfHQvdbJq+TNLbS9vyvtW4AsBx9sP\r\nffHGqwfObAaijBQcbHvrowNRGtzY2H2sjWvneJeaFMAnuiwqCMCY78kPIptp\r\nFywuR7mls6Y3/U6JQnCXrYcLg2a0UjGMG7xRVy5FphYzJyDVVMtmIpZuVuyc\r\ndCFgclJSkaYGPM/4RmMeRd9F8hJ7uizgqwvXVvM0GOaO/ZduykaUwmdJEIq2\r\nIuFUM2RWKyElFteNHaXvMPjiUpfF3IJZJ0LvCxVqU0qcnYpvAm3wx2IPhuUW\r\n+j72ZvTX6U1v/CMxxoMrgd4OZW9i1Gf+pQxoVdygyfFx0ANIMvYQ+dQFTS+E\r\nCZCaHI5s7V6cACrXyrf2qJQ1Xy81+56jadi9Er5JoH5iXV0/6QcVBdHer/wX\r\nHuWsBNXyp57B/6Cl6sAPyhMgFSvbVQ7U6pEZlhdMrYJIyD2pJgF1FzYJhzjb\r\nCcxk+nHrk9/3uLBf+qZOdiQhiLXTe/zI8iEwdA8seaPq+++VKJtmSkvHasgT\r\nKEYelWb50gDwGfCkX8I0FCgnHKLaUdLSTX4=\r\n=tJHa\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2302012254.0_1675326374332_0.5235195893604203"},"_hasShrinkwrap":false},"1.2302021743.0":{"name":"@bentoproject/instagram","version":"1.2302021743.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302021743.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"a27cd72c15b628053806c94efc4c96730603dbd5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2302021743.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-kI4hnWp4gYUatZuQbOBFhThCCSSwtJgxF4q0peCrW1ZvWv9X/TDD/7iCQsWRG/DcdLGIF/1g7AH69wb8sU4Wjg==","shasum":"f718eac11bb10a3c891e55f6adb8a6058e38f9f9","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2302021743.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2u3YQ3h4i/AA6zw5OZNsGCYluS8rkP1LqLF/MPXsmdAIgGf7bqrr89Z3/ZylrXWuxSL7PFQe+eIETNE2tPHcBk1Q="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3MXVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmol5A//TEWZEP1/e5U0wlBlYlujxmTNPPP4HXLQ60LC/5P0XJCnK6kn\r\nqqnbYHUw0hdqe+sTwnReIDKb/8mt+XA4M34t1x6YvqyywTx3Gqm1jXgpJ2v6\r\ncNgleMve5Ols9IY9eKnmD3CzauhAzin8L8OCKl6SOhr7SVzUefR7s3TDHWRb\r\nfari9MgxQqMz18Yex7w952FuiR69zzUoek0wN4i8l+TIBeMaPGYazCQLwTCL\r\nCcoNyiYr9XVQjTXal2RitJ65S/1FunEdtc/rrImUhIjsC0PoHSbEOXDBHpPA\r\n08Smli9+cf1j405SItZ61qLFq9bijti7P7rbO+zS2Tvq1sVagK+bSFS2NtCT\r\nLzBIC847GuSXnOmq/pWyQKTnHHrE/TCGd3M6sLQAgyPWyAvHHQxGZvyFuAB7\r\nrGp5+HKhDtxbZjcWZU6jYDp5iinDpkSQwtYaRXgtp6QRNO42s1bf+6y3rUYQ\r\nCi/CK+qU4YVOVwYjm+CD+lcbINGiHgo79zqQ/6tn3+qP/PLgwRRhJDtDRzRz\r\nAzSuXVfxOucbihHkv+xEdodhEMH3VGSH3faKEjwJZ+i6XdOt1yYMcdPniu4K\r\nBxtlLYjwRMqJnt4GYxuvrN4Vwi9RWWRZJwJb/bt59ZlEjgxFU4lnvd07HmES\r\nZR9THhtBFfjXhU+c8bH/sNZs8de7oaWMFDA=\r\n=x/fs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2302021743.0_1675412948906_0.3591863952494503"},"_hasShrinkwrap":false},"1.2302031721.0":{"name":"@bentoproject/instagram","version":"1.2302031721.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302031721.0"},"gitHead":"f8cbfb0c4e4db6b8dea923c0afdf75aa7888e4b8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2302031721.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-fKERX8pahpLSCXRWdeglie0GiZrSfhXE3QKjQ/uRvsT9rKRuAWLMSngPNsfezTZdqDY0R+HKI4o8TMFkCdyZ7Q==","shasum":"8726d81810cc1324c9f6a86c80efa88d7863ef08","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2302031721.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB4Dby9WPvUH3wsfCa8x42f/uN+nlvRtS7E0BqYIlJwbAiA8t/o9b7C5mo22VeOvhtGuvpyCxNrlqvgFXl6TguBAEA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3haDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGGA/9GyEDS+5g+jxQUDptLWEYqxgx2aX4pCeYtVxVB4KWWMlbHqH4\r\nP/A4oDWeK51MuMgCeAjwvsFyR7EuH7wTwjm7awd3Owxc4q2V5wZRBl7KVZKY\r\n56IfpvVFd5o4ZbdNySk3Nftqp/vE0gAdmbVJgQKHz1ZHGOOPeMAH0Xc82YS0\r\ntesf2FR7dhfsOHvRhXjnuVSLs2mfAT2kQVjJTnbwQyqu6aYEclOAtgdmF+Jr\r\n5zEnihobenrzZjm20Kd7qx3q7YBEYJI9Cq+mv17bKsm/gBWzm3+PwF2sF62f\r\n/fg5JAWKMapNLKR0Wsq+y0Svdpa+yAg0XPyw7szzMH25VZOh8cBLTHb2yQ5u\r\nNHo/1aFYqFIlwNiO0BlGeKtk1eSUVR6putP0peOUjEjzbNtJ3ya82sPtmFHP\r\nvUIXBQFAq93/0fBsiBWUqmuRuyvxiUEAgRdYrFIsTSxYGyaPw4AGX9t7/DVc\r\nCcOBxAp0BNyknAHQEy1j5YFYZqRsYFUvdzy3KaPcKfBwsMIq/zfyCN6YoTOk\r\nDhnIqccb9eYakl+ljOyCVGT4iCInLhpVL3Yf4W1MzWuHuBFNDin1QE0UbhHZ\r\nrM1o7PloUrvjPz8wvr+xNgauM8DgbeqTwS7sxwSJ8857pXU5vBI1VAOs7afX\r\nik2CpTh6rrxrG8SdlTPG3KQTqycFU8Vbdsg=\r\n=4ADb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2302031721.0_1675499138715_0.27711193591790373"},"_hasShrinkwrap":false},"1.2302171719.0":{"name":"@bentoproject/instagram","version":"1.2302171719.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302171719.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"767b9ceecbb9759948c2b0db6f66c49097659f98","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2302171719.0","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-bPYp1zedJk1khRG7DmAbvpdkfPWGfz0JwjBp7FxiGKcI1OpoJuV9N93r/6ixox6trzQtQv3uzWTjrv5PnCNgew==","shasum":"e1152d977703200db9736407633d8e40dd044f16","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2302171719.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH4D1/0493G/LYPxHHP/652QV6jP4SwJMuygSRdlDNUvAiBSqcSS44NPC8yXgp1pK21rp6ZsplPfHAkT82odGRSyLA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8ItiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNwg//SDzXbeX3g3QB8wFDf252/Jcp7fPHTVzJNFlWoC/StObdaS5V\r\njD9bc70DwinLHSfFclx2eWXroCVHM2fw2cW+mxUpuECtG7bl/aXCkfzx+02u\r\n9Jajx74j3EU1EEOyJMOp66DcIpEHQaD+okMzveUj/o0cESEDiiC34LAyhwJ3\r\nWersgQ4RsmWpOtqA7T6rfLN3UJjzn0Y4gm8RZ1lje9ON6LawRl/ruFEfVbFT\r\nEPvKWrEiHoV6oRZuBBV4kPwZURIPO9P212yu6pi15lPy0ehbDGkPhghpRXNE\r\ngejFIWGO/yJNstW6Tk7VL2lTde7I01YWEs3GrrokmOt1Iy/CEPo+rGmVNH6u\r\nmMqvcAs6gPtSnPfh17H9QxuDvhdHe5VZY4kuXnsndWMPiuZiUaz29i8lq4hx\r\nkbPh0beE2Snqm2h4M8Bqfe7iGhqTQDQlvTqABBRNl/VmpQZp1Sr9lNJwy3kH\r\nwtrhXgS/0WllatoNCkZo81ePLiu5R0zSbJC1QGABQKA5hDmmGzrh5QIs42pH\r\nn2F+1pW4aLz8KsdWRn6KXjInTVrN0GOC8cSdBUl2VG4JEoJVUUNehWlLLv+g\r\nTcG6IeuPRQ20v1KlIuxX0ybFeQHWNLFDQhplrrX/FiA2oH8+EO8iCG6et0nf\r\nUKF+hUkSJ+gTk5hSluciZviorosoEXq+jA0=\r\n=Ix5h\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2302171719.0_1676708706337_0.9192019838047627"},"_hasShrinkwrap":false},"1.2302271541.0":{"name":"@bentoproject/instagram","version":"1.2302271541.0","description":"Embeds an Instagram post.","author":{"name":"Bento Authors"},"license":"Apache-2.0","main":"./dist/web-component.js","module":"./dist/web-component.module.js","exports":{".":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./web-component":{"import":"./dist/web-component.module.js","require":"./dist/web-component.js"},"./preact":{"import":"./dist/component-preact.module.js","require":"./dist/component-preact.js"},"./react":{"import":"./dist/component-react.module.js","require":"./dist/component-react.js"},"./web-component.css":"./dist/web-component.css"},"repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302271541.0"},"readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md","gitHead":"13cfe7f4354a82bebe08fd29496c4c7de848a18b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/instagram@1.2302271541.0","_nodeVersion":"18.14.1","_npmVersion":"9.3.1","dist":{"integrity":"sha512-Kh7O0k3cIYijH+oWR2qm2sFskLenFbVvrRyOfOM9sBqE8FkiSEzo3EyFD0QeLIFHAPeknOuepGtnVa8JzDuAaA==","shasum":"a36763ecc5856a0371f0e8923e4d8f3d16858f10","tarball":"https://registry.npmjs.org/@bentoproject/instagram/-/instagram-1.2302271541.0.tgz","fileCount":29,"unpackedSize":540975,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmzhqHpRlzpBvILaNLrlJiAPsCL42ZE8mmaIn66mCHcQIgF4dRw809aZbbClHdDCV91ejV0Xi2nT8j3J6jlybt48U="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/jk+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpFA/8CVZxnVmOLLzHpG7L6CErgYw8afR0wefd3ffCu6qmKQt4FhML\r\ndSJXsaqXNMex2GaJdb4N1t+u+nbOZXSWz8y7cIuaxWJrfGDR++O5bIqWbgMv\r\n098DNEjlOCaauIdcH4MFgfH4FhmH9yz5AOpKZLkHZKawyp2lOHsqHeHn/7bH\r\nDtcP5D49aYVwsDVqHUNOr7uWm8B/8SjLtQ0N+sPkGHIy8FpMm6Ch287vFYne\r\nBicdYj56dul7+BVwTSPTEZbKfRadrzEcOhzuvqjMVRVO88vJLQjh7X2qDaab\r\nhk7es68IuT3WzAendJbqX/UtE0VdbMkHgtFSJzPV7XIk5PGpZfwMtGbPDakj\r\nW3nlDcrdvapb0jUdTtBoZ4kYA1FodIbxgAgMzps59ir/XhPU7Y7i95RD3nJn\r\nc3MJ5pu4Q0S+rlIYMSimg6rlQFsUqfEmrsyJeahKZWJ5e/WKatD5u1FbNxpE\r\ntnAXWbpVsLEgvHaU6GyMp/6AFDqv7gh13XOgWb78sbB4Py3aOuhJ2F3dVDWk\r\nH6PpQBnYurdO6v1BpouAKx91boXOiwm9Mr3j+mp2VMhsRAKA7VKCZRKUJrQ0\r\nhG/6OIkWLTPXiX8wkzA86hZOWYpY2z0VBYIZu6b1KsjElD71uWW4sj4PiriB\r\n2IK1I+ASsZTtNGKgSve4PMosSP7CK7IIl+Q=\r\n=f+Ma\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bentoprojectbot","email":"bentobot@amp.dev"},"directories":{},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/instagram_1.2302271541.0_1677605181969_0.379465829541878"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-28T18:16:49.585Z","1.2110261518.0":"2021-10-28T18:16:49.830Z","modified":"2023-03-07T18:43:09.212Z","1.2110252343.0":"2021-10-28T21:47:39.160Z","1.2110281959.0":"2021-10-29T11:52:23.394Z","1.2110290545.0":"2021-10-30T11:21:10.703Z","1.2111011823.0":"2021-11-02T11:24:36.784Z","1.2110152252.3":"2021-11-02T22:03:55.929Z","1.2110212130.2":"2021-11-02T22:14:11.409Z","1.2111022043.0":"2021-11-03T11:20:59.937Z","1.2111180040.0":"2021-11-18T21:28:43.038Z","1.2111060251.3":"2021-11-18T21:42:02.032Z","1.2111182332.0":"2021-11-19T12:23:58.730Z","1.2111060251.9":"2021-11-19T16:31:23.445Z","1.2111191951.0":"2021-11-20T12:23:14.581Z","1.2111230244.0":"2021-11-23T12:24:16.270Z","1.2111230636.0":"2021-11-24T12:23:36.353Z","1.2111242025.0":"2021-11-25T12:42:16.221Z","1.2111292120.0":"2021-11-30T12:40:45.090Z","1.2111152338.2":"2021-11-30T17:54:13.484Z","1.2112010058.0":"2021-12-01T12:18:43.796Z","1.2112012300.0":"2021-12-02T12:30:25.489Z","1.2112021656.0":"2021-12-03T12:22:04.354Z","1.2112032204.0":"2021-12-04T12:19:41.446Z","1.2112062322.0":"2021-12-07T12:27:10.047Z","1.2112062322.2":"2021-12-07T22:28:42.025Z","1.2112080230.0":"2021-12-08T13:21:38.699Z","1.2112080230.1":"2021-12-08T15:57:40.739Z","1.2112082232.0":"2021-12-09T12:45:12.928Z","1.2111242025.1":"2021-12-10T00:11:34.319Z","1.2112091956.0":"2021-12-10T12:46:19.728Z","1.2112102136.0":"2021-12-11T12:31:25.972Z","1.2112132331.0":"2021-12-14T12:59:33.096Z","1.2112160003.0":"2021-12-16T12:19:34.437Z","1.2112162055.0":"2021-12-17T12:17:27.347Z","1.2112170012.0":"2021-12-18T12:17:34.253Z","1.2112201724.0":"2021-12-21T12:21:28.266Z","1.2112212349.0":"2021-12-22T12:23:27.139Z","1.2112221739.0":"2021-12-23T12:19:16.871Z","1.2112231523.0":"2021-12-24T12:20:34.031Z","1.2201042109.0":"2022-01-05T12:30:52.611Z","1.2201052144.0":"2022-01-06T12:40:39.255Z","1.2201061922.0":"2022-01-07T12:32:08.947Z","1.2201071715.0":"2022-01-08T12:21:32.007Z","1.2201101902.0":"2022-01-11T12:29:44.156Z","1.2112231523.1":"2022-01-11T19:25:23.580Z","1.2201120015.0":"2022-01-12T12:30:46.762Z","1.2112231523.2":"2022-01-12T22:38:53.507Z","1.2201122239.0":"2022-01-13T13:00:06.609Z","1.2201131702.0":"2022-01-14T13:03:50.755Z","1.2201141909.0":"2022-01-15T12:21:38.504Z","1.2201141909.1":"2022-01-25T19:49:27.975Z","1.2201141909.3":"2022-01-26T20:58:38.194Z","1.2201141909.4":"2022-02-01T21:37:47.901Z","1.2201212122.3":"2022-02-02T17:58:11.183Z","1.2202012258.0":"2022-02-02T19:12:56.493Z","1.2202022130.0":"2022-02-03T16:57:04.889Z","1.2202031816.0":"2022-02-04T15:47:11.682Z","1.2202042210.0":"2022-02-05T09:17:44.051Z","1.2202072236.0":"2022-02-08T09:20:56.008Z","1.2201262038.1":"2022-02-08T21:13:22.689Z","1.2202082004.0":"2022-02-09T22:16:24.950Z","1.2202092050.0":"2022-02-10T17:56:51.002Z","1.2202112230.0":"2022-02-14T21:06:29.831Z","1.2202142035.0":"2022-02-15T09:24:54.579Z","1.2202042210.1":"2022-02-15T18:23:15.838Z","1.2202152253.0":"2022-02-16T09:08:20.397Z","1.2202162256.0":"2022-02-17T09:29:36.284Z","1.2202180255.0":"2022-02-18T09:44:47.970Z","1.2202230359.0":"2022-02-23T09:29:37.492Z","1.2202232232.0":"2022-02-24T15:22:47.807Z","1.2202241911.0":"2022-02-25T15:18:10.187Z","1.2202252101.0":"2022-02-28T16:46:48.301Z","1.2202230359.1":"2022-03-01T22:05:23.671Z","1.2203041950.0":"2022-03-15T18:37:33.046Z","1.2203151539.0":"2022-03-16T08:23:18.460Z","1.2203172113.0":"2022-03-18T08:25:24.833Z","1.2203221937.0":"2022-03-23T08:27:03.574Z","1.2203231914.0":"2022-03-24T08:24:59.879Z","1.2203101844.0":"2022-03-24T20:11:32.862Z","1.2203281422.0":"2022-03-29T08:30:10.544Z","1.2204121632.0":"2022-04-12T18:17:04.327Z","1.2204122000.0":"2022-04-13T08:32:23.234Z","1.2204132005.0":"2022-04-14T08:34:03.027Z","1.2204142048.0":"2022-04-15T08:28:01.152Z","1.2204160405.0":"2022-04-16T08:25:43.278Z","1.2204182206.0":"2022-04-19T08:31:23.272Z","1.2204191429.0":"2022-04-20T08:33:05.893Z","1.2204211736.0":"2022-04-22T08:27:21.967Z","1.2204221712.0":"2022-04-23T08:26:25.068Z","1.2204252045.0":"2022-04-26T08:32:43.109Z","1.2204272205.0":"2022-04-28T08:32:54.659Z","1.2204281949.0":"2022-04-29T08:28:21.415Z","1.2204292129.0":"2022-04-30T08:26:56.090Z","1.2205031420.0":"2022-05-04T08:27:28.392Z","1.2205041533.0":"2022-05-05T08:27:14.788Z","1.2205051832.0":"2022-05-06T08:27:18.072Z","1.2205090810.0":"2022-05-10T08:33:08.313Z","1.2205101904.0":"2022-05-11T08:32:51.638Z","1.2205120110.0":"2022-05-12T08:32:08.699Z","1.2205161914.0":"2022-05-17T08:27:50.132Z","1.2205181800.0":"2022-05-19T08:28:30.586Z","1.2205191749.0":"2022-05-20T08:28:38.557Z","1.2205232225.0":"2022-05-24T08:27:05.276Z","1.2205120110.1":"2022-05-24T19:13:40.458Z","1.2205251942.0":"2022-05-26T08:28:00.052Z","1.2205270638.0":"2022-05-27T08:27:35.962Z","1.2206071918.0":"2022-06-07T22:29:03.315Z","1.2206072228.0":"2022-06-08T08:28:15.692Z","1.2206082301.0":"2022-06-09T08:31:38.049Z","1.2205270638.4":"2022-06-10T21:36:06.155Z","1.2206101637.0":"2022-06-11T08:27:48.346Z","1.2206131450.0":"2022-06-14T08:28:56.748Z","1.2206071918.1":"2022-06-14T21:28:25.796Z","1.2206162023.0":"2022-06-17T08:28:14.122Z","1.2206221455.0":"2022-06-23T08:28:20.462Z","1.2206291614.0":"2022-06-30T16:08:54.359Z","1.2207071723.0":"2022-07-08T08:34:38.747Z","1.2207181727.0":"2022-07-19T08:27:45.575Z","1.2207201724.0":"2022-07-21T08:28:09.681Z","1.2207221643.0":"2022-07-23T08:27:43.155Z","1.2207261725.0":"2022-07-27T08:27:15.919Z","1.2207281718.0":"2022-07-29T08:30:06.851Z","1.2208021808.0":"2022-08-03T08:28:23.745Z","1.2208042017.0":"2022-08-05T08:30:12.415Z","1.2208051912.0":"2022-08-06T08:28:57.033Z","1.2208081650.0":"2022-08-09T08:28:53.873Z","1.2208092047.0":"2022-08-10T08:28:42.975Z","1.2207281718.1":"2022-08-10T16:59:31.559Z","1.2207281718.2":"2022-08-10T18:16:57.954Z","1.2208112015.0":"2022-08-12T08:29:22.675Z","1.2208121708.0":"2022-08-13T08:27:49.368Z","1.2208051912.1":"2022-08-16T23:07:12.979Z","1.2208172101.0":"2022-08-24T20:56:39.554Z","1.2208242209.0":"2022-08-25T08:28:07.064Z","1.2209072154.0":"2022-09-08T08:25:56.468Z","1.2209131909.0":"2022-09-14T08:45:08.014Z","1.2208242209.1":"2022-09-15T16:44:01.180Z","1.2209142312.0":"2022-09-20T22:08:51.001Z","1.2210010655.0":"2022-10-04T16:50:30.399Z","1.2210041838.0":"2022-10-05T08:31:24.347Z","1.2210052034.0":"2022-10-06T08:26:27.494Z","1.2210071758.0":"2022-10-08T08:27:01.830Z","1.2210112333.0":"2022-10-12T08:26:29.295Z","1.2210142102.0":"2022-10-15T08:25:50.458Z","1.2210172057.0":"2022-10-18T08:29:05.272Z","1.2210191347.0":"2022-10-20T08:26:40.898Z","1.2210211855.0":"2022-10-22T08:24:46.289Z","1.2210251605.0":"2022-10-26T08:28:47.018Z","1.2210272257.0":"2022-10-28T08:27:35.375Z","1.2211042305.0":"2022-11-05T08:25:43.439Z","1.2211060024.0":"2022-11-08T08:26:35.443Z","1.2211111611.0":"2022-11-12T08:25:13.541Z","1.2211151402.0":"2022-11-16T18:44:49.573Z","1.2211182146.0":"2022-11-19T08:26:53.236Z","1.2211250451.0":"2022-11-25T08:25:56.612Z","1.2211302304.0":"2022-12-01T08:25:20.777Z","1.2212071834.0":"2022-12-07T19:40:58.094Z","1.2212092023.0":"2022-12-10T08:26:36.412Z","1.2211302304.1":"2022-12-13T21:54:05.882Z","1.2212151632.0":"2022-12-20T15:53:55.549Z","1.2212151632.1":"2022-12-20T20:11:11.507Z","1.2211302304.2":"2022-12-20T22:33:58.121Z","1.2212151632.2":"2023-01-03T18:13:12.701Z","1.2301031703.0":"2023-01-03T20:32:07.489Z","1.2301032153.0":"2023-01-04T08:27:15.994Z","1.2301041800.0":"2023-01-05T08:27:12.461Z","1.2301100345.0":"2023-01-10T08:26:59.915Z","1.2301112346.0":"2023-01-12T08:28:53.376Z","1.2301181928.0":"2023-01-19T08:27:33.831Z","1.2301261900.0":"2023-01-27T08:28:13.400Z","1.2301301810.0":"2023-01-31T08:28:07.361Z","1.2302012254.0":"2023-02-02T08:26:14.662Z","1.2302021743.0":"2023-02-03T08:29:09.128Z","1.2302031721.0":"2023-02-04T08:25:38.975Z","1.2302171719.0":"2023-02-18T08:25:06.597Z","1.2302271541.0":"2023-02-28T17:26:22.173Z"},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"description":"Embeds an Instagram post.","homepage":"https://github.com/ampproject/amphtml/tree/main/src/bento/components/bento-instagram/1.0","repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"src/bento/components/bento-instagram/1.0"},"author":{"name":"Bento Authors"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"license":"Apache-2.0","readme":"# Bento Instagram\n\nEmbeds an Instagram post.\n\n## Web Component\n\nYou must include each Bento component's required CSS library before adding custom styles in order to guarantee proper loading. Or use the lightweight pre-uprgrade styles available inline. See [Layout and Style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport {defineElement as defineBentoInstagram} from '@bentoproject/instagram';\ndefineBentoInstagram();\n```\n\n### Include via `<script>`\n\n```html\n<script type=\"module\" src=\"https://cdn.ampproject.org/bento.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/bento.js\" crossorigin=\"anonymous\"></script>\n<script type=\"module\" src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\" crossorigin=\"anonymous\">\n```\n\n### Example\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n  </body>\n</html>\n```\n\n### Layout and style\n\nEach Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.\n\n```html\n<link\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.css\"\n/>\n```\n\nAlternatively, you may also make the light-weight pre-upgrade styles available inline:\n\n```html\n<style>\n  bento-instagram {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-instagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties):\n\n```css\nbento-instagram {\n  height: 500px;\n  width: 100px;\n}\n```\n\n### Attributes\n\n#### `data-shortcode`\n\nThe instagram data-shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the data-shortcode.\n\n#### `data-captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n\n#### API Example\n\nBy programmatically changing the `data-shortcode` attribute value, you can dynamically switch to a different post:\n\n<!--% example %-->\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/bento.mjs\"\n    ></script>\n    <script nomodule src=\"https://cdn.ampproject.org/bento.js\"></script>\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-instagram-1.0.js\"\n    ></script>\n    <style>\n      bento-instagram {\n        display: block;\n        overflow: hidden;\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-instagram\n      id=\"my-instagram\"\n      data-shortcode=\"CKXYAzuj7TE\"\n      data-captioned\n      style=\"height: 800px; width: 400px\"\n    >\n    </bento-instagram>\n    <button id=\"change-shortcode\">Change shortcode</button>\n\n    <script>\n      (async () => {\n        const instagram = document.querySelector('#my-instagram');\n        await customElements.whenDefined('bento-instagram');\n\n        // set up button actions\n        document.querySelector('#change-shortcode').onclick = () => {\n          instagram.dataset.shortcode = '1totVhIFXl';\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n### Styling\n\nYou may use the `bento-instagram` element selector to style the component.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/instagram\n```\n\n```javascript\nimport React from 'react';\nimport {BentoInstagram} from '@bentoproject/instagram/react';\nimport '@bentoproject/instagram/styles.css';\nfunction App() {\n  return <BentoInstagram shortcode=\"CKXYAzuj7TE\" captioned />;\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoInstagram` component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children (slides) via a desired CSS layout (such as one defined with `height`, `width`, `aspect-ratio`, or other such properties). These can be applied inline:\n\n```jsx\n<BentoInstagram\n  style={{width: 300, height: 200}}\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\nOr via `className`:\n\n```jsx\n<BentoInstagram\n  className=\"custom-styles\"\n  shortcode=\"CKXYAzuj7TE\"\n></BentoInstagram>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `shortcode`\n\nThe instagram shortcode is found in every instagram photo URL. For example, in https://instagram.com/p/fBwFP, <code>fBwFP</code> is the shortcode.\n\n#### `captioned`\n\nInclude the Instagram caption. `bento-instagram` will attempt to resize to the correct height including the caption.\n","readmeFilename":"README.md"}