{"_id":"@bentoproject/embedly-card","_rev":"244-8d47b76b1229b47a5283cc2e8dfc9e7b","name":"@bentoproject/embedly-card","dist-tags":{"nightly":"1.2305241828.0","latest":"1.2305051745.1"},"versions":{"1.2110261518.0":{"name":"@bentoproject/embedly-card","version":"1.2110261518.0","description":"AMP HTML amp-embedly-card 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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"e4bbe5c706c18a2c817265b40388ca4d4771613a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2110261518.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-3gCp/C4Gn1a5PTzwpBJ9UEV5lc8/HuwmxPwMOBpm3WN4wMZ8bripo4H/IjtMVk3k/n7qeoMixjDaV7mtlN26YQ==","shasum":"208ad25d3f5eb2730456fbd76f600d18ffe481a9","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2110261518.0.tgz","fileCount":27,"unpackedSize":2550273,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELq7Epg2YUUZkM6DNAfqvyfJciejL7y3L1TRvakb17VAiBX2Mbuy9e6ZuNnYyrXdA2gAeKSOzcb63BkD24Q8+UrgA=="}]},"_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/embedly-card_1.2110261518.0_1635445017283_0.5855508594576957"},"_hasShrinkwrap":false},"1.2110252343.0":{"name":"@bentoproject/embedly-card","version":"1.2110252343.0","description":"Bento embedly-card 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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\n## Behavior\n\nThe Bento Embedly Card component provides you with responsive and shareable embeds to drive the reach of your websites,\nblog posts, and articles from any URL using [Embedly cards](http://docs.embed.ly/docs/cards). Use it as a web component [`<bento-embedly-card>`](#web-component), or a Preact/React functional component [`<BentoEmbedlyCard>`](#preactreact-component).\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-embedly-card>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style>\n    bento-embedly-card {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n  ></script>\n  <style>\n    bento-embedly-card {\n      width: 375px;\n      height: 472px;\n    }\n  </style>\n</head>\n<body>\n  <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n  </bento-embedly-key>\n\n  <bento-embedly-card\n    data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n    data-card-theme=\"dark\"\n    data-card-controls=\"0\"\n  >\n  </bento-embedly-card>\n\n  <bento-embedly-card\n    id=\"my-url\"\n    data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n  >\n  </bento-embedly-card>\n\n  <div class=\"buttons\" style=\"margin-top: 8px\">\n    <button id=\"change-url\">Change embed</button>\n  </div>\n\n  <script>\n    (async () => {\n      const embedlyCard = document.querySelector('#my-url');\n      await customElements.whenDefined('bento-embedly-card');\n\n      // set up button actions\n      document.querySelector('#change-url').onclick = () => {\n        embedlyCard.setAttribute(\n          'data-url',\n          'https://www.youtube.com/watch?v=wcJSHR0US80'\n        );\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Attributes\n\n##### `data-url`\n\nThe URL to retrieve embedding information.\n\n##### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead\nof using the static page content in the card, the card will embed the video or\nrich media.\n\n##### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when\n`data-url` points to an article. Not all image URLs are supported, if the image\nis not loaded, try a different image or domain.\n\n##### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n##### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The\ndefault value is `center`.\n\n##### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video\nand rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n##### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n##### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main\ncard container. Use `dark` to set this theme. For dark backgrounds it's better\nto specify this. The default is `light`, which sets no background color of the\nmain card container.\n\n##### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoEmbedlyCard>` 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/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### `url`\n\nThe URL to retrieve embedding information.\n\n##### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead\nof using the static page content in the card, the card will embed the video or\nrich media.\n\n##### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when\n`data-url` points to an article. Not all image URLs are supported, if the image\nis not loaded, try a different image or domain.\n\n##### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n##### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The\ndefault value is `center`.\n\n##### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video\nand rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n##### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n##### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main\ncard container. Use `dark` to set this theme. For dark backgrounds it's better\nto specify this. The default is `light`, which sets no background color of the\nmain card container.\n\n##### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"57e62ecc0e24bc2cd64467dba9d0f9836eea0182","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2110252343.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-96uLQpVJSzZ5ROLmIfZZSkK6nRKy5kfPXbvIuRKxb+LxqWTbEgN1MqynW0ZLXAmd4GYn/dscIZjxZt3Mg+APpQ==","shasum":"55808b37c90bf4cdb541dc9e56ef79021322441a","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2110252343.0.tgz","fileCount":27,"unpackedSize":2550253,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDweSg4VTRFhM8+4cAL3Kxlgb4OBu1I3Ir3zBs0pex/2gIgOoYDGquToAnL9OULVf8kLCS+w66YAhJM0ljBg6vwYkM="}]},"_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/embedly-card_1.2110252343.0_1635457646418_0.6707853157456618"},"_hasShrinkwrap":false},"1.2110281959.0":{"name":"@bentoproject/embedly-card","version":"1.2110281959.0","description":"Bento embedly-card 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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\n## Behavior\n\nThe Bento Embedly Card component provides you with responsive and shareable embeds to drive the reach of your websites,\nblog posts, and articles from any URL using [Embedly cards](http://docs.embed.ly/docs/cards). Use it as a web component [`<bento-embedly-card>`](#web-component), or a Preact/React functional component [`<BentoEmbedlyCard>`](#preactreact-component).\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-embedly-card>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style>\n    bento-embedly-card {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n  ></script>\n  <style>\n    bento-embedly-card {\n      width: 375px;\n      height: 472px;\n    }\n  </style>\n</head>\n<body>\n  <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n  </bento-embedly-key>\n\n  <bento-embedly-card\n    data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n    data-card-theme=\"dark\"\n    data-card-controls=\"0\"\n  >\n  </bento-embedly-card>\n\n  <bento-embedly-card\n    id=\"my-url\"\n    data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n  >\n  </bento-embedly-card>\n\n  <div class=\"buttons\" style=\"margin-top: 8px\">\n    <button id=\"change-url\">Change embed</button>\n  </div>\n\n  <script>\n    (async () => {\n      const embedlyCard = document.querySelector('#my-url');\n      await customElements.whenDefined('bento-embedly-card');\n\n      // set up button actions\n      document.querySelector('#change-url').onclick = () => {\n        embedlyCard.setAttribute(\n          'data-url',\n          'https://www.youtube.com/watch?v=wcJSHR0US80'\n        );\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Attributes\n\n##### `data-url`\n\nThe URL to retrieve embedding information.\n\n##### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead\nof using the static page content in the card, the card will embed the video or\nrich media.\n\n##### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when\n`data-url` points to an article. Not all image URLs are supported, if the image\nis not loaded, try a different image or domain.\n\n##### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n##### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The\ndefault value is `center`.\n\n##### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video\nand rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n##### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n##### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main\ncard container. Use `dark` to set this theme. For dark backgrounds it's better\nto specify this. The default is `light`, which sets no background color of the\nmain card container.\n\n##### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoEmbedlyCard>` 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/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### `url`\n\nThe URL to retrieve embedding information.\n\n##### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead\nof using the static page content in the card, the card will embed the video or\nrich media.\n\n##### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when\n`data-url` points to an article. Not all image URLs are supported, if the image\nis not loaded, try a different image or domain.\n\n##### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n##### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The\ndefault value is `center`.\n\n##### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video\nand rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n##### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n##### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main\ncard container. Use `dark` to set this theme. For dark backgrounds it's better\nto specify this. The default is `light`, which sets no background color of the\nmain card container.\n\n##### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"55fa3e004e2aeece5faf9a68717228077c215a13","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2110281959.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-RNnnNHkHTW0AjIWui7hqHNRTCeEcQXDJ5TaIEZnGOw28oHruisva2g2wcFl/x4u8CiM/x9aypgkjPLjlERKP3w==","shasum":"d87475523a28ff4cf7ab185ee9966f97d48b1794","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2110281959.0.tgz","fileCount":27,"unpackedSize":2550253,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGBUEj7d1bNsZAJ9G1wdMLkG4fZAp7pK87+QfISzG4zgIgAKCN3jxygsTHYzz8cqJB7SiNFA6CWQqit3mC4OwFk/M="}]},"_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/embedly-card_1.2110281959.0_1635508310421_0.23369580656115918"},"_hasShrinkwrap":false},"1.2110290545.0":{"name":"@bentoproject/embedly-card","version":"1.2110290545.0","description":"Bento embedly-card 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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\n## Behavior\n\nThe Bento Embedly Card component provides you with responsive and shareable embeds to drive the reach of your websites,\nblog posts, and articles from any URL using [Embedly cards](http://docs.embed.ly/docs/cards). Use it as a web component [`<bento-embedly-card>`](#web-component), or a Preact/React functional component [`<BentoEmbedlyCard>`](#preactreact-component).\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-embedly-card>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style>\n    bento-embedly-card {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n  ></script>\n  <style>\n    bento-embedly-card {\n      width: 375px;\n      height: 472px;\n    }\n  </style>\n</head>\n<body>\n  <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n  </bento-embedly-key>\n\n  <bento-embedly-card\n    data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n    data-card-theme=\"dark\"\n    data-card-controls=\"0\"\n  >\n  </bento-embedly-card>\n\n  <bento-embedly-card\n    id=\"my-url\"\n    data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n  >\n  </bento-embedly-card>\n\n  <div class=\"buttons\" style=\"margin-top: 8px\">\n    <button id=\"change-url\">Change embed</button>\n  </div>\n\n  <script>\n    (async () => {\n      const embedlyCard = document.querySelector('#my-url');\n      await customElements.whenDefined('bento-embedly-card');\n\n      // set up button actions\n      document.querySelector('#change-url').onclick = () => {\n        embedlyCard.setAttribute(\n          'data-url',\n          'https://www.youtube.com/watch?v=wcJSHR0US80'\n        );\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Attributes\n\n##### `data-url`\n\nThe URL to retrieve embedding information.\n\n##### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead\nof using the static page content in the card, the card will embed the video or\nrich media.\n\n##### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when\n`data-url` points to an article. Not all image URLs are supported, if the image\nis not loaded, try a different image or domain.\n\n##### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n##### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The\ndefault value is `center`.\n\n##### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video\nand rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n##### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n##### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main\ncard container. Use `dark` to set this theme. For dark backgrounds it's better\nto specify this. The default is `light`, which sets no background color of the\nmain card container.\n\n##### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoEmbedlyCard>` 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/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### `url`\n\nThe URL to retrieve embedding information.\n\n##### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead\nof using the static page content in the card, the card will embed the video or\nrich media.\n\n##### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when\n`data-url` points to an article. Not all image URLs are supported, if the image\nis not loaded, try a different image or domain.\n\n##### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n##### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The\ndefault value is `center`.\n\n##### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video\nand rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n##### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n##### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main\ncard container. Use `dark` to set this theme. For dark backgrounds it's better\nto specify this. The default is `light`, which sets no background color of the\nmain card container.\n\n##### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"1cc07336e186d25fc5fbfb2e8f7e12c4a5c79fe9","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2110290545.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ghNCrB0I7Mg/omB2ov5lKzyp9GFU/oXCi/9GpBxb3t+6rJhNhY6AYq+BrN1+UgYXA/7ofNSP44E6nIPsR6QMAw==","shasum":"7572caf33a01efd3464f3a741a6571685c8b87d3","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2110290545.0.tgz","fileCount":27,"unpackedSize":2550253,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCND342FY1vlUPo9k6jxb3cGsNm+BC3BzEKSenSY9xZ/wIhALdpThEpn26EMbO6hskSyT1sI4nhn5qKM++5VNfA5V6G"}]},"_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/embedly-card_1.2110290545.0_1635592930180_0.3152056579582998"},"_hasShrinkwrap":false},"1.2111011823.0":{"name":"@bentoproject/embedly-card","version":"1.2111011823.0","description":"The Bento Embedly Card component provides you with responsive and shareable embeds to drive the reach of your websites,\nblog posts, and articles from any URL using Embedly cards.","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\n## Behavior\n\nThe Bento Embedly Card component provides you with responsive and shareable embeds to drive the reach of your websites,\nblog posts, and articles from any URL using [Embedly cards](http://docs.embed.ly/docs/cards). Use it as a web component [`<bento-embedly-card>`](#web-component), or a Preact/React functional component [`<BentoEmbedlyCard>`](#preactreact-component).\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-embedly-card>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style>\n    bento-embedly-card {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n  ></script>\n  <style>\n    bento-embedly-card {\n      width: 375px;\n      height: 472px;\n    }\n  </style>\n</head>\n<body>\n  <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n  </bento-embedly-key>\n\n  <bento-embedly-card\n    data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n    data-card-theme=\"dark\"\n    data-card-controls=\"0\"\n  >\n  </bento-embedly-card>\n\n  <bento-embedly-card\n    id=\"my-url\"\n    data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n  >\n  </bento-embedly-card>\n\n  <div class=\"buttons\" style=\"margin-top: 8px\">\n    <button id=\"change-url\">Change embed</button>\n  </div>\n\n  <script>\n    (async () => {\n      const embedlyCard = document.querySelector('#my-url');\n      await customElements.whenDefined('bento-embedly-card');\n\n      // set up button actions\n      document.querySelector('#change-url').onclick = () => {\n        embedlyCard.setAttribute(\n          'data-url',\n          'https://www.youtube.com/watch?v=wcJSHR0US80'\n        );\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Attributes\n\n##### `data-url`\n\nThe URL to retrieve embedding information.\n\n##### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead\nof using the static page content in the card, the card will embed the video or\nrich media.\n\n##### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when\n`data-url` points to an article. Not all image URLs are supported, if the image\nis not loaded, try a different image or domain.\n\n##### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n##### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The\ndefault value is `center`.\n\n##### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video\nand rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n##### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n##### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main\ncard container. Use `dark` to set this theme. For dark backgrounds it's better\nto specify this. The default is `light`, which sets no background color of the\nmain card container.\n\n##### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoEmbedlyCard>` 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/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### `url`\n\nThe URL to retrieve embedding information.\n\n##### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead\nof using the static page content in the card, the card will embed the video or\nrich media.\n\n##### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when\n`data-url` points to an article. Not all image URLs are supported, if the image\nis not loaded, try a different image or domain.\n\n##### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n##### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The\ndefault value is `center`.\n\n##### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video\nand rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n##### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n##### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main\ncard container. Use `dark` to set this theme. For dark backgrounds it's better\nto specify this. The default is `light`, which sets no background color of the\nmain card container.\n\n##### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"7bd4192edeb4ded8e78291b094118653b1a78939","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2111011823.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-nxh4KGe5B+EAcb19p9ahRALjhj17fWqI6JAzLTdQFVCfQDAqw/W0amxwkEw6dK/l3xqBxbfJfm23uYVRrs1lnA==","shasum":"632217d0209c4bd54e114fdc5d443f286348a19f","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2111011823.0.tgz","fileCount":27,"unpackedSize":2550487,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIApWwrXLk3T5t7JITuV8hnQlTdKuOjkzSG3j4IeeYs8bAiEA+4wtZNf5JGKjKwngbxX2cOwJQVbmmsc/O/KBvvxjmoA="}]},"_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/embedly-card_1.2111011823.0_1635852310286_0.057206031946270386"},"_hasShrinkwrap":false},"1.2110152252.3":{"name":"@bentoproject/embedly-card","version":"1.2110152252.3","description":"The Bento Embedly Card component provides you with responsive and shareable embeds to drive the reach of your websites,\nblog posts, and articles from any URL using Embedly cards.","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2110152252.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Ew40ptZTMf1YTeRGZFk+RoHXgpO6q7qdKmWcqzOjaUe7sRIj28AicJkVnF5gQaI7iQLuBtzHBD7gYxt6ZZkbeA==","shasum":"7aa4088b40f43167e9e418d99f45ae1e800c1a62","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2110152252.3.tgz","fileCount":27,"unpackedSize":2550487,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5+0U8nzSTq6FMP1LRHICKn7YACg1Uoo07Tf/OqJADXAiEAjdeTt7YBLPsupqRm2oN5f0FX1OA1i4n/O9Yh6K+X7yA="}]},"_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/embedly-card_1.2110152252.3_1635890648383_0.5006825489209046"},"_hasShrinkwrap":false},"1.2110212130.2":{"name":"@bentoproject/embedly-card","version":"1.2110212130.2","description":"The Bento Embedly Card component provides you with responsive and shareable embeds to drive the reach of your websites,\nblog posts, and articles from any URL using Embedly cards.","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"7a44c3f3047d8b5f5bcbcf5a86c4c1cb30184bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2110212130.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-znXDvsP+KfLVJN2zBo5GGbn7n9H352HrpjCcJIHwCWUZoaATNQHr1rHJvHKupkx6Hkat7ZD95pIliQ8lvO55Zw==","shasum":"709acc2c3a1eea42962dcbbad3ae4d1273a1294d","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2110212130.2.tgz","fileCount":27,"unpackedSize":2550487,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt+4wF5+0/Cf0Zc1IyIC088NON9vtTTRqXT5UsZn7BuwIhAKM/hQ2ayrA2NvgzTmg+GF1YHNlThlVzbEsCfiGLLLn2"}]},"_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/embedly-card_1.2110212130.2_1635891293071_0.49063663495966714"},"_hasShrinkwrap":false},"1.2111022043.0":{"name":"@bentoproject/embedly-card","version":"1.2111022043.0","description":"The Bento Embedly Card component provides you with responsive and shareable embeds to drive the reach of your websites,\nblog posts, and articles from any URL using Embedly cards.","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\n## Behavior\n\nThe Bento Embedly Card component provides you with responsive and shareable embeds to drive the reach of your websites,\nblog posts, and articles from any URL using [Embedly cards](http://docs.embed.ly/docs/cards). Use it as a web component [`<bento-embedly-card>`](#web-component), or a Preact/React functional component [`<BentoEmbedlyCard>`](#preactreact-component).\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n### Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\nThe examples below demonstrate use of the `<bento-embedly-card>` web component.\n\n#### Example: Import via npm\n\nInstall via npm:\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\n```\n\n#### Example: Include via `<script>`\n\n```html\n<head>\n  <script src=\"https://cdn.ampproject.org/bento.js\"></script>\n  <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->\n  <style>\n    bento-embedly-card {\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n  </style>\n  <script\n    async\n    src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n  ></script>\n  <style>\n    bento-embedly-card {\n      width: 375px;\n      height: 472px;\n    }\n  </style>\n</head>\n<body>\n  <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n  </bento-embedly-key>\n\n  <bento-embedly-card\n    data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n    data-card-theme=\"dark\"\n    data-card-controls=\"0\"\n  >\n  </bento-embedly-card>\n\n  <bento-embedly-card\n    id=\"my-url\"\n    data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n  >\n  </bento-embedly-card>\n\n  <div class=\"buttons\" style=\"margin-top: 8px\">\n    <button id=\"change-url\">Change embed</button>\n  </div>\n\n  <script>\n    (async () => {\n      const embedlyCard = document.querySelector('#my-url');\n      await customElements.whenDefined('bento-embedly-card');\n\n      // set up button actions\n      document.querySelector('#change-url').onclick = () => {\n        embedlyCard.setAttribute(\n          'data-url',\n          'https://www.youtube.com/watch?v=wcJSHR0US80'\n        );\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n**Container type**\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n#### Attributes\n\n##### `data-url`\n\nThe URL to retrieve embedding information.\n\n##### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead\nof using the static page content in the card, the card will embed the video or\nrich media.\n\n##### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when\n`data-url` points to an article. Not all image URLs are supported, if the image\nis not loaded, try a different image or domain.\n\n##### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n##### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The\ndefault value is `center`.\n\n##### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video\nand rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n##### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n##### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main\ncard container. Use `dark` to set this theme. For dark backgrounds it's better\nto specify this. The default is `light`, which sets no background color of the\nmain card container.\n\n##### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n### Preact/React Component\n\nThe examples below demonstrate use of the `<BentoEmbedlyCard>` 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/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n#### Layout and style\n\n**Container type**\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n##### `url`\n\nThe URL to retrieve embedding information.\n\n##### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead\nof using the static page content in the card, the card will embed the video or\nrich media.\n\n##### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when\n`data-url` points to an article. Not all image URLs are supported, if the image\nis not loaded, try a different image or domain.\n\n##### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n##### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The\ndefault value is `center`.\n\n##### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video\nand rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n##### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n##### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main\ncard container. Use `dark` to set this theme. For dark backgrounds it's better\nto specify this. The default is `light`, which sets no background color of the\nmain card container.\n\n##### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"f4d548031e8e20aaea8ade649d3394d56518b769","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2111022043.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-RyO7wSKwQiI+01V0LWRqqYK/uU4d2UZLepRqjnAnC9meSKAu/iYY1aY1RzJ+07ta8C0QOU/ClQxWtqKeKT3HPg==","shasum":"180ba750a1abe5aa258a0224c2c0c2e708782859","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2111022043.0.tgz","fileCount":27,"unpackedSize":2550487,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAdsaTny+lQPqajeGYW/NIwJv79GeJIT6g+hBoy00hiLAiEA2n8JerWigufo9vsJvEWk+sJ0gmqZqxhRjk0vFf0Adqo="}]},"_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/embedly-card_1.2111022043.0_1635938501385_0.913808105415673"},"_hasShrinkwrap":false},"1.2111180040.0":{"name":"@bentoproject/embedly-card","version":"1.2111180040.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2111180040.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-lCgLTzap2/hYPoVsKV+IFRp46eh5+oKy66FKOu9TAzVXoqc8cSlbmIiW7Z/Q0Ih+q1ZPBcfQ47XraIacxSKc6g==","shasum":"d2269f267cdbf1606fe6cb3ed0558705b388e316","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2111180040.0.tgz","fileCount":27,"unpackedSize":2415573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsT9CRA9TVsSAnZWagAAqtoP/3jfJ984wrhTWkIhWB5B\nhUO3u0/YXR/0PyaH88WV5hNNsUnaUr2dHPiHfDUSy0+cAznZ9tJTlFX216h9\nq0jhPnV9GER8cVX3LPQ1YdTMW4FKh7dVTtQmtW6CmajICiSHxIzh8ydkS7Dn\nuCrEYm7JB6hsBtT/eEe5ATphbI7P/s+ASSZ0dCTYLuC5XGhqnUm/wXwwPQtT\nTdU934CUE/B/SyQN4uPpA5j1ZQMLZB8XNysJCdoAPjJxfaVQgHwrpEfEFpVW\nr5JhoLRMP1QVAyocsGOMTb0Q58lQRoLFM54uvQrVvgn+PNkAkhoFYYbtm+Hd\n4DPlJYQnAnV5iDjCQTxXsVsver7rNb/t5/uaQ3arZJwCm7J5J+PUl/4su7f8\nM19uVAOXWDm9bWY+RF0GLkMMJsH5JgxnR6hkaOKIXTnrpvs2YzDtq0sMZjY3\n3yXY5noPMzAyc888bYq8Qf+xSn/zMzMC4hXQAtuT2azgGpfVuSp75HKmsXz4\nUX0u/Eh8btRPr7lMc6lZmxq/xHF2iYJyp2eQjDzZblf1LdHhpxhNDbaOSooV\nfuZ3fL7SPhFAjTNk/gjhmOn9V7O7NkAKKBNyxXpCjhDxNsbaH3z4vWzsPz5S\ngw51Af5Od3NTaVZoiTuf2napvGC5eUtHz3lFmFLkLu/5F2qIhI/ZVzgxfg2k\nPK3F\r\n=lIb2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyFarQicYAAQjBB/bgjvqIT4MhwDfRk/3/WoND03GTSAIhAI7nUZI7WVpUC5kVmlx0gbc7WcAdWa6zdixubsK1TGQn"}]},"_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/embedly-card_1.2111180040.0_1637270781526_0.6271019619939762"},"_hasShrinkwrap":false},"1.2111060251.3":{"name":"@bentoproject/embedly-card","version":"1.2111060251.3","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f53cd87e15233c147123f81aad5da820c5581752","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2111060251.3","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-tquNWy9YpRvU71W2It/vDJZMBSMunRhWEnn17Jty9EJtLMZ3IUKpDU5QtjJbh5z3bCnsd3Q1zCfwJtARiz2ktA==","shasum":"41008ecbc3e1ab093185a4c04dd160fce854da01","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2111060251.3.tgz","fileCount":27,"unpackedSize":2415573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlsi3CRA9TVsSAnZWagAAN68P/RRMVHJ5sr/xv+A4xmV3\nqzXK67uh0JYQuiLveh61+WVBB8yvf64okw/wLemd6DQNbWMGCxBlvmzjsShw\n5J6n/jyfX2pUExOFThLucNOaVbwRFsRzmXcum1DJN8yFDiHSZW5/PrPH2ZbV\naEgNBsa0QP4rri7OBdkPwBloFS2X+mJ512RuQGD3JiZPrxcl4JqwSnbP+Ryb\nZvhV8ywbCgzNjE6K4ZSNCTqz3sH1kpz64e10mzzj/qf6FzYBagLcr6wMrX3G\n9jEXCy8A5TbYn1i9VxxGq/YrR5AyEEpTl3T/fE0yBMJrB6apV0H5U2QbhABl\nspYJ4JAffK6eTtJKbivb47gLT50NbaPdf9DkCnEumtYIe+2OQxS0b6J8CrJ/\nEAcPQ16jbfjlF8Q5mIew3CBH8JMhvsBiAVdmT8a1zq8N1f+jBnw+0exsVX28\nS3tktAnpwfvkaIIUf6Xt2OSlpbtkr3eDxdLsbYZ3XRPdb9mZYZyaXQCeFISE\nfqG/xP5tv86d34Gg3p4/9nMTapb3JVKoYiYavXmzaNm1eeneSJGG+xiSUJ8j\nHw3fQnYQ5h8n+ps7ZqqfYlXe27aLR76Y9fxbOg+yl4S1tY0in5Vw7SuroE/z\n6HccE6o+V/RTXD94qThIBlWg/UFOIEwzh3zcksTeARHdU9EEx6ZXRdlIolWB\nePS0\r\n=UklA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsSGQpPj3LkMT8HrpwinK+t3tJGRVJG6RpYt6OXwERFwIhAIGAfoH1BJMtBRxfKF7n4Yn8smXYH1ijo5JXPa/z9y4o"}]},"_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/embedly-card_1.2111060251.3_1637271734950_0.7269833809687591"},"_hasShrinkwrap":false},"1.2111182332.0":{"name":"@bentoproject/embedly-card","version":"1.2111182332.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"34ebd943d9b16506b7a515b38941fdd8357bd288","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2111182332.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-W4PgZkVlGdTOaTLDZe4OuFRHUG6MMqrCFvMl8zOSePtZRa7ViCOxmZniBhP6gw+jAdYAl1gnyFf+D6vRJSWNAA==","shasum":"5dc594d061a360ba016f8b473ef7bf7ce5e25aef","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2111182332.0.tgz","fileCount":27,"unpackedSize":2426888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl5eUCRA9TVsSAnZWagAA+FIP/R/l2D6CuZVHvrTU+KGC\n/O8iG0dOnaDne5Vd8RRRG7mnMiG/Muzh/fAE7CVTifrAakiZ0n1rDVEYyD6y\nDsBbYtWX3gYnJG/KNrg94A8nTr7Px8nQMBhMvnSqb9Fm25M3pDlGewao0nyk\ny6E98PEZegA5eL39QKwkfuEmuW8ldRe6OjeGX2jV/9/SZFu1ZppNqECkLhei\nrHaJSGKrUYhmnr0uOM7TlzIAXwQOV6Vz3/zqSC1A1HIV3OtY3eN3VZnlSRp8\n25jmG94nPOpmTxOW32sveHK+hEXlWQYcCEOVFhosJKQKwP+hvgt5dj0OsjBJ\n/GHPS5cSznaRXp/UYASbnknh996JzI2x+7H0PNa4NIZPqz+c/TMBMgRfiq1B\n/l4HEKuVaUEtjaj0WiQNJuRy1KqX9UEmcFNFl2KF1SGZY+lH8ahSoCiwxKi2\nj2ukGswoPr/B9WpGG6IS/28IJOWgnzxRY5SThspB6oY19fo2CUJkVTkFtXbm\nL4XylYWvVBG7CalD/vMWoPHOrBEdZx9GusZQjqIN/S/UEaglWFMDuQItccox\nm5rQR9Q32ZMeM9eq3NIIk035RJj8UG5DVFkgusTLAYvYcU8O+9U9/MRCbH7Y\nF5fkcJcK9WuGlbtvu1DLb2ak85RxOjxFmq1NdXPxeaZIC7azG1eBQ/7dmSDA\nezfZ\r\n=yqVN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE37FBWfmwZq7eZ5N95zEw0FEJyzeqnWuAZucakhI21JAiEAtLMA9tGhTTQfCN4f87F/H9v64Mp38Srklv8W0rL/iVk="}]},"_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/embedly-card_1.2111182332.0_1637324691960_0.053883466712500994"},"_hasShrinkwrap":false},"1.2111060251.9":{"name":"@bentoproject/embedly-card","version":"1.2111060251.9","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"04e44a3695f8db307eda69f753e10665cfa70fa1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2111060251.9","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-02qLT8ooqaI8MK4o4RUAu66TsNjxPiafCb0W9qEaxpe0V0FtQtyTOvg/JhO2H5hiDduG3bEqt1tbmHxtLejOqg==","shasum":"41ec4dba641dec1ecc5e5309137acde97e1a25f0","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2111060251.9.tgz","fileCount":27,"unpackedSize":2426888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl9FGCRA9TVsSAnZWagAA7lYP/0fsol5xrArWiC9N2xuK\nljs4nq7fa7LHRlzMk7Pmpuq+zCau1+ot98XnUZVQSqUSjkMxrNF0FLIk5syj\nKmbmEWZyTnzd9SoJcIbnBfjXTiiI8x3Gf1Yt9WQ9V4Xo5TtH3ghPGSUqLC9s\nZTI5GCbqNdEbvPgRjveXBL/CLzwrF1i/hZe/VOB5cS35rhOOWvOqL99nUq79\ngEMIZqx442BFx0eoPOoCXCgQ0GNUj7G2DrL3BN5lnnztmH7BIPm4cUbEbGLE\nqT8pKB4OCzaeVWUpIm7Y8XLvNO4+sLw3O+ZK8UqkMavA79KAZr0wz1JuHc/X\nHeql905WMGm5IOIrZS2s342SB+VPtPbc1+//UrVJp7hpjquguU5Vw5GxIOEr\n++yuYoN2Thu/lCpKnx4xPZfQ8usDCqzmGMvBOIo2u0zLuJVTxilxOHqMUrxB\n2eLLPiBMvgDNnfHrr+oleBKVRP+9CBhG9oxDeue//pYTFvVGfvlZwxSrxfu8\nzBnFG5gDBlH1Ka4t1JqtoJGIvE5fHJ8yDdyv40CdwgP7MjPO/NeIFltzyOEQ\nl/ed0IdcpEwcEm3YBYXbAxkXIZx1+m5S2RlInG1Z0M8tKIe429/fhH7Nc9rG\nRXnJ9Noy2BkUu/GbYCHHBbf/SXTVEcZbtRC8UWTxweZ1R2hO5OuNLq+jm9NK\nSRGo\r\n=Aes+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEoqStUdzn0/1DQZylEwTV3gI/PbSI6/mXFYET59ITygIhAOkh77WA58OEgxMuIcpXYRydJmPqhwblPdcXPLhvMyFK"}]},"_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/embedly-card_1.2111060251.9_1637339462468_0.5259131443341949"},"_hasShrinkwrap":false},"1.2111191951.0":{"name":"@bentoproject/embedly-card","version":"1.2111191951.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"22d6da19b9e01e75e6b67f54cd425c465822fe8c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2111191951.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-7uvKnYojGaKy0RI7wUSz22ky+2FT9XOLMhx2q36L+tsKP+9st+cg15oxeVxSgWL7JNubuWej/3aJgTnk3EAzNQ==","shasum":"5631f4ce158d6a689cb87e577370160e38446cca","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2111191951.0.tgz","fileCount":27,"unpackedSize":2426888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmOjOCRA9TVsSAnZWagAA3JkP/0CN1JC2dKOx0/qStpQO\nJleXEmY8+6DnIv7roFRMUKB4ZrKZK6JbURPQkfLaI4pANl1fz/fVZ6yUzwPp\nJPceMjDP9tViybdRDL52xCYeSRiFo3x4TLf4DkW3PXWaYi4BR4ddisRQjIUW\nhXLKuVs0jTbUvXBM3WM1P4mA/qVgqWGXj0FhZ9ERBjhsyAUZjz1aYqsCE5ml\nMsdqLN8z01sQZT6EIBttGvOjoz7M72EONF6THIx4fi3C8RD05vj60ZDvkRRG\npXICmIh1qzaA2d2FIecplgAlHjdsRGAnjFJdp5H5ftsEmdxpm1FcVRMOVAWM\n9cXv3JnpDKkCc0g8Uauo5lH4qcME33ouOhRi7e6qWS41oo9ZWKEf+e8xaEkG\nc9nFohRU9pnr9GfJ+14Xo0WMdD668fHaCY5aVCLMos1/rKa8I29RAI7ot1jc\ncBAl3EhAvXyhbku8TgflKk/1gXBOUNzD/oHBQHfXSkM2Ak7Na1OrvvDgr7td\nfAeMGiLQNx1MOhK9rJEpMZmxyvlKY3W1eVziqCDmU+7KD5DOEjuQRIed0Kos\nU/UknvcSC7fKaDSs05T2J48MZMuv4pju1wPzDi1egTrnCLDCEGXa4ohvxXda\ns01GSG0bZfCgE4rt0yQsBmXRPno4p76U2zcQ7+TfDl9awO5UJ6XzGEirj0Zu\nkQ23\r\n=j2u/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAbpGGrYdKqZB0LPnMrccZXnSINIJvOhyKPuySLDFlJBAiACJpberzX59RF6yl1O80h5FajHxsVEE/WANPn3U+gjtQ=="}]},"_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/embedly-card_1.2111191951.0_1637411022023_0.9610880355771791"},"_hasShrinkwrap":false},"1.2111230244.0":{"name":"@bentoproject/embedly-card","version":"1.2111230244.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"d906c0bae3e05aebd88696b9659414f63c1ca45a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2111230244.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-xnpqI5dGHd1eOe03dtAvB+rY0r4cFLoGnAHmK1sNXCfuIMAG7ikKkazEgpiEE6x6PKNZYtcR/6y+rc4oa0Zy8g==","shasum":"aadbb60d44574d364cd29285fd74805051854e82","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2111230244.0.tgz","fileCount":27,"unpackedSize":2426888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnN18CRA9TVsSAnZWagAAa0AP/iUJssr+y/8govfIozPa\nkcOscRdq+Fhzs02Y9zMrmsnUiQSIQbepADeFywXaIG+zjeAwbmgYcidIidz2\nu/ttHdFQ3nBzac6XR3eod3nIJKDqXBIHJHpNJyQYOhA/Y0/kFoZvGMEEZDkV\nncAFjq73jR2wcWP3XnSWh8HaohsGj5inZYl/wawWrLswo3KGzLJdTQfBJsjE\nKNCoYe4a86jS6cKjio5/5uR86wYpoq19FO8s7799chuopNV0C19bwolQJw+U\n9bvavd0CDXUHBOtBWajdGCGuWo67KZ/6oUZYM7/+BW6e5IsXJlz4g0/r62rd\n9YRE0wpNuAbxuHFFpEOv3J4ulKJfuazbNH5TePVjx2TLJNo+Xt+7UrJUMGig\nD6HiPbtE4gtk0U1icK91lY9QFqaK5eq0JNCNnc/s5Mk9ivYpYDoyt2eYSNa1\nvNkUdAiYup7uyEIdRoyXpn/rAVEnK+6m2r7f1Gwyy3PzuU1W8Ut4RnBtevtP\nRyKVCB8M3CA4I018W4G9bB3jltt3r+qOIQ7XKgjOkFIyUrp51sSJZRxi2KXY\nqEnEIw/0m6nWvTKIgscpA2kd47M7skOF/yB0NLMwD1c+bvn359s9Q8J/rdCZ\nJejPIW6J60i84+6Nz5bt9vKq3qb9n10BJaUxzZb1OGuRBogUq2buxn+RjnhP\nWOAm\r\n=/hJy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6moyEN09IrqKEgDDEBlCQscf44mCGmosScKkp2SAMrgIhAMD/HWfscHoGsOziC4bVYr3dKmfYpe7uQmx+yyvbN6SN"}]},"_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/embedly-card_1.2111230244.0_1637670267964_0.5595133194764377"},"_hasShrinkwrap":false},"1.2111230636.0":{"name":"@bentoproject/embedly-card","version":"1.2111230636.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"46e8f482bf5e3008ef07e950034d194c48317990","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2111230636.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-YvoExqS4yFwgLr+XKcr2rmz1vstyZK9H7wjHim2KE0EYXXG/z5WJmrftAf2k9EzTIuIUnDF3CO7H10uWznq7nA==","shasum":"f938c04afd463381a62f05646408d235034cbcc9","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2111230636.0.tgz","fileCount":27,"unpackedSize":2426888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhni68CRA9TVsSAnZWagAACiAQAJbNTLvvWxjExd3cR1kq\nJQmdKurvdqIM5LwHWdgi0NUhyrcWB8ThwSq8z+wWPUunKrPW9w+2pYEvmfen\nIxii0wyQl6hQtiLu6nKrsOiV5PIZ31FXwYNeEx8gTauCbFN733F1qFS8kP4A\nczj4FAlxWJMqimGMgafjatoksGdqPsaVzoyTk1L7p6VqK5GNPFDv6yqtZHd+\nJAWRQCQ7SGGKz0ZqzKNfyrUiJ3ThxPMP/iT3rPJlvmNftHj9ochsD7OkLbt5\nOEzpiiCoGsQHpjZCCzPhuDWca/Au2ospm5v51cGiB1E0tNnlbfVwO9OuxSdD\nQMLQwYKkeXOTulA8Q4oEQIBI1jrLj8vllh5ZRODanwtOmrmz28I0DfMMKsMw\nhggyIVxOM3uw3oUG94RrKjMhkvTUsWDtCUGhrPOewosaDP52+yYQzq3vWE7B\nU7i5eu523+A43o4Txjy4uzLly+QgYYu0SfA6twc6broyD4kqzdyas0WIoP8H\nMGZj5SHTAyrwSC+zcBvj7O1F6/U0yShlEsJBSy4k+8SSRV9tumgbhUsYthGj\n4readD0e4qDzMwoB19MVGs8fPHpr4Is99LvT2Y5QVJNQN9FY+5Hye1+XrCt+\nomjYCxUdVuAl9byZAhpsegb7QrUP4q+JRHRAkdiIYwIIDQr1HtYpFNrWf1cu\nhOR7\r\n=Ch+n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFvu1e9Jw1iDq61X03qonRL6n+d++dA6vSKnRnYMOrHoAiAWlUK0EkP+5hdvTyUAVzW2Dn+pZ1qA2PsnHMGSsn6k9Q=="}]},"_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/embedly-card_1.2111230636.0_1637756603916_0.020378036217701512"},"_hasShrinkwrap":false},"1.2111242025.0":{"name":"@bentoproject/embedly-card","version":"1.2111242025.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"b78e8781ff3976b3bff1ba881cf66dd2609b5c07","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2111242025.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-NMgnE70V3VVOCBnL4GK8JYYTeXnTi+QySci5dQ7UrPpyBFMVbX0iAMoI2Xb+Sc267zcm4LgrLkfsqIji87UOhQ==","shasum":"4599add9c71242deacd2e77288a50772033b46bd","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2111242025.0.tgz","fileCount":27,"unpackedSize":2428267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhn4TECRA9TVsSAnZWagAAk7EP/Rp6a/waaIa0mOpOsHHq\nuCjY8hXXK7NE3mj+GkeyZwbSNAX8RZrsJYF+Q/cyXVZqUXtgGIvYY4ZzloXU\nn4yPkihOFubw+blJFxkHQEqa5KPuZydsEKBVw1/or+d895675E4f624Yn9CN\nDY/+R6pc9VQjrhB2z+L7C6qum2CBIMWjvr6dRtzI2YLq883tETaOpoKib9+V\nkF6snBtD5mqdPjuO7cQm3wNUbGuVvrTpZhICl9uyjNb5AmWZvkSeOpss5EsE\nQOx5EVVsQEVGe++l2+WArNb82hCGkA+yYpmjhQ98QNEF5PqeADzHz3f/CO8Y\niKHTWhKLVI0a0bJpcCU5pZ4aRQ4PjKYhNlJxz8yTx1iwlH800F6DB+EHj+kP\nPeJJdiPCaLy9QorUkWnx1jkBrCI148dzWHeRhdi8ebESK83i//UqxjbvKFAq\nlrW0MDITZ+mbPM90dOx/wFB+YvpPLCEXes4dIjjN/SV0UlQ35wuyj6LFqhUn\n9Y3JRXqWY6Vps3tB7yP826lEb5++dlybvdrpMiJgAey0WnOFSGT8T+SW9pUi\no3KpsPmPs/NXW0OMW/6tKc58LYAZhGebYUTVjkYyzWwnJXRJerugYWab6mid\nZOr5f0uN2nQ+rT9u6FotLLO4ia/mQJgmKMVvRqRXwzdOArhstR+Cz9DPRqCG\n/0xw\r\n=WCyo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBntd8tvwQVkowhp4zkdTh/jxFPN+dzwey1mTBOdR2SvAiBpVdj6DEF23S5YRoeILqLPYlBYe6dYo0p+WStCLdeuLQ=="}]},"_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/embedly-card_1.2111242025.0_1637844163892_0.2372171700034571"},"_hasShrinkwrap":false},"1.2111292120.0":{"name":"@bentoproject/embedly-card","version":"1.2111292120.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"e938f7c9446e2d1eb0f0f865c0f1ff42a4be76c5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2111292120.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-ILB+32nExgwjnTw2VL3DthFRUFgwLIFJuUzEllZP/7l5Mo8ovAD+gL+5CCuslHtG+gXIVOsFjTkhX4m18XjtWA==","shasum":"1ba424c7f5144afb178155f1c4cc858c76fc7148","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2111292120.0.tgz","fileCount":27,"unpackedSize":2428267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhphvHCRA9TVsSAnZWagAA4YwP/j1Pat71kC+YeeUhgp09\n4RVOSjKyE/BJ5Rw3wZTDijffWU8a4tCZUC+m8jdr5HHIYduttru/vzaKP2WF\nIxk5bsGnMR1g2aDYj3BHHOvAILIk3Fx4N3jPixa5XiGyNAJDvJQq84l7aBW/\nMRx+m3PU2n+FqbdRytcYSQTK4IAzYIQie8VTqCXid5BFxPVBTDnOFcVrNrWA\nPet8rAWhd/bLH6afvHYww9uy6oiDT0aDnIwnBpEGBy8XG2H/kfUk6ITCLOcI\nkg5Ly1yJj+gBHh0wWPGIkbkoghq0PECJVkQtA9KHO1rCEVDqXmXzGlTFKoZP\nd1ucNwWXitBLp1ragMRuoqP9s/gOevpRjxzDGwsKiibZw+zYJ563k83aPRIo\nTWGwX5h8X6I9RtntAvmcjPyCyVMmI8ILMW0nLk9u2kEq4JU+yUkhvHfsxU3H\n2IBaEw48aWBGTVEzO4FyYg18u4WyLRBuHACyHw4qyL1qSib3X9CuP1jsHlUj\nq5n2P1vVpt9o/8ubpAJ6gi/DgfyV15oFcW0rCF9wOL5MM/UWomtYUazaxv3V\nZ3AfRTr6kW9z+f0w3qgWbuYqxAdZ77jfX8Av+p1g87RLCkv9gCtvxhCDtaRO\nkkXjb+EMJ35nqfvFe9DAml1segkS0mQO58uH0QSqFy4wagvGVoC7gqC6yqVL\nfh0Q\r\n=oPZJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWFEbf8L8CgJQbmWTSlHNs0BH8qw4Z0yufJQwqNK8nRQIgRIrYDOi1EWr0HC6XhDDcdpCuG7B9vpPuJwqRHpYRf70="}]},"_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/embedly-card_1.2111292120.0_1638276038934_0.9646549384176719"},"_hasShrinkwrap":false},"1.2111152338.2":{"name":"@bentoproject/embedly-card","version":"1.2111152338.2","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"27e204ed206cf75fae0a37d8f110b5fedb45fa7e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2111152338.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-KNVTThjOSeQLivKDmXeB3O6Ha1ovqKsnusMPCkY6ujFXEyvaNp87S5SJus137dk0YIYeOz6djPsiLD2K+9tmJw==","shasum":"f1d04b7354be3c3a15455677d008882bcc3d6cbe","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2111152338.2.tgz","fileCount":27,"unpackedSize":2428267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpmVwCRA9TVsSAnZWagAAri4QAI9KJFgqDojHAGMj7Ht8\nM7QfgCAytO36dwF8H7JcLyz32suMbK0GR9u4YAxTUxZeb6jtNDE9WltdjLb7\n1ERvSSQyyMkcLp+i1yJT5dSneNfGTVxF3BRYmP+o1PfuVhod5M5UTPZWl2fx\naY7V83FSHRbUOwgQ2U9F6ynbyKzSD5DD4tP9wJzvi4gvRs+sZQzC+kXqquuu\nKQlgHh4RX4kKlKrbwQStKcfPcs4mnfoGgknWcQv87+RAHStrXxxbOP/fqNn+\nCNvKiYufKZa8TUuDKvfIuYoyFJ1ao4q90+UnY4fqQZinkq/5EjD/Yr4PEdcy\nEH7A6i5vtMkgAyG33LYbagiADAz0wj2/AhWD6gMY95O6pauQf5l6hww+KMeA\nK/1VLhnKgg9oIm+7aksmaZL+KyGYoZDo2Zob3vK9o+7lMffZ2/EO6S3VKTM3\nFeOXXXj/iYarU9K4IoHjrQ7Ks69bEkM8X5MWUurhQEWvbNm1/CueJHJQttkj\nA284zrHSseiKpYddernmZhEXYK/asnvvdZ+iOA5Ubtv8OPKUu0y+eQ141+fJ\ni1l3f9K+6HtvrMkyu9zjj+fgNh+3454GzOGI3Ez93IxLJgTqjfXVHZ8BB8qI\nuEL8+/630HuY/FQBG3xxTa6d/qvFmVWNaR2nUh+/H1X8vOanZRBq3IYl4z1r\nSZE1\r\n=IyC3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGBB4/g2Pb5dMua0LSchEypHQ3w7ZT7Yn1sCKRuYN93KAiEAoAdjzfdtxIAjImZNLW2yVFb9B7Nu7zWPRuKPP+3sE0s="}]},"_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/embedly-card_1.2111152338.2_1638294895806_0.9666284542234118"},"_hasShrinkwrap":false},"1.2112010058.0":{"name":"@bentoproject/embedly-card","version":"1.2112010058.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"6d1060a3a4288fb99047cc700661d589bc9e2a01","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112010058.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-wjGg6cchx158YePBSXP2ZXFi1GOJsNYlc0V2Y239MuwyPDyrQZP6U0rYPu+DS44jsycSOiIkjsRacn8zJnMIdw==","shasum":"2d081df94a9f21616a33ebdbe8426e14156cda3b","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112010058.0.tgz","fileCount":27,"unpackedSize":2428539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhp2hBCRA9TVsSAnZWagAAMFkP/26QDq6V1yCeP/jo0Obw\nucFz5WttI+ekpMW6OQeryWjlQl2YFp/2JTKosc548veomgWOSpznIYxPw2ef\nyVJzYVwcyyInpEsk6oPx1NFXKgyEOfxBL/pwZi9TD4/WeRB/JQ6NmZngInBH\nWO1v3HOyz+eyjW0aHziWtAqaL8RSrjnpI9TNUttkcnHmOglQgSt85eH63qJR\n/hoxgOHMQAslPNFqTFIx+xgdzylreSIj78hckpOHxrA2jS4RGJfPGU0zZtAp\np/Ye8l+NMuKuqOnDLnvOS+RkzLY7WFAu4fLJqDoupSEhGppmjbfnU0YzA/BN\nfFQyfQpaxTsl88XQx9EDYYCV8+5AueWA3zZULcO9YNHjahJqpm5EzQt/+B88\nv9k8g6mg3MTNHUhIy8rQpj8sWnVUX1bgNInsyILREwG17U7uH4Xu456OuJXA\nM3bF0kEpNMUay+YuaBzpJr4bP1va0L14SECb+cX2lWSIprmLjbpbHNnatWhO\nORZxBKcIytVFP5dqz6LASfpsGE/J54UPdHetl09fwCDin/3gRYJpaPw1T3eb\nY1Kn1BdYnz8X4PjdxNHFh5dbVuMh6QueBWHIrnXXxtNOD3fsxIVU/96W7bcW\nyyzGGeMGRWQVuh+6hPdkfrXZJ9NyjRQKZ5A5dz6RWkyRDWamo0ftUvHjwXXE\n4+Ga\r\n=S6nt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWwdfmmj2Y+zJZIx6srDJGSPuq6aqjifr2eqZLNtpbHAiEAx5Et7XlUTvAex2UIPVY5er7scyQqbItNovGika7rioI="}]},"_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/embedly-card_1.2112010058.0_1638361153320_0.5690052140772239"},"_hasShrinkwrap":false},"1.2112012300.0":{"name":"@bentoproject/embedly-card","version":"1.2112012300.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"4ecf84d856583465c1ab59847234535fed16d55a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112012300.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-vlDru08t7jhf7VhlzLcbhq46/YxiTBs9RxK5CsaBV+4OYLwoN58FRDTa0polH9+p7GLBvqqmCUlHvRUurNv2rw==","shasum":"1c4990b76dba12bbff17f6a00ffac76f55463e36","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112012300.0.tgz","fileCount":27,"unpackedSize":2428539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqLx2CRA9TVsSAnZWagAAJmUQAJZVKwCZYHIXrlyxcHks\n3egMS+kRP7kKf7GnTz1UY6gqjTYpgVKP45X79bXzcDmZ0Us+cV94KZMSSB1e\nCuAz9ygOwbyLoS0+mn3OmcS4RZPtF3mef+zKswxGm2hyrPDk4gfTn/TLFsuO\nrhS1pSzBU+FK0XWP75sWAdJ29kRusHQhZ/rp6297O/H7RFZDKoNQiC0YuNJ3\nWkm6BLBSiv+KvwGG7aIuK1+JZD3xkULyvvk+cElduTobO48dzp1t4rOPjjFu\nylqLinHOl+KafmL3MgxD+NU1YGV5uX+/4FtBvE9nP68gEL8K8PkYxtlv0WH+\nQD0UC/dJL9+aCv93WlYktePZ5GUCsPwSJ6NCPT5L+Z8/Dc70DHvHo8rVsp7B\nacvQvPiEeWAkTM7ylU1SruIujCT0d4kL3ZNyV78WUF9Qdt0qfr8nhsjHXhDP\ncTLAasEJSp4Lo1npyQNxOD8rB74AcNs77/JzpEzXYkCF5WSLafSr0F4BJEPX\nF72s4Rvih/sxSAqA/LRqAJabKDyWbmrNztgeTC8whTQgMIlt8aBu5jNWqsUd\nWSeR3ep1mYILKowa032vscjuvPbg6PMWOJAJyw1nebzWjlez2LJdRHE3zD78\nrvMq0CLpE4osDAjkGvbI8gWz3wTwqn2syLB6BvNUhg27svQIOJ1TnsO0gvmX\nILkC\r\n=qpLS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoEk+xOJDY8/Kh3+A0RrRibRW8Gb5tpMwgV9LHlioJEgIgdCWWxwdo5ZK8G1xayceIRXp/zS2QtXC6HnxvFlUnsSs="}]},"_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/embedly-card_1.2112012300.0_1638448245931_0.8464511641841301"},"_hasShrinkwrap":false},"1.2112021656.0":{"name":"@bentoproject/embedly-card","version":"1.2112021656.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"4a66d3f7120b51959ea01867aa68d516d5e0dc36","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112021656.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-h7HJgcmn/EEFj50D0Pe9DYCc7BF/NdaeTcJybpZO2/KZxfDfDF7immlGjNFplN/UUPmLbx81v0xYY/peFhInAQ==","shasum":"e309ee3f72c9361dfd7522b71281badc506c5314","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112021656.0.tgz","fileCount":27,"unpackedSize":2428539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqgvlCRA9TVsSAnZWagAA09EQAIkPMAKZL0oxvPK5q41Z\nykZ/6l7HyP8luCiN1AYeb2AuIlGyXu/o/P6KDjRxyy940ICGJ4MoQdEGmZa7\ngrm9gJ83PTGgQwnLfw8RKugOgeXcdiYJAaqY9SceczdHBG3BiKae7GY4RRai\nPE9jP65sa54WduwpOacHbHlSaCa8IeBab4RLqVgLSx9fFa++PjKj6s+a42cv\npLQWx3RjkcdtLy+S+sxFECDTz/+QoILfBtB7m4IWH6Xp1FKKLS6vzo2cwPbu\nKzqFaF2fDmu6tcJHxwOWA5j0khCJDk7A3OjRBvtuPZdJuEnEogzkyoZbogZp\n98UjsFrTqJwoOJ/f9V+PYV+5QRJeYDP6oF54I8K6z4+SadA+sFkj9L8L93t3\nXJzU6f2KoMmKLhEsWmph6FiFvmxqaWjzKrn6CZCW0cdudqKvmQoyXvK5TrY6\nLgfe7DLgIdPuFnolAkpnqSmieUUwODsI3yHxkgGcsCy86M8yP7TkYp17qicT\nHsjAyZfi5r0EcWc2UL/5Wtgo4T3gzyNNlMpYxh0In0qZsopG6CnS1VHwNFDn\n0XpwwiGxeJbodK/s8qfsYpZCwXfn294SVUzNayG6j/1IxZucFedugQ5HoPja\nVpZ8VTJj3snfqWuqyiysGjhCiq/KcuVcgSxiSTCJ3lKsbPh16L+wsiKZOHuK\nYavF\r\n=k8Ag\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB9rLCJoiIAz1eVcYbvRrQN4MKDFRp8lP52/o2OwVfGwIhAP360IZzNEn0T2ERVDTMVTvbXqxrkIlQRq1QViuHHTp9"}]},"_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/embedly-card_1.2112021656.0_1638534117205_0.6598595594578243"},"_hasShrinkwrap":false},"1.2112032204.0":{"name":"@bentoproject/embedly-card","version":"1.2112032204.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"80ca53e97f8ac619b78398d429e0031f40cf68c0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112032204.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-/sRj85XX8EgkLFU5nS8bplm3KrZlypNSmQGUkvvdEiaEO8+NFmHQRYYjA//LlMi5Fx3XwFEGR9fPZcEZ9neF4g==","shasum":"7af38ffabd827de6bdf2f28d67bab62965baa690","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112032204.0.tgz","fileCount":27,"unpackedSize":2419258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhq1z+CRA9TVsSAnZWagAAeFcP/ihTcr8VWBd6bzYWNx5N\nbl/HhnaVMmoHieV3kczvOPNQooDF6Y9RRakGFuKg3IolVJ3CiJ/UqD9kKnZp\nznbJv4boQIL5awlwop/Z9CoB2zp+oSfw7ToEAqQm6WLDeYJyPeookY519NTm\njE0V2Ln7hdzjDVqJBqOM2J4aZpX1uzPNh8qY+iUuMnY7p1uVdRNfgcB5YleF\nKGPOa9raCZBob4qKlfF6bdomF3rfEj4fjL6mua4lhH3iZSFDsVJ6VQQb4PsS\n9r8e7vqxWistQJLPjqgV19wT0i7sWe3CpsflWk9et1Qyhc/7osWW8MjosQWp\np7MLs8vMRdzYqCTAN379uZRVIv4dwE7+OlQRdI9rjf3vhCMq2bD/g1YdlPXN\nYBWLzBls6/fjMRtPANYZVHF4tcD4wLVmXyl6amaF6Q3tqgxCIeF954rC2WG5\nwEeJOaAk/5+dRf7HSWvLaHneg1FSqiDF6LhnCz9bSo2qeZ7/5mo2J1YBvD19\n6gH3wG+D3ysXtBX3HwjlwKSFui8n8hPQ8GzJmsal9SbD5ycsVYRLJsP7wb6Y\nK1a0862UgKk7CPDowM0O93107xGJCEIyAKHLNTX2x13J4Le6gVRhQDjH0wc/\n2hWyE857YFNd37R42WaxiTrrT3Ok/FbcErYDXQ+IFPLgHD0P2Eek0PzvrjEw\nQoH/\r\n=/rku\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHVhdhm9f1U3QwVhh/EyNUhQPBgGNqJpFurvli8mmrkQAiBQoRzUB1ZVFCVp7JjVKMxtsYT6G0+R6hsdO7qPfMrDBA=="}]},"_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/embedly-card_1.2112032204.0_1638620414582_0.07699959069772833"},"_hasShrinkwrap":false},"1.2112062322.0":{"name":"@bentoproject/embedly-card","version":"1.2112062322.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"cddcce65024c209c9420ce0567f525aef4fc971f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112062322.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-TY8dQxEV1s6KrYQ7wK31goXHU6haBlOFftjvtSfvzsz2k5lto0vljYZU22nBQ7ADqPosXENRTwAVOoB2IoTUdQ==","shasum":"d5c498e4c65eab6c41ceaaedd5cf72065128809b","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112062322.0.tgz","fileCount":27,"unpackedSize":2421362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr1MMCRA9TVsSAnZWagAAEm8P/2gWSbiusv+7etS26qg+\nkWoRyZ4tHbzzlqkWCIYR2i9jXg/p7yFGusCPB+U5IWZJmXmqdsSwPyLybI2J\nkyjibOyJhLVZ65+oBSySGHt6rEE41q+whcS+LCblll0tAic7nM91u63fcba1\nzToP41ZPf8roogcpUltHqeedVpiyG5zSt6JjDYSnmLdlmNnGSl58F3puB8B9\nwmpvEVUjLZcB4zR2V/DZELz3h81gs+bbuq+BV3f8X7i6n54XkcDyUyNSf55V\n6tMqb5SmGxVQVM1hHGWD9SGJV2tZ4pf02ZbGiRdFgdvwsDmoYoqLkVDAOcj4\nhVUSp/smoWLlf1qA1H6MnP5NaX0CSvvL4mpwgzkUqFpqnZuJU3Qe7mNvwSg7\n2xps+/AHfRh25FXxspaAfCLrjk1OcU13Pxr/KxKvzFJmmqvz0jiP8lQMVAE9\n8b45RevbyPzaQXpEsSeScum0w0gk1HkwKU18EcJVihDP+oYi6u0ymgfb4+E9\nw6KXKoy2/RXn3Yqa7uXttXFSBmdr8Sv9mU7PNMt0fx6DEmRlTbI4tIb9pjl6\nnmcDv8A/RBrL4yCoLpKl2kYrva41HUM0JmE7ai3ZEWcUT62+6V2vTjsguXYr\nTu1vomoh8k6eMH+F9UepHvjIyGefUUvioZSB4rMEnqiVW78HZ3ahBFoxPvJy\nXPWs\r\n=LAQP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTpYLALOxAnM3pPXOOMUsLgLQfSYSIYzq4VJDV4XgyYAIgcVqrZ6wMxromORkfqdfqoHPH0yy344eFwxQXzfzjCDM="}]},"_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/embedly-card_1.2112062322.0_1638880012188_0.7841379711860827"},"_hasShrinkwrap":false},"1.2112062322.2":{"name":"@bentoproject/embedly-card","version":"1.2112062322.2","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"3e8072d191c8771ac14d19f2122bba93b872265b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112062322.2","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-2HAkTSkA1oNE2TffsQ2cLIiqx9Ya5Rbe972fxyY+RGc0LXgDzE6kpiAH6QVjkJhpEtTa4hXquvt3avDJJxvMng==","shasum":"5883914ab8e54ddbda12b31e13948e2989952f23","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112062322.2.tgz","fileCount":27,"unpackedSize":2421362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhr+AjCRA9TVsSAnZWagAAdiIP/R9HocBC+CimSKeepQNS\ndc+DcRL3ErPbGaWAbQCFLUvrfm6HIJb+vvXddWgUxSBx3cVptFVeQmMp/F59\n0TS9a3Tp8ijfl6vQALfGZ0pOM7NJ+NDRlWFwI7AFaa/Gf5wGwmjgrArichb7\nv6dlkdNI5wqhTf4ilX8AxYUHVkkTisix2ZwkrqVyfH/gy5+tBlQ8y7K8hgD8\nf03khNkHY4YhP6KR8Z1wH0Mz4dPRpsGyZckqFP4U38z08XjXzukun4uJPj4M\ncTCM72MVgLlbCtaSePJeIykFkPULqIgoe/4QIkXqfs4Hcp/EbEgNh34lxB6/\nLbcehM4OfLkwxCwgh/GaaOJmYbmhHOwbEwsqlMzfAK6mt2y5w0aXPIXphYab\n60nSmUr2d/gRdTfZVvcuTtiyn9HG3NqoDNCaTU24+QB689mWTNYnGaJmBauE\nfjetBEGXqSScU3Bj8IdpNlwasn6xPtnVWzBavTfNAW+cp9QGnOVuxL2ECjmc\ngEZQZMpFASKICIOkACrNPx3UIqb1oeFqwdM53NtUfzkItv/J5nXXzqBnHN8e\nwgsB9RwNuu7MPYwTIaD0RzKtoaE7+znPVJjIIYvQ6PblzWGpfFLqsU03pPCd\nKXY1dphYeIs68QUQsTdVfC+3okH1RB87p0bMnDg3EIDXCk/vM+TmMwRi6Ixw\nueQG\r\n=1UTf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBnk4jMSbMl8lSESwzVo/+iE9RySlPVEGOeJ4MDJKleZAiEAldL7Isuwg8BUj1ETCNiU56Q2pLXs88urCoXtmsI26fM="}]},"_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/embedly-card_1.2112062322.2_1638916131322_0.11868143572642698"},"_hasShrinkwrap":false},"1.2112080230.0":{"name":"@bentoproject/embedly-card","version":"1.2112080230.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"6d03180e136b7ae380fb9d5d3d6fd8c0d5b28e04","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112080230.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-Y0dYT6Z5g6uxkGboT52gbLjDgL97tEwqO4rj3sxTgxzYIBblxrNx5nl9UrL4SS2rWBNHpOLNveuaYzTS9DmDAw==","shasum":"ab501e681b03fb5f6e4e38b249872b250afd9711","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112080230.0.tgz","fileCount":27,"unpackedSize":2421362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsLFtCRA9TVsSAnZWagAAH3AQAJamtdoG+fPt+PAhkAoh\nUMzKl8/aJFrBWj7kGqv6Zonwva3hXf8OZfYG+Wj2je6FHWuO9hvisarvvEhm\nsgHyfPRj5Pv4WBHO2XlrPVDQA5Jq3T4G32AhprbSC5Uefu2uF5mEwov9Gy67\nyHMF3MHPByZcOTG8uwM+w7HZZfjydL/Fxs3SC8LbNRqcfqs9oP/6XiplBjVP\ntVaW2WbjYnSMMIaoQ2ki7kWhKIvFsssb0goJFeETOliVi5OvpZxU4YhA+SHN\nQcBuzq0faE0BkQU/i284nGTy3fdGPdHyhY4znuTJhyMyC6h7wzz4kTNai4Zx\nIGOHHcGy9sDNlP5YC39iVWYTlrRxrbvkWUMv8AruBikuXnR9H6M5uEFpYGo4\nZpKSzO14I7aoMDCOZxhXUY5Vg9/oHR7vM/lP3hgPXG865bEt6wE5ZC12EVjl\n0/GE0IxbiohqycfgOsqf4x6oZhaqKK+lAZeEkChFutONCyy0uHvdO++BRxxk\nnjbiJkhzzozpsl4apFK0drygfPiqkHRDTWc/SwHWknCVsok5IDnrtQqYOfw2\n5YalvoLP7wP1KnHqzagopGSv9Ys8aWo2wx+40Zv1taFtvItAl28KNsIXC33Z\nqa6zlBtqjP30imYq5+Ebdcsxn4kEfUxAKOhT8y6oKV2+iu+bscz0vpcSI83O\nSv3F\r\n=2pgg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYX9UKQRt3RmatB/Wipz9HLapc56agV1leRPDalzPiwAiAiOafoWLtGbbNH4AGLLsp7YgKqNdZ2FZt4Sil33O6IiA=="}]},"_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/embedly-card_1.2112080230.0_1638969708984_0.9624957300215655"},"_hasShrinkwrap":false},"1.2112080230.1":{"name":"@bentoproject/embedly-card","version":"1.2112080230.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6268ef31f81697778937a9d77d4ccda3a561f39f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112080230.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-PdmEFJ/HL6E1Am9TNGpTU9ll2BU1Z+L92oeLNrMDc5hBJLRwKLuMi1rFon4Jr+DYj9YgeUSyYk1A1lYRy79OeA==","shasum":"459155e4f7777bf977564e3b9523d6cfe576b3ea","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112080230.1.tgz","fileCount":27,"unpackedSize":2421380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsNXYCRA9TVsSAnZWagAAU18P+gPXRFsxldkzg9mzmijz\nOVsTDiAO7k2F6HTnKQ698/QJSUYFIkUqab4+akB1HsKEr45GF3x9Bb7ptKki\nsg+nKDZomkmBVSI2mmSgMoR94h2aqw2OM27gWBcWsUp67/lFtrHb6eka52G9\nkkg/f2B8Na2c3TiZBhjH3FxiTJXNRSyxeVRJEK3bwec5FWA2u1Ha/aLZaAqB\niQaSEEnSqVJ7ujLD/IFQH6KmGvXyfxTm9OyxRamQ2YAwvsP2mS74PiD6FvSM\nuts8ybXHid1Y8GCQy3/C0spf73ecdeJBLIZmJVn5njkAOFCsmUN95A0haXzK\nwnURvbVS7HfY+q/U2qDXiB7Fgd813kodgs3/DRX09TUmkTB92x95BEN8cSqV\nZIh7C613GHZ46z/ZzhY/b+keQfrb7ZNccsOz1b3xTjrM6Hui3aMHBN1AKOmM\ntkyftnXZZlQEs7BMeV10nqc6xrLY0mYKqPtgwwhqSTreCH8Y69w9Rg5HBpJj\nD9XxGubuoM3eyBhKCpZT4vO5hLmgu+fEzdWRusuWSXgEDSa8AERlz7IHdU+Q\nTJJaSnSmBxNqqt0GAvMQuYXtqNiJkKxIy1HjPNmo0p4NRqPXi6bwAr05W/cy\nM5gbj+GOJ9mVvzFC2alrLHcXDteyQ22z9WnPVBKVskTckacIS+UUs8Fvz+59\nJMkS\r\n=Dvku\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDJJgoMkr52ITguEegOHjZRYLuzLMqhg3T0z7NYrKV1rAiEAq5aRz8KJjd+v5JitB4EePfdPwfFKqc+3l8iCCouYZCE="}]},"_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/embedly-card_1.2112080230.1_1638979031898_0.6263539415987609"},"_hasShrinkwrap":false},"1.2112082232.0":{"name":"@bentoproject/embedly-card","version":"1.2112082232.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"b7b1a9f9f7f0773645f4fbcb9a550233900046a0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112082232.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-aQ5/xDBKzJL9c/T1PVmdlo678nVfCHRD5ukxpnWzfej77x4E5WdU05jBxa1hJM7LgyHoad18JtMwMn0yaPfq2w==","shasum":"0bbae2555d644460ead0407cd92d627f297d3039","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112082232.0.tgz","fileCount":27,"unpackedSize":2421380,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsfpbCRA9TVsSAnZWagAAB+kP/2kdz4gpjEjhuZKV6rWd\nnjUDcEuDj+Qd/9JcoORwA7Ip4Yr4HMVW9Ty0Fdcx900KBjeC4DqQImBdU3FR\nDXaTyTqECDTI0ntWIPzD6yfRfXyVMhU2Moa1ldeMeVF3uiVfIsyhK5Z2HyKB\nhVuEpP10TGp1mmj5AgmRH/WVuKzG8RLCuwhzb/aoYC+kVThGGrnAsc+c6dNf\nzg9BA2JUiEjKepJxm14Awmu8J4M0WJccLAV+dJVa+zQvxRcwhpj13iktZnTA\nIWrzOYQyIVRSu6SzxbQk2i+SHH2GM2DzTGOBWZLYiSnF/Khm2r9StDkcJ2wI\n6nbrV2XCTgoK4sVOqH/Qlf2/rEgbdlSX8gtijmbMgHpun4vhMosspOOIjiVo\nHURpqg46Mt4pF+CGO9iT3vn3ZRHXqeq8ZwIuFooL40RkA6SijUOTaX8oO2qU\nQD91LpFcJhVLwh4x3qVFlpbQfCR30CUyIqdI5VgrZVohEiAvLZzSerqr2qN/\nodNTAx++RjzFvVNwSHdg9WEgORf8rJbsx0hezgufbr55rG+cxPtx0EPfXdcO\nvWi/FL4Dw2oeGqgzgwz1uAq4oqE/Dro1S9/ZGqbb43wbIazhJ6+Aes5K8lMC\nb1MVjqIbxU3ESFdLkfpt9OMN17r/0Da0isZloQNlQLO3e+Ps7vBnQJ4NG0Ej\n46YC\r\n=PIsE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZoEWxiC9vCDcTTGORY4ya+Es+X/I7BIzhgukvzACo4AiEAqvps63FU18BfsTOmnzhZuTWnOYd9CGLRLuJhOJFKNuU="}]},"_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/embedly-card_1.2112082232.0_1639053914993_0.06210481755213326"},"_hasShrinkwrap":false},"1.2111242025.1":{"name":"@bentoproject/embedly-card","version":"1.2111242025.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2111242025.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-8+sIKseIPHmQ616vLYJMzpN7OolFpaRdT4Yt6ncENPDAP3ajja3aMIbRdX2cDj3fDoGDUwFLqYFRrbiuy+XydQ==","shasum":"acb6d136dd4593ba71eb624062832428c700d1de","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2111242025.1.tgz","fileCount":27,"unpackedSize":2403220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsptLCRA9TVsSAnZWagAAVkkQAI0hGCf/pE8psdrZ1SQl\nGm76d7WvvPZIokdm0pUPp2ER+RWipUaqpRH07zAbqHqzwZlMJTHlr+YkmR+5\nvs/aXgE9cbPrrEIADo7bF+xxuzaXdK+Rrijw3eYIts97P37CYedKil0freA9\nkUoSxKgDtlub/T6ZlGIGfTSsfzSCmCSd7BHsKqxqxjJGcKWPv0eiM9JjY/FA\nI3amJQmWVDltPPNHJRP7fq7WuWF12G1ZKnaMXHGaRBESO+j6259Dkae2H9Oa\nyoQxExq60ICE1g4yOFOGMiHqNWko0VHUJ3FoesDed+y0sds1UD7aiCXyywkd\nDDhUdqJfPjbjhM00yF1git1HtzeOQJbkrXLjnJLrx5WtheWIg+tsColFcVgb\nBtQ5cutwo9jGtouIgt1helmS9z0BkmPL3Op8HJCIqvkMr4Q1RgBLHuxg/RqG\nbuGm2X8MuOY1CQKIufHJv2F/RjxsD0yapTv6OJzHkDRXMxt5QxUQrueJ0vLm\nm9fosD8MJwoPM+siy+xgZZ95ljbArYAbk/2iCQU1MrTyBBa2+lr284QuaJVX\nj/Vht+KVT7ibwfmBd2gYWMIGz+rouO1HNT4EtBSi6RylKN3DD6UxeUNEYmhx\nbyohGFQ1u8mM+3leCEBbjgUda+QsPiIj/tfT8Doi+2Uid6F/e5sb3g+N6hOc\nrmQr\r\n=pFPs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBP4nRoT+Re5ag0tloh5UXgvrDOYfJ5m7yKLswWSXXdWAiB3THPArGIEiE1xJszk1Cj/r2EDZu2FExgTH9gwZnPUdQ=="}]},"_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/embedly-card_1.2111242025.1_1639095115047_0.8013967713670325"},"_hasShrinkwrap":false},"1.2112091956.0":{"name":"@bentoproject/embedly-card","version":"1.2112091956.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"b65dbd2c132f8cee302c477f3a52cb864a79663a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112091956.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-tGmoMUVNjfE8o041atpiZUAJnrJTsL8WdE+35MQuLAj7Zros5fooRsY/gASUtsibUAMET/nqF7KikO3i7GOz6g==","shasum":"bd9680f8f98d516e4b46b37ac3f31365b9b4ee6a","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112091956.0.tgz","fileCount":27,"unpackedSize":2403220,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs0w9CRA9TVsSAnZWagAAIfAP/AvVOqPRj+QNsj5mae8m\nqhgQbxz5H/8rVOn0bY3fBuPdkw5fdvoWHk4poqYotdAXim4c1se5aqrg6CsH\nRYq6GEt6H5cZ43OlQK9U+KE7Lx3OPzfiD6BRFg+jKzfHb1xpRogUcXaBwti+\n6tZQKlZLOYq889U2DfXBfkgnqNxi3iOFgem+3qGl1byYHhXVUfDdyDkqzbYf\nSWmIvlo8joFWKKJMdCGMma/d9br+p3Pstd9VOkUkk4CqAYJZQHB0f2XqLNQ1\nUT2wXwpDLHyfV7bsHUUtUSr+Gp9lJrsn9OW/1jL/kIPnol0BedqND+tymn0Q\nopEqxVCBt5xeSuVveXeirE6tbo0xf9uYKqzQusSksRDKbcIrHw+WRxwIukdH\nvqRkYh6bw55HZMFt6HwVPf8Vckx4ao8iEdsvu/3gKmuJmttUOH46z7X+30RY\nAJtwrAvSW7ZLBxzn6kRHcgcljLcPdobr8os0RcCavWFVzgsacnx0G8m1bSCF\nURWOK/iup6cgTbtPkTZDjQkCp3N3+FKvvQSxbC6oRx0cD704DCjxjHH/Ff8J\nhViDgPTBCFOmSEmTVJB8ItPS3sQYensA3gEYFdR6VNV/w5lO/mXS7rr/CDac\ngYSbiDQBCD8MfVniqb5eL3feS4D5ecnt9EEtsAVVTVhvswUH8EFcekKiddtM\nIw5Q\r\n=Yp7x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6exNShH4K0fh4jSPciwu8lNLaB5fyls6aWomSI4xWsAIhAPnxxnKK2BclGSxvk+zV3cs74VffFSXZqRRdQiub/upQ"}]},"_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/embedly-card_1.2112091956.0_1639140413276_0.39063121222317276"},"_hasShrinkwrap":false},"1.2112102136.0":{"name":"@bentoproject/embedly-card","version":"1.2112102136.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"07236921f8e25ede71217e1921f8aac93c30ab6b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112102136.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-rX4MND3UbA2R2v6PMexU3sYPCBDtcaBqWM9kWlGLZ70OqYtXemiePEmY/1rWn2Q2emlTGNFVDJqA+oxl33B1gQ==","shasum":"c382d49b993168f3a9d5cac5e2f71f26c06494de","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112102136.0.tgz","fileCount":27,"unpackedSize":2399384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhtJo3CRA9TVsSAnZWagAA4R4P/iksPVTl4Muj6c+wPvOP\nlm4c7omvjk4QEwuwAzxgPFN2cK+s1R+yqR1ut+DKTwVyb3YlcEVXvHneIwcK\nkTKOXVW1LG4CubJaU81xL3N51baI7nf/OT4C4DE4pVtxQ9K0agadoyKnfj1G\n47REIa7J0YKmM51kex0Ng7/CW7KZGOPstE0quip3UWi4sSXlybSm839yxOGg\nX70uMPZmUYKjZ1WqjYjJVxV7Kpt9WLnsWnvWxMzUuBKdNr/wKpN6J0JmKoUo\nD//91c02uwPmQ7sJ5XYbFAl0kK/K16Zn/xUj+d4HimmeaZHu86Jae+KgCdgY\nu+OJxzargbxm8pAmv3jd150bBgGQ20T0vk//t+niIKjswHO6sJYXG/5pzX6g\nchsSyBdsXELGl12ZR2BlembOTKmYCLfM5eK/JoC+Qx5Z+Vor23lQQIqpjTWf\nsaa6uEHWt/rkkDBDno1eomZTZcB1k0Dd+Xt0nwH9GWhivjLIw1Z/lLP9R8qH\nTkRyvmSEP6jwAJKOwpPb+U34pqGuah/uoxRBY/Reau+2FBTNgcXzz4BUDPq+\npXX4gBk2QmPeG2RKL9zbYxDNaw1HpgzvxaDXE/s3iyWyYevkt6i5U4dOM1jt\nAVsM4/xTjWfyNVRgWILMG8qzulqAVALWYzuWEe84leysMmt8YVfEiDtSrRiL\nKmxw\r\n=YpTg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBwYthjIil6Z/ak5KMQwAywRDIv/B33JsRE3n1vMmeTnAiEA8NP188vtcbaCWXV6X8fEHzwkmnln9yKmIQO5vmf/haE="}]},"_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/embedly-card_1.2112102136.0_1639225911490_0.7115023824556279"},"_hasShrinkwrap":false},"1.2112132331.0":{"name":"@bentoproject/embedly-card","version":"1.2112132331.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"cf62ae1d6a12b70dfb6a7bd8ce66ed5bc6e30d1b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112132331.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-CL9fW4gnzrp/kPoOvoeOMONp5sIDjBANvu3OrWYiCq3T16JpP7T9SmkPkiEmLEnR6GJ8eHys+zMuaA6H5vfQvQ==","shasum":"0fb02d46a7b42bfe3c2fda5356e15b40ae37a7b7","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112132331.0.tgz","fileCount":27,"unpackedSize":2397194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuJUmCRA9TVsSAnZWagAAC7sP/2wJ8a/LYzGyGuYFBKVO\nlsGRwmd0SOUIRW2BL2aNy4JoiPAKDiJox5L12xnqOIXMcBtA+kmrCzeqbuCG\nI48a2XJJdhMsepMh10R3mZ2q11fkKfYEfqWIN3gM8gqu2+A+SfM/tGwup1Zl\nRK4Y30wmZ1SvF7T5DcOkxiAdK+vva5HCURxsisEOxlLguDO0KIKGq05Nrp6Z\n4Xy++fz8HclMLzjBsa7U5XVX6CuLFG5Cj077KuSdYv/9/Q15qTh0Vm93+GUe\n3g6BRTiRbcgorQ8y7IXF5NyZbZ6MkljMSuaWcWfFyi7CUs+68cCTyqIQo+/n\noXDhr65Hmfce6DgndSo2LZC21cIcje5yDABFslygE20r9DY4jWUy7aWPv1zP\nSeiPNkWsykrrk0mTSqdlHoMEuPWvNB6IQnAly144jOynqYZ6xQ0HFbKKL21I\nQM8eVnf7bvmNCxXSPFEaHuWmwePBBqXgh9W3XObNeZy2Y7ozFPEHgyNXpsmw\nMUgsgaXK7sLYbXMgWh1eJt0FDsYFAHRrVNQ0CiP3gxSwptz/ELG1iRnvqoaF\nFaZxjkkvKor0bj/2GGMEMrOraZ2BWriBAKoCeOasIjjjjCD8NhrhRX+huo7N\nU4vxcAWydEbdOl4Olmw9AHSwzwsjYhrfk34DLWZqQTjRWdVtmju/BQqDRNp3\nyLp3\r\n=bmor\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3n7Kecg+OkZWNpZCIDdQo3XZnguU0uY70cD+7nTYzgwIgH2U5xLjix17d18FeKtJb3svX1APwjBuiUSqVvpl2IjY="}]},"_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/embedly-card_1.2112132331.0_1639486757539_0.7085451059157206"},"_hasShrinkwrap":false},"1.2112160003.0":{"name":"@bentoproject/embedly-card","version":"1.2112160003.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"2bfd164830b15f49d7d86cf73821410a039d9039","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112160003.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ioFW/XN+o7WvekL6rwGavoPhFIGyMRk53JEeGuvEo0s2s4K9Dsw+0chtizBtrPG37iy5YYTPv/zbXC40vRXYow==","shasum":"0938968539e9a7b57ca26654abbd734f64215d26","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112160003.0.tgz","fileCount":27,"unpackedSize":2397194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuy7ECRA9TVsSAnZWagAA0aYQAKGvEb+/r/uhpjImxx/B\ntEP365/RkXMxeVtZ8SPAkKrfIZS+m77y79guLojDUqBtgwlZuCgJ60Q1e1k5\ngRxCqhS90eUnUhBrX9rTUDeke+dAkXZN+i0kb9qkyg8gwm5nEA+12fs03QuG\nyYh7UpVeWCZuTRsqN7FM3o6rsoCv+0Q8JJ3cyq6iKO7GX2T+wip3nPUiDB3m\nF+sKb1ZJmLBb9tVmk00ITgeyS1bDKwZdKOpUJcYLpZaWoRZTwzLkRwt7dcb4\nxwgEf8//FnVMUzUh1XkmYlRWCASUi31GyUBGb9UiKx95fFpWa5PanaoGQw2q\nWTR9tztgyqGR1j9QTwebQdAD4oNK+FlVhI5S2y3MHEoDkDMuBQ3CmDWyeuqT\nL3YXKZNZ0IWZWXlH+e2wmeQDmftpN9AcRkVWr5Q6xHxoEkOboAdaTFv2zNCc\nBBXirBlY9+x3oB8Rv0Juz0DK/8LkieBteUSPiBd6nZQQpw7dHM/M+Ji0JBo3\nRaXTDJ0BRrUSzeM2s0jV7+KsltUK8XO6TbBHBRBrepkybqhmgrhR0dwSR4zH\nffSKJMMEXNyNJqjxsJGB+Pv97TJRVr/NaQl0lfkunhuj/ueitlBdL7ZrJtBZ\n7rwHZNUZ3vPt6NjfR0+0J7MK0OfBXUvyTON4gLwayaBsia6P++YG8bEoJK7i\nuNLp\r\n=bb4B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHGxw71c1//l3Jpk3ymVyFUuBWjF5sOzGQ3AmNnfQb5oAiAoyA6luTKKFFP0FwKygTtgMceYokuCL24I6zGrun3yxQ=="}]},"_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/embedly-card_1.2112160003.0_1639657156534_0.5268281056386568"},"_hasShrinkwrap":false},"1.2112162055.0":{"name":"@bentoproject/embedly-card","version":"1.2112162055.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"e3242ec094a87348831cbdd342f5187068444994","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112162055.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-LbU7umwr0/kTCoR9I3jiwmCZ/KoOWcYF3uu5uMvEX7dJM8m4H1Y81WXkVCrZLNP/NUZcfbgQPWyhDRC8smYceQ==","shasum":"604b2612cb3f2a86cfe3048b5a193c9cab0232d0","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112162055.0.tgz","fileCount":27,"unpackedSize":2396906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvH/oCRA9TVsSAnZWagAARvgQAI1uvl1h6iQqDKHFjkkr\ngVUb177sVtZEd8ezUeUmtg9yGnVU1/mlfoMDy98+yWvIp0NZ/Ia4OENV2rPJ\n+yG/kqHZYdxRu1JhyE5hMgQw0htYXv1nY/X5niErNuhBeGanOoVN6b2GrfNz\nXFBy+yZIHVfdn0cqzorh9Jg+5W1hxzYeWXaBTjsQLJXWWxSIUIdXVULv0QGb\nTc6lEgofUu3cI21Gp2ILTsvTILoMa2d6+pqgiHHFBoV1JbgSE4xvgGeCKZDB\n+gf+r7/9PXDXZzatEehaYolVwWx2kYeKGltDTlh9ka1BszLw2vz081YiiSI5\nrM/4I+aFkOb78ZqEV05QXGSfVCRbKtqmMQ98XQ3xvgZOXGCjJ1kQ1hsTew1j\njpcTh+syNPqzQuMJaZARcgEOVzJit4hlk680N+d6klQ/QDX1tRCvv5TIsBx8\nsz1sz1tkqolc5xCkgNNYPewBDAFoWzIEswojluiOBD8TpKwEw4NjLdIreP24\n5bfhKi6/xNAKjPTkdLjPxyDUwKKoOOtgBvD4eiCDruj74TMd3nJMcr7DdVnw\npaY+0CI2TUDuH/5cfTBWGKXkn0hI8Bvf2u9UeGdg/ao61MONeuzjx0oUMIlk\nQdQoKdDAo9dPjpEuhufe+fNLNIXDVCN7CPMa5gvA+xwkEAEbuP+4nGqc88dI\nUnFE\r\n=Yzh4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFQORoKx0Qqi+APC2SQaU0xqDDOi/CUmty6NwYgdh9YBAiEAzPjS6oRTqMAmKrn7LOHM1ADrik1MJeDGfSDIC3U2FNg="}]},"_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/embedly-card_1.2112162055.0_1639743464244_0.4996510794117146"},"_hasShrinkwrap":false},"1.2112170012.0":{"name":"@bentoproject/embedly-card","version":"1.2112170012.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"38e50237c04e29792bd0ccfdc13308940a873817","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112170012.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-5ImRTHCFJjgQ59TOKypR/e84nj5h5qrGDzPeZQ7GDUckKD8D6PT+HIqo1kkxeCST6qVzrrWzuIUtnY4FndOaEw==","shasum":"ef40683e37780f09a777a5dc163244aa1cc7cc96","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112170012.0.tgz","fileCount":27,"unpackedSize":2397128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhvdGDCRA9TVsSAnZWagAAp8MP+wbK7ZEFG56XuaZVLqwB\nWmmL4HGQq/Mw6BAX5IQD9znVRLA5BPaFikT6GEFm7xERERnZRoEKvP3SBEUf\nkL9nV15B7UXNNOinJaYkVew6Ae9ejnDT5iWbUelp434+v7DC0no1u7hn5amj\n1J5m7UqjYrjv///QE+8Xg/FW7opNMPeIemzqxevXkR3ApiD3WJJTP1Xil650\nUoItdaG6zCFfkRgqhXzERPoQq9PZ7nuRXI3B+CfM41KHkVxghHh338mCFXyD\neZxJlMCz0JbTPShKBmekYsBSl2f6aFJT+9MtPwPdvaucsg9F4APSW81jziBi\n/rm+4+FhNPqG4YBBtZtb50xr1J4yDn6ICH3JH4cmyCm5B7fk1Bkm4DY4zhnM\nwQA80jUJz9wzV4+NZ9Q6xH5cQYixJUlNB4ysbZ1ubu6G8YLNGwppdgEzCaH0\nF12w7FiVIpWrN6foq/jo2uxVy1wQKCd+ue53GmZMAa0bcujG79Et3IEY8/41\nN4802y2+0N6Zrq4l/clkSnwZVpFVUq0LBeOWmZOYZbKX6l05fVsVCONGPR/v\nPhkFl5tf+8lwN9ug58l01TIJjhDAPVCWyN5RaURti0b04192OdKMsBxLyC2x\nQkWSDmRhW/WhRNOrdN5rikp55ib3/ufu36RqFfEDdejnHLkPSlVZUON5ST66\nfXAx\r\n=kvAm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCviUPYIH76D9RVDzTbMFU5atMg4L8JlOT/KVjxQYWIKAIgCqfL86hEWy7Y6g79CKyWL70Bv4+xhQVUSyKvzYA2xq4="}]},"_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/embedly-card_1.2112170012.0_1639829891118_0.03248227663302772"},"_hasShrinkwrap":false},"1.2112201724.0":{"name":"@bentoproject/embedly-card","version":"1.2112201724.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"a8be9d1eaab4dcebc8c170c9911acf0c8a5e73c1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112201724.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-BoUGqsonbyAY9PODJDCv+TXhZ0IrWZ2eam6aYvy1Q8d5BK7G0bLNCwFbSK+Lskvnf2ecKqAYTE69ElsAJa/Ogg==","shasum":"e45593f49bb65ced5cf231c060a2317acfcf870c","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112201724.0.tgz","fileCount":27,"unpackedSize":2397128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwcbKCRA9TVsSAnZWagAAE3gP/0JRtGzAxLqlY+Ltm8ol\n1hEKMEdPxQsvj2Oxa0FotjWdCxJBFpp2voffF1Ze+x7JbhDo55PTYgA/a85O\nQsVJ9/U12Y6WBp0lY/Hr/FYkmglo3yICFtVjbUJVqkczCIG6y54VZqYd1/Aa\nG+/ixGY5ldreG96qdNqV5185OkTddlqMH8XKtpYVVsk+FKuUqOSRjE2bCLVg\ngsuxbzPFJOzVsWuOg7q5YdaRPlvy+ttKbMM0ZiryBj7SSSuMt5Ko2OWKs5Ml\n9jJNJNYeN/AJHvmxQkjAqhIHAbJpk6/VLrJF1jrYEQm6PJk1+KMb0Np1YBvq\nzyoOhRvwh0cf5UWZAR7WSbK+/Vho8xiv9jsXry/xKG95nNY1aYIWb++3ODTH\nn+1lMnNXlvRSAV9PQYuARCNj7IibUJyQC9O94a13DnJCtaa2JMcie1Srozod\nXqECVu81NAyaLDConF4fTgiqBixXJfYf0Yn8hDBjj9xVkGlFS32PwiJLEJF7\nUqB9SBwFz6HiW1RoOx1Sk2YESwv/mj12Uckn7opTJDzU1CGPWnPxQPRsl4dC\nYdPYFPOfNwYlXzXNGdD7sD2kFK3r6URIBwvnxZZ2TwxD9BlG+zgS0d+Zrdee\nF97zfflKp75rSsDJSDN3vo0fRjpeG9N+8WqTt7+TQlyHJgfxN/CHtzMOxfC4\n7UiV\r\n=Y18+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIALJ9PbZplI5h6ILj3aOvgZzXuGR9ttiqqOIfPygsMeUAiBVWhFp31jNlYchPKA4v1y4hOHpHHzSstK61CI8Dp49GA=="}]},"_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/embedly-card_1.2112201724.0_1640089290602_0.47500204384140776"},"_hasShrinkwrap":false},"1.2112212349.0":{"name":"@bentoproject/embedly-card","version":"1.2112212349.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"a6b6a6c259283b2cfcfb474966602c2ada072484","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112212349.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-zM8xOjpL+Mau+9y9JUYGoFSBm33mIgVW+wHSppMzxzUWIi2//+XhEA1hrONcuPkXDbfNILu73sbmRAKaoMV4hg==","shasum":"20ea876ba10104273a2a6dbde39c6ac04b9a85c3","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112212349.0.tgz","fileCount":27,"unpackedSize":2397128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxjeCRA9TVsSAnZWagAAffYP+gJbhNqFXq81CoJ5TAe7\neIEULulNv5u3+7nlAVhPDNeQGhrfeSztkHjr/fdCkX8SFbLdlNA9Ha2k2Yon\nvaO8CYAMAPyBII4uwh/k0T4+FGqfgivRqhXzhXua+4O3/0kIsl9IMnRe0MnR\nk1A/3fat/ts6gsyj2KuSCq4ibn6dFzmdbt3SrxGkH4z5RWEKQTJWbUr23EdT\nbsS9BTM3YXZ9e7ogV6hgRxxC5lkFhcoMAD1FWyy6PZiURy3HJ9Uf22d/AI6g\nXF1xOpojh0GEkyRmrnruFAvajZfr6mgikYlSfm6sdPnygZM7z5IhjhQuzBo4\nxWhEQf3YMV6UWFkfIFWutdyMhIkcRuDFTjl0Ue5qvMZBjSj9/9B3+UoYRdLI\n5mgG0JhfnM1P+L3tRVVBPHrAJdjRlaIjukyxhkhSzOUg8Xxo5VQ99ogqcEVa\npnBkxXNFhtl8L7OyuGV/MejCYmrKtic4XulR0i+oFmM7v7BTpv7h2DfXJYtS\nP/3Z3iQC3wTPk+ao/9pK1EyyZs4FDiCHUxBugjGLtrO+cgs0ND9NZQttxXU/\npbRywG/rKROawLouN7sCdaWaaolvaAYNFgDAQN4V3CcKtUHw0qcMRvuycuwR\na62oUvbELUo8LqUPnWtoiNgeJjDGv57C8Rlj7aua9tWElqbCW9vbCBrVtz6z\nY/hA\r\n=G9OW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnEzt62jOPqkbpsifvpvddF0QWHN0jumbWu3WffCb/vgIgIGt7T+kTKuEafuRtLe5sQk3akm4an+6/0lWz5xeWzuc="}]},"_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/embedly-card_1.2112212349.0_1640175838171_0.7301740617476729"},"_hasShrinkwrap":false},"1.2112221739.0":{"name":"@bentoproject/embedly-card","version":"1.2112221739.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"5d282652a97695e5ec57a655f76c0cb6d40de066","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112221739.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-UrRVBGnD6tElYZImaA+M2XIhev9Xw30FzqIV/9rjcq8UxRQXcLEQciaPNTuU99qcU1dnZxEABQsyEjZa1a2+Vg==","shasum":"2f02659a7a8427bd3abc48da7c8f3bbd22c43259","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112221739.0.tgz","fileCount":27,"unpackedSize":2397128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxGlaCRA9TVsSAnZWagAArKMP/RFH/0WILUBxwzzXuym1\nTHAYCLXdjTalHIDLPCZGQ+ZcZdLvapA9IIP3jhpoUSIF7DYjIPyCr2pYjl7M\nwPsy34Xgm1O9/gEHSr2fmNRJSXmTeUtALNHaCXkAC/DmKK1IW9IkdZELY+aw\n/iSqTQuiMNZNuoKdwYDVf1VQ94fIMh+zbO53o2F2naKvRt6IfWDwBWFtLoRV\nnXDonsBCvUv/Ow5dwchywRzxIxXj39rRz3YgsxUbyiXz7GFyh7YvPH0d1T69\n2VKhFSWlP5zRr4sPd4U46RF/ROBXTp0NFE0pxU0TPcq0FtTsybNJB9V5dLD2\n0UG324OoO1d5tTT/eqvRC91AVq9Jzi4uWM1eA4cw3+/imZYufMhQFVZyHxTK\nKjDwI/McCV19PKxgf9OEJSEaJIzcJ+YDVEyQSMTNBNeT5Hkbhr1oIj3N2cUW\neiD7/6fqG6cqzTK8+nrQnSlXmQO8D++ttBjcqVwz939STGTEdOUIxHxAknKU\napA7tltPfEuyV5KXRIb/jL/z5oeAJaV/z5xUWOjipQHmAViFuMqBUfwirYTD\nbU++1geQdJ5t5FP+UnK0O9RbLpz9GhPglfPEiA03qtfeZ1coXnIAnncEMq9f\nC8+F4i0EdXkk2h4+qRhIMHGRL9nZTPy2zw+/P4eLm5gf1kPrrtU2XzlmJ5Rx\n12J9\r\n=lUDj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDHhWLHby0DBHt1NaxLeVPKPD4iQDd2W4+vNATi8QizuAiAi3Gsi5IbJHJfQNA9qBgnKe7wjteGxjMNYmrvEEoZGYQ=="}]},"_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/embedly-card_1.2112221739.0_1640261978656_0.881478879619189"},"_hasShrinkwrap":false},"1.2112231523.0":{"name":"@bentoproject/embedly-card","version":"1.2112231523.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"3d06e61b6949affa49fa2c89bd550777f0fc8c3a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112231523.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-DyHq4Nrv6HTL/ZMALH6sgZ9Dy4dvZ/DM6eZ4gWHUuQp69JW7bRoBIZ5I832ldP+77ifW7UbjiM/jNrtqI5+AuA==","shasum":"d8f9c90703f9b5818b04b20611a2461c0370c2d3","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112231523.0.tgz","fileCount":27,"unpackedSize":2397128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxbsMCRA9TVsSAnZWagAAqdAQAI4zjV8p/NPu9jF4m+cn\nhCfvfuqToIX6dTJ6DSPzqDor8YDPa8W7jcjhVF8hGquLz6L1m1O2OM+j210C\nIN8TZyfvK9DkDwOhYlXhOR2eul9CSaXxMTNxZ6YNl+oqNM6A4dnni61JQqyc\nqlpuNUMoMXKtwyl/5t3o3VLFHqrkwgG8EidWIDVY6fnb0NTVmk8VfV2esAs2\nL7VwsWjQzM/mSjTRn152QzETRXDoaJvxAnPZWf+rPrKjCKpw7bCFXysYbZqG\nlmxsL3dRmpenfutGuJ+jygrWKwf/YSQLfcSjGLYUV/ncG0mKSy9cfWO0+JN+\nuZaNTV5sYXLdBjvfOoukYtBG090bco3yHIlS/nwyigHO79A5XA1lODiPzH8R\n2xX8uzpl/FEerR1YcOfOKQGILIWKJ+boU9tlc5GY/dLBf74MR1vVzc7ft/4X\nI9m+/gZaaTo16Ar8YOk0PyOGHTpDf/Hfv5IK+CPqpC/bTZXmpGWe4x6OGp9O\njKykKJChEbbh2FTtuQp3wIWdahf4bxqK+MrlNPttQoJnliBOk9HGPWICnkBA\n04/wGPOLx+jEhA4/35ZauVxVJv4u4Pdc8vaXPNQ/wKZtRc8Zdt3Hs7doOE5q\nADWg0OrQCx7/spk+JfFKmfrbnFMZSwS2uMu6KPUugGY9UAOPDxUeMzIOgln2\n+82r\r\n=KlAJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCR40RTlHhDF0f4WUrWEFTGOwXp8HEwvoIfCxbArRqFZwIhAKgwsg7JzeuMorng3Vcerg3qEVxHnEgRy4u/E/dmbQ5T"}]},"_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/embedly-card_1.2112231523.0_1640348427986_0.16062515436533165"},"_hasShrinkwrap":false},"1.2201042109.0":{"name":"@bentoproject/embedly-card","version":"1.2201042109.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"9526fe41f7489e55b2e2a8bf52d6b0e4367e19e8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2201042109.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-OM4fUjHVUVFsJTGkeHiNawc1vG9rYklM16O6R7AqWEWnPC/tT0iE9d7itmqB8RmIhMOBjYsVO5oo1q3D2j7ICg==","shasum":"cf8b9dc04318885992dc11c1f39aa3847f5553dd","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2201042109.0.tgz","fileCount":27,"unpackedSize":2366738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1Y+aCRA9TVsSAnZWagAAZxMP/RDoT61aXuX9/jUv2q88\nTzxca35+/IFDH72K6nLF22BeKifQilfU01KvAF2fkpXn6FSgjFqKMvUI0IDA\n7LJYoGeQoAuMaSDtNiEVKklcu07+kyvMwCqeMpSR9VAAuV8jR6POYqIZa7Pn\nPRG4LxlyMqZgpKtRJXXFOIJ3rQjBr9C6dINHjDROHFY8zkxhZu88MOBaO47o\nTm58vFOgPUqi5hKQoh1v3W6CxRKY40ZAWDZTyp23nKh1c2xkoUeOJRf0G9y4\nRwCO58g9jXB4teT6Hb1r6xUwo1LgtB2u6z1WZAWYPXULsAFWCYl6V+JKERlz\n7sBpE9zHqWKxozlVTRypCItzYsVrjFu0u9WVqHnTS23hwUQbMnx2y2g5iQ2u\n2B0hrxPFzhxxdS9iTKAg7wn9ev0BeDGqnwZHYVnbfHTQIGV4YgGuqZpteNB1\nAoJSsTu4mIlWD8vIxj60kay9Kc9lp6fbp9fo1aek3zOrnAT/bF5txRb4pV0A\naQLNmbm2I3n4Yl/NuD88LTitLVqwOyjApGH5TXGc+YcSV4XrmmWub8+gP0FO\n6V2t4GTlry/TYqs6OeHBkQ6h/eiQptjsqKZH38GIUmJ5K50eqkPgcdoSXO82\nRC93sY6K/zbnPqa//HXELWrBHeS2i1b6GopeyfRRE8wZgHsPC4lo3rX4Pq3c\ntnA0\r\n=uQKY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+Lj/S6TAzHGF/f1ogmAraDa9sxOiHXLOZMNqr45s5nAIhAPD9ysyOhLByfvn/g9u/GN34ypys7hc0/gmdXjmhk613"}]},"_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/embedly-card_1.2201042109.0_1641385881486_0.007421745102500266"},"_hasShrinkwrap":false},"1.2201052144.0":{"name":"@bentoproject/embedly-card","version":"1.2201052144.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"09cb7c2c04a007089967ccf35accd80cfaff0c83","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2201052144.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-qYSxGqN6/YR3d+r3vypqDtUByi3Y3A1fSdUwdxSoizuI/8VETqSO1XUWegvq58T0/XWogPTbWLMlXoTVu4Rs8A==","shasum":"5950f29a1b49745a3a33e669573e6f5191abd44c","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2201052144.0.tgz","fileCount":27,"unpackedSize":2366738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1uNYCRA9TVsSAnZWagAARJIP/A/jI8Y5mCqC5r31n/s/\niqQBVHmwxoiNDFtwLpPGLQHnjcZWIA3ixTjgQfvgB8mPdIcg4qSYVihsTnJR\nVigmck9orH+uHHp/Jnn/Ihv8/uEm3aVkHEuXM6keBclzB2r1cKNnppMrNWhg\n4SEd42DIFloH3RCIPNb7G1SqLG2M3fuVPd4m45pIIBoyIUrclBBLARG6lkCT\neRGDgbzyuFEBQAYKbzJhoabqGFaZVG6680k6zTPsKkvZwxCzy+um/PrC06TL\n6kaeTC2eFwR9rdFiu5UJ0A86OWmjcWDrbLG1LMSy+4Dk/+3uSeIAzsdRwFB/\nPG5jlF2IQ24abI8RYjKy23WKgtlkNR65y2m03pDqNOjceQT0PobL7kJGXmXY\n6XnJoSyCCPAMFIgEfjPtscVozcGZfcbzSn7JmTcOanJS0q5Z03Vl51zsgj1f\nTJJv69ZIFvM18vrWVTzugWakZsl9lS2W7OluLEqpjEtK7mlS8t/2P+ffRQap\nsbvcemD11MCwxxKlhMd72nI/bIY/hsvtIziq+DWGMC59ynApNuePqQoXnC2t\nra+BQU37ehIbqYwTP8eaA8sKMvcwIOy+4dbuZeu1DgMKEYkP228hc/41flwG\nAwIyily+2XsSowdr7bmE89VFL6WVgiphezQSCAcT2O72AmtVHghZuBtgtWEj\n+mUV\r\n=s7yD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBeuIEqIINrk759AxPnvMFNgDxow92ieGB6gusVXTbJKAiB72q2POSwOL4QwHEs0nA3cIAER/4M8pIWhAg9+F04VAw=="}]},"_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/embedly-card_1.2201052144.0_1641472856528_0.9638690476598388"},"_hasShrinkwrap":false},"1.2201061922.0":{"name":"@bentoproject/embedly-card","version":"1.2201061922.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"737b882748278c09f4270720744c1618e36be6ba","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2201061922.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-mqdyl/MfvnZMjOQHozyjB11qTcv92Cn7y95nbB0cbUBg9tiKuNSiIoGzLck6r6uovCl9fb8wNaGvj/9HZp6NRQ==","shasum":"c6498a4c3720ac8210367e5c09bfeeda132e76ff","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2201061922.0.tgz","fileCount":27,"unpackedSize":1112741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2DKzCRA9TVsSAnZWagAAwfoP/0EIOhYiX9q8l+qK2VHN\n6Mxbr8dEoOVPGndz+KpZ1tCS5IwBjETgMecGmJ769ZM+f/gegh7CSyEEPrnQ\n79V4EhY2z3EVySIzSB6MKPd04iCCzpYovbQ+PB4l35+4btIUjH0f1MF1Szub\nTCtYZ/Py5Qc/avPKoyPzYvMGmFxzLh7DZsYceKSdv7CzIWwpUatzkQs2OW8E\noXD8R1AGNuDXjI0ije4/WBsOxkAUYgrffONeI+Hs6z1xVNfZX4D+Ty9yNUh0\nyrkTcgnLdsjk0D5nqDIVguJFZ92bTKkeZe4zCMrkVSamsBcYzYQnxmcA7/9b\n5W95H5NLAFTO/yVrGS9lqoL87M9jgPE6IPMhR1J98veQq+0MGrLWmAtBo/i0\nT/qSMSHfEva7/uPCz70Ha0kMgYcqyyKrM42BoD/E3QtOxqN1GsEcTN0PAnJV\nBm3qzgCxT0KZPokUNw4K7E7LRWewnTJV+mTeP6JWmJRf4J1SQIuA3TyTavm8\nZ9lpZhXqUjslQe9eAbJb/pLtEjjXQCdGmA94Y8blQpr2/BuqDtJs1x8IUmV3\nxUZicB6H5r6m5zOWmxKiVvj8xPYS9pzZ3Hiv8kNAaaQbw/RTIVteWT4wFM39\nXSQcTKsKVn1BIBvURQkwf32yKBql8B/PAQpKC/ssKIPNE92l0jjBgMAGS/3R\n6qih\r\n=Fg2E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHwqi0UDIoaeQBTCBAg2e0tKFB6rdnCUNp/uXfE+BtSLAiEAjEJ91ZamzTnwWMpDj7vMPDF4eVBbyw5B8/cxvIpmfQ8="}]},"_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/embedly-card_1.2201061922.0_1641558707145_0.007754317802835198"},"_hasShrinkwrap":false},"1.2201071715.0":{"name":"@bentoproject/embedly-card","version":"1.2201071715.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"e40a24fdddceb1c635f67571d9cf513c7e58800e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2201071715.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-hu41EWVzz0buKhFw3CdnL5/Cxef78lqBqxM3hPW8sCwcnM66KCUbrS3zS8ntlEyKJhwM18NEw338nDyqNOqnPg==","shasum":"d01214a9391f4c7ebaa1769b50de080aa73819f8","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2201071715.0.tgz","fileCount":27,"unpackedSize":1112741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2YHxCRA9TVsSAnZWagAAWJwP/RJAq97gdpPA9942n0W/\nSeB1LlRKVQMJRckI8nTM2yuau9ogHK2jzQmV9sTlIi44gro+A0BbW9h8HyD/\nGl/DBACtoj1/S6rcPpmRjBC8ybR8MZc8IO/FKHTz2h1x0RcMMlJVKqCK7C24\nC7RpbwiR75jQWOn0Z0wQ8ShmK2uqZ3UCi/tZdFvE/UYttBZlNAQt39890nrJ\nl7P1ue8Rp73PmCulpHYKXxqLeusjOZATVCo+MtfRWsW09Q31v7aeX8rfxjg1\nN3we9+l6JeC9asDFJJBM+4YyAvxL3Y5j9qO/z73oNXcUJDvnckcqBzyNPq0w\n6SPxnGjV3zlzScelQGFYS5aqU25LLdXTV0on/Bq2/w9rAwVQmnxvZ5lyC+0y\n2/XpXx9RNqZ0WTsOd+zk5uikhKbnrLJA5pE8SCI3jSeaNblZddgLc5FFO6ra\np+FpVhwLJp+XRNuOhgueRMUQE1n/znPtJrEe2DCKjVoFRpl62mCnsA1rT4/r\neSkFLLvM7IzNGRXUtqfcsxDbhdEQQl1sDa+SwYSWpuukOSw39iLF/93fQ22w\n2BgbQakyr2HJQDwtZiyG3ATFNJZoeQYP/PqMtNvqzVX+AqmzUXWeG9tCv+iW\n7fRqn7UUrME+gVRgpe7N8CO50P5udYS3a58zciKPn/AXVGvlYAR7yzlxwu7A\noD9c\r\n=xAT5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDixq2Mp+eKZAnjuaRLb/hX1ShEFLuphh12CI2gSTdjZgIgLwQkEd1VS+9yZ6bSmVmTUcG8/pnJaxyhotcFCBmXyig="}]},"_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/embedly-card_1.2201071715.0_1641644529770_0.28642434338842926"},"_hasShrinkwrap":false},"1.2201101902.0":{"name":"@bentoproject/embedly-card","version":"1.2201101902.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"f0b7ffe685c60b51cfbab92bada4e0c87e0377a1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2201101902.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-o8eOWKqLqcpzwKyr361XsJp2Jl6h/bhzU2dyOebU9etuw9HAYZQPVcT6tSlqCq0fEidQSNXplFimATb3aSQrDA==","shasum":"0be784adf103ede62c8dd27248585db4a86149f7","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2201101902.0.tgz","fileCount":27,"unpackedSize":1112741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3Xg4CRA9TVsSAnZWagAAUkcP+wTI/zHwf57DBBbmAUyR\nhHabAdidmSTGZy7NhGXV2MnJXn7yp6fMBll002sHWwGGzf/eVH7LhRtvcNgF\ngfEGnOrYvJYE+5Mxk0F9ASbpgQB3IvlenjOly7Ro746bGaiS0tGXnRy20u2y\nzVvKn1EHQXtJTIjOIWQ3719lF+LERJ7D11J+iuFmOjfHQzP7V78qbwgEXjLe\npHBgp9kza7CxkdGOzvB5FZchTUKSVIH2wAgik1xxccVaz0JyVs3npmIMmSO1\nzWBpGB3bJi38NsMvZtOlKymjLhf1mZGr3MZaITQXDivaWTck3Bc+LhdGbpFM\nEN0rySjoFIG9O1vH8UWhCUlr1laSubSbB0jgU/UOb0AoB6KJuIKzss8ckevf\nfWRDDk8HW4vsT/loLZPjYdG1B4JJkW/emb5dnRS9HZhgRNAp1+PjgAb2glJ7\nXg/lfs/mqIsimfC5gOjjAheyDuKCpFazaFnA8yKCmK1yVMm2XO5i0u9qtIpS\nu9Qi/0laDfNU6IDdadTmA7wTxUuVIFMa9yUuxaI0p96iuatcVQI6g+A7/iV0\nWVFnR/o+Wn77n2roUME1hFN3U5lu19BhG1S1lCkhtI/iOfQ6Z9NxhjUsdS/Z\ndkLryKwywy2+win7qBs9sV3SX6jWqq7X3fkyfWxhoPBtXMytvBHE2JS/epA+\nl9Cs\r\n=XTLO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFXsNfiQmgOcNj37m/FpL7p5oTg+jsKRKwoc+0C9rOhgIgZOmdtAslEndvdd2C8mJA2q/Q0zre4dIm1chQ7+B9rVo="}]},"_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/embedly-card_1.2201101902.0_1641904183797_0.9930154699153286"},"_hasShrinkwrap":false},"1.2112231523.1":{"name":"@bentoproject/embedly-card","version":"1.2112231523.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1ba2e6854831868cfbd5aecf8a74b09bb0fbc2ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112231523.1","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-pHs5OZWMCvFXdoFaBDTivizCkUCiOjDbhALhWAMDJgAWgyVhUchB+epll4EHbCnQO5gSicFDOTgyVhu8cDkpBQ==","shasum":"ef8097ced82d9312ca37394a44d69adf22b4894f","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112231523.1.tgz","fileCount":27,"unpackedSize":1112741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3dnQCRA9TVsSAnZWagAA5HwQAJIYLB4RytooDl/oAZJV\nJe28xxSsfxZxFw4Tt3nxftSuR/eVyINEp5BpuKcAEbQv5/w8VOgs56Obm293\nzww0Zh6j/r5F4HE5Z+J37BEqgYSQM6Xrq4bPrgreGNF5t3ua8ybJkSfqDHHr\n66qXpNWRXGFAZt4/AP0RX0YhegHkj8BMejobCP68F26kczoU9QISzL2dI7E7\nonrNbjfGlD2YJhpH9dxOTnAAHBX1jHaBlN66YGT5bPp/GGAQ/rPqCT2SThPm\nU0S5Cg3qOZlObogVDuiuS+ZeC5kdoKhtBsWihPeuzJ8UCNFzgHpzqtTilyFA\nzc9iZqtNQ5roX4e1PJyZRGgC+j6FBX/X4p1mFtkhwB9Qb5bYwBa+n8wjUTT3\nRYkKTep3Q3vmdlQJ2v09DQhf19iSUOuXcLZo+bcRahrrimZ9Ekxf2Mj2JnE6\n3Tv3NzOF8rD+gK6LxWq3ul6G1n+poPWIZK0LxJfmfFgsY490v89ZNonO+RBW\nBGx2W9ixAG5Z2lFAgRynb85qip5OrcTk5eiGAShMViw+hCW4VudIAknUvNnl\ny/9dcbM7kGdhCsD1vfCjD85Swhk30GHH7fwZpTPFc93IjmClcPUpaoiAObbL\nnf0xSLfdM5Nu+LzXk97po/mi4EMG7/ln0Cd6Y+dNt8o0TnraoFmkxEVD040r\n1Whq\r\n=JcaY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID9gM7ae187DjxwtU91qA23yogwYP3Y7dc33BZ9DHtNjAiBL0bcpWo1rr9+LcRPNKF1Ysi7JVlRTOC69MAB/kXyP9A=="}]},"_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/embedly-card_1.2112231523.1_1641929167959_0.08887373412069555"},"_hasShrinkwrap":false},"1.2201120015.0":{"name":"@bentoproject/embedly-card","version":"1.2201120015.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"c592aa0f3999a8b6109a8a31a07cae6a83115d8e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2201120015.0","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-8WOO/1dv6039UQEmZSPuMERGwaQtHZoX7rOd6RjXIC48LeADZOCPA4N4iox0SjLhf7BEJ+zKSfyTZBxVSR/GTg==","shasum":"7696805dab4c73c51cf3ee1311777b55b041454f","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2201120015.0.tgz","fileCount":27,"unpackedSize":1091450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3soICRA9TVsSAnZWagAAyvwP/2ufGVZ/rfkUOT447Vu7\nFl6bzBLP8RShySpcSWYx4KtN06hp/H7O+NGLFQUtCrLsCFrCnf21X/ZYUMG8\nF+PuC7B3O4h7BkqD9w9x0ESk3c+570PPaowzib24Jf8d7DfOV7aytWGaVUTK\nyrw/rWelv1ySvn2ydB4ESFDcBTnkddd+xZ1YQXU8tUGjprbPCE39TxIUuaqc\n38uQoC8KCGb3bqdGDRq5uTTHnH2tuPEnmo5/rOMpczUtbah6QDoCU1em6zxz\nCF5tXCY25nbgoveei7cMtqg7Sry/slcLMEM54W3+Y5I2lsGIfNfSiL1ZOLha\nRU6rbhYum8GEiA1sz6ZrhY0piNEPlssjGRir8I5N4Ki8CTFu9FT71xD8qB7r\nLm4zPEbN1DSH3A4bZutLwv48bAos/Zc/lkA70LBu16nV+gqzpfw9/GUh6DpW\nqZmimbujvwFCUoU6q/ac5wCIYRTTFZmiI+2Z0xIeK6QgjtfbxsyOFOEXQDA4\nDkrbiriutq0+UBell2avct6AQIlBNHVm9JHqJLHroM5aULexRj/Gjy/4O6bf\n8n2lNMmHZF5et066Xkj24V5dd0Ur5nQMKukc7bD1gw5CUmKeCGOrSB2TAArD\ndwZQoQtIkt4+OK4JqkJ7YIPDYu+mXt9YWXifcwg00BXQoPOWt/R/Z3C1G2xA\nS9pS\r\n=N2eJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDciQqrCkJTy3FulqYiXmHhBHmp6X1eGRiGC5ImVBHTHwIgfshfqihdDY2lGdBByr7vb4FHJBjL9qa/vLza7TAcGvo="}]},"_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/embedly-card_1.2201120015.0_1641990664597_0.3706524044766737"},"_hasShrinkwrap":false},"1.2112231523.2":{"name":"@bentoproject/embedly-card","version":"1.2112231523.2","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"036fd40f8ecb160f2d6c65688c6ff4765a670bf8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2112231523.2","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-TX0FafY6yh24PuqJRu+IDJi+2UOGoy7t1FUnSyMa1BNLfBf59K2oGeZtY2lXRj1nJQ2emxbrLRHuyjMNHTF1fA==","shasum":"533c9f43e9ece4422e0f46f9eef84536064c7c4a","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2112231523.2.tgz","fileCount":27,"unpackedSize":1087812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh31h+CRA9TVsSAnZWagAAZAwP/3Se3t6Xijb5JxznkgqD\nW0suYm65QwK1d467x7I/DSYvCg8oJgOn6I0d4gw9xa8c1T+0BjKJAYHnefEY\nd31WyqrmkHkDvIhjJirOQmg+xILmt3/J1Hxl2nF9295HgOBZCCHGwY7gsST6\nPTJEYd3TUX+HuDSXHC6MzBlJ/dNgk4vV8Hv9QECwvyn0AyOdTlK5sWgrZL8w\nnGTBEfSWbFa5AgWgeqK6EoMUIZVzhc8li2oJeu14CX8Fy99hXbYJsHtexRlH\nF6tYdaZugSdSTJxxz7XcVtK2HNOQtkK8mmWtxdZ+4p386hUqV0SlJ6Kt0Gs2\nDtQZJZyAYH2+sElqHAeB6UDC8WVyVw/Sf6olKOlTvxlBOiQVZ6y8mcudsGSp\nnY5ytcAdJVqtr2uK9ohh9iiDr9kb1v7H013cVkU1jZ/+wfPQ7MqoXVwogNYQ\nLFwOcMppzU3zBfmSDIj4GMNpG3Ii1dW+f6uMB4w2UvaF+/WElSnJbGkT3PwL\n74PPiv+8yKjZ4p/vnQbr8iABEZfaHR16XLzTEtDx+18PDgqf/m4E0dGxaoac\nF01LYJ0UIrHS0y1Kdl+O3PPCYeuBDZND2g0pOnjbO/ozroNuWWECxx2Rqd+b\njgcYgZtA0b5cXfNJ/6cibZo0+rWAMFXjAnJpzo4Pi79hphgY3EDASotdJyzm\nyxys\r\n=Oj6s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAwqJVbEPU8CvA97N1OHYbRf1MtMtiaZv4lKaoMZfwLhAiBIy3IWj+v9ovla+W8GGJGZRKVYXe1qlDdYHTtXDIsroA=="}]},"_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/embedly-card_1.2112231523.2_1642027133861_0.5596172673954074"},"_hasShrinkwrap":false},"1.2201122239.0":{"name":"@bentoproject/embedly-card","version":"1.2201122239.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"c04895bc1c2e1d0b7b874427b9bf1cec2b4b9f72","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2201122239.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-PT+whMCBcbzHuJxAhpN0z+4FK6bzyzchbom8+2/zp9EezsJqU1SjFeLPcq2Kw4S9bAAKzTghVXIajxfTBVTTqA==","shasum":"9229aabaa9fe17ea15fb96386249e1b4ceb62cf1","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2201122239.0.tgz","fileCount":27,"unpackedSize":1087812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4CJcCRA9TVsSAnZWagAAFJsP/j7oe+gjSxfqmL2V8rF4\nrsw39lyTx6kEHr++4z/vX4YYzDi63lPuVqk03iBoTGBebELk5Gyb11C0ZaVj\nuailusFGd9yyoMN3Iou90OrfXn6CT1+xWl4x9iPZYj7r71/YPx+D7hcwfUIC\nh/heuysWUSsKKuGaWeCyjjVSCvgH1nG0u7JVTadygDoyoLy0ONDBCdRFCZrP\niXp3tVH2haxpxabQQXEXZ9dRBk0yC+sB6eiE7iMf3566aUlxdWCqm/XfSqgb\ntsxqQHwPwXFBTcYX0KK+V/Ilp2qzKn5QDI4JyBmhvAqrzUv3pdApL1cIwbsx\nfxmA62gAtk4mU79ZysNNaNTJM/IG+IKRkFoF8uMRdqfBu6SAqRNUDZIZzNTy\n6YweQsNee6XaqiyoIRmOv6nTeMRvjH9ZTFEfrhSMqtRQbwdTXNQExjUhu/EB\nOOiSx5/0Dl62Lb6mNT9x82S7UuTiLJUvryFEVMKn506yg9m0RiBq+baxL/5K\naFJYSFPMo4OwVBYAkTAeXa4Ybe5lGSAyMa5x3L/wzHi+3l9c7A3K685o8WOD\nz8iRU812p5qCUSe9Ip9mu/kx7obXZap04IQAtBLgdEQ6vGwRuqdaA/VXV1EC\nQiGGKTaceUY3cF8eyFNN4rj8DR5hOP9Sk4G//WlT3cWbxnXDJsL+IxF1OeUu\ne0QT\r\n=saun\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDD5Hf22hMy+TH0rKV0VQGrlEnK4lRpSjAuUC7YcQGomAIgJ8oWgv2jWZiBZil15BM3plTCrU2xpNjn7lA6npM2elo="}]},"_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/embedly-card_1.2201122239.0_1642078812668_0.11969524608632254"},"_hasShrinkwrap":false},"1.2201131702.0":{"name":"@bentoproject/embedly-card","version":"1.2201131702.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"e9b16ad7a5cee398ceaabf6ba7990488624e098b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2201131702.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-of83liTAmozQZgdIzLorWljyqCJ6AsQBHfx2P/HY8Fxe8C9cm4Pow7p/P5u3Duo1Kk69zz2DHOE9TchS4m+7HA==","shasum":"91d1bfccfb22b8e8e8f44cb9133eb4a1fea6c150","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2201131702.0.tgz","fileCount":27,"unpackedSize":1090675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4XTQCRA9TVsSAnZWagAAbJwP/3oEUd2B8Yr+H7IsKbTR\n2npfSyE51IWELbCLE2kyJPaG9AJr3vkJPRyL6+PjHA12OixScdzbvwK+OriA\nuD+eZGMqDmQ/3LUVUADlkmXcfZN79TFH2VZu2NZMFX69xpGnKUI44fjU2Pla\npKYOxzGLGlwnLN+2HOyKsqGWZ66jHUzT011vXiarCFUEM6wOy+gabPaGlCt9\nscrmalFvPZirFU0lrzPUIjnbeUG6AT25KMptJM26IRGluwdfhSLPpAfn23P+\nwA29NW0FZHdANELGNgbarEoIsLLI25irVa2MxNTaOikn7qXsWsjGePgc0VNu\nOtCdGWIxuP7guUoa1RrjH81osxTouciZ1goR85fE86RtlG4fy8WNrvwuEj6n\nj4v1KLsx3ep76DClgx327H8HYhmRyhuLFHoHtZUZ0yvpnVuHiZYVnDFlfdVH\nqotdP4gIPKGsNC2nBYYyB7YNDzWxhaa/UKuHjhqgC0e9ZQiJoJKzNirhPwhu\nkoWZtLgWaSNHCuph92GWzG2UrtZ45oApD8BfDTOQ4iKzqQu+DnJ3Nfycpf3m\nOxjqGmV8hudH2nK+nVOwCmd/N+orP6aZKhnaTzRYCsP5yCwR2fTA8vKLVOOR\nVrRkqfZXWO9uTkErKwx8BKmBkNiMZoYQS9TlOtBG998Oja+/ZYIB1XuQnm2Z\nXVtP\r\n=Cq7F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAvVk//jjvZpQtvPNRJj97Pzt+32AIb1qGfwWa+GL9UQIhAO1P2BUUS5uZbuv2vpdF9UXn9YY/n7fT6TTUw+T4QYi7"}]},"_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/embedly-card_1.2201131702.0_1642165456021_0.3144837575073256"},"_hasShrinkwrap":false},"1.2201141909.0":{"name":"@bentoproject/embedly-card","version":"1.2201141909.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"96bebbc98d1f79b185c5ff6c58442ddc2092547d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2201141909.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-NvUXbw/utm9Ab7oybf5EktMFyhMtwFwd/YBv4iZQzkL43bNaYk6fyIS3xIH/r7A4kSf7Ql/WLP5TiJ0SnF2CYw==","shasum":"4981e0f9007412bfb00ec3f3f08ab786a9d7b9ad","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2201141909.0.tgz","fileCount":27,"unpackedSize":1088615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4rwvCRA9TVsSAnZWagAALZYP/3hMBa8jiAM0/220rQHF\nfG2mvVGzHHzUHOVFcF3Ukl34LRy5xAfBIHOf3wLCnui/bYlSuCuvZlXdbugB\nzGrYYcNUB/oykDCskVfy7flN3kIiZkuxPb9Tvm+MWXp9XM2t6g/69k12RaGc\nTXryexTdXJHKxSRhz06xXyi0YWZF4w6VxK3FMXCni0hUWs0aNNd0+IzP0Avn\nvE5ZAm2X/AZcUhjlH3orVEkWwtQ/PjLX+V5LQ3YEiZpb/l3culMOOCUjoH/w\nMo1HdYCwrIf2vfDYiSEOTALAPhGundxaupb+fcUTl7RhGCnj67Efuou9S7Me\nR7eSuIJbBgOrJCbz+IejtUTMbL33/HLGcDPu02SWf9Ij8aL5RAsxFU1fUnRh\n3aitofShKOJLdScJqZSWzfA2yub9HlVq//RtqRv//6cXXsQEu+DKgxn2Z4vM\nh3PZdKDumB4sPHJUKEdvcvdKauPB0pZ/x4NEFJNz1OhRxIjDiVhf7NXSzb9s\n67oLsPcooOoDpT+YC6ZXRBxTuolJMrPC9R1FDWDncWwX6gsR/wp92q4U8Ant\n4N1fhh8YfpDnFhoviLtnohL2vkexe3N/6hJBogbBcjremaWYUc1r/t27/JB1\nl1l0IbTsuYGKt8dyXe7EZZBiOla8Nil0KP9T5HYDuiinIzFy4ziJcghq6UnX\nRPoo\r\n=7hcm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGk0NGsEzH/xzSbS920Gmbw4u5ZT0vY+c46OkRqx8b+nAiEAhCqds3e5+i+GYWoUFq4MK0mrxWrU7TiF3Fau7WCNpwY="}]},"_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/embedly-card_1.2201141909.0_1642249262893_0.2502495937532825"},"_hasShrinkwrap":false},"1.2201141909.1":{"name":"@bentoproject/embedly-card","version":"1.2201141909.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6474ad58b0a7e1997cf1472b09ba21af402b09fd","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2201141909.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-j0zf1FuGJxE2BslmD7Ku7gXk3LE+3d7nlO2Kp+L1FE5Z8bQi4S0GV/J6qQJHupJN4UP3VaDoqaBOee2W3qXzJg==","shasum":"ab30fb56d800dfcdf720126ff50f351c760cc3f2","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2201141909.1.tgz","fileCount":27,"unpackedSize":1078276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8FQ4CRA9TVsSAnZWagAA2gkQAIfkrJHeD8r/hXHHBHkb\nbYExjbTfHnd+d7BiVJCU7iVafWz87ydZlP3avAalwp52Jvp3RAyG1iyBc1X6\nxM9s34Nnuq28vqUQDzyXseZuM/03OD/SFgee8QGxGfxKd4MEqM5h1F3SBctc\nHb0d/fwX2ovpt9uURUp1ShL9SVuAobvD8PJLSa7Sy82bkOwqwVDF6RkqBbDU\nmygBJ3C6Gdd8n8Lwv9xhmw8mdpvBqh5Qx+JdavZPRsrBGH2CXngnxuNOZRAr\nFJws919FXlDcK7x1e87dOWDdTyL8PLCenuR/UfZOnLrzlbjHXw5A/ZHQtEGi\nHNu40pdepquyOmFSqEKGdhnFvvU5lzpjoHasqXepu99ghxp8q9yXUcIisuea\n+Levf3tnNmCh7I0kqr6Q2ONaukwpO7uF8CeSGI0wW9Oy1cEJic4P805Ar849\n2gJlhqep5cuwpK/eBcIb47EBNZDKwHKxMaYpOCDALwT9DTXAUwhQAOVQipyw\nbij1PrObGHq99jBiLC5NwBEq93kNo6XtXyi9DnYTtZ9NJ4Q/xLdZiAyuM0q3\n619k/5LhOiUMLEGjvEwKS2h+4y8GxrH6ty3cPpKx3TkhiAJPo7Gdb3PAVeOK\nYzEy9d1jWI4AL//21lyxvY4fLjCMHnHJjWI9kb0xXY02mG0AUFp3A9tTl2Iv\nq9bc\r\n=heMa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICEwJbFbakKiAAYsw7G/WM3JPFdpT/aNj4XRhi9cohPgAiB0Lb9hrBDS1XZrpIxb2rasRD7Uqfthqusg6CGubnUN0A=="}]},"_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/embedly-card_1.2201141909.1_1643140152309_0.8754361653625091"},"_hasShrinkwrap":false},"1.2201141909.3":{"name":"@bentoproject/embedly-card","version":"1.2201141909.3","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"1edf4ae1e7a533868a19fad5b3b4da9917432bdc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2201141909.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-pi4INd4RKQqhC2ZknZz5u0cVwRkkEyMg7wLVXe6ZBBw9ISC2oI4D7LXqvDiLREB+0s4o400D60wDflSGJRomMg==","shasum":"c66ffaf331fdb5dee5e9af0c273ae4dd465e77d7","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2201141909.3.tgz","fileCount":27,"unpackedSize":1080643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8bYbCRA9TVsSAnZWagAABUcP/RCXqrweyQ15C4U7h3Ox\nRZxH0QH0q4P5ghUu2Ffy+0zaVnkBp/7dc3DDhU/PqQMkZDt8I6KqxNuymXcZ\n+/CTN83F99YOzupl9Vf5wAqi6QKOrmG3/rJ14rjoAShxhUktn/0EQpcHppmI\nKr0TgthdDUPFbZ4QCtBnaqFsrUATmUC9jR8RvPPDgCoiLHrOhW07B9YFiXHx\nifeiBikT6VHfnKeBqueL5dvv88GOjGztA7JpDWHFECbJL+pPcpZkEBISCc/T\nynTN+8hyy2Qo6Few/xwTgFhuDH9+RLxz8Pp/onLd1NazNeititYhEp1HEp9Z\n8AwpNT5klQPNgzJnOabCNEwcXOx6qr5f+tHxbeLss/fhvvr3cH3jCh1GTefW\naZJtSIkwZCvNa8e4iK2WSgZh2lmVlOJ+dfKiKA3CZMRLsoaxQc/vlovgr5KR\n6qrwHQy4gLIC5qutQL5+0PDtrIj+m8Vfwx1veOL37zaR0nqkvP5yuGr5RhTj\nuTndGrLdPCtbHpuMfarLjoQqe59iJyp6mmxsPqzlMZavyby/oGxf2cZeAn+1\nljQ0nsfQb65dYpNskOhyK8vjrM87H33P6XPm09Quy6rcT9bhs3mzcDQpo2gv\nN1S9rjO5Pwzh4VXMNLUaM1YVZhaEPJbJXq1ImOOE4KYtt9/MQLsVma7Bq93p\n7RXV\r\n=dbPL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzcGfy4KLbfOnhcIVstqN+ssSLvyT2DRTuJ5CyS3HN/QIhAN0GLeEWwgbjZ0fbFPYTIVh9wQCNahPWdh+nbtOIXO9z"}]},"_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/embedly-card_1.2201141909.3_1643230747364_0.11121348586154456"},"_hasShrinkwrap":false},"1.2201141909.4":{"name":"@bentoproject/embedly-card","version":"1.2201141909.4","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"6e60d79b180fd0983c9644d325b45bd569c6da2d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2201141909.4","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-AmlbYZvOdGyVCTCZ2duAc71sVKbmRUWChVu/zLV2J00xkeLWBuy8y0j9VGLrQgHFvmRHFDys1qY0nODX6BrA2Q==","shasum":"1d0bbb25941e0f82f0916fb622323d1c9b418f70","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2201141909.4.tgz","fileCount":27,"unpackedSize":1081362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+agfCRA9TVsSAnZWagAAK3QQAI7llXMvt8nh/tgRpFjv\n0ZiKg07hrfU+PQ4lNh+xnOk1cki5qGc8RDdBVZVR92d5HDVVJYgKVcjHGjRp\nYpeamIjeH9KD1V9b6dwkHIbvWOPRFRo/IhqvGh3jpyLOaUxFSCa5rKuFG3BT\nc4plafUpO3o8W1yJVRHIk6XVMWf8ZSiWJ64Oz72i7mHPxzjB8le15sjhiiKC\n3XClacvRGU59vdgDCVF+/1vGjIKHZ+VrfiWOwJ5ZsJLAkpp9Ajlhtr6i+KIA\nMEqUaOK1c3LwVNSIWY3QjD6khBLvZLQbhqX4GIQlnFgg0afRThduCesjtyAd\n2J/BhCfwYQ0RtUjqwD4M/ozKa7Ynd90a6rCh8GWL1HxF65GCBV65+B7xcRdW\nKWwOppzw15EF3aghQ8nVcDdquCda7897AOamNv5Gkt8FhUMgAwgH6HQRq9mw\ne7b9d1N84uQf5SDu0504B0vidLOk70Smg3IJPgD7LlXWMEW7axQL8px4al1y\n2zyvjftkIyHEiDz+xDvHmfe4ax41WTDYaO3+V7bdmET4ziIBIfTB4z9svC0h\nwuNaLOyyvYems8zYWBJ2mpJr9mkQpfiKvp6nax1GwKN9TwBgYYllY7mw6Zgc\nMg32VjiE7lO19h10psXmN8J2oSv8TOdyjKDUr5DluOzjv2pkKRRn7S4nuvvA\n0bkq\r\n=pEuY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5jm4E2KJ0Qp0aW6mlIC/3FFV883P17DW6pFPRsYjnWQIgS8PNe3RZCwrZ7SV0zKQwdCRdFHJENhyO124JgO1Oopc="}]},"_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/embedly-card_1.2201141909.4_1643751455131_0.5339256384658053"},"_hasShrinkwrap":false},"1.2201212122.3":{"name":"@bentoproject/embedly-card","version":"1.2201212122.3","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"ca1c7d4b4b4a72f4913d7c304b5368187458574a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2201212122.3","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-ud6hjABzCSD1GCego+Wp7ncciQzPqFWGvmlJ3lkRC6uOOepriolI5oM4YL6dgDohz5tTpe85TeUmcW0isPmeTA==","shasum":"3c8fe09c1e5f4c43ec52f60fdd9f912988575e22","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2201212122.3.tgz","fileCount":27,"unpackedSize":1081362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+sZDCRA9TVsSAnZWagAAZ7oP/AiFzmJAmO3pNXY7hi5s\nDIEWSfUJMGBHBohvOVr+MooKHIpBbjRRQ9jeXUrgrAjvZIfXwjs78Z/cdNlW\nK1wscOdGpbeiUygysz9L9uTUqiQOSjn8mH9gTeRfuo1AtWFgaaBpJF8TL0X7\nyxQhm1kNMMcgwcb9DRXyQgNC+4M0hpTyPzP/nyUc2kyxuFlH3ppzrdKBx1U1\ntTu/Vs7Wcr07+FGQP00Da0rDzYJ/SwArL6h//NHyEna2/NFNpFSwpVcubaOq\nK0C8frwiqPnj11phn1aEDQiQYlF9Wcty9rLQz3P3+19grWQqeDgHzpOALTPk\n09ieeXTvN1KOfiYwVwBcnK51Dhw6vawNsTWuFqXq+wOA84nN5M7xky7eb8h7\ncbu+FEkOLEXQd/YbPt7hcu/s1VQBuSjH0pyn3ptcePsAKeo8SUUoqqtw+udK\nhXcjU3AhobVlrxLdyhi085Rdx7MXobUrKzGWHERJqchGOPsAoMp6D1TngsZX\nuVmI1bTSlk4W3iXnblbm3czhDd8q/Yk+NA9jJaN24FK+tMAidXQbX6zmnSX5\nID+43NsFrSD6xbNTDn6R/PWbC7DEP5q25lFtoT727kl0mO69Yv5uY/jpTTyv\nCjL6Y3OcwCJOKvvrA+kNviTops5ItXwiRb1tpGtiT1AEyAFxLTCFEcBUcbcQ\nyRzc\r\n=W/vT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFEUq3+8MaypDrF7Rq/ichQ2RhbA1YbxkbjortbAVf20AiEA2oQvehwbBMCPbO7Os7bgItTCalP3uy1LviuQi5PEDdk="}]},"_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/embedly-card_1.2201212122.3_1643824707267_0.10002929953678463"},"_hasShrinkwrap":false},"1.2202012258.0":{"name":"@bentoproject/embedly-card","version":"1.2202012258.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"fb0c4a54446b5abfcc53d1d446f24370c05507c2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202012258.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-5Z7xSAnLRfReIyaK1+xv1Qz/gWDTaz4Cpv2C8CAnwaLQs7jkYQXte646gv6GcIxqVpA4VNbBeYHFjfbhRpNH+w==","shasum":"4c1524b92b312517d9cec197dc9f267ede1e162e","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202012258.0.tgz","fileCount":27,"unpackedSize":1081362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+tezCRA9TVsSAnZWagAAwQYP/jmjszHHZ91ILh8DCDRo\nzU4PJPOtZHnCzHl4LbQUUfNG6Ux/8T3f8kHIWYzgcIh7X9p49DZ2UNEXWkjZ\nmGS/hjqrntuJjhHq72g8JUH+j3AcRaCBzbfr5ahV/mTpWr687KF6QBJ46aKu\nKNieCtFILlLVmRQqk0kl3FK+LKnKGDn407K/6qeSOXpOjNQmpOpvvnHzcC0i\nGizagruZRL95WNIHEQ3TEv7aPYi7T+cPL5e7FdPSUZW/Oy4uGEEucd35lGqL\nUJPVbVgXxmw5JUgnKdHxr1evlNJEWwlDQY3OML5imwHWOVeqZGD6sFl0Z8B6\nbNhDTh1nAIDd/x79Z4bLmsQsgQouvlqTpSrkgiGbP2YsdMlDKvwTRQvJEf8B\n3R/KSvhFdcYA1e75PgQBPiLXbfWcU7WePDUC/03KkhvLNfVlkYhAPm16NmHA\n1msEPxteGzJxTkDsSPoKwrBLWnpEMhLcNaVW8KEGrVnSLXmI2usaz03ymeoW\nyFNX6Mkerpy9bqxPcfDlZpypkAdtqmLi+clGA4AX1ufGR6oziKrERhVB9v8w\nfh5ZUNfgc6BbTmfDhmpZyLntQZcc6i/l/bEofZfbBq0/0Vo5NcEorRcHCETg\nQzDl5NuHZCLaVja0+FpbGq7KdrH17A8drT1T5yLhIl5DFFNv9jW4HiAq0TU9\njVlu\r\n=h0al\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+O0j9va94LHtwA0JWk6R+hK3C9yHzCsf71mDHCHP56gIhAJPmGQLC5Fcw+T0mIHf0a7+nJvIqT0TR3VOdZhs1jH6B"}]},"_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/embedly-card_1.2202012258.0_1643829171055_0.42037336161454353"},"_hasShrinkwrap":false},"1.2202022130.0":{"name":"@bentoproject/embedly-card","version":"1.2202022130.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"76b8fbdfc923fb90c4ecf4dededfbae0a5978ff5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202022130.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-zkY+mqQCP4842TXC8S7+/ltJPX63IH8OS8fhf6y7N6tLUsm6bUHzdHeNWLlG0DWPkKtVvSRqLUUaRgoBHhvu4Q==","shasum":"d9a6180e02efaceb42c98c47fd8ec2260d58d234","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202022130.0.tgz","fileCount":27,"unpackedSize":1081362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/AkNCRA9TVsSAnZWagAAZukQAI00HSGdQXtU7/LiE7S0\nC+6INEcSJkJEeanT3ZFnnr7pp2wW6fZRoWdN3qMyANZLqOrg9kg0sgF7CBcb\nTbuRPHswvriyWYhMdXnouuwviiivIL8lCornDfmXa4nPl8u6Ir6WGYgmsbaB\noSd1k2963+dh5eXxRyvJEyYXLajzQxDCTs2iAOLVUDK0fxW3y8yBOxY1y8VT\nSUzQcOTtlnGKKWkDoaoUOpKMShksBh68x5C/AwjjjSbfEgFK+f9iNeBmiOxT\nfWRs6V+heHVaLNvkC7+GTFy1dtxB85Jxj//R1hxIlLhGx1QxUfx88lnrB8fg\nKwUEOI4p2ivJCelJ0Dm9n82vgD4s+J9SdAjlyOBqmFjsMmzSvshQLaaaTUke\nmA2O7/M7kRRgx6k99ZS+vtZBQXsO1sv6o10+XItU2JCozpIyrhG1pHNw3Ybo\n2EGFjsP+8/3yyP7HnBuOEaWE66luZ6LF7fBUuckQtzoM4RNLPfU6WZMxoLTY\nKj0JYJP59vawfAYEEqEzlLJe1/A4mB1KQjI8Eyyr9Va2F16+LKPs6zj1aoip\nPmX8EIAWB3fkNKLez5QHVL1ppUxNxL7v2twCrfibJKuanf6fCJtqg14U2phu\n7yzAprQLfaU7K8r+glIHsHa3l72FP51XTm4iEJjtkCu9K4YR+P8Xpwa1buk5\n6JOW\r\n=jaW3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCn8nSjzMwhijYZ11wdZ08+CSRj3PbR/4MvCycWq1XX5QIhANMg/mGYBnXYdAzlcbQxGlEYXgkwz4kAIVw50V3GPxGn"}]},"_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/embedly-card_1.2202022130.0_1643907340793_0.5042041027070783"},"_hasShrinkwrap":false},"1.2202031816.0":{"name":"@bentoproject/embedly-card","version":"1.2202031816.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"b29dbd478c93a5298a18f8df14e6c1f5184879e3","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202031816.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-VKDPcf5NGc3OjTfo2uzKFPam8kF4Qf6I3B7OzrFH/t2MTiisRkACybtrL+slQj+wqAXDhp/ewKLhj0KIr0SoCQ==","shasum":"e28a4101fd368f52f85b34d34e2eecc2064a2523","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202031816.0.tgz","fileCount":27,"unpackedSize":1081362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/Up7CRA9TVsSAnZWagAAPa4QAIQuI3xVS5kD67z+tlL6\nX6uQNxdW2WqRbjen6DeIAeEaCEEN4LlNND/WHQM2RZn7SM9IoOufGDIvuEH2\nD6vRMdoYU6WU1GAbsRUGwOW3wQCUCT83UhguPY/G1/+/4wgv1mAnuTEhsOTh\nEFCWbLBhuQj4ZTvO99qe1xuGkzq2gjg+8t3pEnBIIBkz0l78po0DEMbaTTzw\nPYE59LzxI31l1guC+EltOlVu24C6bQ+uWgovBUpSCjmgx8AqPdf55MKXeJZ2\nNizAGSZllqzhzOGnrOS34VmT+O7mCkMTsoR5/jYGH+qhKdhSxYhZ3vgMiaME\nrGgzBfz8doJEpF3Vq3wV1wutzVzLPp4mNdnxyPIC8yGiwh0GFuPmFGim8Em/\njihaQuqgzqq8ZG2A2HEqPWMyEks8eZJbS3n6lUzYBOexuxL15TAimmUxSQF9\nCm1Y0kcgs2ay9CN5oQDR+4pOpARcfuHscZ6R9l1Ih3tdm6w9am4LahpOpCmS\n3M8MoQtVPc0ThFj4w2Z9iI55XKP7+RIkdDKo03JniBrAXdCXvjm9FNuPjSnW\nrhuI4bD5DJREauAMJnnW8myOv5BtDafedlCR68jEpcYAY+kFn8HUtQqaDGRC\n7o5oRU/C420gJdbLTlp+XfkaB6YE0DlwbVPJFy5tpcLZx8i7dKNRjED91KiN\n7g8V\r\n=vt3W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTk85yzA1N00yHrLm69VhhEjyXJYTMXCLLZo7/Cs0k6QIhAN3+SGUu6WHj5KPwbHrPFJYfGxeKf7efmPPSktqvduiL"}]},"_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/embedly-card_1.2202031816.0_1643989627208_0.9557822769839939"},"_hasShrinkwrap":false},"1.2202042210.0":{"name":"@bentoproject/embedly-card","version":"1.2202042210.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"04d031e10759f2ab3f4a10cacd2b776e3de93812","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202042210.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-20Aer/aMh0q7wDLI8Ck8WWTnSpq1mHqGKD0aYkZPt/EFI4kuEgKKKJ8N3MNR+NrlJSJ4/rZdCJ1FmlQRLdyEYg==","shasum":"f2a89ed29f2083819ef2841e0f0cfb1b412821e7","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202042210.0.tgz","fileCount":27,"unpackedSize":1083042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/kCzCRA9TVsSAnZWagAAI5oP/2ZUKzuYTg3m+zqk1SUR\nTLYuR4Jh4QJ6PrvrLFhfQjC759izw5zrbFVHpVnxhUHycUzTsJ+bsq84qFJY\nX/pWqmDFYK895e3g1mi1dpBNcwmpPaRi2VrSSXRjM/2Z/59Y+CxpfoWAh9Kw\n8dS88f/No0cuvqXqqFClveAUmU4ynAS6d2ZvVR9GZdtUGd7nWWdwWhR5xmw3\ndnr4NqCDq7Zo0npsXQcFbrz5ASw+PttA/GzMChg7ROvsE0tDTKu5rZa62PMA\ngepAglYk/lCeW8Pdpdx0nDd7mAIVzCHJ+xqUl5UbBqy2y8+rCSV//9+otAJo\n3tD3Asx9Xd+sKaDExHLGWCKlUoQsF0Rwc6LiMCfSSYnRl2R88F3Bw13PglAC\nlnMRVKzrvQwZfOsL07Me7AxGBU74Z2VZ9ZOWvBDYTKk+pc36JUO7UaNsvp+V\nHXDxi007QexwiqYK5r7ULRbzw9KCuPaY4/qL1jhcx916LwtEc22bSLmpPkQL\nrWa6rafwx578XcDFUQdudPAJmRJDpcd5Sq2o7iTsOmpWNOqP8KIJyph8t6x/\n6uoUobMz+p/PiRKm/tA0NkhjXBxDSW/ukw7pIpU3tZnN2bKVY335rYS9EThe\n2/Wop2BPtbt3nvMz6MmwZe1Hr3A3UrVIPVgfnovGkHQOSj+pmjw38HjhDDqq\n/BV9\r\n=Yuoo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2QNaNKVCGb1UF1gUAIytVW3XXJVxpvMsuXNobuLBHsQIhAMlUkqZxV4ziBUS6qfvM+LM8VbfgvvBQu3k9lSxuhen8"}]},"_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/embedly-card_1.2202042210.0_1644052659153_0.3251653663218981"},"_hasShrinkwrap":false},"1.2202072236.0":{"name":"@bentoproject/embedly-card","version":"1.2202072236.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"1d8443e81e44defe1ab915032668da75884187d8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202072236.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-fwArQTZ7yImEF93+cXoogOFZN6mvdg9LspBstliJdgNcrUROb7JTNaKgZ7ttW/6Buc80Iu5q4s5E4pmBHGmAqw==","shasum":"cd177a3bc83ebcda44d00a041e8d27b2f8693774","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202072236.0.tgz","fileCount":27,"unpackedSize":1083042,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAjXGCRA9TVsSAnZWagAAVzMP/RZGiZ6Nw6F6cdyAcA2+\nEkSZFfmYLPk5xJw1YNCQjaJ8WJWiE0sDnneX0ECtzgZMk5MMMkAe1AszyhOo\nHWGJ8x3Kay+23ExhUgUOw5FHBFegk6+DwJcryntA3haon+HZhcciyboQz9tO\nTSwy0xnYCPeWTj+KiXoNWhEjI2k77dbnXeHzC0ZCMK7+5c4sBL5dKcI6qTrf\nxDhwUyBH2KNEEG0tC/uaSqNcIMMlW8/r+JaPR2hxoQC8ubF2LqFMRBqVB+fk\nj4BoFCQR81RqJnIPxGDugE2kEmrCbbca1CHFqk3UQc+GzPluVq24+Zw4AKi0\nDjBd/NHNu0ciV2WC61dUUmPNvxJh+qcFInRMlZ/f7DCVPOXrF7YLmxu73fAM\npKZZ2puqfbshGZHkUiVXUja+cjDV0Kuq+KWBgld7XTfsoXETYQeS26tEQjlZ\n4oEewI+DkGgm5Ya5I4nYo6pPOFPx1DIJk2NxloaMWEdyi/qslSdkaMYphpTH\nsfWRj/ZwCmlZ5P4rVweLfZYy33O+5gNrsLqOnuQBnsK/GbHhbCkpvmeDmWpG\nZze5aahnIBleLt3Zl6VWH0VogVt6DZxJI9HGdEYwK3C/Ax/4w6qNSSyNim26\nUzowdMrl5LkspxPq09I1xiYU59lKQtL0pWKiSFVRlDpfz4JjRBV3QujPmHwr\nsCgy\r\n=371T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCaTegO73XBOb57938fJ0SNDISbCfmlc0IGb6g5vWeXyAIgKiP3wwMqLNyHb0GAO//GdgZXeYIkHK3sAg5b7M9n7Xk="}]},"_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/embedly-card_1.2202072236.0_1644312006415_0.6338780818745329"},"_hasShrinkwrap":false},"1.2201262038.1":{"name":"@bentoproject/embedly-card","version":"1.2201262038.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"cb2af7d382510037805d85242e3f21a88654a20b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2201262038.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Hac2g7+T/JMp4PqSvveq0FGWuBPPeGDbvPnuRRM0luuNLwX0d2i9VopljaAVMMYT4BhwGbBp1g7W9rCtHeBQrg==","shasum":"42d520cbf50961c3948e2ef1d9ff0c50f069660a","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2201262038.1.tgz","fileCount":28,"unpackedSize":1088583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAtzVCRA9TVsSAnZWagAAt2UQAJ13Gjx4c/Z8UrfAvBVw\naFX8ZDUdkVeaoCsrlqi/Vj+hGzHlsijGTEsgYWi+gBjJFiXt7USJL6cIW7Ln\nd7uuOW8IHJpiyjW4ySR/9APcqKv4BtgRlakVpbeE2nQgkWpATHnY3wkUVZPg\nel4XDFovPX9kyF5F3+JdighP6FeuJhTnC/+VW8Q3a4V71g+ozTcGSADYeQ3C\nSQnFva/i4Jz48FVRKEY1kTUPrNqzmiQu0tBrSvXFXOYisSWc+1qGlx7sSdii\nG8rqshgmMr8ofhUBCzRrDJ1axmGzjvx/vdoy19XBV34NssnTZDOeKl2AKEZO\n4CXgmXU13Zlk6VZkbazC1KhPpDnWZi4SyzonTRWLAJ4lN/KLTiT/UbNlvtUF\nHvQyTvUiZ4T8ADF8R7f+KPLhShm6v1CXj1hU1NzC4Kg6chVKaoOmFDJEgWKY\nVcgI+UXVjJj4csMW+8aZFrNZSxhUq/cqBWrxcvhZ6hrCE0jKpYpB/+tu8qM8\nfrNKCAXgsRHfk9+svgWEbw5ckPEmzjoEftNNpp1TPovZAyDG0COXgZ2BqdgG\nh6mAtYuV0iyz1mpbZ1RrK6VavUf/mh1av8o2dAKKWb9obscNGUbBSpAg4OWY\nl6qpnOdthHzK1WAxZk2ArPga3TE0DxKEDTizOlMYloCb0hEnEwdeBgYQSEx4\n496t\r\n=Wk/t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDK3GFCSrUdsW9LVKsQgRjF/f2tpnZ/hiYel2z7NuJgxAiAQI5fMA+ZSwvN+SDInlDbxATanEGAdYbHWURZ2pK96YA=="}]},"_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/embedly-card_1.2201262038.1_1644354773622_0.14069498033463912"},"_hasShrinkwrap":false},"1.2202082004.0":{"name":"@bentoproject/embedly-card","version":"1.2202082004.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"572ca92abd38a7a42e381c556e12e2d929f26802","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202082004.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-q8neUnUUz0cPt2oGZ3r7yiu75syRoX9Ljz1Dkh11YxFsFgKf6WpH5Zy1j8o91/JVFwxOJ8wdQL7iazkPVVOksw==","shasum":"84ffce2eecf5afa7531410d8b179f4cc258f7551","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202082004.0.tgz","fileCount":28,"unpackedSize":1088583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBD0xCRA9TVsSAnZWagAATDYQAJ+sc3JDeid0iZlvhm85\nxci5pRzVzO7x57dLaCyOlV9U0YKPZ4LIJcmpegTN1TNhUtzyEv4W2De75DdY\nSVCk7Z7SW6DSH5/kY68yGeMuEOrZ6kWXSDR4g2rqUhfR++rLiWwu/LNeEGtE\nS4rOe06mM8iMhSKwsPwkHpfSO8+IFkWAxxa28sLvKzV645ntnwMEL88/6LbL\n6chNUlU0ZZnJr+Xdc7bhiaaPCttCkajZ2QBJ3isonXnGxteTRUvYFeaBP4D8\nM4HfQUgyydcJ0a/uYC9VB3fe2FLwMI993+XcbYS8mhf7B1AyGf/mkkg2SqHG\nEaN6aPVXTK2glEKp78WRwNT03+yQLMsdsY48bxwQdC0OFVpIWATWW7yhBJkb\nF9C/e8ggduXeDaCAduqaQamS4bRebM4XPIiecsuC1KzNfjIYcg/+Sqx3CcXO\nr5O/Qq1nHYIXutfb22xNZCxHopnJJ21zpxMU2rtFODN/QNL6EfZD/4NTN9hW\nKps2WDGZC0MDPk9CZEAx/p/KjO4h3p5wz8BwJ51uEktQMYFLFlvxJmzJoKzw\nxKCK2KsKQiY/JGlGLxycV0+F3IVwI2PFo50lt0NFzUOVz+OnKummiVuldpQ+\nH1/KYghedlwVyRCEJpk6YS997SSQaBf2oJMACrsDJ18Ek6H4NeZtJR+p1xtF\nTk3j\r\n=bRye\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbeU8EHTtLxhKIUCNm9vnkJPcf2CUTNWZ83912Jk+03QIgcb+9MoniH8q9ki7pKRJfYL7FeAyxpS9JYjDZi4T+EdQ="}]},"_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/embedly-card_1.2202082004.0_1644444977429_0.01207525283983757"},"_hasShrinkwrap":false},"1.2202092050.0":{"name":"@bentoproject/embedly-card","version":"1.2202092050.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"37b830a030b935fcd922e108d5afe28be61d68c7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202092050.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-OZhvWKMrGyolDsgpe4BTJcxiNNNdwYYnOERHw4zDiTXEdHHB7YKzAdmP0W4I04mu2VL83/vTtJ90iE70uo79eg==","shasum":"7d083aec00d619e48d979a7d7fdcdf32ea15563a","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202092050.0.tgz","fileCount":28,"unpackedSize":1088583,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBVHtCRA9TVsSAnZWagAAR08P/i1/3AxERB8Am4rqXP3e\nUuFl+ZPoe9/VvOVG8mfvx9U2GHRfgsga5O4lmhoUIK7bM7guiTuXUU6HdmM/\nipidQvqgffjy/f4wzhuJ72ZlN+zrbkkKDNBVPBYKekb3rpRgGSNDi9SAKwfo\na5UUm7b2xTB8Jo7XGpIoPzu7DaDt/HbRjuGOrDPlAC+1Xxz8i4Tlw9YKBJqa\nbDVVchNCrKm3q6VczNBVZHeT3S8VTZhSH7bjeH6N41ut+g7rZUWMdWyZvjRX\naMx7x4TnqsG1o4SKuwsbCMqFK0bIzqorUc5ZEA0tw9L4oiWerivY8zDdDP1F\neM8M84uVcY4Kc+cuG9FdniIwY5BhVWM0ML3w5zYWBfyTjIo3vC6tWuPrLQdP\nBrCBIYKkwWoGdSeb/m3iE0pVc5dOAaZl8LB8e9J6SK3jnw10H3TUhosDw66M\nb76xyF+I86Y7hMQENBaFuN5UZ++qYLx3nEGtEmh/2SrfvNimgvsKyMIb65WZ\nNWA6hCgZWPjVPMnlAKoh3EFbPV2gefOADutMz4IRnfIfEqz9Zz8GsyQGSgmF\nYTtWI04MYDVubN1lpX7/7TScmHWC+gieYWvMDhWvEepEnx/EoOwPcO9AU2dF\nuMewjkIdWmksSK3mUKekyi6oEEsupkqjdELQsWIHQZThruKUHPwz/Vo5Lc06\nLZdW\r\n=An2v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICudJWSyv0RqO35qnybcZHYunh/la/DOO7EFlZ+m6kPPAiEA78ExBNzZyBcLdUcHjRnjMNBWvRd8XbfwHPxz65qGqyg="}]},"_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/embedly-card_1.2202092050.0_1644515821687_0.9279149364327584"},"_hasShrinkwrap":false},"1.2202112230.0":{"name":"@bentoproject/embedly-card","version":"1.2202112230.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"42cc51fbf53c86e33b0a12004dfe9c35b8f5d0fa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202112230.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-rMtDfPC+XH+2Rd+k4zfsiJTpLOglVrZtkQQrU6KwIYHXi11lNo3Y25zJCfv32Pq7aYyqtm0oBZhiAby66NHGOQ==","shasum":"be6ba2c5a5f6d761f2c7c133a334c812f5ab7c21","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202112230.0.tgz","fileCount":28,"unpackedSize":1087530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiCsQrCRA9TVsSAnZWagAACj4QAJb9K+WsSvKWB+Ya5bSJ\nUZULL8HPN3XL5RCAXgefWiIY93v/6qMZ+yPwveVDtF8423ZaMqbMDv2dzfWB\nTgETYJ/epamTgGRI+8paTebxu0DkQiRfFlvLbrz71WjQZjC9PiHS1Q0SHstF\nvFVXhAhe2iW5CqdZ6pyLwIO2I9zd5Fkz8MGagXjlHbLYr+KvfqbySZSTIpnf\nmsb6+TkKnq3b1c9bgGHclxirOrIcU9XZFDBu1+eyRwGH6Spdm7laYaDCmRL7\n9m3+EbBNA3+7aqZ9u8pMOfMdSj+yDJ3hsl4/9slvLDRsjNKoIRSfKtvOsvlY\nDELJDs0GlZAAVrM+uftvSsQGMWx3M726/vExOG7cViZybk5pAhsVpC6yIcGz\nzmH9hQ9XMML9tTXno+hoyD/QqcL3MpazESEA4oHkKiPAzLQRE91VEBD0Y5P9\n8fLN/YKMRZViKCatzelK/XbII9QC6IKPqVAlxwjSZZUwTjVSU8WeTOl1Jx3s\nD3woCwTn/F+3TcYAV7gMFZFmTn4cwiDQPv4sDX15mDkwyOiW7Kx9BKDW5CqW\nxmxPk5GNiWB/d5QEy63EAtAsd7OjsDByJBlwa040g3slKB+uENiwOl8Lpj4F\nTBtIeqhLRmAMC51kESOwO9kL4nWHyTYkI+umZZI+KKe/LNV+nLrM0rQeukVY\n3Mtv\r\n=7Mfs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPvbABdd+DnFuMvafAMFp1cF4DinNmdTMwnqiLdOqRTQIhAPRlTU7CMOuca5X/HgQUieqvh3Yk/umePDGcXyKIWO7q"}]},"_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/embedly-card_1.2202112230.0_1644872747497_0.9714694118920062"},"_hasShrinkwrap":false},"1.2202142035.0":{"name":"@bentoproject/embedly-card","version":"1.2202142035.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"4bb5570c3d04ec8e2a88418e8ed8b420e5b31ce2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202142035.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-wtPDi6/5pTPKfQi3VvOzwgADwHUiVyf0Xf9AvlInCNLI2wCldBVUZvGYH/Gv4s08Us7qrCtS3amF4qWQGaNk+A==","shasum":"93d7d60a28313f638f8fed835beec0b984144ac4","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202142035.0.tgz","fileCount":28,"unpackedSize":1087530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC3F6CRA9TVsSAnZWagAAGAAP/309C5kV3YxwsHVtfMdn\nOjQDhqhGD4uBl3QWKILNoh24cMMiWQpsr+Rw55ad83JFwuq4D/nHMvA1iWr+\nMVYBpG7WgZ40RG2WeVbhOc4Auix1kZD/DcHPFi+03w+FzTKWv5OYxX2pA73d\n0aWBsnTavbeQ06Zr/BKtYgLxbIS0CcK2ptLJiK+sEoHTlY6iApKZSe8DIV1q\necy1Txqop1l7XEYT+qVtt9Q33bAyNT7Yzq/vZ54099LwgH6xby0A6C+TTiGW\nJB8x2/KXcRyOc096OLVhm4Jf0dLEsxJK4GBrB6Kwco99dUyuNFDHIgePKUmx\nhCgOOTUqj6CgHt2l6AmnukYl5tGMAq4Dk46fNr5fsrf+bVItLOv1aK6EBk6u\nbW1zRUj5pODBG4A5lwpZINi2GwV91Zpzm1K9O1mkhhXvYZPstrzFZVyosYC9\nuSKUqGUj1oE+KQMnR9CkzE9ixFxzGGQ3s9KKAojesAsHWcvN3dsHCvDXcDlk\n9Lm9Cm9ZXRhcHMItqnY0+Oz2t7qHDYscRl3MMmSK0/i6gGaL6XyuJWv9Uzcx\nI1Q3NqkS3gjGPyI5BMs2ybp9Dxy1FVJXbMUXE0/Qt6CF3eR/7mg/yRC2R45T\nLIE00XC5avxH2XWsCTmOS7mIi9mrP7nNL8WX47V0w92VIoaKqDA4yKBtM9Dl\nLvSB\r\n=Lw7Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF0u7F4Dz5YeCCZYw+t8WQF40gwHyfvKH+juW9TSvb46AiANcxqLnEBJrei1060MJIw5fkUv6myLTlVK2HE+Ult0Qw=="}]},"_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/embedly-card_1.2202142035.0_1644917114376_0.5411908985714668"},"_hasShrinkwrap":false},"1.2202042210.1":{"name":"@bentoproject/embedly-card","version":"1.2202042210.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"a656b221ffc7e0c9f092bede5668a546628e9512","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202042210.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-mfC/gxTQIMaYtY00lH94G4ygbttCqYu2ofzPAKfUxps2j1MMUNgnjodPDDwrGyz4gx9qkMUgoiaXtZkymH5vhw==","shasum":"56ab2527c3d26ff0772cb780ac0cc1bbe6bc95c3","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202042210.1.tgz","fileCount":28,"unpackedSize":1089373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC++dCRA9TVsSAnZWagAArsEQAIwQJBrd9se/J5du6N3K\n6FAuxYrPTN7KI4V6MaBjtd7ml+mWYgPDQ0zLjcg1zyBKiOVdLugHWGakBJr3\nyX6SOIRMo+zWBxduXeK6DWBL6uHER3icfSP6IBBq6B2qY74vkS05b7/R1cKP\nrE6iWT/D45VypuzWl34PyBC5bE0JjXYgQrQ8jESLfR37JLS3JBUWHPa6glgV\n4/+Qk4BUiHhzHRF3sBi+EFeUV+cbZMtZpnDi9rTj1XS7ANYxdh3bZdu6Y2kj\ngQtG75lxCGj3Tvx0XpSIZmz1MlvGPOTCm03TtJmOiEQydu6viwejoTX89prB\nIouiJX+ySfaT+k3tGAQF2I9gc6PO9ZnIp4KvIWm9zDChJdGxDCJQ9c3pIcHC\nS+4GsixMKjhxSw8pYP56Doj7GxCmOfNMDygvt1rflD36uRN+MFIw9vZ4OcEv\nZbN3XLuHmNzoxk8fe8dyeR97wSwm2AKThf6+csePSlTPQbLHV6MnqyaIi85c\npfjeXx2FLY2mQf4Lth8ziKJSGrTp3WGkNvrUIkp/gwvqlvEGh1z56cP+WuJu\nGjtT/GeXAwPWOuCjqHCS09gB7rsGkGrDKG7MlT//8N0lF5kXQ50YdAlkx7c4\nD8LvcM8O8fi8Jg3CNIPNJoLAynD8H3w3KPxrOLNzI5MCqdVGE+PqcwUHJy6A\nPRd3\r\n=s6jz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeTwDarKCg83Png6m64x8zuseqxtAcQidlgxylVS+3jgIhAMRPAR+bFG74kcLgBZ/Gwnja7wZZB6IsCSug3M+IOeTM"}]},"_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/embedly-card_1.2202042210.1_1644949405589_0.7967543992657342"},"_hasShrinkwrap":false},"1.2202152253.0":{"name":"@bentoproject/embedly-card","version":"1.2202152253.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"a50f1711cb8aecae95387e7f6b1fd1862206166b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202152253.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-3UwXU9qfizjQsJR01NH8aKRyl54txSU+SHifET1Hhmet0NS2y6whCnXNCoL4INok/1xZsDVtpGIcO9getR1MPg==","shasum":"09be96bda444e77e34c6b62df29ac6d540ea5d74","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202152253.0.tgz","fileCount":28,"unpackedSize":1087530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDL8GCRA9TVsSAnZWagAAIgUP+QH+Ogg0+UWlkuaWWwWn\ndgTs+ghKQwv6MTq1ol0PD+Q1n3BekHVdxmnnGM+I8ZdlusqKLO7Rj8tQuaW0\nMw+0cYx4SO8u/MHTeweMMDR3IbCxlKvsmeAQTYcOiVEpVaLf1lHJ6fmiTJcU\n1z2o7QLkEyh0R7c3E+uGDwzPEtKsVUpMWHJeJA4m8xZ/vNk2/0bJM5R/kaId\n4Oxi9jxqy2iVa0kG3kdCKVYEkKA9UEBe15hmSyELmPprBHuoUoe84kASkMGA\nozKQeM1iqYRAqXMwiOYKhQpYhGQjzusSBRgvk1q3eRTxn9l8t/o2SSoU+od+\nfmOYUh2TWBxlf9o3xzcbHzQ8v5MvSZSPeK2vW/3XSa6cXhOCTpVLfk+rU+79\nF5CrHOb7olIGbmocngNHKC7Ocud6XOTF+bTX6vsmelzvLRPQQqgcnOvRQSdJ\naHKU+GoerqJFRnijGw5wkDWAFycZSW7L9WA5wFFKBc/xgrCnvdVpKXvoWBmv\nAHtWzD4UBeFbla+kHIEZAjkfXK2V2eTIm4Zpc0ZbtqPxXeQfxe+Dbr5LG4qD\nVm0HsXQtj94dO15Uv8LNdlVmC/mW2k70/I0tpaZDt1CqS1DeNojh+3iobEz0\nUd8zmjmQ4kJcIIC5qmMjRQ/hkMLNJYQf2buqOLPXvGUwMy+k5Axvb6o6UTqk\nExX8\r\n=7klP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9pg/ukqgbGzaTqZP+VwbhPvezcPHYA2xaZKuOMycVEAIhAKEJmdybjep6fJHZ0mA70Sq9U4Y4/huEEXKl8qq04Xgb"}]},"_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/embedly-card_1.2202152253.0_1645002502267_0.7908142339466189"},"_hasShrinkwrap":false},"1.2202162256.0":{"name":"@bentoproject/embedly-card","version":"1.2202162256.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"7548b64f77fe070829e46481b6fa247b8813958a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202162256.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-IpT5OxCgKnpIga5zoilfvrMXDfCDJdvCD9DlhIfSloLHPdJuu1v6Rg0cFE6w5ijDJ58AcugtL82Z1ruFHnKLuw==","shasum":"2657c20282175153eb6c2f2990556fcf99317c14","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202162256.0.tgz","fileCount":28,"unpackedSize":1087530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDhWZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGMhAAkS1b+OFn+Fe0nZeC7oBClv+cZA8ztBhXckGZiNdLYSqXCNhb\r\njMgLnmOp6JTyhhV1avlhXtO4B2JpJKKTgrcG9VfqPF4PXvFSMMbmr36VQUzG\r\nc1b5AEMHelC7hu8BeRlza6MPMYqiS2ephrLqTt+a5PO2tRyiuUlpF5KCTj87\r\nwS/JUTWwJ+wapudcdwTeHF3dABl7wBmPKxTv4s9suDUG4eAhjkvMvt85N34Y\r\nhRGGlmHCraTtMxhlK6+R+ZK3+Cmn2GvEHaST6ned6Ff+8TCxTDUI3OC9+RJj\r\nN4uXc0i7b5DXw0XPFFnB+2v+BYRkV9M0CFOVCv02NwS0rEndxu29A8IVXyFN\r\nX31G58eCjLpvLbHbVfwrZ2gyzhM2Z1gkGVvG5WB1Vl9974BGEJgPK1ZDuKPO\r\ncnK9H3eJL/Ok07sQ2GyChGk0/FLJq9mObapxoHgda6ed8qwiago2dDW2/B5h\r\nseM0YiN7RsmlXkycQDwTg1EKKpC+4CkA1kr6WKhWlysdEAYQjQb4LgTQKBAs\r\nfqB5D4VBKUy9JpArkOuppzItSnmx44Rxox9AMZE7Qb7TbdabpohVwFQTni82\r\n05DvtlNdhVP/0DtXsTZIwRsu0WxBBexbTXRY0b8AKTgrQLbzM0h4Jlnyi4g4\r\nbwPTr0YHOWYViJjlieeZvPHyzTfWUfOlFKM=\r\n=vQDH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHNdoGd84SUqeCX8BqSjCi+PI/wnIIEiCyjFnF1EUjBtAiEA8rOTIP6Nv2n0eb/RVhASYVh7tpDOFf6ixIgfDlGJZ/U="}]},"_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/embedly-card_1.2202162256.0_1645090201183_0.8593038414015886"},"_hasShrinkwrap":false},"1.2202180255.0":{"name":"@bentoproject/embedly-card","version":"1.2202180255.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"8708c2591965df37c54fa25ae829421f10de58aa","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202180255.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-4gEgEsDGLfK41qGFXrt35yufQQ3b9+tESWHP1I1GrPEktn3eAIhMa2c7ytU/N9CjULFBn6nT1iC7tdg/V0cG8Q==","shasum":"aaa60983268edcc295821d29b82564294cf45133","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202180255.0.tgz","fileCount":28,"unpackedSize":2355036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD2qlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFchAAoiMZcYdm0hc/9kzjdz94pKYOeRag3jM914jB8AeI09lV/Kar\r\nTCRr1dadHssB6M8HXTdOCkGIj16qyI2JkDp6VemNBVy0WDswndFupluetmkY\r\nlR7so4/XEiufc5f+6REOlw6PMcibxMDiN23+R687KuxxqdfUx+6ldpXXMEkn\r\nadDSfLDJVnXM5NpMnyf89qmqlaEKg6uFfW6gRB7Zjj3rl9y1v8WOzQFZnnxX\r\njchfDB5qW96YXtAplBpS93Y9LgA8h4VPiV96YPb8uu7q/DrK5eGgd3sHKVgM\r\nLpPoUODx3w2DLrDk/FKHVVJVLIW/TdROquQCNTCNrFap6iwDr/4LQUnGfgzw\r\nYSgyMiYL2xox4BhgvS8SFC3INH9sf9jaZRw247V3JhMJY1wG7z9u1NitcZWG\r\nnUT/pg/nEsBGJzyn9fzzurGE5v92FWKa+EqkDBENnsNWiM5Wg3QaMO/slGTv\r\nPYKScRq1rqbIvQiqPNy0Borb6pPetKmpa5zSL/GCM5N9ChPg28o5FCQIQlwk\r\n4H2sm1J2hHDYqFBR3MKbEJhH40MkvgSXHkT5CbBFJlrzh+pSG6Kt67L/Vj1Q\r\nSGExKGVZxzs2KokDdKEd4PKczWSbgiw/5hrHXnrokhS53xIo2fUUtkQhAtmr\r\nFBvjlo7p0HXgJYhEO3kIqxTkY+BXPbYO2jM=\r\n=q1Tc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNyR3poeWM2iF1AJb/lEyCxdYixu+B0or781P3zj+aJwIhAPKVC2KDN7fA+YgRB/WWyXFTaallkadGQzIc/1u9nwGx"}]},"_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/embedly-card_1.2202180255.0_1645177509652_0.5067273908017977"},"_hasShrinkwrap":false},"1.2202230359.0":{"name":"@bentoproject/embedly-card","version":"1.2202230359.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"02e5f5f51d0375b35a2a20b27815ab79d9767e51","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202230359.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-WQ7jiFJY9EmaIgmyP9QB/wmHB9a6o8db0/mZtX/Fq2NLQvFhaUqxr9AUgux/RYb4bHq7PxqjQiikFrlktbvbPQ==","shasum":"ea1379c4b6f5e779cd97137559ccf41860b7607d","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202230359.0.tgz","fileCount":28,"unpackedSize":2355564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFf6HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrllA/+NHZV2WeAyL+xa1kkTWx9Jm8gxQxzaRWnLMTYxmZrh1Eg0+3X\r\nO0TblCFC0kQlSrQ0WY3DQEbM3Gq4cRDpIYF3ahVViWGmPBV5ZH0mFm4+EZSU\r\n2D038NRZ1aYwMZf5heq7vi/NIwBynu7Dlk6KbtTDvEisPxUPCiQvnB8moh3I\r\nW7eQ40mjTPMtTkjXKDXeQHB7IzklWMtc8hQiEUEJdcDx2z/mXM4PE1kLKlUK\r\npNjYnj69+OPaXadX1AbTuPQ5SNbq+lLyB/xlIkSw8UXTBotkVTFG4GiUk4iv\r\nYDPdvTiuchmf46upcp+qGDnsIx5V+jt1xQ5nhXWkI2DrcbtN4Zt+uwtampUg\r\n5L0WPc5SlG+k4RxCdPpwVOAj5XuTQhKGpteCsqvCYAA4J8MifD1mqj5Ww7gT\r\nz5JD3C6OFTmseeBaTAUV1XpJB50JrQaPxt3t4vXPSpODniZ9kEFFZHXIgY9x\r\nygaMqsqdlXljL9qE7DT6JOwZ4P0zYEqM2HPkCs29+QhoWISXCfZYpvinL3uJ\r\nm5mgOp+C//5cV0HAWdSrad7Xo6P5WXZDsxON2rgk1+YhieClynNvBONBBPTG\r\nJEjMv2vWdhS9g4jA4LS2i/Af+PkXTftFeEwZKWP8ICclpt1pqBJKlj5yufad\r\n935tZh9u79iDRfsml02Y3seoC623EMetCGc=\r\n=rfbI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/9ZXd8TgsicfXms459xghYy5dtwSPnv2Vj4msMB1FjAiBm5rOVDRmPrsccpq2z+GCsAbt5q7KVla9rPhVLEWUraQ=="}]},"_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/embedly-card_1.2202230359.0_1645608582851_0.7628241225612638"},"_hasShrinkwrap":false},"1.2202232232.0":{"name":"@bentoproject/embedly-card","version":"1.2202232232.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"66c8923bb334f4cf267bf8feebf822629a9129ac","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202232232.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-rSTuje9GeU9j93DDYZVj72vGJw0fN1IY4AQILPfAH5Ceoo9OshLyRvVbMHT5kWvHRNDHoLbuIJ+qmGN//QoP8g==","shasum":"b1026698a28e2c8406b9cecbf57b3735799cad29","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202232232.0.tgz","fileCount":28,"unpackedSize":2356173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF6LIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCTg/+N5QZfodiPzFK8OwwkIhYnUN5x8Mxs9vitSZvWzzbEqLi+Ad8\r\n95o5B99iFqbYmQrA5OxxAbCmYHvQVXwg14Nmnp+2SkhYmd9kAW6wsw7PMSdC\r\nqvVa0BreZVjXkL0e0JbiDEbwndu9F9Hl4Cnv3D5wCom72x1wJozfMLQyS1l/\r\nAiEZ3ZhRcwjkA28Tvp8/jdqhVYWthEBsmr8SFg4pslJIpVXtmPfV6FWnin2L\r\nHg+6AnTOf7xAczHisRQw0VwT429jhgJJHMAh6eteDnZhF3YYvBbF2AUuNqUz\r\nROhD7w64LpZaRZrWf7Vu/BrjCLp9XiZK5yRMt+rNWN05Jab9oPInNg3lRx6/\r\nEp5F61uXCqHGDuY0gYb97zDeCtcCd5M1pMp05T6OrTGQjF6+3UGSq4hgTj3t\r\nAgq8fvsTI7SPtbOsTwczEoX0+IsIYm6IyzjJY1i/iB9YkXHQV2k4/+FtX6+Z\r\nhfj0PV3WotevVvT8LHnLIyKuRRZ8RteKAR8sKhfm72SFBBKSpTrvMvYTvaYL\r\nM21Wo7GnmkRRwELcad+l71HT6yBfAM8BeU8tQQDvCxINStCntfAWiHkWGOgM\r\n8ptb/nrfxkFWc57LycFN9Bbvs6QggZYZzsk0PxZO+JpyfCImJIiIs5PWgGOB\r\n+c+ON83GO+nGlqCAl5x1pLuEV29T4DM0lPU=\r\n=A5DQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWTw3idFmlFhVcAFv7kXeDztObCl0Q6GJBIhY7l/KuRwIhAKUnZKU66N2h1ayc01VbxFtXP5g+HX7D7HYdzfHaJvVP"}]},"_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/embedly-card_1.2202232232.0_1645716167788_0.20750334295731054"},"_hasShrinkwrap":false},"1.2202241911.0":{"name":"@bentoproject/embedly-card","version":"1.2202241911.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"d0f22f13b53d3b67847e18749e07ae4640258f87","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202241911.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-CkMNLZLT/uEuyL8PK5YdHc0WqV18qNuuV0c1S6PX4hzAvf7EgOxU2FE1py/bvtc01vJsjPGmM6TvcEnhKLuaGA==","shasum":"9e2c48fc840b7ae5cb55930f7b286e881a695286","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202241911.0.tgz","fileCount":28,"unpackedSize":2356173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGPMYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoqog//anbRYb7MzOBOunEs3ATNYkWtdyY9+Fq1TrVXQuDl0CeMzPqn\r\ncC/PEJ4nmiohpbMHFdlpoAOGjBLE18r3XRiZksZtzIsuBhvtlfypVWduIdAl\r\nKHixGOA0FydxTvBxfpwT3RmDDcs8QuMPxOZjU9HtW9/eBCDv8uHl15Pv3SSz\r\ndu4qulgjKlRMPUJglyVrGieAOn38o96+Zjp2IgvdYrxpcgEz3TWHWJbl516O\r\ne51Tk8JszkvfQNG8rbuH/Ej9ArzmaDq1z9+6KLDNQEzWLgLg4rQXeq3hO2IG\r\n7/vLiL0+uH6YXpH4Bdl1Ya42d/FhTT+cf0AL2Uj5BJYZM3afr+h5PbVXyhLS\r\nsGqUYwDgWsyXogzrPiDJfZvIU78NawlZZPWjV+cxTJ/DMryhAWJc23dlxVjv\r\nYgT18vujeLUg/wL58RQJksUZpftt+1PJhsqTvdcSbPUJ/zrCEOUmWcRWbfa6\r\n8yG+CSViLAcMeJXJKGqVRa1LgTbNDb16e+lwUFi30UvneOujdpOMPo1HipvI\r\nJo8avHWVvdLyK2ITdhVas/3a/WpJN2pJnbyep9x0JaNLsG7Oe7OWi9lsT/Te\r\n0mY3OP7Pw9NQVO022RktPR0vPyE9jvhdJI3UT5wKMj1IC9QEmdeQKVw18hyx\r\nf5uccgyky8sKDtltZmFYfoUP34ZYJldPSmw=\r\n=piYf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHvDkH9wax6Q6tjiZv6uIOevEczwq+FHsnwPxoeE2aAIAiAQevVBcqIffkBIGxk4O7SUwmRZxUDVxPlYH8muwf3p7A=="}]},"_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/embedly-card_1.2202241911.0_1645802264388_0.2635717276048748"},"_hasShrinkwrap":false},"1.2202252101.0":{"name":"@bentoproject/embedly-card","version":"1.2202252101.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"fa0da0bef1bacbbaabdd17ebdc31b018e6450c58","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202252101.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-EECutD/NsRlTn/sHH0OclF4PlZqPUQnW52mou6Nq4i/81zmRRRaolXCf0Gp8ao99vDF4stpsZl3jWn6JNXjVvw==","shasum":"eca4e5ded13be9a17153770ff6597908cdc38ee3","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202252101.0.tgz","fileCount":28,"unpackedSize":2356173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHPxIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcLw//S/HE8syxOLc46Xq/jOForEiMnEcWF5ArKzjzRyJtqMA46rBi\r\nvnLO7HyghuBAPbWrP+pcIUsDeiE/FZ9/4cASdkoSr8Z6TyrItQsYOZMT1F1C\r\nZyAYNjHBRk9QbQeUjLGKtHvXh+kYefHxmWYd245MMLBlqoLmYcMN79h4QbHJ\r\nqsm0vUWrc6bQeJRF/Yf+LGo8xFM+0kYJS2TgztVO9sWSlAphwlB+Hsc0ggjM\r\nWUgk29ggk14c0qO/aldpAShDVg3kR11DPVvkhMAW+Od1AURm6ll3J5/RuEQR\r\nXbtivQH4CxlG1rakLd/cggkQLaGXgLZvwZRpZhK+GtG9PS2jLZCDAWLDEXi0\r\nOJhZSEeDOf0yXcAtHQcCzQehljFlaGEDQntiTONmyaOq3+7PqbrPmWU0uzON\r\niwE3Mo+BWbnv7xKqqIo6psZkm6jMEcU5x2/toDcvcAq9aCKpkHEseg5cuaYy\r\nCzP5XiJJPSDtdAUNi2RyBTwvqBZr0/WB8b2gxUEWWCllhx1ia7zHo0yba3pg\r\nCzTMb5oqqOQEhxaDY4jSMWAaVMsT6pVKeTbDwBe2ypBoHARDRwuCvkRMT/Ao\r\nr6luG03cQJBZF/Z61bY7OE3bX4mMHTq7s3W47ji7y4xvt8cN9UK2T0C8sDJ5\r\nZKXeNnnUeIn+zrw7Tyb8zNTSyzmTMEI3ZHU=\r\n=h8mu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGHFdIu2i+OC+PEbmA++qO4DRh4IdCqFvpxTQEguni2BAiAsm8pPfRg9AXYibXtP3IT1vgxQk/4UiGKmmgVNsXNieA=="}]},"_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/embedly-card_1.2202252101.0_1646066760797_0.24660535460013722"},"_hasShrinkwrap":false},"1.2202230359.1":{"name":"@bentoproject/embedly-card","version":"1.2202230359.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"gitHead":"f459124bb58e0a0d2076f658b8fbe3c9db13a04e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2202230359.1","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-SeA0wb0DWrcL1vzFjrBvhLBY5U3H95S7LEaTO1F353TMjB2IkLOu+8MW9/UATJe1QidDjcfeenUk3bAGPR8f+Q==","shasum":"3a9eeff8e7fac5c39b022e5f14b759183812e6d7","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2202230359.1.tgz","fileCount":28,"unpackedSize":2356173,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHpilACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+Jw//Qqwk1Zh7MdXCpc6ZPpFLkr2x0NfjRkJc0y8jdvhM2LwxEsuG\r\ntdqIHYrJamC9GvpNDYcHvNV0Ka7jowZNqcd5GPjs29kKoVa0WQa/9tJw1GM+\r\nS+b5KsRurM6J/ft52H23ZqgpjwM8H9gSPn/UI1bBDPU8t5RTXk0hHZWdkXNW\r\n5epv+cMsnUJ20drRLMAsi+5kEpfIPKpP/su4TbTcPfeD4oJF8iyfSWCbMprH\r\nO9zrB+xpOxmy68LX3AuH/OU2ZaWXmntvouEWaMafTVGDfgQxZ7H42eogBYyt\r\nAW/bMazpWUxKEZfwM1tuuc3LkuNtLt4x5nz/q2wYaKs5Sj34PMAxF6TSP5XF\r\ntHUjoMRTCtdI7C39pUe1GV0rhPveF0EZmJ1Q659c/047ajuMKdxD+1tW2IW8\r\nQJzuXrW46Vby3yEm+peuOm+sWJxEQJ1lmrfRBD0nVOi6Cx8gM6KkuF46tugf\r\nvCK7OuQ+Jb2ufRQknzmw8pmuE8jPsotOAA9HygpHu8/r8Le+74soy3GnsxWC\r\nGTv/sPZGKjbitop7rMP64u8ZWFT387EQfEOeJPpWqSGzMS/Q0Bj/X+415s1H\r\nM8DEdXXjnyJ0TNsCiRQnvl49rEvRf4W9A2B4BKmXGmbavGu7ntu9TdL9sMAm\r\n85BSVmPFHKhbcnQKQ5zPvuMtb1GJo1w5dfQ=\r\n=om4g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGgCOUpGnI4QMxZ0YZSZF3hloB9Mwl7h2sHppxiZa3sgIgYLeSUTZtqfuy2MVQB9a3Ze691WBL6FL611HrPzYLDS0="}]},"_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/embedly-card_1.2202230359.1_1646172325125_0.4128211846116496"},"_hasShrinkwrap":false},"1.2203041950.0":{"name":"@bentoproject/embedly-card","version":"1.2203041950.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2203041950.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-lfSyCxCxlyRea4h+Qw5AXHQyRrpQoTGF71lU52iB/EZHQDuX52HqZIsen2x7EZULV9rViUDkJyFas5fRZWVcRw==","shasum":"0176740817bdefdbf1bd822c87b55949109554a2","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2203041950.0.tgz","fileCount":28,"unpackedSize":1197736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMNycACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNWg//XVnNs3Myf5RCvHdytmccMZ5dUhv831ASeUAt+dlJp9PR7Avj\r\npEySt/ypwWzSPu4eQA55KXRqIpbsB5yTkh/H/Nn1GR8fsRqpb9b6zWlm7c2y\r\nHwnQx2HzILqUEXtI1ZSPXrHQ2xdl2PY9EgLDXciULyBGR30Xr5ip05NOZJ7R\r\ndyYaeF9mE7ZmGUAE5n1q1bs6h9odsKMbqMd4A87qzw2b3+YpkeM6DrYQmT+s\r\nVaNBhu7GePO8JZ+nZE0vxiy3NHWn6tWRStSr1LbYDlVoFgcliYaWxuTb6wvL\r\nFTh1yg4y86vazZ4l0010EUnyvNuk6Ca/nNV//z+cBRxWH1SeyzY4517/aE4l\r\n4arMknx1TFe2w/SB0R/bc8zHuWurUZt8Ipw02mBMgyeP6czsgpm6+j5SvGq1\r\n5+jUWLyh+HD7vdP7AkCo8rJY/SCcK1OMgZqGOj8cUPVwgQ5lTi5eSEedA0SJ\r\n1BIr9rnGWKP9t7wlqpmovNRtnl1lL5PyfpMX/ZgZg7sTavnayeTOfW2FuZ0y\r\nZjgjZ4hruK5MbtxswXId0SnvD8QQxEREIdqb/BNQ8uV1LuFsEm0TR3SZGSDT\r\nh6mPkVCYqoJblfVwN4iAPj267qdFRYhk9KKasiHMj0h7+BPIS4cVjbTCuDfq\r\npQJL2Hgwnc1lCzjH/0crm0tQjDbDgQjAsIA=\r\n=aldn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCE34bvJco6gT6kFqCkTfvyy1dDUBWeE2SDlBD/96q0qgIgDhrHSehXrxB3Ea50h0OPeUYBo7zmLKhSOEANP329vjs="}]},"_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/embedly-card_1.2203041950.0_1647369372403_0.018973817193167708"},"_hasShrinkwrap":false},"1.2203151539.0":{"name":"@bentoproject/embedly-card","version":"1.2203151539.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203151539.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"fc739c0d339dbae236fa53a87188f5f7ca58f25c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2203151539.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-qK50MVjKprYcbM5TG5aPiAWvlTyCT2XcdTa8F+52QKB19cj6CCfOpMYpK1xviPQfGBUBCZfr/vgfM+AfMc5Pxg==","shasum":"a27eabfb2d180fc9f638c8522ec00adb52eb2a14","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2203151539.0.tgz","fileCount":28,"unpackedSize":1197736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMZ4oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogqQ/8CfBzu14NK16Vy9Ax7d6P12q0u2t/5eqlgQIjae8gVjihWFbZ\r\n7l7F7rBVoL6deqGPWO4bERHhlfwc7crUazVR9YMZCFxSRf2EkYvJjlen+zFp\r\nnj1NjnwaJKdW+Z+1lesxlldLFthZct2NWl+E2yICxvx0ZJ71cYtYION3LXbB\r\nSLzhUWWfQU648RuymGX3CavXDAnrQKEobvsqJwdKYcqRsgZcOuuKXaR7pSqR\r\nhhBK/EBlyyPakO0BLVlgMaitQW2wMWP8ab1FkGNAcmoHf950FE7iK2BIH0+j\r\nHY6xcOvHnm+mdlbGCQVV/tycYMyqeEU14KPdPpEXiYzAvZVmmv5Sik8BxchM\r\ncjrL8GyB3Kpdh7YDgnaAdoRSn9b1/72/Ol9NBGGK+Y/BWo3EMYvqXEWLBIPJ\r\noRV4CuRel0PAXa4n7tKctsx7n82VYGWZV+3yOSgNzK6s2sUDKpwExdA5JhxJ\r\n3Tma+ddW1fkfteoK3DtV2SYebLc0pUfhSP4XyHxOUq8+OSeDwT9MiMFyIAZW\r\nnUWM5p7ucm9iPGtfJmHWVBH0gPPWsS9vOfVCkVLSJ15daE2Vh3tBGPm7AuzL\r\nsQqJrSDo9qY8adKlKMIqDl+smeBdT9ceyk6PK9F2OU1pDqEnKEKAFHwZDrGG\r\nA3hBYF8W/STPVy/4NztM7Vm83giodkBcABA=\r\n=waJt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4cfz9+MyRlTeBImvKrv/V5vdH3H3WeHiouOmmVBH2kAiEAnktODpqRYine5ZR2CQunVQHWwkrh8ybdf+/c1AVvDko="}]},"_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/embedly-card_1.2203151539.0_1647418919764_0.724437833603675"},"_hasShrinkwrap":false},"1.2203172113.0":{"name":"@bentoproject/embedly-card","version":"1.2203172113.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2203172113.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-m9E6MRyBjVEQQxJ/RO9P1et+J6QGblYd5aEkAq09U7fIS3LVY9UW474VvlTMwKB9qvbEuNi0//iwCLVPdUg2ZQ==","shasum":"d12aa790c50e0750bce14c983be726790d158b10","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2203172113.0.tgz","fileCount":28,"unpackedSize":1197736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNEF7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcZg//blvoBm7O/LK5qc19fLt56sm71rHwiPhh9opI6KUzX5Ca7WGh\r\nRjVrMZKsA6tZCP/xHcWeyqancgS/6+HHhiLWyTU2oFPd+IK3LbRS1Kh6FAFV\r\nQgN3laW7brS4tbfREJPg/LgPw6DOZ5qOBcjlYtDE2rWu/8WfcaZzQMzrPcs0\r\nntQYyquV9NSR2odRxrEyX0+3e/HQ8WXPwtI7Q5qhkw0HpNwz9MVkmWonKcPy\r\nCyfT+Qi0yW8ypnljajuHAq/NUvB9qyRLLTJClKw+1bH9q6PsbtDQkttjhERj\r\nOGB3bAsqG+hXmQQqDFXqviagdRvmNIBervPwos/3VaBj1oCUBCSNfdKIiVHp\r\noy5/RMIPQLki7Pv+3hpUWrykkmQaoKfd/b4dwD/gV2AI5O5Glh9RBlRwpoiS\r\ns+DUMdpFdByy2365UrIpluLM4L7RBU6iBy13OeDFyBdM/rCTrz6WdJb3FGiC\r\nS74hrUjGKoaiIvlCjpy1plLP1OEBHXgARABSMJKL07M0zvfmj5Hjg7gtYM21\r\n+FLmACzV3VwXmsORa/fIhk+694LO0cD84C3QcgBtvT7QDSfRMQf2a474w71a\r\ns+SQp3IFd14hExHAGSfAEVbTwBR0PvpMVkUcoGwN28KEwzNBkx+AaYEmOvHJ\r\nKH/IGdQ8MFlWVMaAsheswO8bd9kzADfNaGY=\r\n=Ttq7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF25wg9iC4xTBgOSZwBkMJaaWbAV4Ebm4nocPGKJZET0AiEA2935utnmiA53BkYc/hJJSnFtEOCj4a9RYGw3u3fj48Y="}]},"_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/embedly-card_1.2203172113.0_1647591803114_0.27189141418447726"},"_hasShrinkwrap":false},"1.2203221937.0":{"name":"@bentoproject/embedly-card","version":"1.2203221937.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203221937.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"11fb2607ccf78c526a38e31bc141dbd3ac75d326","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2203221937.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-4NE409Nri9CK/0MbQwZiOWTYUmNjXToReH41ir32I4XPckv2qri+iPfxFw/4jITVzzyja4da4dZ2U1tc2458uw==","shasum":"9993c5e2bb888852528787357ec5b0e247ea1619","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2203221937.0.tgz","fileCount":28,"unpackedSize":1197736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOtlsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpw6g/9G8OnIp2lNnZa3n0jwyZgSVIdC4iYvxu4LT0tYCrD7gdGjRdl\r\nfOy1wP+nmOIlCBMYIJCFLFKvM+CnksbmKs1Wri/ZT1ZH1sz+VI0k4cCH0E7c\r\nvU0viuGIgr+RLby6IweXn2DTbiIDCe7cPvvtHpY6hbyq5c/qGTgPAw9imiKE\r\n3x8gaFhlBqHSQ+Kx6Sj81TQmxqa7ALLQrrxHPD5v3MB6Esx1/SqO20HXy+3I\r\nPBsiRBQqpEyFPLHoLAWWZNzsf6xFhUb5AUiV1F2UAP6G2vHM2OmHBMMTAERZ\r\nTpa2bpDexqtmIt5zP/8rEvwrYHAhrsPbWKec12MqrKCuJKSfIhi04oHv08BY\r\nkEzEACc6Dv+fI56XIec97jJlhYimVNtVHs8HD4mLkKjiuluOql4PJKUdvRIV\r\n1KPZE34xCO4dGDzq6AJ41XaL77ZToUZa0TtW1A167PWsiqp+bw9lfxvlRLaq\r\nFbL/brZmF75NZSUXHBkJwzBJm7lZj1GBtmgFUmX3mUga3Xu1bsOXNQr8Hdlk\r\n+NugOftoHo/Vm6cgnpcfkLB8zxBtfw2AKBOji8QnDQs1DOvV873ls94erZXL\r\nAHmtDqH49GOybW2Of2FOu5QXXzIO0KdQTTmO/pb3AVKD9tC9z/hCmjbMP0AT\r\n+mEkbQW6sHbyEOJOxE4+Jhg/fDfcqsuLfuo=\r\n=ekAY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNFrLf98HCGwFE+ld+HdxiQ9JoNTkeL4AoMLzBu4T4uQIhAO7RQEViCuEMY4ZSvk/ZPAHNfF1hKBqC3LhemfIMskV/"}]},"_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/embedly-card_1.2203221937.0_1648023916781_0.9524817945268091"},"_hasShrinkwrap":false},"1.2203231914.0":{"name":"@bentoproject/embedly-card","version":"1.2203231914.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2203231914.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"9bf7cbdf0dbb4de2bc6b81fe042e52c990576b61","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2203231914.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-UuD4GfAqAYla37aKt004Chu6RjF2rz/SyM9hELDtgX5X060fqQwjhPuCTgTxkM+aUaPE5fTey1xZ8NOY23HhBA==","shasum":"8e42a3c983a6105bc7982efa1fdb5c792f417105","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2203231914.0.tgz","fileCount":28,"unpackedSize":1198140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPCqBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaWQ//Yw/Jlcw6AcRBkHgRZQumT7w9B/fMBNxVArtiCa/m91XvKjZC\r\nDi24VUghwosuR+oCi1WNW4O266pbDl+5bGjiUlzhYL/OJluDwCleSlU7Z+CU\r\niq1LJh12Uakmz3TaU+w2Gderh9nZJaSZ53W8bb39kf9TsLgJN3yWUP/pcAvk\r\nvJcDOVtyNIFvV5cJRO8ffunq7+mbEO63noezBBfl9V9gq2PO0SV1EZQ6kTnD\r\nkQoft998Abzghl7et+rFPEglyhXMsvz43QJhBhCf0TAE1IFprM1vNsZxISAi\r\n8Qf04ZuPYYDy2lUhnpg5z3B0hy2BV+qbM970kL66dZ/AOZeWTAshLW7jqNlx\r\nK8U1rkJv7TLDzKmUSJ34R59xuatuXXsG9hAfNgCAn06VnJS9i9kwF1v2wzZc\r\ntEyhFelakrMRXGXH1NRJMR7hdV+4LH7XHpen75WxnMAJtN9STrUXjshP/VNZ\r\nmf+rGh3bEnbBbJmKd68tjOa9eE86S/WzPULUr4G8AatBP3lcu80BcjJ4qMQL\r\nc2pTYJzg8drgPPEA8n79ZxT5AvbS+LZBOJXYbfZjNJMhUVIFHj120yVu+Tb7\r\n7+mnd6XI/sIX3O6KZbdRCGImsWR5NNXqAYJFXY3GePiVJKLr+AYSLH8ot9c2\r\nFkBDEf+3XB1Y4jiZyTA1RjXPrTF9aLDaT84=\r\n=jRYx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfSbpSl/cDn1MJV1KT+udzb5EK+OauK64qvePKaI8qegIgEcHuf6nj1hyfYJJJemVHQvkqr2/gLzK58OTNXZ66ndE="}]},"_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/embedly-card_1.2203231914.0_1648110209221_0.8288629766259443"},"_hasShrinkwrap":false},"1.2203101844.0":{"name":"@bentoproject/embedly-card","version":"1.2203101844.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2203101844.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-i4DkxTzh7s+BgT6jt6hpvua+kPelc5MH5GLBFF0y88mOPZabkk1+sERj2tmVe+KG6YKyAIdpU5IgFOtyFijaBw==","shasum":"4aafc4cd6272b2f2ef637b757032f3e065f03ac5","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2203101844.0.tgz","fileCount":28,"unpackedSize":1198140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNACACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLwhAAi03rvvj3YtR5WLrLA0HLR46vB3MeiZsQvxlkjFSOhFiiCWah\r\nLVAF+ZuKNdoBJj8JvNJuSk8KQKwb73fOXPkgt2E497tq5/5nbzLxYKTKMuHt\r\nPKmJhBXk7vgHIc6DGVwO5zdHztvxn6EwweAG1eHLjRwteZIqETCF1LtZqXGR\r\nVoE7/k78UFq/X94D9a1jQZFpnwe9FKnCaFBo9J1RqWQLaQriJN+iTNjLkn5Z\r\nfY7SITyg7sRs1JeUU7Wo2Lhpc8EAwXq0bSWawWcIQeLuGgxfEYqtsMDI/m0t\r\n/I4oPduFprnlsN/s+CgCndRYq7WLSvoZcwV63+19qLvMNOrB0AQSQfgZg6VV\r\nZokLUTxbzYaqmaOkNlMV99Nm97d+CHaCXLqT/5RmFfISXOmb+788uSphxUYr\r\nlfF5RlkiC97QHrmUuDII/CbnsV+tVVaVkdSxZaSb5XVCze8640ShOFM8klIj\r\ny55jdXsrkcAA58GgeJknys7g5BAmUBaFVGsDE2mJOg4mW+LVqT9UJpzPzsD0\r\nH1RUg7DFfAu+BgS34nyR8vF85LF4p3Bf/FueBtWXXuWVL846l1BjB/AP3Ka6\r\nnlUDiQJws47pSXCd1gZFh4vtVqHEF0b+crgp5r8Mu16jE5q9ZDkp4+AIE/5i\r\nC9yF/Oo8a0D1IlfIFmccbKyflAvpTIzH1dg=\r\n=dYJS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEGFp0thW92aEim07bVGBmpqOVztdExOkIOURpmo3GVDAiBMXmm8LehlgLPMD+yJ8LbJvWieVDk8KPcWUi6zUDl4Ug=="}]},"_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/embedly-card_1.2203101844.0_1648152578225_0.9820715394704893"},"_hasShrinkwrap":false},"1.2203281422.0":{"name":"@bentoproject/embedly-card","version":"1.2203281422.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2203281422.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"integrity":"sha512-dS+2NhqGDidvifeB3h0gd8abUyENRtDSWFL+7cq8aEPx4nVdrzQhe5+Dp4R1jxm+qp5GRwNIFQAOxre+ffEiPw==","shasum":"668d1214b0b3270f1ddf80a95b67624df23df69e","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2203281422.0.tgz","fileCount":28,"unpackedSize":1198140,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQsMvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokRA//W40uLqzewUeq1o+C2Z1bqHoVx5PVjuvZiB4Y7bfBcZotY4ld\r\n7muUL4jEVTNngH9L2z8rvZDyBWdAJYVR7VOJkA6xYqFvG4Q41nRVpAdwlybp\r\nkVbbJ0h8giLXxoD5kHqYczQVGkDSxKz4jbFWodvisnFmBAZj7SWPDkCWG4yD\r\niP03gotnWIjVELdtZ8dshpWLckoVswH4KJ3Su00pSmAiJFV8LTYXkc6nmoCe\r\nP1XuMPGthZ42e4BWNEvXtVKdSB867F7M/OUQQLb/WjySXDeg03Z0iXA8o8KF\r\nSUOazaebQkw7huosQCM8LwCf71HYK0SV/y9AOYh+EMlySdI2cCu2uz7asrng\r\nK5USLuMDRZGCHXGx/81VKPnfRnsAAo60JNOe4vCLzLf3LCmuk2I30QhAap1P\r\nFrl4L+EhJxdhER4ObbB7SEhT26fVuRJEz6cZmwu5mcBjVX3gvZWLzMb64aqW\r\nF1dKtZ14+05Idu7Qolya9erbX47tKkOrTjzv0iZNI7R/B9IliwqUH4K9+FHG\r\nLxdjgTCTR/j/VGYlgMJO4roNrIaq04i+z7AkFNu3llYK0VPhGIB8L8Aehru6\r\nexiqfkT40dIRcwpbTDWBU5eAfLMElJfMq7T0F12ZcDMlgXRMJ1RQC86OVW11\r\nY8tHcvQF24tBrh5sSFS8FaBGSOTmjvyq7l0=\r\n=FQZf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9MKQv2Em4eOtQECeQlY0ye2UNVxrvWYtLxqUmSCwiSAiBha96rH6j5xY/1PNh6LSpMbsHP9H09h10ers5F2OvDUw=="}]},"_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/embedly-card_1.2203281422.0_1648542510817_0.9204588868940302"},"_hasShrinkwrap":false},"1.2204121632.0":{"name":"@bentoproject/embedly-card","version":"1.2204121632.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204121632.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"dce11ee1542a2d10e47b8e9875dae137f4cc1b0a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2204121632.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-F4qaQZ/TnTJIJtXHdNoXL0LvuH6eSZZhPOiDSUAzz95tWb1e562gjhvRRNFFZLhKwf+L32DZ7oU4qv/+Fh8MZg==","shasum":"1955f951bbe6de9946b8e2b4e9a85c6e9eed9931","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2204121632.0.tgz","fileCount":28,"unpackedSize":1189961,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJ33kIZL7ZfAiCBuHr6waSfNZz2inQeIqOjbtEx/E0TwIhALuy58eh7FLdBQ7UyCzpCBbARg59aGt2jSId3+soyNaL"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVcGYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomFA//QSF4qMw++h4OH1mSc/i7aa8nfajKJ5zDpTougr4W3vS9OPcT\r\nBaD8QmVD8fjtSjm6va9dqERYBYcOGpbrAcJeIZQGmtEF2z12mqO8nKZZDU5I\r\nRWDwGVq4B+5AxHCCvnYJFvx8bWC0qJCgHQFBHGSZlb8F9DdPsQ4Gw2c//92i\r\nKm4DHHaXyS45/qilejtSimFydThIkxiJSv+MNxMPb2Efg4M7Z0F0iR3WUR4I\r\neeBEIN1L7qrzguKEMs7XX7NqFJZjPX4Z35uOrjkFt/BEs3ZodYyB5xC5FGm1\r\nq9HD1q1ezIO7U/AqBY1X4t+5lR+W4r76+yv6ag3GYpiVkVe0Dz3IuhJe/X04\r\n4wLKMoMarTUlQwuDH18oMJ0yQCXsg/FFPBhr/3ljWU5ddgSJ1qxlO/7u7WfL\r\nw5S3CZvRVnUGNQTpHfapuWrVz9NoVskYYX+ePKb2tFmKtnpb8/DzDXbhJ/hM\r\ns2zOV2C2gkAdNr/Rv5Es5GEi0PLPk7Yy7Gty8Qr+e4maJUF8YrjZGIp2Tp9b\r\nM6BIWoqRwCxN/Kk+Rl6i5hzZVCvXqbG5KsGgIsT9O4+hLS+0OVRMPivG/0rq\r\nt8Ox7JGJ0AQY/5981w6S7U7kQlMO6oB8QYlJkbx0i+X873AnhXMv7cySYKit\r\neWkATKOcq7uULaOn+m3XTbZ9zpXNIsWPeo4=\r\n=WyVc\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/embedly-card_1.2204121632.0_1649787287856_0.9450508882190338"},"_hasShrinkwrap":false},"1.2204122000.0":{"name":"@bentoproject/embedly-card","version":"1.2204122000.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204122000.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"9d10200b5a9784c35ca9fa16b1a4b3078aab3180","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2204122000.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-uG0DX4mjc6NygV2aCrPxTbv9FAqhfk7Alf6Pz64qaXbkHzRciXUkws4YNLBd1oXqX3Og+bngUWbh7/x2PNJMNA==","shasum":"a38be99dd6a7d77b071f4130d0b237d41ea8162a","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2204122000.0.tgz","fileCount":28,"unpackedSize":1189641,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEgKCW34E4IO4s0rVzAFy/VGKW+wGlohip+cIrulBr6eAiBKqVX8x2jiembjgntIBXo45ZDRnZ2g48QNwyXsLyem1Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVoooACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTiA//VJFrGLthaevRpblxnuGx8O/IzSX8AiEbtSq6Rc6eM/voDpvg\r\nL4uDL3wATMLYc9zsJshFbS5DjQN97Zenr3AAFTzBkV/XWi0XRw/GaUfrJAO7\r\ndf+6r0vngPmo3/7BJHfP4jEVYHoT1N8BXQEjrH90IRTsCwXmZDQEdyw+dJzn\r\nrM0yQIMKaswm6j1A9lxcIof40gEGRCnsS/udedW7MQt0RyFQMlzSl/v4oO+w\r\n0BXWkfgNdDMxytZGCv2Vhuys4kSnpKxaWIfGK81V+DHt4YvieEBsiXGBkkHw\r\nupqCtCErb8DUCoMbkPgZQqCRtmTvP8qPtBvx+nlN0Mv6UkqQLMN+a7DjOGj7\r\nBDTGpdBojJUW7lR8bT0DWzdLBaw46kIr+Calb5+HX/xpWUY5+acrH8Jy2UzP\r\ntWwib7N2Knqu9pcdyguJVjkZc3n6OUsrYczT9JTwzWk7Zzx2oETZV1cKWWBe\r\ntmWeyQqNLEQWEZsR5c4WY/GujE9oxhUcJMYjQThvVQTYphmj9m7w+WsuHoNz\r\n3aPrI8giJml5q2v+kk2DNOdUdfjGItjek1pQ2xgTBX+HM642eTgTDujbikuS\r\ndShybGSU8YjupB0awWoFTAAFx9emW1cA/Rpth4C5q+aTbGiRtSAqWwQ1wQhh\r\n689sux62EkpFWdmebo/UsV817+n1FzOJT6E=\r\n=MNzi\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/embedly-card_1.2204122000.0_1649838632355_0.48785455422628954"},"_hasShrinkwrap":false},"1.2204132005.0":{"name":"@bentoproject/embedly-card","version":"1.2204132005.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204132005.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"26ab90e1d3f7c29ac76e3fe33cdbeec9e828eff1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2204132005.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-NY4L9Vs5tapMa7RuvPcnZHv7/9/RblidKiKJDhnlNefnAwR/wqV7UDOVq0gEZc7mBZnQQqXwbFUrmXgvF8HuTg==","shasum":"d6f754b6326cfb56582bb602b09bcad67488c494","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2204132005.0.tgz","fileCount":28,"unpackedSize":1189641,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHTT/Nlh194XWa+3spVd/bIH+52/1DRi5VKgLXiMvNxwIgRmYu7S81W0dFocM8xhe6CBrz8YuW4ikMUlUJQVyhS94="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV9wLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodhxAAlbiNL4fAJJqqdwIdf3ZKTfTAV8ran8aE3coMh4Fmfg27L/Aq\r\nStXSFOEsJkCwt2f8bgQNGQMpFi3UWK+A8W20hZHGaGqJeYm/IBIG9MBOw0ci\r\nJw/eJNv3NzmHxdeydzVkqQic4JlRoW6FwT8+B9nxFjNNWouczv8bNcq8BBpM\r\nCkDGFP3a0eNgh7q2VoDn+1a8hEXOnyfMLU55ZcE/ycTBRRI6aWJo6Luxrcc8\r\ngy2pAaEIQ7F7r200UTPvUA1OMZ/Qz2/h2T3u8FewcdxXLoszpL9vsWEW9tr4\r\nON44/4fTTyy1g7BsQHxGm61pqgiFgzbe0sHs3mwogvKQi/6/Ce69RkOGgsoB\r\nHwWbmDoNOJRu6borTzeeFItK2tlBcjTwuLo7tk73H707l5WWDzy7idVdCoP2\r\nONX7YNQIqBB5hkbJlUNNMzvcA/wD8q8eisnP6LbI6Imv8C8dx3OJ1vVB2AXr\r\nmKmmM/eGAvdLJyFczEBknLs0o5Qz3kRaNhNj1mItGS7YyVH6KHRmzGsLM5Ag\r\nWZmoL9Vmgj2oaK1h22UBT0hRoiYCZkuDagdhwOLlDZeOwfZ1rAnEV9tK4rIT\r\ncR8XMohvoHSBoLgRoL4uUzfKyyP7fA2a7wqtx4TAeOELEMWoRBHhXT5lfmsk\r\ncL7xyNKRFL7zCi++7/ErKrqaoLsVA4nLbaI=\r\n=lVaA\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/embedly-card_1.2204132005.0_1649925131562_0.7645076277217013"},"_hasShrinkwrap":false},"1.2204142048.0":{"name":"@bentoproject/embedly-card","version":"1.2204142048.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204142048.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"32d29a09afd66bca55e024a4f21b1cdf6690cfdb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2204142048.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-JL6NRY9W4PMJIe+MnauoEspqCT4X9hN01FBFgTBOcDWeES7Ye3A3wtR4BOSIJpI78OY9WNJLTbEKK4twivO6Wg==","shasum":"2b4fed3868b98bb058ba4e90ac3781f8621b99e7","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2204142048.0.tgz","fileCount":28,"unpackedSize":1189641,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/nUqW7AiKxsQmw5qDwN0Y6h7ci5S+vN14U98liqZJ0AiBWRhFv4aIXnlDne2kA/zeIFq2qE5jXEXsSq9jmEYuiCg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWSw0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplJg/8Dl1XY9I+I6/mCdzYshy73dJ+xRuTCODrxFZI/TG20a6mfja4\r\nXMYIsmq7tfjdyjA01e0e03daBZh2PO6sEpoXyowma3Xbk734491gWRuj+y52\r\n9IdYmzHSEL31yUMl6/XfwS/cGLqemB1Q7p7acMMm0L5kiafjcWF5LhCmkJ94\r\ndaiYdPCnIGCFKL4o3xfnAao7YU7/fQu3Q04b+UDs5m4ICiC6nYzc6UTWExBA\r\nN2c3Lwj+E+BY8oiDKn9YxjEwf3HR72IxZfYE6udRUSY3dgub0T0bS3U87Iwv\r\nnfhX/Qd/zF2w2o4/L0G6zkfHO/vkvER2Vr0sYNUK9QM8mG8S0K3tAI7vBKnL\r\nGgq8VTg5KiTGY3+Ppw5AgQbvCrHMYByAK2wY5TGSaDfa3HFNjVLB2f+8w4kj\r\nLAbQNp5HiCNSrfV5di3G0a6uUt7/+CH0Mx5agXJoFLdscvMdfxM41/MOuirq\r\n3K4M+IQI8umMVDyuAxGIpBWGBClH8blm2bcoKJ5Ui1qEyaJVUIrw1ou5+51H\r\njdYyjpHCpaQzwGG7aBD3IucsPHF82xT5F0z/320VhH8JolSj28KWMrO3UQzN\r\nZ49Yf2NOXN8MOVEEvwztOzI0Crc2J+RcT3394jWxuT0BFtfvRqHWfujLdF1e\r\nzgj7WDVV1Nu/WQX9p8wdDFFFwLJ3P6Q/iCw=\r\n=j4w6\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/embedly-card_1.2204142048.0_1650011188525_0.9710595632769563"},"_hasShrinkwrap":false},"1.2204160405.0":{"name":"@bentoproject/embedly-card","version":"1.2204160405.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2204160405.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-XatJdNEz5pmpCsilC4rHgMC6ajpGIxySVlrOWHluQHrY+vin4QAj69n8BVMP27AxS+cNNdPMYjP4cPLECFe7Lg==","shasum":"4eca3da95c098f29e580081c101fe21ffadae98d","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2204160405.0.tgz","fileCount":28,"unpackedSize":1189641,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbf06LJ+vO6eUBbTFYaWx0ZAocCMA5UyqUmMSW4dXrSAiAq9FF2/cJStN2GX6efo4nekcvl4kV7pkvDbLjwNt2ycQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiWn0IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYKA//Si9PWHLFfXVNUpJNytYI/xvRv7Ttf1YBHYJn9JbxFL5K5DeM\r\n3xThBiDuS9pwL6vQB6/x6BwvIKOJ7bSBbWdCirzsHfOqf/Ow2GIxamiuGMCi\r\nWKGi1ZvKVqugfWR7wNdrdZUw4kvfMHdH11RbZ8dpalVoeoecYUnbRy7jubM0\r\npHyP+GJIN7E1f1FJssRTaMac+0lqIbn9GSkpDjVO+MOwpWwgKPKdY+rXdkPp\r\nu630iKtajqB0ZcCMKb2ObDW1BbF8UZQx1n9ENMgGGl1SQtDcMGQnODHV7IDQ\r\n7rOdFATNEGHV5x4asNiroAGGpWZWimJBMl/EC8BYry2dyO7t6Ptdgo2LEjq/\r\n7SGh+b0sZHyCWCh+3pGdgkOKjPlBxhCiAMhaWSIs9u2AuCvZIcG+3wrjxwnj\r\naZxd83cp97Gg/GvYH3nTimnFRXf7pmhmK7Z9SC0hTDb/M2nEeVY9yqXnfO/D\r\nR6hfAI1wbfN6Ns7KMeva8Ehk864uzLWjyqoNAwU174nT7+48Frn8abvPVWjU\r\nss8U6/9Jn3kaOS4SlvUlgwv+OwPm6bwk8wBykoSVSF7M104EHPe2OstKoTld\r\nTDHjVNpHDS6jfDuODMBf45A/Irzb5wKpJ5hsYCXGsL9Gbh3Sb+0nzHvp5cQi\r\nEnNem06gHW4aZFQMiDe/PM+AVKFh30KqvOI=\r\n=CWK2\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/embedly-card_1.2204160405.0_1650097415982_0.61235387373313"},"_hasShrinkwrap":false},"1.2204182206.0":{"name":"@bentoproject/embedly-card","version":"1.2204182206.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204182206.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"83e7c80d7406923369ada8c1a7a5dc660ebdcad6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2204182206.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-nhZP2JBKVa8XU12Imjw5EwkALN6HXt0IEWGBeLFYgE55gZ+2lGPTuYdM/ALwQAjsJemJ0eIyIEY6iEvV92OfIg==","shasum":"064c5ad5bae226cb7b8676612cd5f691c5bb91d7","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2204182206.0.tgz","fileCount":29,"unpackedSize":1191073,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDeYv0aAtd33kuEJNAjJhVs8PzrGAyMF9w0mebFt62I1AiEAlX38HS+YgV/rM85izrKOKN2c7PGEYpR4TYyr+BVAZgA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXnLvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGlA//Swkf5fd6vWr2Mz583zp+muXqOEuC7vYkdG1074K1RWsW0wcO\r\n/PUzH2vDCmyCWoz/3KQHnmc7rV4kxYo/PB1wCAOQW7iWl5zkrLp3MuCmqdCY\r\nTFh+AK/ji/5OdXBwF+yyZhR/ppQJv65x42Ut51GPDxTkrhSuOqUJbpCzajSF\r\niMlishN3VZ4bISX/78z5nFQO2JadCh0Kv7YtoMTBkLnd6uNZP9zSOSivSpIh\r\nfbZBUvCauAgFYyvoUwO+cwR7Nj34wYokx+nLcWLjShohHN8B4Pr2hk7/7nNa\r\n9g5aFkbDwDRM1yGmm3cHBZrOJtihIk0mQDixpKuvr9QiPMdTYbBdB6yw0yO/\r\nHuMysCddCSg3vEewPcHIRgi+GixwPV++arl7kN7FnmA3sXOdU6LtTy8W0Reh\r\nud4yZj2H+RqEn4Idz5ZZVi+JlL4J0EXe8NSdX+1U6gThKUsZLZ1GIhmzx8S6\r\noCTr3eQbdzf9ZSgoztskrtFXmHpXP4e0Q8BCPyQ6VPnVxO7RrHy2a475u2sV\r\n6ibXV95tEb5prJh4Fh046+p8xlqd7ZXQUzRl23GvVGjs0B558G7Supuq+AKd\r\noKrrb+3HKQmLkncS3at4A/Bl98CS+XMMqbYKNB4kcP9JXzoavUMKz99kioo+\r\nzG1GSYFEdJHseagjgEw4yxv4AwXknPTXZOo=\r\n=uxAB\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/embedly-card_1.2204182206.0_1650356974852_0.7080123748676839"},"_hasShrinkwrap":false},"1.2204191429.0":{"name":"@bentoproject/embedly-card","version":"1.2204191429.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204191429.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"2ef2d96efb4624b0ef0313b60134c9e35a4e8429","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2204191429.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-j6fqXbv+ek6oj+4k39jsqI5zrUtlP3drjRve90NYKxyBYEMrPueyVBsdkLLOiDopBCo+jWm2vBlhPnq8pndpyg==","shasum":"52fb26106ca5632ebc685446dba83f4c022c8370","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2204191429.0.tgz","fileCount":29,"unpackedSize":1191073,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE3FZ9Q4AQHTCQkuwtthVeYaAPHZnCrsVr9e8AqdqYQDAiEAvw6UNy5Tzo/v3StyYZ+og4oobPQY5JGo+m89v/iuKbM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiX8TAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaxQ/+LkNEPl0ioB7iLguMjO78ZpE7lzs9eJJ+1GBQI7Iv/N7noGt9\r\nnoZTfwvrMHCQ5dLWmMkBlz0Aa9lf1HuGTXCOWrw9KHkkgSCqyr1lwLAO5D4q\r\nJ32cfFseGHUs3RTOVLNeGcBUu4UuKdJyQBBrA+/qGpAnNx1p18R1QEWlgAeF\r\no/iFBsUAEHsTSGw3iVioVSJ7xgnDen8eOfB7CkiPKFrvvl8jmt5MXqpgGtjX\r\nmMD6XSepFzaTTetKUBi1BDy16QeoAWnDa8mdoR22wHn86YNqaCTDwXGOcvfS\r\nAIPAu+dQN0fyMDCCXtyDMHRBqqktxScmnJ24u6UTXpvyQF+VMDjyiW+nLNog\r\nuk9FYZkROy8od8p3WavWU0f/hzfgHlz6W7r6dCvzKn7uKNTHvQa2qzzKMlkC\r\n+6+2ftTJdER3ozHM8m8NkPfuEs98J1lSEchyduTQ3cdoZxaVpHeERc+GEE+a\r\n5j0SlmjJ263kZ1d4LsuznIa6Ty+qov9/HxGxRah/Jgb6+daU5D9uekmvmwuu\r\npFXo7hFW/AXIQNC3Ku1rZQ+SdUWNqLG1cIQCXyIoKnS9VaVksOzpkbYMjobr\r\nejJVdTCl5LsOb3uGun4kiGSNKCVyWlGzTePIG0l0CXPLqW+kiisCjGkZfgX2\r\nnALHBNpfAbaC424hKAm0WiDdmCjfGGHDNmQ=\r\n=QPvR\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/embedly-card_1.2204191429.0_1650443456501_0.4054099046576838"},"_hasShrinkwrap":false},"1.2204211736.0":{"name":"@bentoproject/embedly-card","version":"1.2204211736.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204211736.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"01dad70364e4b2b9707441c2c8ec973e1547b195","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2204211736.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-5iEqbZUauLJGst3WctIC3jkWkfXKxZGWpXRJYaTlF62FMX7vB+iR2/cE1VmKXPkTmfXVkvHsTieWUUpTG20Mtg==","shasum":"29bb2508b2da8c0fa6b819a5277fefc0a2655194","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2204211736.0.tgz","fileCount":29,"unpackedSize":1191073,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID2kJBLc1rRGIGBoSpxe1eQ+H68iKMyfyDQkd8RcT3hFAiEA8CaalflG0LeV07ux2TFa/jVdQbgmokAjZLt328XZrvs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYmZ9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSxBAAmuEEHliZAiw1Sfzfd3PEw72uViBge67A1/K+pV+ZsXdJU59T\r\nLfahnqVM4VkASXrtBt/BDmVVwkICPc3rUbivbBClj+yOgFBZ4FvVsQjDkd6d\r\nxd5cKN6r759fxcFzVasrfCFxW+C97yhlplQOS9jAVrnbACu09yjq+onF6wxC\r\naWrMUnCtvgITqwOepEzjxSDxoLZ9V438exfetAj9i+rM8hrZW/Gj8le1Xgs3\r\n6OlkXF3/hGdlCpdfBbf8mJUHATXqNbt6kpFNrZpQDaX/OCUjXM0Vij4ifsty\r\ntnBonjkL8q2EHCZM0iTYLs8MevHyxdJRQM3a20EfY1mnA3qIKJNUsHROv6wh\r\nZPznxzAosStB5kZ5MdEG+0RfOfsgbUBgjw8e8x8a7JdSgFl+ILXHR5LnJWXN\r\nq+JsWo0ICrJcOFIKGrS/D7n1g9rFFiRgpckFcbHgpSBX0gbABs0T5stKyncx\r\nGqsk8ou+4klWfaz0GcQthnXWITZOoB1ESI4TlZs3mDLnoF0OucREsl6cwCIZ\r\nfCIwV+sM7ymLEeGnOXQ1Q6ui7dMTLUxylq4KbuIwaVVG7ohR+UYTcyR4/X+M\r\n/nww6QH58H0xIWPTtQvQg57RTyE0VJikl+1UY4t7ZXBu1Tsl6tfV4RGCoYGK\r\nwA38mYQIh8UPVX13JobaOIda4gJ2jBtEr7M=\r\n=DmYl\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/embedly-card_1.2204211736.0_1650615932781_0.3927966102228331"},"_hasShrinkwrap":false},"1.2204221712.0":{"name":"@bentoproject/embedly-card","version":"1.2204221712.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2204221712.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-yljZ6UIslActD+KeSsKj2jnW0OXxhhMp4muoZYkrVN7XEA4YgHG0WY1L0W5ozOcB+CCrI/hlJBEMeQnxahXZQw==","shasum":"5718c0ee3678d304b55cd0cf7a255a403c5bbee8","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2204221712.0.tgz","fileCount":29,"unpackedSize":1191073,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAk7mMqVDnlGrXJ8gjmY9JVxpnnPjXEb8c0z3vNtvS+lAiA4kj7LxkSGgQuYBqF27i7tZTTmjD/Y6D2lbIDG0/nHkw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiY7flACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoAYRAAkJBGhML+IBqcpjYllU3qVpE0gh+ju+BYBA70gCcg2F9sLQMM\r\nZVxUEKYkxUvEa5eMTcZcHhZS0GTJSJvrH16Y1Pykx1AB6nlcXlSvvmiKP9G+\r\nm8IEsgPwcaf6Q8lxhyfz71dLj+1Dri9KfzNL2kgdPDKrSGYM8bW9F0rMchNa\r\nEA4psDogKKcLBIodaECTN65BrbEcHYd1QMObQx6uVtXbb1pVU0scYqQwxwR/\r\n69yi2YShvpwAeBW2tjw3fckBgUg1U/ML3vfsNhACTgWfrkJRS5tGREl5ePO+\r\nMjcRZmwVXuvrib73yAY57JGv7PDVzN7XKfvLjMf1VRdllUKbB8ahKTRuunBQ\r\nOjfM41ncQcwM4p0EwJrsHm9/q13T6B1/JVh0GWykTxbht69bFJoTUAIR2yM1\r\nM7Pi0w0Xv50eYKQy6uYaFZnLkRsqK1clNOuLpF10bB2vpdtZ0VN/obE08mSu\r\nbzi9w9ueuGKnYjNpasgeKFK+EfL3hkC0eNE0KqPhSJz7GeUN13yqtVSJGRSD\r\nLC9kslUqpPB+Sf3phddJP2F2rO/wZhVn4zJyekmW1efRDBXzZJihwwoo7SWO\r\nMe5SfrMkGLsAA2KhAW9I2OS3g/JigrgEpLjKqbcKrljSub0y3bYYRXzK43S7\r\neEpgm+qSyhxhsc80yZvUpJiCI0xWHBhKeXc=\r\n=tTDf\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/embedly-card_1.2204221712.0_1650702309489_0.43072447808735537"},"_hasShrinkwrap":false},"1.2204252045.0":{"name":"@bentoproject/embedly-card","version":"1.2204252045.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204252045.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"9dcb73514b52c635b732b72b56561ac680ea344e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2204252045.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-LSRuIcZElVd4JSD+2xmob+RVE73PY6UM/80j4ZVXTl3oLCwlFou3CkZQ7NwjLlHqK8IuU8eg79v2TjIL1QLATw==","shasum":"297c682fb92bcf13d5a58f68ec6aa3f06cd0a3c6","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2204252045.0.tgz","fileCount":29,"unpackedSize":1191073,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAVb1ql+85GOKPIiTqPIpE7Nm/hHifR/YhiYsiwmFBvaAiAP0VVShV1/WvfH5m9ELi7LHTgK3SV5kWLow+NDMo6N4A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZ63MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpcfw//VPhQL4672TBe2pk3gEBRg7n2mP6Sr5rn9NYSBDSnKulz3LZ0\r\nAUyDW2wTmJ+6PWNq/AnLL1cRS9pgfdjxBxwnLJ4i0az8fBn2iCVY8NO4Nbwt\r\nhoMSRMz3jY00bsqzgo2/PrK8gosQqZ5snG7Fd2hRszBR+KcbB9ZC4YrJrrRw\r\nkvtJ/NbmEeFt1X2qiKU9iSB1EMIFRDbHHJkGlMXCzm+/PmyVT9q1NUd5V/b2\r\nXP0n/xj9E1fUUCZW3k/SdpuIMFTXbkoLMLXsh+jxmtRYXqbHiZuFrrV/fcNu\r\nQp2G63nA4QjGilhfaFU7l0xF4rpHFmOcciatjrpK6YrL8PNzPLjAGWeYS3LC\r\n8rbAL+7KYUHrT6MWrX3ilwkkztyZh514Ab7RGb/DMRXQLZz1MUSAYQNKggRD\r\nIQjA7bb0iWT0HXrgntuAS1fUd3T+Bbcg7FzYvHJw8FhFtRlt+JxoHmBZTERy\r\n93emw4brbBo1rodXRGEHy+OmP6ZZqj/u0p+XV2awvQD5fNvIdgSohy5WDIP/\r\ndeJFAdTn9wqxeDPYkIxCiLKL0b0OlBYCzAkEHw4jkh00mlDU6WbNytOppXEv\r\nfu8n2RzueHqbk0M9FCSgfy9dOp4eM1iOnCsa8jTQjNwi/9ggGJr/uTpOfY+g\r\n2WEiSSvVq+dXriua9YhTxpJscKR1o6Ckiks=\r\n=wfqI\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/embedly-card_1.2204252045.0_1650961868429_0.2262519523438733"},"_hasShrinkwrap":false},"1.2204272205.0":{"name":"@bentoproject/embedly-card","version":"1.2204272205.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204272205.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"c2397d28837191a7d145806840ca6ca9a73823d4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2204272205.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-8faATY2sP47NydhlCO4rJvK1DOoWnkoygsP64WMitoptI4gDqecmqK9CN9140j2y8jiaxd6z1qIONQgC1XGCIw==","shasum":"229f04afba365a64dc36569185cc85d0d64bc2d4","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2204272205.0.tgz","fileCount":29,"unpackedSize":1191073,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFgwwsB73+NE8b80si61laBjrb4YQXr9ku10FMWLLwTxAiByczRa3BKOOeoq6AyVwLqWFMp+DyxPZPMUTZCN+BqViA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJialDIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLYA/+LvBFhtSijIhhYYoBfZv/vZlSbGA7IkUkhVXPJzdnCdrKB6Qg\r\n2ZNNkWNxpGy1qHdPGwu8qq8IBRjZh7YlQ+VGEpDrvsZmEI78rZyLEChSYKMT\r\ndBfq71UT6dWvasfOG32ahRuTi+ccxSkrvTPYb/99jAC/VgDfinHt/EZAx1v6\r\nhktv9YbmHyOOIpftGdOoNY0g8pKF21Y+3if8ZLFXGaRlc+tAYufQeVaTEzH9\r\nyKDinuMEgWVaxUSuQwn/tJIJlPHGMSfiINLcjPWL29bjHA9e7DQ5nJpz7CD4\r\n6cx8OpBWQwwoxVc02DyFRLHyfsvA4LxWMgKjv2zd1ByDB3MlsaQilQWA55CV\r\n6mbsz8zDmzsZGfnME7B/qAFjwCodevPhHEhszh4e+gEaBn/cuX4jISbep7x4\r\npcGg/N+4O/KHaxeju90+eJ+WJQUlwpIe9nWCONvKlZ+Sbm0b9JA0Acru5NuK\r\nyfkyTC+4F58X5PoIUjQ11gRjPU7pKL2mhniNEyoGnb5j+vJPq9xExkBHHIok\r\nZPFlVD57VkUxjUanTg003Z8NSuch1fo0K6nmvjymbml38w1PaqjmFRseEVQx\r\n9qYQe0tB8rhnIx5UiGjkCe3pc7a3+/2QkXZ10JO9OduN+LHnLysNoQu2Xe6E\r\nEKTUK10AC/fPZ2bX4wfh1ys+Lwmz+SxTSZg=\r\n=7cOq\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/embedly-card_1.2204272205.0_1651134663996_0.02833838850046666"},"_hasShrinkwrap":false},"1.2204281949.0":{"name":"@bentoproject/embedly-card","version":"1.2204281949.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2204281949.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"8bd4749759e81fea16cc216637d7a185eea3402e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2204281949.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-9j9FZ9DSdiip/p5bF2MIAAiJp6aYIQRFj/xEMdSm9w3P0EroHegcVvdV/Q3RKu/U3BsjFqEzXIWOqOLi7BJfJA==","shasum":"827e14d459cb27b112c929c0fd10a10dd76f0886","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2204281949.0.tgz","fileCount":29,"unpackedSize":1191073,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj5qe9meqT+DYJTdj4DEWY8Sl7nCEix6FWiAzJQFwhhAIgFPhQgDQg3wxy9875cDO9236qCV8PljyyrLEoW9tKjyQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJia6FXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLpA//WjhbtiM5h/q3La+SlKEBtWllKJJNwUJBrgI1Yefk8EhYJ9mu\r\n02u5fTu/I9ecra06VDWYczKPU9Q4gyFCS30t4cmpBz+cxmVDBGjXmSwCS2N6\r\nYtlYXdKbofft0do77JlQENaZj7g0LGQII9jb2Ww0nemt8rPrM3SXtdbNkVsD\r\ng3pGoAQ369FA8Ry2Jas4iEIOChwr1Fil/4MKsuink7ZCXpyHpD0Eg0Pq6+gb\r\nWfoWHcJvhkaFv/jDy6qEThzcJuVCNcD1n8zmrPqJR7g1tnto1nxfVXVjDoqP\r\ntWtPXOouHTeXbqRa6z6+rPhP1kl+cM9rcBcPLtZ/tdPqhyGbEHoAYJKOsau8\r\nESDHJ9JRtTeVFwCHvZtV+r66D3MC9MNV6n9Bzq82emxPJa47Irueeh5hrrRC\r\nOlt2wOkBbBeYNrgJwx411NRyMqofN0msLnc8D10CjcuvglJxm9gyC26yJIIF\r\nS/JAigRXEsvtDnpqSHy0MZ25M4G652aT+PMMR/xjNugq+jb7KXSmEI0oZ7T/\r\nh2rfe26SQSvR7RAEwJlecQ/X4D2XyexZAA5Ax2PJG94z9WoGOZFB+GyBYyA4\r\ngOoyKHykiwQ3ZBmHastIGFYsXlR+3ua3UOU0SgTvwospZw7Mh5zyvyzzZ7uc\r\nZgpyFfS3Zqvca5LfE1YVIacBx1iNAFomnxs=\r\n=Rn9O\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/embedly-card_1.2204281949.0_1651220823009_0.44888692007221365"},"_hasShrinkwrap":false},"1.2204292129.0":{"name":"@bentoproject/embedly-card","version":"1.2204292129.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2204292129.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-zyMF6U2i0HmGB5VW9M68jRWsFmoxD9qjroPBMsGqj4rpLCggGxcxYWT85yhkE3nPYT5gUF0iagnozZAnBTsCMQ==","shasum":"f1ba1797ea9976a9ffc3a8582331584917c0ecd8","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2204292129.0.tgz","fileCount":29,"unpackedSize":1191073,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHj4pROyRmkK/6vrWDxEXKl/n0sh9++g5YYiads7B9jSAiEAp7Lhr9lLInw88wxanonIZQMUAONMmUZycZ8v9On0Mhg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJibPI+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUwg/+I2UyadA8UWeui3upIJW0HfqhWWM/Uh1RQ3pA+a4r0lVZaCKL\r\nhUPrFMCDI9VHPSA1jGzIIyuzYHAutBXI+zFgLYFP7PvabY7iFm7KmyIqOG+R\r\nvIqad1p+nw0R4X3pjMGFteGGTUdVKW795N8NXK8ftY+Hc72WCml8ndwPW7QS\r\nNM3q2qmjogbQeSSlsY8r00EkMJVPeS4TRDXwQcQoQAnDfIU/aWGCHwb9jcVu\r\neTLoL6fbUxR31SMMGTY69ZeeS6HH3E0kFb+LkGnPOf507u6LXURNBDjf/gjr\r\nPDAM3QXRnbIko03aVsWJ3RTElaoHMHWmddn3ErnSRFmsDpZF0k/Ls9vkH8fB\r\noh5lwVCNFzszrTadroaunhGiipemzHGU+auICAVPS1eSXMy4GR2ygFUPM8Qq\r\n4fhHQayjG8av5CcnGOxSYdAadf6YtcT9JV0RK4j8/zGYHiLKsM1JVXv05jEQ\r\nSvi+hQfFRRBtYdAnfSL2i7Nmzn2j2WdOTdrok70AJyPAD+rIV1a7C+P4My2b\r\nBWq710ir0D+LyUw2wFMwtgUCKWlBjyVrqutUw8OfDlgoSU1hhc76+17/dld1\r\nR0r8xFrghs+PrXsA2ewgK7s4mOPAqU2hdM7P2/ekaIW9tFer7QGLSQPv2NCs\r\ni4uSNCiEUwy+8nwz/6BYyBZxKPY2ra4aiQY=\r\n=/Ojk\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/embedly-card_1.2204292129.0_1651307070580_0.12268386132737108"},"_hasShrinkwrap":false},"1.2205031420.0":{"name":"@bentoproject/embedly-card","version":"1.2205031420.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205031420.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"d3652194dae7f17865db127c7135ec194907b7fb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2205031420.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-qZCwoX9/ZlWAMERqQ4JW0KtSg4FlldK+zMGScEp8Wlk83Mvk4FtMZoGpxlIjwYbmLTCsXQKj87NQEe0eSqXf2g==","shasum":"832726718af1bc8a963255d672aee40fc104ee04","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2205031420.0.tgz","fileCount":29,"unpackedSize":1191073,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJjzw+s1pWS2IAEKjSzlcoBbqAIN18QrxeH51+ULzAywIhAMiVL012QUjvu1/L8lqeuLby96sgo59zTGobdFkrE3xl"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicjiEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmra4Q//XhLX8EG9SQt2ucpP7UwENmyeWuBioYiTLUmDw5eTdah3P0mN\r\nX+nTsec2YOF3TvkbRv2NdWij7fM3EAJwvB4ghunriZYMtnZkh/hXlVWJ1AlJ\r\nUxVVHEnRLeZs5rAZZHosVna8MUWyxRm6Vne/kf6a10ny11JvScatW2S1dxxy\r\n3x4sXsauIZL/eEJTIfqQa4o5Mb7B01YlbH8RQvOtbC/aYCbwph5AjwX541be\r\nX6gZL76Imd7hiRuwc4S55BxyVEYlYrcobB3tQY5WgpE0oh1rdEL/cQnsSivM\r\ndWk8e+xEyl82Kf+gf0vnfdpdGPAAuEdI8bOWMWc+UHoVNwt2BxtmxPN8NXt/\r\nRCFk7pApqJlsexzQZdNHErwvN9XrtIqvmqGRt9vyNbp3I0Qr1pJ2if8Z5U1k\r\nBmFAyMExUpvGDyZXlXq64w8Y6BNRoFe2njsnek/LdBdEt4A6CT1ndMgf/FOm\r\nyq1nG3BePF5cOkE2OWSsYy1ToQYd5ryONgDHwG9dawBwJrr5gntQLR+WL3TM\r\nR8f+D3o+Eic2EnFS48/lllOT0OskizXXRrL+VmBH8bMsnKEsMBfgguZ8LvF9\r\nInkfcuTX/FS+L5H+Fw0NA5vwzG5SEgFfbwI1WSz6vPKKJVkYXTw1+lCDBZto\r\nME4E7qlghq9yWAg31GfjTDttbTPgSJkMwdw=\r\n=8EYx\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/embedly-card_1.2205031420.0_1651652740632_0.12156906877142326"},"_hasShrinkwrap":false},"1.2205041533.0":{"name":"@bentoproject/embedly-card","version":"1.2205041533.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205041533.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"8c9c66c7b1ace99b28d77b82807f84e9e8cb305b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2205041533.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-kttATkrJsPnENX1ToVRxMr0MA1V+yMhhXIv2mcwQ+aP6od/n4lKNPA6oLO6dGgxQXujev/xIUvg/C82E85535Q==","shasum":"df5fdb32421386564cade9c6b95e6b69c8e8137c","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2205041533.0.tgz","fileCount":29,"unpackedSize":1191073,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMKwK8VJWJvBeMi4SWW/2FUoIG7vepJZcGOizmLJR5CgIgECqN9gqIAJMhbp0mMMTQ3StFeH7oE+wkCkbNhp7uumY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJic4oHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrRBAAnUwxjo2zMAczWWLLhsQjTMOEmOkM7b1rGo5zLJRfJm1kuq6H\r\ni/EjGFw0RBBJ15n1KA8FcBFTqyCS70mVVb7kan1Ecgz83rBvrBaKsNq8+CWT\r\nuYnAyt5NyRYueUeT9VFgKOG8LH7f3ZoeHH+1didO7cNrgFbNJQOWVx7daTFW\r\nbgFIBdkFIAUTZ3tVHQxwFxXfhyoRVteiZTCUQH3tnQjxk8HtaxZZiENtURxw\r\nVnGFdh35pH709YVMp/oN1D/srBsUcgDuUVYk3q9/BOhUWf4/5O158KD4bnbJ\r\n4oL+eKLMZ9JMu+TA0LJRQrGB54Z1DdSiabBT+WEfbNLxH6T9Bh9I8WWF6Vqh\r\no2iN6/Zgl1idnYSmiKz+8JBx/NFdF3ft6VZmgkz4FEcLHu2zEFXWhxOLocV5\r\n9UQR7y/TDVTcLz/fUS4ylU+qiCaFe7yz1D2A/jf2BkofdTy8ZUtwQxFYB7Xa\r\n2IXQhQT1j4JQIaGbp+2R6XQj5RTa/DKS4JlaF/GjKf5JfGT1H8v8npBGgbof\r\nfpLwAqeFoldwRK6WnhCFJWiKBEMMIvsGfOdqkcC/X6xIdy2gOCuJ8Fr/xG0S\r\newQRGcUGsNXtD94VPMlBxSA59XAsNrkaTSg08RKP4ukbbiU4iFnVSLs4TU5j\r\nejJnczhDmJFbEADZhQb639mG705gbVYZ/V8=\r\n=Cz1D\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/embedly-card_1.2205041533.0_1651739143389_0.8344802857355926"},"_hasShrinkwrap":false},"1.2205051832.0":{"name":"@bentoproject/embedly-card","version":"1.2205051832.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2205051832.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-fNYTaLESIQlivVdT1vfcJ2imLZaNomf0K7UC9oMGU4vpusAtMFB8wYv56HL6ZNBbaRYI4vLM3cPA4fYEhZjP1A==","shasum":"a52a33963b7b41bfcbefb8c02a9e16e8af1838dd","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2205051832.0.tgz","fileCount":29,"unpackedSize":1191073,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCC0EmUg/EltZd6nO2XZxsUvGHODdGvzYT8ZzHVGkfjIwIhALa2jKtLewspO9qdnyVz44soeTARU4n/vwDve3n6K6eq"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidNt2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKNA//QNi/2Cn3ZbPbwMa6lldF7ee0D1Ii42h798cc8RH63Kvjpxsq\r\nNvQrDJo7L5Z1yTcYIHpjlzbAfF2kfTKntYdL3NvQhBEBQ/47uZB3cYBHqDnL\r\nB8fzZPBTGhur1Ivc9iEoCWFEiJ81FhtxIbY7EHBudDj15Y1ASq3R/o87k4+u\r\n/V6+XHVqOo4NzEKIwdGkXqgk4/XUiv/19auYIPS7Y77lykb9XQ6QLuWb7lQe\r\nsUVHsl9LEdA4Sy0zCSZ63xZUchjqf9Q7nJbbgi44+LK5EdYKhJ4K9KSozyQd\r\nptgGqgxrhF7FUQBBQKtTvQ24zR+p916yit6Aif7A1EaPfOXSKJqM7lX+NWEC\r\nwXK6ZhqNml/JgZDV4t/Ekl+T0fBYYMy3SAj1cXEuqoQOVOytJpYeRiZPFgnb\r\ncNtp6WJJX25T99rzE4GTr2g4LIqhNqfDkEeCrfV3G6BYPzZau1GEaZO4lc+/\r\nqM5BJ5/D2c5qUXNbvXkamGllrpo2b4eG7nfZ3stBUhvoC+23txoMDjB8PbTm\r\nawHBg8iX4tWZLkGmLLXPwj3kqZvibP1gOBNNn4Mj1gDZP287qQTwku/MHiiA\r\n9huIAHA/GD+jitvKrmrGFpnq4sotxnRYDOfnQ4hpMwG0ymrwDgMDNSO/9Nnw\r\nOGpj/uiLXxGRRPIo/686Y5DYWxA8vH8xwKw=\r\n=3RIB\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/embedly-card_1.2205051832.0_1651825526708_0.7952439218067682"},"_hasShrinkwrap":false},"1.2205090810.0":{"name":"@bentoproject/embedly-card","version":"1.2205090810.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205090810.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"3fe2ae4108e8ce4355c90640458d13cf81af160c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2205090810.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-0kEBG53QgNj52vyXRiPJYF1CBLV+ShOHuU+8nN8ACvgflmDUiyCLL+Y976SUq7aRCvzlGgTtnvRiGRRTl15iEg==","shasum":"654f4afacb80a5626ec3697085600be507f4dc6e","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2205090810.0.tgz","fileCount":29,"unpackedSize":1191073,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTK8tjIbKj3T9NRzyvLdDTOb1f2JR1Qq0U6QoEH2w+4AIhAOuYTarH5B/0eUK67QgbP1SZrWcD68a9FuDB+6AbpnTY"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieiL6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7rQ/8DNQOn2lAkJntnIToL57w6Zk53Bzy2ZS5hlFaRlykkeZ3IXou\r\n8VO/pv5imDK+Ninnz/ZljUHpu3N5DkyIX/jygqTsW2mvgXe4TzOn4xY+Rsy9\r\ncVCvYMdrzKKQ9G8VjfMEdazpi3KmhiOnbEWxC9AHRYNzIAh/q3AnVHeuxoJ9\r\njgpKcfoTUwaphyIwiWIosDf90iR1/rDAKosJiLePDzLOVFd0YZlpVGtO/aKs\r\no4TtlbPkd+9mJEeBqPpv6r9Ha46yK4crtVtT2NGEIW73lrhZOQSVSGtMViWD\r\n+9AhN/d2X3xMOHD51QZZLqeuoh/dmwL7aFFrFP7LUxwoJuXaCTTKFa51nhDD\r\nkviEjIYiHRzu65uKQFSzGAyiUYYGViCOsjO+FHvc3py1Lezar96dgTWnaCEb\r\nv1/H843D9PFjVFRr8DSrkkGHjZDlcYZcOZdJS8Cj5DydVdU+lQpJWNgJF5yn\r\nqAykunaWy679unxfmdohEWRIt7+3qVyX+dOKLwxMQyRhkl1Pdfl3Xl2VzgnY\r\nd3mGKLphFdHwNaN1wOhFmVGIzEkYBrX3be9VMQqpTjz3JYLIr9q7UKz9exc4\r\n83eFQwnA5K/JZBZKw3nFKQpyGbgq3mxYxl5/8e8pi7Nrau5UMrizuCDp2+Pq\r\nQtjZ5jylDLil4i0AlxY8sjlzdVm18BMj3FM=\r\n=1tA2\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/embedly-card_1.2205090810.0_1652171514214_0.9866666814544947"},"_hasShrinkwrap":false},"1.2205101904.0":{"name":"@bentoproject/embedly-card","version":"1.2205101904.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205101904.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"43d879755f765aee2d0eab657533b493a025713f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2205101904.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-2hP5QE3UB7VfyDchLnFeiudXDpZAi4jw5m+sVZGrkUOuxByhnt2exTCsG39XUV+52d0IuEKUG0Zfor+dNR+CaQ==","shasum":"0e7b726c169ddb733f2ef4c8a50e75da049d9ed8","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2205101904.0.tgz","fileCount":29,"unpackedSize":1191079,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnWRa6tRbRxdSlu/coqEEOw9CVLx2I+oUJDBWkU9fwRQIhAP4sLLKHOSLoB+1P5qhsDLwAU2prMMSq+78uMvpvrce8"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJie3RmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjoxAAivkU9Hfe0y7kk0k/KuKLqPYDLBJAhB3s3wPoCGOscoAnJ9rk\r\ntEVVRCVsAVGO4yb9TdqFhaTqUQsOqJKx40xNyOerUkRBoBd8gtbjOUpNBREe\r\n9UIgAo/G0Gei88gqA68l/+jFR6WQNz9JNVcWXf6+0mMSNj8tVIxRb+6lTkCn\r\nKo3eCLL+qji/BY8DADvpUBFJXBlyVMtVwCDbSPfesNUJmqW1Y8DY8hGAE+AM\r\nzn3Gy9klcYWgCnqP7eaAD1UyQ02T9qD6GPzcP6jP60QHra3FjD5lV48ciffq\r\nH7WsEGBcY5NSb+CU4vpyTJGG5avh+w8BZftI2Ea6l7OH7xgX2oMJtsPCVIXq\r\nVAmo1CW9fNC/QDayduG1EV8j+Vl6fXMfkzU/jolSa7jkJi1HwPtreywGOWWb\r\nKEQONDnhorzmuPpDHtbn9LvLnluu0qOpNHIQnpx8Jl8UACRgx6m4MKql+ccG\r\nyKqoqVCVYcmAMrEuVShZPPuLlsmbKR8fq9yVrKwBmUeZXN88WZcBNwRS65+e\r\nox8XxgmYDOMiTJmsU6wmJ4bqnqOUyzq+XtZOu6q7cYC/Z8lkqIYSnMNT4YBz\r\nIpfhXXXrZR9X3sON/+DDqA+7D1lZ6XMr+2OI1zkjMKxz90sUNRvBWdGThwV3\r\n4S+QvKIA086yBKdWr32QQ79yF4rsjZrVRgs=\r\n=fRa1\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/embedly-card_1.2205101904.0_1652257894523_0.23518420490861058"},"_hasShrinkwrap":false},"1.2205120110.0":{"name":"@bentoproject/embedly-card","version":"1.2205120110.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205120110.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"46f34860b9f501caf0eda81977d1ae3aef4a947c","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2205120110.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-VHtQ0YPx8c+sbdOWvVvTRebjp6d0DjUbh7VztQI+bE5QQu7rup0xn6R/CoZQCrxFSg3WuPGsTCatVfiU+OLXDg==","shasum":"cafb7684b526c05aa9d7e5f31f3852fb7b629947","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2205120110.0.tgz","fileCount":29,"unpackedSize":1191079,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFosSTSdXfqWfEvYljvovJ2kVh/0g0fJ0bSgYRsJ3t6JAiBjC5iiFr31hHJ4Ed7mjG5kdoO/gl28k+0n5jNCO0BOrA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifMW5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/KRAAjFg6x+8Ohdq4WxcT8b49ciD7FRgqvcJN3BG6Ab0TCQTeHh8g\r\n3LZWLWUerDGqtdKUfmGpcaBXSd2zAzwPZ6PHkw+e1fyawx8PUAFbapJf5MwJ\r\nU2CN+RRPZsTc02GWWNase2XPwQZaRvqgNh1w23813zhXQBmKcW/dYqvkHcfP\r\nXY+DA6JwfsxlLuW/ysxd4c59TRZN2ki1V/LHa6u2e6G1oo7Iy5rHjxuz8KIX\r\n9DrRA758rw+qEDLfe6ituSQrdU6ZFJ8Ya9V2iM4OExDdvrlilcPaWf1Rb1AR\r\nQ3rEDtN7A7g2viVfxqrmW/hqubAqMqGXyZSGtKr/0GBbqR/CuUoeCOtBdycD\r\n8Gr1FB1Cmv4Wz9DdvOijEDP621+9EjrALdoonVS0ekWHUl0r30j83eD8kG8j\r\nO+X4TlSxTC6XDj9tN0Y3qiTobaeJLZSYnArzqhvy8L8t972YJBJHmT2OGFFE\r\n13Ba0eQ8ldDjQXHdah9aqHO6BYLrwSaZ8F5oqsx6YHszdR9mSf5nEcE22MjK\r\nBLucrL1LehMPr4LCwwrTDjF1zdpa1BLcnCRDyB0uN72e1RimOwcXoHMQB3BM\r\n1q3DijrK2UvB/MPk7Le/UDplB4v4kDp3XjojsVK6eLFOV2H2PrJA8/o0Nflq\r\n5kNcMb5RQ4GyQfLWmBwx8/ciTBCuhTPdXuc=\r\n=Kqfx\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/embedly-card_1.2205120110.0_1652344249205_0.041992103619584054"},"_hasShrinkwrap":false},"1.2205161914.0":{"name":"@bentoproject/embedly-card","version":"1.2205161914.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205161914.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"2fb4e151488ba4d856b33f836151d66b45ca457e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2205161914.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-GjzFpgmw3ipqvS4a6qB8nGdnN+UT8w42/8D9DlffOkFHDp0q1gcld0PCwz1iwS1SDg1PI5QPLKBK6c/BnznM8Q==","shasum":"d9b9bb4fa8e44c5ffa369f1f15761b86bdf2e69d","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2205161914.0.tgz","fileCount":29,"unpackedSize":1191079,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzfghp4P1mAM9RqE2+1yaS/ueUa37S3d7cdb4BKW4WhwIhAM6oKRuBA9MDmuYqF3cS6/uYanCslvBDMPkumLM3cKmZ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJig1wHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMjA//ZPZQcnaknJjTYFaTw8xWqLXPA3Aksht2GJ3MNjMdxZk1xc5R\r\nV8ygSH21kD7WKxTTdO9I8CvTneVOaF8CVsSUpc6oQiZH/MnXQP/vXnrjO16T\r\nNXWDTx6DKBYdOERjlMXEWJY+dweVQZdoGydzcNMZlfzDGmk4m4PuytNwuA9F\r\n1JL6/oYu2vYxGwffksNc7lw3MwLXZMwcX5k/Us9DT3aNG7s2ytXro/rIrRSD\r\nfJ+zRygeb7NL6KLzB1RpnTXhCK17PCpF3bkHVMSpkvTyMwWMZ6bnP2ratDEP\r\nhl6Ugcr4nf9xh75Hy181YUL9wgBxT527d9pWIUTXa3FssZtTtNBqVNV+GgOx\r\nBAeSxQCehjwsQmr3c+AD7k0Ag9S53tGveXNYsGUpd5Nxj+YP2YV0EBiuhbCJ\r\nE+QoRgq3w0TkTuO01yVjd4Nk9BmzaK8f9qMGwmMdGa+Cra+DXZPMnp6moHCX\r\nR81Z4PthjNIleLyzkE2IVxitJ3qq2h3E/FCr007sdHW5EN8j8u8WkaA/eM2H\r\nKITqzkuzs6Wq39NxmmUijxwLK7lnk0SDusfkWZYgwh9lfOKG5GEEtzHTVsvS\r\n5lOvKC/47kO8MW8EUWgWwBRcKCJCjGGMUpoj6drbHvre8I2wmZJSQ47DQXDy\r\nOwOgMvY1eQSEdxPfKfxOvQKS+HiPAk4T/lA=\r\n=C3kF\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/embedly-card_1.2205161914.0_1652775943119_0.5859474870220207"},"_hasShrinkwrap":false},"1.2205181800.0":{"name":"@bentoproject/embedly-card","version":"1.2205181800.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205181800.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"fb3f61c46e2221f0f2e1dd836127cce386c7bbda","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2205181800.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Qe4sv9cLJhi9dKw1/NEZSlQNotZoGuPleyo9HFdaX+zeOpjG23NrWsZV0RvlB5tI3/30fu0qSSvbSw8tC+x70g==","shasum":"7037c17e35024722f2766ecafa49e8ebf5cb2f8d","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2205181800.0.tgz","fileCount":29,"unpackedSize":1191079,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDR4b90SqTv3TfpFVfeLqdsu+j5c/XkwzHWPCz4TfEJvAiEAsKWk9fLM9AjK3bRFjUTShm53W7B9dmQ0rEtQgwfWRoA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihf8dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSFRAAn86PN8ScwHTMvH+6KHQ7ntBEjaE+iUfhbNpUpSEGrWe9BE+5\r\n+oLlTTHnFSSfgmKqdKUnu6KrtrnPUmMQfzkK4MDPe8mFquV6pqOVo8Cp9TQk\r\ne90ceWoVTflDeLLKARDBzAEqRfLjyKsvQCGt1DkF/8OMZvsemSn8RuaVJoQN\r\nVkvQheVmkAldFS0hl4xaWFirOC3dtJzlEFkiTjnNJTir107wqSbSj8K1rzal\r\n6/zlGbqsEUvwZleZv1Re5Ag3/9l7y7oIQd5+wR2Rezp6j4q9GBdt5BFJCPq8\r\n4YrgCd3fD9WdRoPEI/jj4TlRZurtTq+h6EM4VIY5zUL24nf6XjOXX90hTJIM\r\nT+QuTs0rWo3KRtTGEXvnJ51WKQOHZiGSceILKDFM3h749DARC5ov3/4Guf7w\r\nw0koDD9IGAtSTG+jmGwe8LpXQr8abhiqxwk+uOIcS0pf7S/PEAWBZbTFH4zy\r\n8LgcKmW6Bf0x7L788dIHvVVTqb2A+KXEg2/PK8in7DOtPjcJzqEXEyz7VnYh\r\niJL3Ug3LX1PoAWXQ03NaT7INiNUpEzSE8zO+znCSXxNriSGx5q3E/oW2heT/\r\nyhAc+/q4BdHJwWCHpfbeukEauT9gGNRYC+eWegZbaYAUMcPDZMBGgwCwUNs2\r\n7TY6GCud8WFk4X5XNUlJGDs4+yX11VsSWAA=\r\n=U5sb\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/embedly-card_1.2205181800.0_1652948765011_0.30459828258308486"},"_hasShrinkwrap":false},"1.2205191749.0":{"name":"@bentoproject/embedly-card","version":"1.2205191749.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205191749.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"83c369066eb9c7dfccb12aea936f29a84bad30fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2205191749.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-qzqEts+lRzqrjzFAR3zXPYC/otdBW+sXWBu0Ps40jSoIeHhDe5+wGNAZsh1Xfs4PUhZvotgpTkww96Efn8BxGQ==","shasum":"4949b9f92b64ad302244d42ba4b316763524f2a3","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2205191749.0.tgz","fileCount":29,"unpackedSize":1191079,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAkfs98+kUAL/QzcueuBtF6lo4ZTGQH3/fT5F4k+zZWQAiAXX6DKc/5KtAe3QtpZo/E2ZrjHOyFwxD20kLsu3EsOUQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih1CwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4jA/9Eu04TiTkhcaBuKV3VD1Wj8mkgc8sjQ+xjkzyh+OGvWfNJn0L\r\naSxtvT6CFQBibICyCsi6po95FuexzpsJ3PAEMVmo/KDjbWnKmSVNLDG862Y6\r\nBHob4jt0+e2AB+qGxn2SnPBw3pJaWE7ANJ/jwr6YKVUraEhEYkrgzmsE1s9W\r\nPN4HckGwXYzlTCdqeOuELX8hJvGOqHIWlUMJQG3pv+Md/cW7ZiB52WS5+HDC\r\nZxerBaLWl8BQGadVq9WywDCmcyaP5tvv8V73BEWeAIxLHYmmXdvnTsQ6KZCd\r\niMU53JfEukkBaOIv1CM4MPiTUDAR7rWifaxb9qXSt98iNbeqf10MX/ARyFpm\r\nFPo1I4D6F47+1IXfdEd7pT8qL8jfxvLUUw+N4dEkNazmJnbo+EZ0gT/2p4gx\r\nOGSnYqqBPcwPmfPPBjjb7XZApsnLDiB7PsWRn3XGCvZ/yj2JNjbB0t/L663V\r\nRJLIwNrZIyL9nXEAT8v4QpVw8r0liV1oMNgy5Viv35RfIOgvBY/fF4CM1rrj\r\nBtILEV3G7k5uaog6uMhhCiTPKOwm+3EkDhbdViM6Qt9tsiRPiKuTtwX4xVRt\r\nwZe7DzxMcXYmJNZBIkosxaoQgxM0ZK1I9G4JTh2Jibi28ZSAwXIMbnZHcjYl\r\n9qkupxz17HMfo6+/Pl/oObatt32BN5dqKxQ=\r\n=WUrg\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/embedly-card_1.2205191749.0_1653035184577_0.1304393487968838"},"_hasShrinkwrap":false},"1.2205232225.0":{"name":"@bentoproject/embedly-card","version":"1.2205232225.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205232225.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"ed0c674bfc87fac47bc1360a13f5d69611a1228f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2205232225.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-512cJ89l+xh66J8lexaXFBq1HWAyfYP8GwNuZqYCQEd5o/qX5Xth7fLnvv6XGCd681tm6YveczeoEGTNGsyj9A==","shasum":"f4fc5490d20d1ba4aace1daee13497d0850cec96","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2205232225.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGjbt//aZuyic6l5HnAW5s3pjQU3hznHzR3wLem/BL7yAiBMJa3PgCl2vN7cCGKaTcMbZ5FeAVxBx2EAkaHtpbQmHw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijJZpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFoA//ddlBBuVqBTn76lPtXBpUT73bS7T+iJBexOu2k712LnaNIaKB\r\nXJH/7+Lx+J0S/7HajuB8Sx1hIYjuwmRRezt9gG0PfZShPOkMErAIAaNgSJy4\r\nnRUKBwq8IOiNtOeU1mDc10baPk+O2/QLxtv0Rpsa2Mmfm64DYut3On16t8Ju\r\nvr30Hfm0QMWXq+C/imznzkHaLmzl5Q0A65N4PKB6p2K/fSPzGoZg3yE61vdD\r\n0zt0Jb0PSxKU49YKLrFOw5t3UWvRRvLwdB6umWd7GbZzjWv1M7Ji/ZGvMBow\r\n0KZYZ5+JWo1NB17cfvMDjo1V5B3B1foJ3YcC49QBsPFcP0WNvkILn42PhbOm\r\nf/oWBSSFbHpySt4NlwMp8WpRBu6b7ohOD0TET7bjDrU0cusNxSE8OegKotyE\r\n0t4uWQOVAX1dxNnPK1fJl9WnaqkgTIcsW0rtuUI9j98w2+SXtZP/OizpRhx9\r\n/8ySbu0mMOOfMquHMnPE3U8YKqn1mOt7G+9XJIYSEVSbLhlIFb6MUdAbmbb0\r\ncoX1Mf3O42VGuxXCtdLt8rk2mDYwZCXL+mImJ04732zcD3pi/iN44HPxbcZC\r\nMgSeeIjGoiB0HR4oBHU43Wk0BU2ZZGeGOWtnEiA2wVFKI1KEeSRa2pi0vRkS\r\nV83ZKE8h6B3EU0xK9hWK1GAcGr8yLStbVkg=\r\n=VNMV\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/embedly-card_1.2205232225.0_1653380713173_0.01141538924179697"},"_hasShrinkwrap":false},"1.2205120110.1":{"name":"@bentoproject/embedly-card","version":"1.2205120110.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2205120110.1","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-RjVdZQUk/qB/XjALReZY6oI9gztGoC4j6xklMvnZ7EtRMARBffumcIcN/PnkFEADHnyz7T8tgid8NNbRTpiZ/w==","shasum":"130de1b5ea0f0073832b53c3e6e9a042031bd57a","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2205120110.1.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyHQle8tcpzOEn7LXuVI2HJtn41d3EC+4BpkI0BiAufgIgZGj7BT1kGyMtHV22K4IvrsKaQELHX0zFj4nHe3231z4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijS4OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmooog/+JjIic9cv+1kYCd4AE7ZNMzLUUfluF8hoZ9KOp5dvP14ueHvi\r\n6IK7fUQ44ss+bWQarZY7uESD3sXHjUsoDeoNmYjlitZ8KWD1mvKbrftIi/oi\r\nqh62yriV+tFi32O7s8S9teFlqbacpRuWAIuXjMLaTy1jww+57MKOGXNs17N/\r\nBFOYJ1YdVLJr9lQ/ZZPzkNF+Dn9pIuMX3pYG/mx5C7m02q5gUO2RUWiZDTEN\r\nw9qlquvTzIJ7adTcmJ1lrBY/8FLgdz8dhvkPdqK9UWgLCWe67JaGblZojWKt\r\nBR94a1hwJTPvj/eNw+LdcfO/7NSowxPvBLZbGn63cHlLtJT+C+fFnIv6Dl7y\r\nRf5e77fYJ30aTn9MLY62xQvpUao2dg2xYJ/8rMYWcwyuCGnoKCbXJNTIpara\r\ntbvTZvR/FJ8w7cNgDtaRZmmpJwLvtU0a/qAXhb5wWLwCIrCdKL/2dAOoXyVE\r\nvx6VPEUnbtxdUlqPlp22HIAmoHgUr+gcJZJrB0Wy6Ju8KPH3GVd80ycgsIs4\r\n3Zgc9NbHs7GNctaUHIQzqbEcDmCEDcTfUjpTKe3+IOFLUUzF1GDzkG/9+3br\r\n9PeKFn7oD1ROlE6RXYlrAcFdGtGxf2I0qvHIq7wdJQB9fFX9Sjme4Fcerdud\r\nqh2Cn/hEM/P11OidoPNjr6hIG5STDiQa+8c=\r\n=Pi13\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/embedly-card_1.2205120110.1_1653419534184_0.7464568380239933"},"_hasShrinkwrap":false},"1.2205251942.0":{"name":"@bentoproject/embedly-card","version":"1.2205251942.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2205251942.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"e2f9546e2689785f0d9b4ba72e61759323c45bef","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2205251942.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-5Ytwok4flopobitzTSq5pqMxrIEoXS21tqN1GObLMa2r0TCdPc3STIRPJqAEOOJZRRGD1t0Enr3+0KssTVI0Jg==","shasum":"e04ec4477233c9b0442fa9565654718872f107d8","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2205251942.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDg6R/SzDx37oz72iOyS82Xn0j9aRdetlmA0IU/QgaZjQIgTdCfLwugil6e+Uk3TfLqBdeK2ZujjGDSEWnUoIfUM/8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijzm7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSOhAAlxGWi+juszsNdopvdy02RGHOL7Bsyq4LfXn811ltO1IK0o96\r\nrnzfw8Bu6zk/wrccOOFu2qXyRBkgogs10qta4+kWJrIV/dQm2y2icSIg5MMM\r\nuwFLHuFCRzkmU8qqDPirHrZrZYFQoKUtN0MC0oljCpT33a99l21GSQDhHT57\r\nHc+/kqmywXCvNyJypoKrO7QBBio11EOXKArgANsA73SwMXcjGWyA+ygQ4m32\r\nP2bUggjFgO1pUhPkSh6TuGc0lQnuwmIwT81ySo5yCoORSUstlCGQh4qwzE7c\r\n4PqiKr5GtAtNkAJGAQO6BYbdARLmIoD1iqksj+rFKi3JMvmVsNRL3utK0n1C\r\nx7In8YBR418CjV5pnXyaPQYrn4y25uagkiqS1I/cx/bgkAqiG76qzRSJIHFq\r\nDFDSUH/OR/U4KyQXQEG4IvPOUWhilLYanYJPwX5jqZdt0PhdzGNVasHS8VU2\r\nPW0BvszDpQRRCYAYGrm1tCR+oM+mUMVFQsoXPyXjOSHeWMVKuiETfSjiYupQ\r\nEtDMXpPRCJx6sKQf7/GWWTEqQ5xxGTumBUZAj6AvB2409f6zjLsBXmKfJLHD\r\nN0kaP7M2vA6gh3PLrzKZCBDSojBprUj5MSOqf3zXCw2qVLx9tLaLjhGYHcGL\r\nRwVpL2Fb38rfJg8oCC9AzRyqyjjE3lLgLA4=\r\n=h4qO\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/embedly-card_1.2205251942.0_1653553595634_0.06294860114752376"},"_hasShrinkwrap":false},"1.2205270638.0":{"name":"@bentoproject/embedly-card","version":"1.2205270638.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2205270638.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Kridt7eulgwdic+pUnLLMuIEN+rH8NhVVmbCBPU22cHnQnfoW76461m+gvHDWxU1k6XwYIKciQ9+HlsfcPi6Ew==","shasum":"125a7bf8b884ec901e0e642490cd1f598e357bdd","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2205270638.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLTe6SbAHJghOZbyJMq9rsGEVasPn0rxW851ZqN2Hu6AiAsin2Mp8nClxMnHK2Dat7MA0qUcFutQFsdYkvl9F824w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJikIr4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwoxAAkSBhDb6X3izfD5PwOfGXa5dWMvs8pJSCDvUDpPz+fAzVwDhr\r\nY7oQ84Q5RhuxC/mxt4O+GU5w/Jykn3Gq4dzAD/m/FuAMX8i/AGkz0e4x67Th\r\nZuga/kt+GztuvbGJ4K+dO9FmJ+7ETfnS2gelxN9rV/kf2VP42rYiuIq+Kwgb\r\nCiCXH7tzkh4D6t4dV/dqz6OV0dYMQqRK23qzJ7XxMQi13sHtoR6MU2JEgSm5\r\n6wlvZ5hnSlZd4QyYYEjVZel7lHMXVId2jS2jd9eSQqcVnVwMZY6RmD2Asofl\r\nKeo65gDSN5jeikKRJzlmKDGHJaa5WxIjBYghwMTEzWxRyqT9H5foKL6YtFGO\r\nvKQrriZL1XuQJh5y0OWHETH8x1VPxP3SeZbOS8IdO9JDonV9t64IPL2c3AAE\r\nXdF626r874hkogfDfknc4a6ckN55baA4O2VgGliiKqF0oKYbHYMh5MaBDopn\r\nQugrMCJhorW3Ftune4EfxEo+7wA4fsBwh8nKc9aTjS5emjMToa9VZuJP0U4Y\r\n2KTi1HAxmlKLQ3lM/fGe4deHy4qUqwqMJv56wY7XbTw9hEPZH0rz6lRrtbq+\r\nhAXcavk6oxFb7yNMB+8FwOYFA8LNm3Jyo4OxCRrBdj6kVUm1KQUFGJeR6tpU\r\nxZtZ95uc5xa6W7G0z1p5v7DDeJmLu6akfa8=\r\n=qvol\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/embedly-card_1.2205270638.0_1653639928234_0.5561420419584553"},"_hasShrinkwrap":false},"1.2206071918.0":{"name":"@bentoproject/embedly-card","version":"1.2206071918.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206071918.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"f200c815cb7bd0e1495bd9c338425aed1887a459","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2206071918.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-Hl7AwiUf2AM0ag0PrQT5lLDrFTE/G4C6DAVotVf1BHmX8X98RP30KAt2DXzN6TeT+A7wpuh/A7eJgU+jN2GIlQ==","shasum":"79089c034d86d1fd113c7fda78edbb7a4133f391","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2206071918.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfr6kgZmo6NG+v3Wp0PxRV6K9tJwJq/qFSQnKyZD41fwIgbN7vXs9C9K4r7CAc7UhAZECAS9Hx7XPWpFytRkLFJn4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin9CqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoOQ//Y1GEaoR0wgNR/C4tJWsULLvnS/VSkImwVg/zXrCAI6Ik53ZW\r\nOiRUzmPwZ+KvyK7TqRf3zWairksgCnYUCkDj/I8ZB2Lb8D4Ogf/hAL5h5GjH\r\n2pg8Q9UFEwju0kwrhqWDFLpEuzqlhnmYZKJG/yMftPc7HEifgIdo/Glz8bSu\r\nmNF/Qmh1u010BhzeGrXqYTf2ieEGC3gs3A7sG5HSxvpHAP+2ZNwTPFno76+J\r\nNAeNh0JT5AHK7U0pY08eh39dqPwFKXpHHvMNvNKGKiQ1g9KC6IFCNWlR1Ac8\r\n9b32O3GQWvwWvOSKLC/PdmT0nIb+dURVDGvEfX5EKD9POn0tF1PSZaGDsUAI\r\nosTIaBksF35CYIY6yU5QkGhO2PcwbajvqzJFu31nqrC0pg0L4n1LQ8b2K4Db\r\nI90raxLtKQByVjcxeBzv6I5f+5qI8Ipr5zDb7ASxmYGG7XHLzyqNMgfDsLtu\r\nzso94eb4oEiWj59yj7d0taEOgexnGES9YX70/wr/YoXpe1UKKCkzlZI7Hr78\r\nI/Ic66gsY8KKrbaNJtf8OKL6GqHArrIyaEyvQZOjWg8soX54SN0w3sKPkMs8\r\npe+AQXG6Nkukyio+Rkk10wPxWeb5SuMWZwT6hdydc5iTZ1imdKNMPNe+yQdP\r\nJjIqxWGP0w1/nPq5LUHAb9ah7413BCImY8E=\r\n=Z1HY\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/embedly-card_1.2206071918.0_1654640809861_0.5867595165016781"},"_hasShrinkwrap":false},"1.2206072228.0":{"name":"@bentoproject/embedly-card","version":"1.2206072228.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206072228.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"9cfa89fc95b4eedfeb00b4eec539909f0b0c0f6e","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2206072228.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-r11pW3keFWcd1QRQ7CjNDBlOSizBHhnjMWBTN3gBUnuQ1JXB6KI2zpGdgcaHZPr31Hg01MrTv+2VZ0FgosYodw==","shasum":"94152f76627b7e9e922b9bf9362ca6bb82894cc0","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2206072228.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICvQ6JjpVPWYaa2u+XyxG58J7DIqUo3vIu7ohQbcU2W7AiEA9uNwdvkERICc6slWoj+w5Y4Ki3dNSjrKt5iheI7GE5Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioF0dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVIQ/+MuuZ/7WHIir3pKDapKMK1S1lr+WLUEBsJnPMztb2zgZz9jl7\r\nOmz50FjTdyWMA7jacO9gyWo+ReexRS80XDj1ivVD6R4VptenHX3sBZF7pv7U\r\n4ZiBu22EG60aoZYfEEgk+Gra6sfTAfuP0u3+uIlDu8D6E2EOJeutQ3EKHF4F\r\nd1FjpAyZNf1+DeJwdv9S3gEORFl1YSB8UzNbXHZl1r8m6Dyq/mCbMvLvAXjS\r\nKgQjcfzaAS7R4BvryV6yAh70KZC7xsdwiJIgaeq1NynHgaWqW4Cupzy+6v3V\r\nnANbOkrPouO8iJI2rE0o8V+aHoJlmO9aKCoC55yc3H6lx8lP3bNJXLjGRCWb\r\nBb0S12K/1XlDnVejDDbdw7PDkfJShgqB9ACJT+9cQLPiBkBWZJsFY/Yiua/p\r\nIxtyx8nF0l2LpuF228hyKDhjcg72sfvKyLY5Gu/mJtM7/pyB3BexMbu2t4EI\r\nIvLgw9Gjv8Mhp+N8OHGCz6HLkbvixEs0k+PN8IYNdEfWCnhymYUu/ydF8WK5\r\nieSj+5stU6bARlfyWyUbpnuCus9cyU6Nhgv96u1GQ9escprwEdrl4T4thhEZ\r\n20yWzmHgrs7DWW4UOAjNvs1YLgyuGgaR7pOPqPxnmLWfHMiBTiahIZBl392N\r\nbjIjetr0gXppf3AUWYz4g8O+6VtBnjUSTAs=\r\n=RhWj\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/embedly-card_1.2206072228.0_1654676764925_0.5125987093672775"},"_hasShrinkwrap":false},"1.2206082301.0":{"name":"@bentoproject/embedly-card","version":"1.2206082301.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206082301.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"32e83d3790f33da4840247d996ed3f6b256a796d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2206082301.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-VXYb+wyytfmCG8PcNGueIvAfzB5RUgpcDiFTf3Zp5I3tf6mcnh0sgix2PeHkj7n2cygFU5BxtoNnwO/kWjUCeg==","shasum":"3bce11adcc181d34f94fc32324dea99a126e909b","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2206082301.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCW9YJa88htO2vxa4vLXcUclJcI1jeuuzwImZJ77DPE0wIhAM22W9tshh+S1hYQTAefarg8uVqqjiuJ//7Fd71yK0jx"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioa9vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3iA/5AV81q+88i8wDkYJ61eu1JFiKnLjSXI2jOYpfNQhKtCjriz1s\r\nwjaMCT6uVe+SLYNx/r6sKvyQNOo+0t+wYsguFztc5AyuLjCLGseCRoQnX3XB\r\nzmN4y/OHpfXPboQk7nkRxaLhK5Q2mQmbaYuPUYKhmL548DI6P0jqwtolryAJ\r\nfnJlLt3tRwMH7eDIziyfmsQBRSQKeuenvmbwtMqFPH4W8vpcxUimn5rmIFIO\r\njwRVn0xvOeNwJLZW7G9XUUdf4hRkbhZwAJNOclTiuX6jgLEjBNlVNlXS5hpr\r\nQZhU35Gbsyf5EoHkP5Yqx2jzyPiK/U+Vp4SPr3UUGokdCiSNUWKpod4lho76\r\ngqe86nF2N1rEKBrxkS21d8JQkqwBE4I2DYYtw0z4RzplhJMwt2W19YqUitY3\r\nDUsrd+gU+WFiGPSoncde0kt8smHbcGpiZoF22oWFrHBmGSwHBRjm5i2ACZ/w\r\nyt0ms2oI00hkcs02YhfH3g744Ql8NIzO/KHe+TT7Z5vKJlHgwWNKg7NnjiPO\r\n0tmoanVgCEa9EFKeJorZ3cX/qisvArJ2aLtjglXN2aM/ScIF/5CDiZQDKBrU\r\nYAHRsswv4+dPFmOzij/X7rm3Z1yJh+UxN61IlPaHC8WMDYbLVBU4etxOf1FO\r\nxo1ttuzOBs3PKndZtdBURjGrpABYKNu+hfc=\r\n=nbDt\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/embedly-card_1.2206082301.0_1654763375143_0.9872872580332981"},"_hasShrinkwrap":false},"1.2205270638.4":{"name":"@bentoproject/embedly-card","version":"1.2205270638.4","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2205270638.4","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-zt5GlF9RNX2b870wMoGi1d45PdwfO0NwwV8iaamhOdZ1/rypFc7Ftv8bLrpSsBBplbcEh5Tc5j41OXTxgEoDcg==","shasum":"52ea854883cb0e7af11fed8bd13799c2b8c89532","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2205270638.4.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTW3LzTwqiZm2OD8Llmqk+nMNf0pUnjjkY6eE0K3+9ngIhAMz5aRoY/FUbjbU7Tjun8VFC7YOlbggz0MSK6MHjfmE2"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJio7jtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnOQ//ar200EnwqFkKbutcxlgl4kymmvBtvjYMKEvrdq9xZWB+Mc4P\r\nF932U17A9bNeuxGXvcfDiAy9qqKi4aRDTFthkKQEuKZjK1xI3qnUQUHdo2tc\r\n66U4DJSOfc9s6/bkQtyZiC7IiZsI4HO4g7X7d3Vl58Cyi5fg1pbRBPz60c1/\r\nGWvE3y21jMhk+0a2ydGWbiDBXmhZc5B1EAJDVwZgNdxwV/abKo43hXRw6/WD\r\nN64u9nUoPXs8P8RYcdfzzMdLO3W8+aD7HhgWdd+2lQ/+2mImXLlpmtuLzpic\r\nCO8SH18o5SAf5y95XdjXttMVgXzrVIqFkIxCd9sVIXFOjeaX5cAQe7nMXZcg\r\ndI8dET+fIpV4xAdAHaINjdx/dp4ad6rjaNce71jSXQO86u4PeRrfkkgbDrZ9\r\nFswfo+1jzA0uDbowHtuKt5rdUuEx3TlHagcvEv6FOrL3hnazHhz1Dl5n3shC\r\nnaJAFnYWx/6w0qxzFlHRPxlnUaOIRNhxqdIjO+0kGmIdx66xEJdIklOjvwaU\r\nvvO+9Sl3eq/P6kuUh/XQ/jt9q/0CQ7lXuxbOsCV8B4+IJZo7DYKKL9/Dch18\r\nMwm3dsmbQixUwl2NfegSl0hkR8AoxS0sf7cDyt1gQRr0+EODj6x+C5HJ5zde\r\n1R1hAcucJhHYZXc/Gqn+X4YWkwg1IfDr0bI=\r\n=hPXZ\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/embedly-card_1.2205270638.4_1654896876726_0.1336046183808859"},"_hasShrinkwrap":false},"1.2206101637.0":{"name":"@bentoproject/embedly-card","version":"1.2206101637.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2206101637.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-XpUhdT2LsmDvyNARMwZrU0Ku/PDZuFpltjFn/xsUbZXO0DvMdiEVkqKC5evyNrdyAtkEZQOQ1M8i2xMHMQPtmA==","shasum":"16ddd86589fec78cbbfa95144966ad2f590b7d2e","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2206101637.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPBGKieujEiZ5yuep9Omd3ObI44o+Mz31WZ7Z76xs6oAIhAII67qyNv+E/H/2rrlEycpzHhE0DI3NGm+YrpCAXcz03"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipFF3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqV5A/+PmuzfZIPMXpTts/QlFZ0MYC8q3GsPWbtw/M5YjfusLdv997A\r\n/1S0TLav1Peng6M5ddPIVOFkDPkho2DEt0+1rMXRT12GkSf4W3ZUJROwYQ+c\r\nMQvJiAAys33nDnBUt4pv1DxpXdEw0SBc6fMXiKyqpWTNmgqnLZYTAD4NoAA0\r\nHissaer7pRbMCopv76DP5qy9af9GFP/5NYecho7LF4dwDhRUPKLU0oqzKXO8\r\nJHTCJzTBfONWjwkFS4zKJVx774Wp2xXnEGACbJmC8FCtbz/A0G1X6Kip5IXX\r\nOOKf32o+VV1UTeUc6hLPcowsiuNglyhN0DzwPPoEtg1HyYTVR9k9gF7qzPM2\r\nG7S95xQcTfIq1xY74XFPduh7aJ/arwUPPa+9I4DXa8E5LkTd3eF0+1055ENH\r\nIarROcI5eTHOq3RjYvXB9iFX79jrEc4ALTWZglidgs6Urlvd8u9PPVAKCmGG\r\nccZwEVX4xh8OlfRvaWbJkAO1WnnfUAEnVCNJvLTj0uTdVzhoVl2RGxt/WdGn\r\nWzHKXXYO0DQdLhk3bB63IydpjehguBoua9zZXPkGHpAq195Y5UeqYZ/2j3eq\r\nuYs4QBalKKDyAEwOmS8Rw61yzzQhx2uJadObEsv+4oCWJ5ejUHkjt+6+LYhk\r\nqkYzIXpuVpOPIgyyh9Ul1/cmyBqnb7rw70g=\r\n=4seK\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/embedly-card_1.2206101637.0_1654935926990_0.762229423822202"},"_hasShrinkwrap":false},"1.2206131450.0":{"name":"@bentoproject/embedly-card","version":"1.2206131450.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206131450.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"f8fbcf58e78ea43df73b529ed4a25e79ac758981","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2206131450.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-cKLhXQ7GHMbP81I1bW6mKEZKsNk4slOvTEHUVb5l6EvZZJRZPEfNSIPJWiIRcyuHI0aTn+UTFXAMCz4dCVJ2BQ==","shasum":"b4b1fb212ed63a3e6724a010eb630449781b39df","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2206131450.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+uGqajYVu3viE5tcG2YwqGV1+OYjSsjbtjEd1wHrqqAiAdrHWegmi9tQJiTZ1lNf7RIYfE9GwaFMPapZyrXVZquA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqEZZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrquw//QBgnSIbjkbaWAxW1LBQUd2x56Ie451PFl1gc4/dWjfDrcPQe\r\npVZcclcJmacJaQ9by21mRNpLc1erzIaldtwACAZoOj2ixckUZBbzKpFYNbFr\r\nutArTs1ZOdBZMUxQx/nEvL0Bi9CM6/oDA6Fe+jo8Dn99YAjIUU/LxKKa/1UR\r\nnCvMotJJLilU9bcgbagv4zkAps7QWRluzopBfSjMtHYz0uw+KgLrSu4qNoSd\r\nebHqfp2KboHXoyTnEFzmPs4R0xX7g+lTLXpKSPOeqJ21CUesLiTt6vSJYXLW\r\nqDW2NTWxmSmSyI/TvUEy/JoP3WfELKhYN1C3tf7HYXS7+mNAYW8JFlz2f+IL\r\ndLfjrjIahYqZPEMshu9Ke4POAeD2z5O+t5q+SzA7yHkknbTyXbICUqKC56k3\r\nKXiYU6fVDOqI/AhM4QX6/UdNZXU6JYQ5VDCnijSE2GvQCIRMmxeomySErDqZ\r\nhoxiunPL7VHjz9x9oCSNNylKMXrudoK2Vp8eYYswjooR4nU6c3kukn/eq4qb\r\nssKV5fq4RtO/AJoNA2itPZgZsVN1QvOzypo6y0dfGMalSXM7zOXK+W3hi02x\r\nTuq/j0IlBYf7+vP3YrrYsx4eACBIO5P7PB+O9HK2LoGPhdxR5FVJs4xh652L\r\neqw8baqBuO2WfXiYn9KdId9M/vuQz9Caz34=\r\n=U4ht\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/embedly-card_1.2206131450.0_1655195225663_0.30412364135758696"},"_hasShrinkwrap":false},"1.2206071918.1":{"name":"@bentoproject/embedly-card","version":"1.2206071918.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2206071918.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-gHkrSK7jWAPkUCJoPTqNDKbTw2bzLMhKeJ3YlnuobJIG3J3jTvFHeV/eGQJc/DfGeTz1czsBx6zHRzeIIFm8FA==","shasum":"077fc1b8bebf9b58cd9f80048d3fc43dbf572174","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2206071918.1.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMaLAXGxPBZvcnjMaJbAa5JAmCc7cVyV/vvEZ74hZ8jAiBtQvhNTGnxe9b4Q++1oI5IzC+PhcXiEt4znp+MgY9cJA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqPziACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXaQ/+JEpqwxeQcnud7P5JQG0CU9JXGN7iA3HbQzw+44TN/4ckoicl\r\n24x9v4GcpTqu5W9KlkqCUTgeKsCpDwPp2RAqwPWoY5uDayg9EMF6xEUu7L/Z\r\nXnBOPPQAKuP1jcgAq6+dOHY6qcoA3BTye6qJlskbZSPsRw81bULdZ+S8LfjG\r\n7WTQKWmIXJNBvYv1b4zDAR+Qm9otIFfHRWo1a2SB5RU8IGcgOYtduPduognU\r\nO3oxDWDwNhBhOiJbAFlNtx7dmkdeKDzkG577kwmfbBg56OH4r7iEQ0AHaqa+\r\nXt2Vy1t8UIUtAxkiCaILFPJFkehcbcXcDVap4G5Xf6b4tEC9nApLlVIdWy1q\r\nj95QbTjXwhq1BgGKc42F3eodMyOSIyT1g6PRZbkP3kNkRfkgDBm9aPG1zfqf\r\naV1bUYvsIDiSBTMmUDIo7RYJOHiwyuoQrlh3VPhiRT2irc71w+6CCl0plBZS\r\nA/I0MGD411x400+YuGL/PLHKfRiTtozXHYUazlIZ+qznTYcDorN2Nmhrmhth\r\nMLM7Foz6vvyJGszCseTbT0WbZMGsJDYkV4qK0GzSNRAn7+g7PgZqX7Xq8lN2\r\n5XAa13b4hD0/2dKqQJHtSB91bynq1fcdE93KCfE9un6HSUjyZ7GBd98T5rFx\r\n5LWYGSrG9At004Ud8yE/0Y/g3utsX9j+lK4=\r\n=xEjg\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/embedly-card_1.2206071918.1_1655241954500_0.9720446364895139"},"_hasShrinkwrap":false},"1.2206162023.0":{"name":"@bentoproject/embedly-card","version":"1.2206162023.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206162023.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"15781b541aae254d04a1cc777016aa40759100cb","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2206162023.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-1S0+MiOSzv9gAf6AHGl7zw+3Q6tqWTZxcm4VC0oPEWcuRax79q7+0U3MErUm6YP8zDHdfJ28s8bgQVlZSUyZ6Q==","shasum":"85241d1d1c597da577448fbf2b7b8c390032f1ee","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2206162023.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1bEOXaOX+bAPGVK0w3NrQKOM61h37T6c5v3JqBnUuXgIgYzLLE8SaCYEWxBtDCYEkdZn3yMB9GmvYm8FFb7RLxz8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirDsQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZFBAAkL2KGXh4xT5zbAlwW7WGLpDskdQW8gasTl3FIbb8iyXJ2qHP\r\nMvGtdRzPxkmh1iWzY4FvjaHZnwZLugcfocP+YuWDPs8o/7496FCjEaxKZLOP\r\nTg+2KrXmTKmtc28W51KXyKgj+5zzTlzieXptBp9LoEzw4eKyKsg8BGNwfsvU\r\nX3W6qMIgXJ2GjiXwylcmOx5D5STwtY7Ices4tINhR/EIv2PC7wVUTvNycWjo\r\nZbxxPj3j+LuOri5uc4ufwmwbyWH3yCi8QLdoPxYU5ebaOl7vQEwTW8S5/moE\r\nkYZwAczyzdwaPShL1R7p2D9F0wYqrv8RZszzG84PIoKLMH6h3GJI6phbV4gp\r\nOuIo1kWPt7Xt7VGr0b2Cx6nHaZSnefJGOXml+XVf1G9TLWXMsQOQbOz7F6UR\r\noeWhxcG4O4PHHOf56JgEsReeu3p156vv46oEIkB3dGh9F+CP84SQt2tDn/V5\r\n78i61vp5kIkEwq/v0MCC89fUmPwOfdpT6aLN8+auZlGHF10e6sXAB5KoheqV\r\nkq7fK1Ai/81CAH63Jks8l1WwMitqOnSzm2n+VKGwxrbvoQc9bXlYy4Mhus30\r\nGQE5vbqBeKFw2jmcUmicx/xiy7s9je8NpxgFnJQ/5G8xbA6AMhWv5cqmjaTP\r\ndjn6UxRCFprH8771MPSp7aWA/iIXEJiZK7U=\r\n=i89X\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/embedly-card_1.2206162023.0_1655454480213_0.32273819075144483"},"_hasShrinkwrap":false},"1.2206221455.0":{"name":"@bentoproject/embedly-card","version":"1.2206221455.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2206221455.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-BnxpkyiYpxWWJO/PCS1E0cCFKJ5S3LEpt3C10BIDu/yCFZhZ2QNJFNXstqsJuHjkZ7RMZOl0qTrRPwwKQcTlHA==","shasum":"c44c2c431acf4ff56ab471ce9e6e21c445e7a3c2","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2206221455.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyup1zjXYNktRM22gl6rmCGAzyH2n5WIJimk6JU/VQygIgOkwZ6Gj9BzkS6x5x3rQlXlddmu9ctMTrki/ua8Y+OzY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJitCO7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoz+Q//dW8g/RG7ZpHHapsequMr1DU3qQOhYbDPqD7VJbm0975xlM1c\r\n5y+WN6mGuO3e3qAeKn+MQ5FlHzixyqhGIk+Eu+qciQKVwgnTNf0nVpCrCHZI\r\nus/hhl2Y8ZcGai2+Ls4V2T83pD0vkjspNGMyXfPU1DDAOcrKg2WLbNRBXBp9\r\nlvxv5NOjrl+fVD3XHiH4Kh0FPEaHGUwF25F+70cvaOt/+ANXZctMQTz4dw29\r\nGayIb0TXK0ND+kEkwJ4P3dZnsxqubQMGGYbB0kvcXtOZ3n/fPKkXkjqUWs4x\r\nyX5xJAS4pn6COlK8b1BxtMqZopqM0CKOL7VxOtu/562tUwInit+dJKSR8HoU\r\nSBBjfurmv1kKYaJkYbcjyBHZ2YyVgOHkOHvFJ5rFuZ4EhLSaL+ToF9QAR2g/\r\nLBDpsT6fsYxfU1aj3FYHr8fhJ61KMI9EG18veecTnZJoG4mwVlarBrOMfMrm\r\n4bWOuZ17mjpVSsscyrgt5sU50Ja8uT9EbkN5U3eHzXONMlNDC7I7o4funSAL\r\nMOU1RLoZ+iKctqNIhJVgSPkk9xMt2GGJq4uHJxW0g0fu8uzgJAXOQs9/WNyJ\r\n9+gAfidRgHrPNRCJZbW2eRPJfbMZ/LI0EdTy7rrSG3aRyoriFeIMY/5O+jVW\r\nVsq6xJC2Hr1G+8haOLMF4ZypoSeSbWWT14k=\r\n=51nD\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/embedly-card_1.2206221455.0_1655972795242_0.15685785678695097"},"_hasShrinkwrap":false},"1.2206291614.0":{"name":"@bentoproject/embedly-card","version":"1.2206291614.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2206291614.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"34fbeda57c3cc9d01ab3c39cf9618342ec840187","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2206291614.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-e9/T8bHfL1SjZ8a7bJZGD7DQx7O1gT0fZn7yv9Ghh14POBb+AxXG5jyqdgQGrbTUVweCoa/2EYj0SnhD1B2ZxQ==","shasum":"abc7708d804d4890bb55b713c7f2708c9e13a2a9","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2206291614.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDd0Q0wtlS9COPjCEJpvlHigJ/4U0z6A88vTQbwbGDu/AiEA51G9Xx9sbm7f/59PsXdtPhHsHFYYbWhw27GiR3ame4c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivcowACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJ+w/+Jr6hTPgpQ43zITLZiENPnIx/Om8v8PSzMiYsv7TzjOiPOjNb\r\na27ZqLByfrSVNq6r7gskhoHVXFcwplkN93rSX81NaMvFJLLMXq97EVmImhmC\r\nQITcR9CFLhVfwlK6sJgACFGWSXo++dhi9Jn5diKJvDAkljQCPnt433Ilr9on\r\nLcdXMBDYRqxTA78lS9rWXg/Rb5sj5PZaNNhAg18SFDGzx28TKy1BWhVpd96K\r\nJqu03JI3IORNBPNy/6VTJU+A3i5dsrL/1EVGtrUKHCxjwQ1Dn/IBWOAetlZ7\r\nT0KkysdVS01FNNeV0+1NdRBZ5Q59JVJRCjfM27NAgKO//9O04Uz0xvuYyTjc\r\n2RA+k+0tfiBy6imY20thh7ceUFFfNW7soDKEtZRNXKobQPe42rYEP4HGQI0s\r\nlnEhnxqLI6tlP/AtPgH6dwiN+fxbUsjLHwk8dMl/oBy4o3mO0+5O0SyQ4bB2\r\nw6JTrtxBr0tyewOhVgKMGf8m4Z9cGUQcCTbPwbfjKudZJwwKNmjOT+q3FosD\r\nG9ypEoAUofJmUfDvFgydtU/oWWKExt6I6srBhtPWIvopSfuDor8LSQb+B7tQ\r\nQ+OrsK8RtDnzzErijIEwZB8S5ED8I3LchkDLh8BcqF1sDkee18PuI9xiXDHY\r\nksXzvM4fZqWeONYcBLRP6WzZLjaGdo1YX3Q=\r\n=hFWC\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/embedly-card_1.2206291614.0_1656605232261_0.5959305670180577"},"_hasShrinkwrap":false},"1.2207071723.0":{"name":"@bentoproject/embedly-card","version":"1.2207071723.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2207071723.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-QIC75hMEXg1Qu79LsVV1i6+3aZ9En3Z5dlH0SxruAC7goUnDekTOd1slfHC+YCWq6Ttv5zH/Juj2RnS3NakdYg==","shasum":"cfdb1f00f1b7f28e58062d477ec9c547fb41787c","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2207071723.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA8HtuzGZVk7bGoYUAYPTfT38DlOWwrS9yZew+zElb0pAiAeGHucZl5oxbg27ytcKstktRSIyVYzSIguy9sgK1Sjpw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix+uuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6nQ//VdroHc3xbAax4Df8tWWAJrJeI6UOySar5P36fSeN23DZt6wO\r\nMMq0jdn2OTLv3BivDkLVL8g/5huOPYkkYvv30R+Ew/S2CRfmOIeYa2kVLUVG\r\nugpj5VbLzR0RJ/5I3qvv7pc1ryhiGhMXjOO4hYiZFF15xwi61QO0nQkDyctj\r\nA0gBvcFq+DtgbIaF15vCmZ+fDnJiwWcUt/llloYrlzonUK07Hj6WetvZUUbN\r\n2xS362empVShYDSTLN8MPO/ToBvsXb+FwW5WL1mDZgyWeA2XqAzLdK8skxxy\r\nXLA+piHhSvdiscA+or1tzTIAK7bjuIY+KYHrANE9b84KpBW+Z3ycVkyvYqX3\r\n1WckJ5ADYjf4InxEpaga7AF844QiJMuQorbu0l91Aw85P/zaOWWrm28TBiHG\r\n5OIqUtsDhU2t12veiLuOgw9MLtGLBfu/OoQ9DpilNb9VAgnS8Sl0+W765x3T\r\nDHBkNq/DOXEFtDB4Zqf/yQtS7zTLJsjsaFZ+Z/Sba6slpe1suKPt8YEUM93Z\r\njRe745OGdLH+3RAs28jxH1HqTUvsUuA6M6rr+PC5QCDI0x+TBvXm5XvOkEM7\r\nw5z74CJzEm1cJ6HJNPlhqpO7Wn9vRvyd3JBuY0Bts6QpHQz9ayCl0HMrriqr\r\nrsU4Z12D8E1R61HBhmV6Uuoe8RTW5V+wSnY=\r\n=shJE\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/embedly-card_1.2207071723.0_1657269166385_0.9742709624638513"},"_hasShrinkwrap":false},"1.2207181727.0":{"name":"@bentoproject/embedly-card","version":"1.2207181727.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2207181727.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-k0za0FWDuguQt4N7HTS3KnqBanTJ7Hnn4ObmGmfE0FbZAG9AqCdgZ3z0gm2QQp7yht54M1sCy4ADqPJrvOMf1w==","shasum":"265a54b11634ce13b9c0e64dec3d3e86dfb74fe5","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2207181727.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHUO1+DR1+uNgsP7ziKkoea8oLMiVMgPe4yMlOpneVh2AiEA7M1h5dsXS7NUex1DIoFG69Fd5djw0vRo4iY0//Pg+8s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1mpwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUlxAAhu8mDo1l3EMeNhWIxHEv5Ew8fNVUm6WW14dOKqAUmdQj0A6b\r\n0clr4wN3AhD6c/8g3UX4BARTFUFO0HX0BVWCmWXqWfuRAukQ/THFmMb/fBIQ\r\nj0kTwgF8BWeAKfu03NNfaOcCZuyJZwRqGH0yw+6h6CY2rGDcWYyKl17NZB1M\r\n31an6eDRWEz+jXhDM4m3iN89zBFq1RNv3HHrfFAIcdrVtQpj+ZfH7c8wPPva\r\n8iow8miqp/Hj0QJ1VGsStNhWFQNFsUl60HCV9QTdb+ZqJY7oSEcY4qdgY9V3\r\n6QU2zv3kwsmBhsIuLR9ZsDW2O69Mh8s0awgc5Rf7ajXTIEN3R/mjODKcPrLI\r\nqlNY65WizoPpFqU7BuV6e58SmfCtAsoNYTF5XSBHgBYV30G4KIRQzBY8svjj\r\nOO9nLVSSAPla7z0UHhCNYpUfL3zq/U3QixzJWV8oWSZMLvIGuLbiCFN2Gutl\r\n+uSX1Tt67Wus3WxzrMbhQ0pkxfjSNg3kQSCzipvhqXF4+wt5KVM4RjpriaEi\r\nBZV0iKZLWE7f7AKmuVGeRvgg8Q/qRiUciRo8J9+iJRUtwndafs8Ia3svW1wL\r\n8iDgzSzA5kbFM8MFtFLhA+uDoU7vVjRb6H5HUewiaQDeJ1WBcS8XprA9z+iw\r\nmwqgo3o2CbUFgxRa3JBK5uMiCNb6i+f0U3E=\r\n=DMd9\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/embedly-card_1.2207181727.0_1658219120095_0.24384739550760814"},"_hasShrinkwrap":false},"1.2207201724.0":{"name":"@bentoproject/embedly-card","version":"1.2207201724.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207201724.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"62d86212e783d34fd2dfa8bd02ffb0e447c0538b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2207201724.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-MgSa1BBaVZwJ1mcK9WWw5ijLiqPXJeh14xzw5u0ivGyjzgZWd/EsFpVf3xcmn6B3ylv5XdltbVDjdccfIYt44w==","shasum":"aecee99779f15b5965506689ff5e455ca81cc96a","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2207201724.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSaB+zuDA2Gwg0k9yGZwuwcGxsBKugpH1jsyhtbfC9aQIgZVCuqOBiGulB6sqTC0ikePq9cnq65ckvUzsIRfZL9/w="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Q2KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhjQ/+MxU2gZ1jMVL8MvTqbMjS9925J/+GCyRUaAz6ZzTA78Ervm7m\r\nuu9n7F22MiubkxvIFqg5bzL7WacHceR+2UAHDPBPI1uVnanr0hUF64/+ARnr\r\nDvBgyMwn/RuYf9yvGrC0WX9qjpSulLF+ONYtlyPclFod9R//iO5z7+UmcdGQ\r\nfyqSXfZPKcj/L0guV2JrchkCUGW7/zBZCcVWF8vyeYUTwZ50jvRzBc1jEzcz\r\nmppTXclMCOb4nmW63kW+HHULLUvdfd2HJc/kMUHHeAXK2TeR8fBt5gsnPVZC\r\n/OaaFgyX/LdgXe3KVNIFVYLKN3atjHJ8+wfhhLetGhaDI/aZY5m2TC2ZwQsX\r\nJJ6yKogypjvNi7BCwSzpqmBCinxW80bS786PAXOLV7JNAa2hYBwjVfn+EZb+\r\nUc9mnEZmy87zx+BlRnxmAQ+HpPLBoZA7HUv3zen2/5M8znnTAwiSv1APSwTg\r\nMtGezN0Jg3jeZksJNaC/l9vAnSGtmewMdkfK8S1kENOyjBy4a3eAlDldaxHx\r\n6FkJp+5G89yaqwFNIaU31WCNTqZ/RhyMyoGUD3G5zizfqmAfJwyY5uJmAKTy\r\nOh2Gx+ZNjnctFFjyyhVBlRdTglgONAl7z9IlPsJYxdlZj9eV1+8r/NU+dji5\r\ngla62tZVxyoBqE9Ejpby0PsbEome05c5bG0=\r\n=ce8M\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/embedly-card_1.2207201724.0_1658391946100_0.99751654486896"},"_hasShrinkwrap":false},"1.2207221643.0":{"name":"@bentoproject/embedly-card","version":"1.2207221643.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2207221643.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-RmvFbcHmZ2NeubkHoVupt/HQj8HaVKqnKZ0rRwVh4bP6Trm+tRstBrtgTr4qpFnl5Tfew0X6c4pRjoeuWWxTvQ==","shasum":"f384d84b5672534ce0aa16f55a00f29639e07b3b","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2207221643.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4ICPkB400OOWeGKPfgnyAhDRLUzyKf9H7eKKwVzFG0gIhALrJToVPjHQD0UXS25fHAQEM8mL9gDa8ZC5hMBhVKD5X"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi27CwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCAg/+Psxalt121GyUe0cpOXEBYHF2GeT2+3EzjIvHBiYyZ0kDK7EI\r\nKbXR2FL+Cd833+pibh6sRCH1pDpHrYNAJTNMnb3lD9KxJpB1a+7d6ORtOvQr\r\n4ROUu33y9cMdjhROx01ZiyVAt9tm9oXmlgFmptCev9wYeHlVbuSxC+rQVAwB\r\n7j5Pq3v1xoHqL4LKNEn+EhW+hD/wFXU71RvttZY4mTM1AvlZVs4OgALbAmyC\r\ncf3SSpoZYzM72p2W4qMHjrJx+/Z41ihtIxr3KQJhZ47Db3Nn4g6eeAp9eT/y\r\nsJ93QnlYCUoWGlD9OTJSe7rLcWxoQeHR1RgA6TGRFfSIhkPcUKgr8hfiBaF/\r\nxvvnbLwLffvrY4N6Ca86xei21sbws+j2JkhnAdwMK6IbDoG1eY/egJYNVrbX\r\nKmIzA0mctt2FvC5Eygger88+iFMrb1oKDnYvEG7pn1qHX23nVOHhge9Qenq/\r\nKzM6t3mHuKwf8G/CbbnaL4dsNwtpmCrbA5iCoa0H//6tHabYnWrht1Qb6hUp\r\nPz5bY7XKJtxH92HRMj+7KYuYySmDdS8nEWrlSONxUe114h0sfIWUamsuv+Bf\r\nlGpCy0VE2alZ7jxtRBFmTh2iF+MUQviO4AZpwz2paiQfJRXK1Cd/FNu0Cgav\r\ncpgzRO5Si+xBDVES24CWPtfnqXQoNSwcDfQ=\r\n=Dyyn\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/embedly-card_1.2207221643.0_1658564784198_0.6524343210332519"},"_hasShrinkwrap":false},"1.2207261725.0":{"name":"@bentoproject/embedly-card","version":"1.2207261725.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207261725.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"b73520d61dc1a279ec10d2a27f58891e2e2d5d93","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2207261725.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-f/IxzUP94CfCWzDNdk3PFANrRxZd/lpu93qEEU5X6RCJMUqNAOFJKCBbhxll0y91P2wnD0f0Wg9eczjElhDXeA==","shasum":"4f5f8ccddfe92518d0e1e9a59041db9b28ab73bf","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2207261725.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/JGLISe1SD6uxxVsB3HDfA0nj3HgOjLNPUOSTwxkvPAIgMW/lBrIsupUZi6lZwix2B7eC269BF8HhB306PobNF3o="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi4PZtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodVw//WXi8r1ag3F3r//r50reAMI7Kcu+IY2BTEXEE/zYzBWqTlQK+\r\n0w4N7528LZSRN9uFZ3AtywR/qiEjNpDUU8ZFTpuPNE+A/eHnGZL8dwAZ3T5t\r\nJUnX7ggL0qCaTqgI0SubBvG21J0ZFLy4KiLAfAnwTd6r+AT24NsXyO31iuN4\r\nGPrKarVPeyUbb67qeNftTWufnps4dbhpKqjGflXMF7c/FhrU8C7chRpEJc33\r\nTTdlyqCQwSZ4NKhe0Dt6ovM9mt02HbRUKGD6UVtwmnFKLJgv+zDpOP5gZImQ\r\nohdcdRwUJ/gOekArtHO5gV4ejuzkp49EM8MqbrvLMRoWdv2iNXf+yKKTSdNo\r\nfa954MA6GFUH1Dv5ZAXRhMJ5ZDIZeseaPCcrJwAs52vp6J9pG8B63cnl93bp\r\nhnt8e9Zsg+EvJR157OZfP8UYCsG5wxiR/XLUh/0KEEjV86Ch4qtAJPOoD3+z\r\n/Sg0sTUIHmwvfbO7DYMO9gP+XSaSYC39q7Hgm+nJL7mjNVCs2L1sand22DDT\r\nsN0kElzTU+gwFf2hfOxu1ShC3osDccxlNg5biEcpAQB/y2Yv8Q2e1HL5AeHx\r\nLp5WgoY0ZRxgHbcoLuLDfVASmkUtzuWhrBOXvEs0dqpSs4jyR+hyftKr8Xtd\r\nHgPa2Bs1gShpkXy6G9dZZrcmVKfWIKznw/c=\r\n=O/A8\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/embedly-card_1.2207261725.0_1658910317124_0.8642164504439038"},"_hasShrinkwrap":false},"1.2207281718.0":{"name":"@bentoproject/embedly-card","version":"1.2207281718.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2207281718.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"5e3f3eee6148e0ebb57aabc48ef987e9b5528611","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2207281718.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-EUTeufY2qRnSodRwfix0fGPeHv0VFH2Eo4KOyRJbIT/B0pum3yJgXeP4RxjWe/phSonuJX+tuvg9jzgggV3VdQ==","shasum":"54bd4329c9cac0bf4e580ec33bf6f6d06270bd42","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2207281718.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhoOUj85As1bwWvcj5WZMld7CC5/VGB4uNDT2XwwjdsgIgQc/rwsfFMZXf1ybp1sut3RdAjUNPwzVxvgdW3VWF1KM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi45oOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSWA/+I5nrjLUYC5oJg2uqishaiW3UobeVAP7cXC/BdXLlPKbOx5ob\r\n4B3Z2u04KdIb75gDWAwFTZ106Nk103KdTD3C0aqTu2uchL9/ChF5WHJHDU75\r\nOOpeVl8V4ColKg8SLQS25VXeHvzK9fwAP7+9Lymx8oRjjonYw3VBbwpHyOzA\r\nwCgRqFP0WaiUPutylFVTbEOKfmJjon51C6vEZwTtEH5Q6eXcmktHPwHzmEGk\r\nPViKUSdhC0ESzUrwFr7EFvdQv0MEK6p/G4GDvTDlPXZ5tHtYYHPVCrSochGT\r\nL2YmohTjhXoq+y50NB4GASEOqgpwceJAhpiooyT9dRMWwrHZSk9kRuO5bJ3y\r\n4n+FJQ0oGQhlcqJHTN/QedTAZY2QLnYEPeaOUaShhXyTs83MHfsQyOSKBbIC\r\nwAfw9Pt1ssT1mfDO27bflqFsxkY4A+2I9Y9O12kxwyQbzrCGDS9wQHJLPhzw\r\nKPBo7LdH/1klV+f9+xSrXNByHfFU0VZEaPg5iXdOUufWzbOibSkNDYdtTr1y\r\n2SZytYh3NT/EQs+JoxpjOtk+EcZUm0APRHSZhHRVJ86pwiS39k8/Q5/wZaRx\r\nOSppGkpvSFcHJg9JpX4ouSK1fQlBQS60O3TUuFl+3wugtVVl+qns43wernbU\r\naWQmxByHzgHNx8NN0NA5s9yAejEs+8yUvJo=\r\n=IAKI\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/embedly-card_1.2207281718.0_1659083278109_0.3439424756643483"},"_hasShrinkwrap":false},"1.2208021808.0":{"name":"@bentoproject/embedly-card","version":"1.2208021808.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208021808.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"b82b832cae23ff854449af280f1b02f4dfeb99f4","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2208021808.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-bw4HbX0gCYKjBXu13U6EmYXe12giSDIdzoh/WIedY0l7qmeikYghpb8rdr2+5iPOmAxGYTeNu2B0+miLdkA8AQ==","shasum":"fcc903c813f81a55c855d648cb56e1f90a8f2a8b","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2208021808.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLNkq2BAV4Ykq4h8CFw4ZUhoEbfyUAhwkcVsZJAYvpcgIgSlMDTkRQfb4HdcBIZnfBo7dt534OIxdHnim0R+vCft4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6jFPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZehAAnn/s0rgXaE44OqDAFW2pIhII3L7yYpfV8Ltdpwe65NXwn+3F\r\nIWPGWvLcWJF38K4lghT6ISIzhVOnUbRs+HyA2tCroyP+aGH/Q+sfCxNSIews\r\nxF4u/67UqUquc7Bf5hHvLrppqgI2r2rqvmQvWyoOB+8TE7SEzKmdaBYvmJl9\r\nMMBIEIqWeNJdESFPGONyL80JvfvO/f0Ab03iooH7HvRPcSml0v6Z0b7oBzzT\r\nAVyLhYzPvgmsk3QMnrSKrA53h1JHQBz0dK9hYJX3y83L9wX+yFYXOyZ4AKce\r\nfyThY7UYG8RTYxN1WHzxn7leDbszRPU/HbN+cdelQHv7eMOybO5aoGVGOtpg\r\nCYIpU6PUfyupB1Yq6StL9ry9hsw2zgTsufULMZ3PwVlftY/9IyYcXISUABiE\r\nia69VuMdGH31AfWMy+QHNP0TxwR6nxCxPjvWNe9T+jZf5KVga0/9QzNmkBRm\r\nrQIvezMm+uU8evroIXEIizZMWb1X9hsRo4HhHUPA07HcKPbemZKpiOnNYj2y\r\nq+HZb9V7LsaBblxMJWwUH9LGE82BNRwXjlEgMtxHquCGLJYg+yV32OgrgvE4\r\nrw41iZ5x99TOZVMZSV9AA6O/J1powUERvmim3wEq70K0Z2cO4PPZjsNDL4Ey\r\n0PRbDtZZpgf4tUhbemZEomw0onDPtrcq2c8=\r\n=ntdT\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/embedly-card_1.2208021808.0_1659515215227_0.28330689244573004"},"_hasShrinkwrap":false},"1.2208042017.0":{"name":"@bentoproject/embedly-card","version":"1.2208042017.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208042017.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"598aa15d3922507a106666aca29a90334c7b2c05","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2208042017.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-DwhIvfDmO8a+Pw5fnBGZczDp8p4ZQbJQG6ggYkPOnvZlRSf76con26OQn0qEWwgUQC8xvrslZqvdd5VEg64OPw==","shasum":"e67d38568ea5afecf93490634d68d9c1944ec6b1","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2208042017.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH5t8979pX3rMy8A0Ykxbgc0ndee79gV/6+hA9E85eUXAiAjZHwpXP1ch9qznEDYprAT3Q2sTfDsU+tdrCNSE+w+7g=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7NSnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwRg//d8xLRwk+0fLhgBqXXG5h38IrP9JDeIp038f7OawNFpFKnog7\r\n6zocBslcA+aIdDuZpeWmImL2hVuUI2LO3V7RI8BVgvrPiC0joUaq0LaWAanW\r\n8GZVakl1NPpXZ6PbNOTnhmXnmnv/VzEtuRZ09YZGVhhY3RTF2FXXcGqlEIFk\r\nF6OXKgwVS/eCdWKUEsSqptUK99LuQuEnDlqbrunGASIhjNvxGvrmVD72TEGU\r\nI0dWgzrULTg4xXnZ5edOQ2uDOMO+tvT7PH2bcIiipIlxHzWpIJGXv7/oXLWA\r\nAVP14DptOb/yInWOjaOG9g3RAZSAfPK6r7/+5tMi4I4T1fGRVQ2/wp848M55\r\nsltQLSLrPGDaQ0qowiRQo7oSAH2jwgLkGoyDOfBlLx0tp4Rdtenm5snaHOEs\r\npYfbScFIi/w0nw74YjgSIuomEKUcWP/5B+wnIxALv3tcAjehU1PK7EwnUmqv\r\nF7ZgnqdxtLjhygGDaJSGR1kFbKeaGPeEsFWhXxkNBE7VuOHuPbHolnKaFYD0\r\nNfYHIs2zxpumZ05Lw4h6DRIEb33AZ6bSXrvmGrlFFeE+puSsvBjJBi2tW2/u\r\nXA4wYWbOosoTIYIVLaAFZngcDxdVPmPt7jLC1GK/LhTcomH+y1tBrgHuPd6B\r\n4azqEfAd5N3+MLeMQuXt6vRc1eI1xsvGSao=\r\n=ihJy\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/embedly-card_1.2208042017.0_1659688103045_0.7550299957888831"},"_hasShrinkwrap":false},"1.2208051912.0":{"name":"@bentoproject/embedly-card","version":"1.2208051912.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208051912.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"5f50e49dee3435f3a242126437de7cc8263c2ea8","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2208051912.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-zOul7Bwhjc+W25J5FoX35srmIrMpud+FGy0xFZpau2waso+RZnt+iUvoddvO2/TzXji0YDqxy/bHnKVPaYEeMA==","shasum":"e03a21ed388f3ecdb2b810e7e83793b165bc5c4c","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2208051912.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEHOnSUHblyR9CgqL9f4ILdB5zDnGZXjDtagJiAAwmFtAiEAhVGk6fM1pfxX0kxNVgNDbe2w2rUDWuhUVmKL5nrfX6Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7iX/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbOw/+PHcsOK79lItQH6lkemIE6FAppGuo75tSMPfWoExUHTvgdk0+\r\nTObCAm+ARP48Gd/3W9yD/i9ItrpKk0C37FPgKDsKL1dlynJFWj0VPGVG+EWD\r\nozSvhlIVYtjVTauzb8Z6YwcQANfBvLbBFRnpeVDGOSDGHzPWckhRVKP8FON0\r\nJoE0obWcuby1M32X+QVxy9S9tqX/5DjEGzMlvrxnF/Pk/afQAWhbyrkaqle9\r\nChsVhYd5RRl8pYJ9LOo8N2OiZ180E3ib1w/mfT5jqN73LB+DIK4nhmoouOQ5\r\nsM96NWQPX4rNNW/x5cBONRAB71I2br/4qAELWtm/Zy2doTduK+E51u0EqXi6\r\nwx7T2/CVZUcUrleXO6cKnIuJLrhaS+TjkLBvxIkrDQVRIOmq0Q7w1rXwBPa0\r\nD9hInbBdXleSYeqDL9ZNE4FpC4xdcLkCmMEx5i7L1/BrCqbCHzN3jU7Lzbfi\r\nztWqiKE+BSGycBL8FtJ5xGmc2EuAQVi/lzaIroeZcSoST57YY12rN3xvhVtC\r\nlRF9vOl6jsT/X7ZPqPs744vGRZyODp9wZBiWoAhSSO++vOVkBj2U7wrxUe6y\r\nRZeoWu3PHFfsRZAgKdP1CiXtyH0qMYCac1xHqYatLXzuOd4AvTSyZQNDT289\r\n4agctjq1SzoZVfBc0qUvVL3j6WA7nRFq0GQ=\r\n=TvH1\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/embedly-card_1.2208051912.0_1659774463066_0.7747832436795075"},"_hasShrinkwrap":false},"1.2208081650.0":{"name":"@bentoproject/embedly-card","version":"1.2208081650.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208081650.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"beb9a33429ef933995a664a1aa534cf7ac0984f5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2208081650.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-NrfiNG+v4dD0ElsU7sFu38SCZqS4GhwJkM9jlRWQIAIS7P7EniwHrMWGCOQT9q/fH0Z7/sU0j2m+mMxXsubrFw==","shasum":"b6859e2a29b83b94042e95b62e8055c4432176ba","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2208081650.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEM0wYgR1Zd28XRXOUXoKZkXGcMee8FLnVNfS4G2oMm/AiEAiTCYSv7cyF819ZCyrAVVGVEO4Yc++qKCasvtUSf142Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8hpIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/fw//UOSyLdPRs7Jw73fMySrdjGrvWRQMvjchtes3KBmYLkOp27Hh\r\nG2hSWtK0pEb1gW5HidIfxkkrXkrJES9OGnhZTBZDwALqR5E788q6wuDzTNPm\r\nshzWX6yh8/sdid9LGjcFo3ofkVzxBUmUjCs7QtIMk/pXTXZI5AbMrc1uWn8Z\r\nNY+m8jlRtxnootgX7/Vw3iBPhiZU+COLQ+YHgTzpuv+aJGdY8YDtWJYN0HLV\r\nxxkU4sMqiScj+Ughysg3E/ZZZ65vNK76bADlccgAQtKvnuEi2r1jmsJF4Jz/\r\n3s16TXth0JbcZZb4bWIeSjKbyi5+A2EMrwajEOduPhQ7b16SLPS94aP2QhwF\r\n86NxBhBMQi4PPTyQ+RmHDrDLQb5/hszCdMSgj9p/TDSamgulfQLweioH7fF7\r\n/n3QW4LwhxLMVTbuCYgEn+2E0u0kKqolZrs5hti7v42Fa6ktFGxWzEcObZ0e\r\n+U7A3S/Fv2CNP52KJ/X6AgUUuDq2iG7UZUZa3QVay3scvN6KNNeoHc8gdes6\r\nXvHhRQuYqwg3zfklx/TuEPMOhA9S8bPWi2WKLXqSSF0MyqmX44R/ebBWG7yx\r\ncMJKwjLp5alhdq0C6HVjM7IFGEJz2m9hNp9pL29VOz9JLtXtAVOjNbdB/si+\r\nStsFinj/i1sUv6R+pKChh7cJDEMuI7Zc8bE=\r\n=fcUD\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/embedly-card_1.2208081650.0_1660033608423_0.1673098703431124"},"_hasShrinkwrap":false},"1.2208092047.0":{"name":"@bentoproject/embedly-card","version":"1.2208092047.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208092047.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"5147b5f8b54805bbea52be75a64d125a06f88aea","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2208092047.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-E3kwRZn8x+wqhWXF7sj8gHYIC6obERc5X7o5ksuCTTyWFVyCOCTr7V3/eKXJ0XPGaD2loEyf7E6gVzbAtmR1yQ==","shasum":"1d38efd7a142862558ca1f9895cf0d2a9af5340c","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2208092047.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJCg4EUaRv0zOOt24EwdOvJ8fTB6WQkAaAmfPMh8FZHwIhAOKOzfmn+sUDa+5Do7/tv2+1ai/GGkxt6hmnLIIHpJTy"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi82vPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqxtw/+JwqaEdciAjrp8cFVf5HslpvQ++NapwEgxmgqi7vcxdCMmXg0\r\nIEn96FGXmkY8Gxck7EFwCybb4L1D8vtyqNRsPptWyZqFPf2c3nevWrWloz3a\r\n5rAD4MGnhbz3k/6zEkPqqVUx8fbbYy38WFzY/CX6DCgiq4WPQmGn9E5EPxEr\r\niB7ulcS4eIpMqcnut/0+J/0RVCzmOH0yRk8M6J6JRebDw0FkT4PXaWtzMIdz\r\nQi0+2/UrxqecPfqvjzEP02s/u1XXSiDf11eZFSBo90HonMo8uzbVbpklaQLZ\r\n1fJsquzrM7N10xkGn/2Bp++kUYfrEmePG0iieYkv5ei0PJraq7+kVRy8njYb\r\nwDEaosWIev3Ckz7RYnfIohLSJ7zl+NXE80hrh7am1CmZRCQlgB7WNOIc4L+9\r\nLGU4horHLPdsVELmBxRzMlIQDlZDAfKbimpG7tOplfPN9+tqbkeFjHCOH17y\r\nhDh+dEZ3MavDtfhCgPBDj81625OR3Avb8yrFBrh2as9duwP7K2eqCuqbKmAv\r\nDLPcs4D8KfM7FxBGELwLHBuYi3bOPOYzyVrR2oC3vNZwIMpfKfzAuQlVdeFb\r\n4ExQUkrfbZl0kkF7RC7j9qj6om45f4XxbR/2S0wxLU0sXZ0rAK6Jal7augVM\r\ne78eHxNTs985ZgIhXGwetEigfzjuYkf7aYI=\r\n=jn24\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/embedly-card_1.2208092047.0_1660120015360_0.5966962570008649"},"_hasShrinkwrap":false},"1.2207281718.1":{"name":"@bentoproject/embedly-card","version":"1.2207281718.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2207281718.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-FWuX3bFoZ2J1eZqlRpoDtL3fX4iTIt7lhJk8bCqoNE2x6ACUW7zVl1/OJ6bjafNMKkRsN361HYYYp3W4tf4PpA==","shasum":"05faf245547f08bf2197022e5b39c10d13cde263","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2207281718.1.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID2hRpuKjF90l9KsVFl5Qe18L3qp1nGxtCjdF2cHIaA3AiAOPm63+fuH3mu1KN+sIyfE6gb8kLxeNZHR1pSdes7bSg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8+NKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS6A/+ITfXVWHtxoPmdlzkbbQoXVlrEcXGTftYFJ189/hwFBjidoV1\r\ns6k4EcUpz64SUIQiP6LCrgQ6jjLibGfxUqaJzQK+1TltdlhqXRkRCYAQdf/P\r\n2gmaV9aejq6nfgW+o7hsgHXgJygtQ923zpclT9ZGaCZN7+HRgE75kVBTZdlh\r\nlSXM9tkogjZrR7MmA7eg+qSVLuuDcx+Df5xXZDRyAS5nRGib3lBuga6U/Mn5\r\nwRSia7sMFkl22r046q3w+DJ5AP5edXi4bVCCkElnO0UROyEJhU7CYgTBLwwD\r\nqHZFQCiWKnHcTVhFmWqtwo7fvuhJXOlGIik/oEZUGyQE3qGce4BzBA7F/58C\r\n20q/7hC1aNYrPG8o6QgFz+5yvBzRNMVfzIgb9LrsfdQ1mDDrxu0fbLoPhwTb\r\nHQO/cVrMt06BGPFZWAOo1HyjSGA0sO5J5+WkYLJOFlXhyg0Hukua3JDRG1Ho\r\nIRHe1U2fmT1nF5D2UG3l4pfI3VlbtYaj7a1xHWrJUvWgEr2jfv/WveCwWZGv\r\nVaXOezTl+wouBx+VYQT2HXECOHIf9J8F2VSTfZDT5ABPehLgrBvT+tioJALD\r\n6KN0Ogj6/FiU4HXILJsLCgTyJyiniewXMRBq4/OSErmUyEV7aACBsJYGYefP\r\nAXBu7Hea2lF3J+vfDwfVnCem/JRhTzswE+4=\r\n=zJ8V\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/embedly-card_1.2207281718.1_1660150602063_0.8355699588085954"},"_hasShrinkwrap":false},"1.2207281718.2":{"name":"@bentoproject/embedly-card","version":"1.2207281718.2","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2207281718.2","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-G8s6e6FdAGFKoY1rerCi63D+q8ys5Bp5fItcQn00IQ4LFJYYC+eDh7lQmX3V4sg8ejKH4bcorAnZfY4WWEw/gg==","shasum":"bdc9355de02f1d47e8d197a68f08f11462e210bb","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2207281718.2.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFVSFWInMxN/Z43Hnb2LDqZcURece0Fks8I6bVcmQv8xAiA13WHfwrEaJR+VbQELZMq5NL+M7NjQ3DjKPMTOCYqEbQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8/WlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJDw/9EyfGH1zn68b2ARAjI18FUTZBeHppjN1aOrwbzIrcIrpcT8h+\r\nYlm5M0cIbMImn0OsgMWX6tsIye6yuzz8yOjk6rDHDM0FO6U14AV1GPjrQwVA\r\nV5mFqkrNYaCBzTKTxpUt/qxoyt55+BkOj+m6e01S8lptgp/xdNEI1DDEfj9U\r\nFqPr/U5PeBScpHhh0ZJn9RchWfQuMx2PUZugJW/YQgC6PAkQ8gyLKDzg6aJL\r\n7Ou82q9B0xXiHjLqfR0u0ajzV6JeIxJChWGp2JZAG3SmOgHgoiwAbYSAdBV0\r\nVdyrbn4z/7ta7hW+2NLVMMC+q3KmSA41SSC5kjjpTLOFHBnZKbO0+AQFDLzX\r\nOfFUTvdF3No7iyfbFipC6q+lcQxAj0u3DkXKZp5u1xtNki+v3x3QdBPkkMyl\r\nTIV5MDs8PDPEP5JQWa74lRyqhbm39MFUbd83ZcSb4+TkhLvvnuN3R1q9zK8R\r\n/uU0X/1fMJnM69HWf09F+9YBol1s1XKkZQ1fXf49JyWh24d1+UOlynbLmRqL\r\nQW3KboILxsDbg7AY6MmcIUacFy5Hj1w97QQ7+vC4z+NwsPRvggCa5cAtyRi+\r\nKrEaMXqMVrb2+H65+yf7UqWaAMf7OkTF+dkiWJxK6cvgaiPdd4lLIjyrwGxb\r\nb0DlM925OpV4aAS4E6l+GUgVZ8DqXdzjhxo=\r\n=ZKE3\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/embedly-card_1.2207281718.2_1660155301373_0.7027674766306933"},"_hasShrinkwrap":false},"1.2208112015.0":{"name":"@bentoproject/embedly-card","version":"1.2208112015.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208112015.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"83d345ea27d61c78ced5f68848c4f342e947fab2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2208112015.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-+rvUF6uDNQ/okvRY2dO+6M5ULIXEcOQIrY4NAw4OBz4UTfT798GEIBxMYthLSCoVPNASG7ymAz5px1LxZIDpNw==","shasum":"b49af5a20e719c151d22a174bd5eebd23b119783","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2208112015.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5rD2G+aO4DLfRcke1kZ6LAisGOabaj8v+g4a+FgN1CwIgXmvkTboYQA4wxbfgWYPeTlyUna8EUcvCtEDInOQFVQQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9g7RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZEQ//QPVzKpv5gkobcBMOA21DRgxEMqoUjm+nbhlbPICzVjwhmIbQ\r\n7QfKyK9LsiBCWLtGi3XBdf2ATFKzzXS1TWBxQFwk4RDTBqyTwg53XdhwK52L\r\nqXWOS57sqeVEnc5DWhjO3F5ggmWJM+IuI6C9A6XDrfZVAajY2sh1hywiQPsS\r\npBA7AKbGdNIcdWJGNUYiACyZYr5n34NrRrUuNuOHADm8p3+Lopgiqul9mPRI\r\n1FgdtaxDrETWGqWy4fKYDFFZes/IFYnmdT/leZdMmZvrj8TyDB0ESxtVJcN5\r\neDQTbi2xlsPiinc9yLJjqbRIRiPO/wRtnQhz2XOtWFLO1/V+hODmPYt2u6oQ\r\nY35E+tNZz9VU9rTn/ZWPsXQreiATrhd6m1319gn4cMOEwLMm3pwVrlVdO7e+\r\nz55xeKKsV4e7QMPVjZSWvL9cldlPKwylRzmnAJ4IV7hoxEGVBZIWcM2Ms0Uu\r\nlGVhxQE7pd642t3cDJtRcVo0x3bJB0E2i0JpLLPOrqqtk9VsxFSsWcwROM4M\r\n4B0agpKi8H4ADMKLZGiGJFssmfhuLyF8GVmBIdTwQFzb0Th68zy7LGFv/BBt\r\nbIkl703RT1H/X6SV6dyEI1kplsSnCk+ImVyvIbaXosx3IjP+fd8T4HAgdrE4\r\nJpSw+i2yUxNbXjTBiU1LCG5JNiCJBBMMddc=\r\n=Sx7e\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/embedly-card_1.2208112015.0_1660292816785_0.6274348923037567"},"_hasShrinkwrap":false},"1.2208121708.0":{"name":"@bentoproject/embedly-card","version":"1.2208121708.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2208121708.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-7sQSHMIlR7ftaI4tTtICQC8ady4HjUDg90tr4Btq9KOatra/UHAEIIlq1jngd2mzC4ATvv6d8TJUXYxId73VbA==","shasum":"5c0b1c503ec4bfc11a8ad1ac94d4fa91585f801e","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2208121708.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGySdO+OFE+iyWDYAdlChDiNbun57SkKHbUoDZ6psKTAIgLrHMLhi97uqthhOCn0rXY6/CjLxv7ZeVTZ2F5fr9g3M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi92AgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaTA/+IYPUUltvvSY8m7XD3E0FS6qWSLa1posnHppTeoJqBXgqDelU\r\nuGd/kBU+TmmD8K00nYE4goj/6teZ/LFeRzc31Jw+UplOq+P+Zg3ViEee3ddG\r\nnAqBQDvOZakL23n931vJpu/eK0077ub6/emcO8cTKgJPAGx1q/vxX9U2pajj\r\nLowVEe0p8vcBmWMTKwaxEqu+Vvl0j76W5GKrzwE6H4EqRkMK+HXtC2ACzUkn\r\n9KwAupp9K6WyVlxJQgRC78GglGWgt88ffU1FWMvsD8uL+3OLnpM3L9JDlQfA\r\njMUo/AhjPf1fky1zyx+Hrnt5I6e9Fs4cMZO27OFwXBq7As+/9OFYW3aIbMef\r\nK0KV0crCWTxgR2vnudsF1hTFeD8SYkL/pB0klDZYCLN6H/MXeIrgpSxAWoIm\r\n2/dXaXpq29yPxMpLgO+ES9HbaqGcsbdfC7NkbVuEPYIkvttZfTxOcc89EQP8\r\nYOJp8M05KT1ZmSz0ly6gDRVeBCoE61mWLdwDtmRLpla0jGOv9Zi7g4Q3Ssir\r\nwbVWY2AKnXCZ7PALG13/5U54QyNKwaGe3c5nVOhUGMi0SUdTQlmGVHLOJhSq\r\nb1wLl8vcb9IgZoZVtVLUhlRypWCElxsfxLC/QDqeXOSN9uZqbTBC+OVFK9HL\r\nP9c2rFzr1+LqsTM7N86bfffX4uMimOJLHok=\r\n=bu/x\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/embedly-card_1.2208121708.0_1660379167860_0.4776086466896847"},"_hasShrinkwrap":false},"1.2208051912.1":{"name":"@bentoproject/embedly-card","version":"1.2208051912.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2208051912.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-IIE0O26iCnNEIh9aEhfM6t4+s+yDHkSuO4ifyBk1TmYIGn4QkRkAg0OMHC7MfNoQ8IOTOyPbfvpPeal12s4eKQ==","shasum":"f57194a420a36e20f26ea167933b30bd30195cc3","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2208051912.1.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtCrRW22Th3nnNsFTPHWeHaxDCsxIQ8980KObDsF+8zQIgASGSjAUTFsvbkMnKh3TdPT7rKPdNqfIKtMsEUr7mTZI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi/CKqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwshAAlNYRelfRzUALCzgsYonxfQrQDCUZS/9foEq1TdXG4DkH0MvS\r\n2cEb4Ax0Y2OhWv1X8+i2zse0CoIxlKqvmd96l+pUc/wprOtXVmwiuFsnrajd\r\n438ycRAhn0IosV8i5f2ERTWR6CXKBz3hVM4xdJQHZpjXMoKETpcXc+g/GADC\r\nvll7HhQmOE9xyl+nBdAPWBGAscBLXHq99nX226UsMNoFfEco4EJm2WxNqL+6\r\n3HxYcyyURa70/UCTgxpGPjW0TSmr5Q4F8L+0/lhKS0cWebw1hQiU+Vyiq6cI\r\ni7mQHrIA+bpqK/WzZ7RpHlEMCjQNZshgvZv5SGBFue271VkdDjuG5lcgTA1G\r\no6dgJMNRJHlmyzy3Qj+Vj/ZNkYZ40lU2i/of9AduUXjIxCc4Pi7R6412dpin\r\nHvBK97BfM+IqLSsrnkBehyM+018dXN3CVzOarKF2FieurwWiuqg0hUDb+S9a\r\n2HFyunLpMjok0QZwcZYLcN+R0VWomG7HN8XUipS4rVKsu1Efc1jSea7wBht7\r\n+Hi+u0Caz8vsLpEmy1FQYWT7Hi/bcYVAb9HYcj82irb/VYrHubyzjtdohMgH\r\nlcSyRsg+u2fiPzk+vfYtIeladHKZGnv1iCo1Qi8DVApv4+wpuYw0lSZfonl8\r\n5/K9XAUMZq5tx7eH3BFLvBWBdginjkv1Fdk=\r\n=ip+F\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/embedly-card_1.2208051912.1_1660691114647_0.4600004632045256"},"_hasShrinkwrap":false},"1.2208172101.0":{"name":"@bentoproject/embedly-card","version":"1.2208172101.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2208172101.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"372d5623dc25138bb97bd48cd5f97f3be8008658","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2208172101.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-8Wejfg0X3y7uxCQQS+uozdC5TzcVwfz0FqsRNC5o6ppOYr3R1b+MnxTrJPZn6C6MLjn1yDA28TsPA2h1i/ymmw==","shasum":"8dfafc93f06f627ccd55fb158d9cff47f5bd4013","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2208172101.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfWtk6sE3AgjFwFFI9R8sI+xcwpwdaILslB5uJUgrCUQIgKozxF/3DrVcs44+GvAX7NiL8/EAtxm9/i4agWhmiajU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBpATACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmogug/8DxmIikj6vUdoQk7VHMnkW4IPAnpreavD0azz7q63NaW3nGoE\r\nprO3onjS0E42VHBVVnxwgqMNZqlAuyxmDk3gMvBury19tD75p7RZ4iUF6Pf/\r\n75G281m1IK6UuI8C7Z6yhI2aoMU4bSf9ZDD9phXOvZ8lqj9AXK0iICXDeuhM\r\nDbBXPQ3cL0qCSuSa/c0JSvdQIptPW6zou2hkk2a6mWEChYyL6S+Uc3jKUy6d\r\nqR35HGWJNguiiAg3uCBxTcdMR4xX2ftduFnCoX+v/XEVEbJSEpd8kwEBmbFH\r\njc53AEOrUfmU4sd2OntOfiV5owejnJ1ZSwu9zk6paOUHXMxV3HueDjPCYMFM\r\nLTeEG2PIZY2hJVCGPAaRraWXtUfBdEg7XxQpIsPK4MxSozrsrvI466X6p5T0\r\nugIKyr0LGVGCMMRqMNUnDUrLRBGu7mcRXDFpBDDeLKLV7riDByC/2E0M5tPa\r\n+AP4S7QouEGz5rfY/mZlS7nd9BRzRTMtVwwpsK08VcU51fgREhW6pGNC7oHO\r\nl6Rv5ddFi6A9cuU1+G+B8i0Fhj1b0OqIHntpl2gn790d0DwhkwCE/5inpwJg\r\nvABSIQpMQWDmtknKEQCvJW4EoBulehopicsVg/POthUdd9ZTcbONsqF5JFoz\r\nXjZVhu9KICHcVWkypicqE3OBsNOIxMFhkHE=\r\n=TCoe\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/embedly-card_1.2208172101.0_1661374483161_0.10333591739292602"},"_hasShrinkwrap":false},"1.2208242209.0":{"name":"@bentoproject/embedly-card","version":"1.2208242209.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2208242209.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-342IJk4KUo/D/SvogCfMFil9Mv4mEppvcd8mURjqZHNBBBXimN4ca5ZebkugRFS2PBGGvZvzp0C6/W88Tl84dw==","shasum":"bedc11fa8820e487e7d1b33e7d91ee19b3f62117","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2208242209.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIExDo5UAidUcXDpgXtbV/qy9sTbsYTpY/q+xsmM4h+g/AiBzgQEk/0U845sJKszlbUWIwFOlv3tVKYt5oHN4QS3tAQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjBzIhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqARw/7BikaR6DVrZo8RzYeEakf6liwmIhT8NewzGQ72MRy+mc6YZHi\r\n6/31zc96PFDU9jf3rA/4kuFz+tECNmHRm/XSwk2nouQ5I6vqgsuIFufKVo02\r\nA0FkxZgwPv/rcAEmSgvTWTDHLVkgYs9pp6mk5528ArsAMaew6u7ZNGmxm2q9\r\nRLlAlVThJLxPxPvbOuakTJYO1w/pHF6IwtdOf9E+HWBZAjzN4GR9xlGSz2TF\r\nd5D0a31F4NprhYORC4GaAFrm+TnRgw2rhTE+BPWFvl8Qktyq2CqgiNURZIOp\r\nQz0FmXk4CN6VJds4tqwCqur9sGNjDtupFd249QZ4IQGHyAiTMB6XUversVEY\r\nrqunKvQ+8Y5cUexm4tItwWWFDe14+0VXuiVdQZsPtJrzPCP1MK74sf3ysabD\r\niBEhtQb3IjhuPKbcH1uAyqNa2n0KPCw6qjovc8qNFfqU966X9KwXFMvKyYEy\r\ncgFl9io8VGh5/82KL9ir4jICGfAThx5Hn/kde7IRabFtvS39evJ92Vuw1Tjg\r\nz8Xw77my+gxQgy9c9OyOmMX3KS4EHTNrK4kTID28ic8k1q+83099Vp5TsVlY\r\nCVlpwitrDOqM4/lYpDd5fDbIEiYxAAUP5EWHiO5aka2+tMr2DKhA2vnQEMht\r\ntlrK/8ef7mnXONVyCk4OdxJa0ikcr1GOmWc=\r\n=pMVJ\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/embedly-card_1.2208242209.0_1661415969477_0.346834390253306"},"_hasShrinkwrap":false},"1.2209072154.0":{"name":"@bentoproject/embedly-card","version":"1.2209072154.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2209072154.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-tVD3A53f9rXRffmbt7+iK++h6qS+grqPl3aWjY1AOggjVRHPuFqdPRudGFwvld/g3vzW8CKNlRbAHnVKpWCUjA==","shasum":"cd8cceb9a655aa0ffb91bc148cd4e7732c0f6cf3","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2209072154.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFNfRmDvK4t22S6qtISCyoRt1tgoxr+a3OQdgkqfa9YRAiBY9xMZqXrRFDKKS8rrOfrEVdWHTvhOsy3e9337b7Ptaw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGabDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYJg/9HnPcyBXiwRb3qpLIP3mkw4HxeWfm4UHTdxz9LEtNgqObhEwc\r\noGmyILxR/+HPv5AacIVRTDQWM5drjb+Vbo43cBiiCRRpn/9pe5V8HOcrRDwq\r\nci2IKh5S+dN1RzhA13x0qCrcrNuvBwghrKquKd71vXZoQp9460l3MdM9rfAo\r\nfrLOzxiPglaJl8S/gbEWxCnnyoKyZTJPBU6P6msuRThj9dVHIq1sKxpHdLX2\r\nsng77qle5Dv6rT3bdM+ISsdvap2CEaFZFj6A997E4hxDhYC11wFX/XJAOGAq\r\nplJbMwABA3fdrD6JoI8lKF9u+QjkcJ9bxlL/kw3PyZpAVHVJ+dVcw5fRT0HN\r\nc9oVpBE6OYrUivHjaNnqwYa0vTJ/AqrQ7HczOJsNLpO061OHp1iQT9gyJxVq\r\n1m/gjXErOwzUB59+3xw3P/ucMxd1y1pi2ntNrTvwFz3MVzZVkt68AQ7Mp55k\r\nW9GWDWKxEEedJNuMLvpYtqtZxDiPq71zVcMfRsQkXlsrGtgXmDFTjyXqC0C8\r\niziVSqbUkGvb0aUoPyiAW/Jg29aCcqxlml1ES6CX+eEXXG9p8DV6pCwiF91T\r\n7tfOYLWSkZ2IIMpCN/dAvByz7vcekS7U8Ey25pET/XiC8NOwBjIc1+ylvH/G\r\noEMNXWpeIctSZM5Ubt3mlz3Oq87FjznN6/8=\r\n=BrGU\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/embedly-card_1.2209072154.0_1662625475424_0.20030245067559838"},"_hasShrinkwrap":false},"1.2209131909.0":{"name":"@bentoproject/embedly-card","version":"1.2209131909.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2209131909.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"b912a3976adc47e6a81ae645cb98e51d1e778150","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2209131909.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-9+2L8xGKsMvqVZyeDn9mrNT38W3mx3zUHYFp7Bxp0ERq9qPqRab7GIUd0S8/XE77EzzpczBGl0pnQh+t0bkggw==","shasum":"63625016576b40216c760704e466c612b9650946","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2209131909.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAkvH9ZUNxrxgOl/UKmWIr2iHqzc7sBc/bqB8jHRbdZVAiAInesnaFsPfebCaa0lDhwnkrV7lD3kv/02W39yZvuhbA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIZRfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrO5A//eAblv8k+zLcY79B/852mG3tZj2sJSIqWWKI6KFSnt8sm+Bo/\r\ntAY2t40zhxqvi3MEw22mCagNRDhKaCh4toj4/3Lyxrp/kBP9zUXXaPpW0Csk\r\nmXjAOTCdcaBymJ4XXb5tTKW8LE3ZMpjrv8SnctMYs/jjfnGPtnG3zThWhFJ2\r\nDOv6FlgksL30x22opJoDc1HkQHD8F5c0On26qWm7U4anWFCEebXzM3MH+g74\r\nZCWTuzc1c6oeg+3WdFw6Bi7NwL0NbzNz04HmWRH4VK4vwWUZr12l+1rZ8sxn\r\nWlZv+MSRjz+Gc/DI+/ertINC3DmQuFSzLYPAdT2d6ezNdXM4i3oV7v2vF/0o\r\n+ZDpxTiBor7ctWY2VAKBYbaqWz9E4MvWEgmx+HlGYV0X5yMVkTC63lzXqm31\r\nXSXaX72hkka46nhHcBTRYS8qSIsInBRC3nLG2qI75HpGjFCFwQhodwXpUCrM\r\nxDcFwM2XPwuei/rTv+2Bjk/HECBTOmM+4006lLxghMLc5Cwlg9G59YNUE/RO\r\nyy1Ac+OTNbDKi87AnjBX2sLDodc8wCj/QSzrXf3V6BiTrW+Ng8WsCjuWpSUO\r\nyyrjApqtKRGocjhWcNRE9G/cTq+3wEtXBH50xZxKaossHspKK6oqvxTa9qc+\r\nX/4q/dtu7zAEHGIeCeluyz9FSWbE0Pmwh/I=\r\n=2N+G\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/embedly-card_1.2209131909.0_1663145055149_0.9075563268158777"},"_hasShrinkwrap":false},"1.2208242209.1":{"name":"@bentoproject/embedly-card","version":"1.2208242209.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2208242209.1","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-xZ3nhm59clL4/oTWbMqsPm23Wa5XaT59/0Uo1GTLSbNGxR0ZcuSOdAqELc63iREOAxpYsgo7ccteKJ7ZFfPavw==","shasum":"11317eacbc9bfef1672d807f93e0d3b4bcf5d9c3","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2208242209.1.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjAQQoJczeKLgiAJAT0KpDGV2oAufUOwCSAmM1DxBuDwIhAIXUcPZLkq6YZVaECLydmPruWe8GANPCS9C/tgHZxyx5"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjI1XgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodAw/7BB2QC+Ks627PAG8Z4sWsFrFsk7dCCYn+Sr2tk1p62/6ldwm3\r\n1MuCuok5N+e04Q/Nh6uJRYBX3w7wrYw8qKpjmGqOi0KbDyxfEbICuTkjUpT1\r\nSbkSgFd+ylsmcpXnZYOjV0EXhyT3G9Do+hud3GRZONc6bkrMC+PZPmcSjTUE\r\nX1pWmc38iLY+ic7oZjGG5UVy67iVoLGHuo2pbo6Y/gelvUkdOUhlpyk1Mgw3\r\njwpRMOi7QrdZssCD0SDwUL3yTEN8r1LnA+28SD8UUyhTZa1fp0WLPkFW2p30\r\nJ/VHS0/BVGcpjCVLAWajwV7bYD8fDar/ea+OszJzZj6hOJBwWHPDz0Xe5Tsd\r\nlCgW9KN3yVvdP0XiHLGAA+Z80hVWpqnLnj8446/9duFlhZJxG75hlOI1+Y5X\r\nSUP5GZz3h/l1qsA/f4vD88bTS4EujO8HxsmgmGK+Gr2rhe+0Y9b0OgOeNov0\r\ngc/36Ko6PbAkR7LvIE/qULnFL6GpFR87wOpAEim3h4kp9B9Dz+OQX/zPifJb\r\nBOUhNgjFtTGICFk1Nep823p7ytDXj7s8gQPA5Nx26gPj0NvmMBjNOvz9w0j2\r\nh2g1OPQdwRVkNyTeM1v0OqZiHlL9UAwz03WFSE/lrRMVpEksNfaeF1dWoXVq\r\n5i4yFFZByc7jtLxOuza4pZfOaJdVKIp6rTw=\r\n=vSN+\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/embedly-card_1.2208242209.1_1663260128475_0.5811705399059788"},"_hasShrinkwrap":false},"1.2209142312.0":{"name":"@bentoproject/embedly-card","version":"1.2209142312.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2209142312.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-RnpmCpXvPOxteI32EPQZBUddEvSg579iMQZ3dvm3F3bRMXYZQkpjIpvRTZ1BEaeyy1yiZ2DFPZmZoi3dkTH/lw==","shasum":"7682be739ee47710fff30ee27e38cf08c36884bb","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2209142312.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCna2xjnzmG8qmOlZKoa6kA330P0N/aJoTHlfGmWLX9LwIhAMFojSyuXDcYl6KYZbfIy42KHf+R4cmoQv3e0rf23zRs"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKjmKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqx5xAAjnMSBghenzUi2Kicc6Oqh/xYLiVIXSd+JbMmMEhDOFOiXwoU\r\nQrpPLBBiUT/PxvDGHSUp9XA71i+zMeSj/Ogy2pqZglpu9o0scV6hwNEhAC5e\r\ntUakAeWlGtLz8nTEuGdgdxgSr2wyu+Zf3YqAxlVxxfiiI4zuvCzyzH6gTqXt\r\nRkwjWbvsKKBgeHuqA9nouPFKJsYau9wKAX8mzoxqj18Ey+AQh7OHH4M9lpNh\r\n46ma/HYZjy/PAq1j1IJzBvaqzZhBCDOCVAfYObVAmBYtn94I8BO4oqzlXD51\r\n0lvOLmtx6ZqtSDgRUPwbw3Yy3JM+QKO76omE1RbsRT+3LoGR4YB0OZxGXH1H\r\nDL9bXiFz5pcgXB+D1Oq56msco2FV7hr6+h2rV9NRBXgOKmnNu56aENECfUTr\r\nxOg6Or7W0712LgUClRMWQnPR6g/BronF7eFpIKfxLY77b5OyspjjDSIZl7WO\r\nR2Jrt8bCNjP2b2co/rq40SvnrXH6Z+udv9ioGA5NeAwW6Vegh6SDh9mwlJRe\r\nMD2CrF6uHPvSadsZUoFxDs8JOHDsMzi0w+d1jCPKRGV+Kk1OzPNVkoyxTq3h\r\nECfmcFY0cCstsari55x4lf7zMvIokdj8b22WQei64/3JaNepqsl9lRl4zmQ2\r\n0l1lcbJsuQP6l4JDKbeyx4qZvj3SgOxccow=\r\n=B/mK\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/embedly-card_1.2209142312.0_1663711626281_0.48948570237714106"},"_hasShrinkwrap":false},"1.2210010655.0":{"name":"@bentoproject/embedly-card","version":"1.2210010655.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2210010655.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-hsVthSb9Hrw44dzxP+SS4/amcfx5GqJx7vu3eus5EZtu0C3p/JsZO7JIO2LAXlM/e965GGTJQzJYIK0NCYJlHw==","shasum":"a1df1591a1cafaa071ef0b4f73c26ff7af14ffc2","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2210010655.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLtbcVpA65KZDgLg722wfSrcON2ZCAmJkBE8gvdtpuwQIhAI1FcNLg2qjzYL57dekbTv2HssGWJ4AW6Yj0lPbbmxbw"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGPwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmropQ//f5e9xnDOumEtgvqyVLFaARawszGDlD/kQh/2AQKPLvAuD28t\r\nVJYY1cqukGYwTArbXpEawHM0htuvIVXM0gXxcjBredlHkAvwQPuC0+id3oUL\r\nLChQXgO4CxRq0FkzX9eg7IwVYUvEObYINmljgQ6vEVfzYZo/cOl13m7S2MVd\r\n6zfLwGbU5s2mvTaZTQwLI2Rl7KfizwrNAxQ/D3Zc3p50BoEC42VbM9aKjiKe\r\nnbFp47+93R9z1eA/nf2SLv+do5VY4qW6ygEgyLF24purHitVBU0rOSqkw5DG\r\nrgf74xfNJYd3z+d/3TU761Bh/2Kra0+oQU/iAibq2s5PpbE6loO02513uxMb\r\n1h0qS/ZS5P5ApjiHJhMc72XW4oUCVfMackB5b6tAaHHv0G7CI3vLrCJuX4rG\r\nB7EvCrAl50lh5m+A4MH0go406gRevK7i68k7a2pn1cdMLTl5DoII38jXHVcu\r\nw3JyyJqo25s8ROHC7tHp0L2ntPTe+GKLjWLp1WSMO0LUDqbbWsbST+X8Opm/\r\nwm3aw44UTJcsgYwTCWa1Bo+tBJ6KKALGKkmwtfx7Yw8bo7fi4XrE1SE3/GeL\r\nOTakV517vn4ygPw4l1W66OL1U42oJLV5tXj5wff2s5m4d75mSb9CmCd2QeNa\r\nFkQw2/d6jHD1yUFs4k7mUWEFTAh+3uc5nyk=\r\n=JiLX\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/embedly-card_1.2210010655.0_1664902127834_0.03843067968800873"},"_hasShrinkwrap":false},"1.2210041838.0":{"name":"@bentoproject/embedly-card","version":"1.2210041838.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210041838.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"e79aecc1c4639b06a7f2843d961bb14f293a53ce","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2210041838.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-mKlwV4H2VBoHsRobEPcG+uv0OR0Bj/vDb2qGEwo5AuS5IgLy6AUHbI3SojxNS7YL8lL4jP/005y1rmrL99fifw==","shasum":"d16076801357e62ef3ff014172f0d42446efc400","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2210041838.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHQzZlAMWZrh8ZANv/gXJtrAUiNe4V6EEBugd6acZ0pgIgHYIkoKd9xobTq891AefCoH8CZ5yyt4sLiL7VXZpPcbU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPUByACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxfQ//Vz/wcJyGQNNPrHx5zzfNoa9mpLfH9Ff7IBqC59geqMF/OX8j\r\nfXx+tBuQ5yKwpuOQ9VqeHbrbYeSgd973MmokTrJtpNMYnkMXR39xqEgCdYYP\r\nYfBevl/HDSABQzCwIlo11lMuMXQ19BJk0r9Vae7dFdmACIlVz7VLV1BOvJw6\r\nX8l6KR4A+cO5Et/dcGTGfhwuN0wQ/Ocksje75U1fEEPkR3eRX9QDDGCCEvmW\r\nSF5jQfm+rEeFHU2ZXN9EJ3VeDcgeTzJb3iQpbhMNk9JvJHyBX4BnOVnMcc6m\r\nagQqX3eMK78koWhOkD6L1xI0+eercErQc1Y84TCgsqrnfHNrUKy4Au2IM0/C\r\nZZZjcIqslMuH7MYtj1GtumtSsK2wH81lMBESbdwEu3S6L6GfJEibKhSIvmxK\r\nitRMkMS127+A6GCdX+lSn2V2VtPxBh2l8tmSKoA0TLnjIyPHoPw3MIytrsOh\r\nRGj7et4ZiR0czoMt7jx6pOFR+6ZyiT+bC8Pz0lZTpgMulOvJXlLBOIcVjr7N\r\nYAZaml1CAof3nsxpO2S6IMTOIFtuMrgV0RhpspMjAxOacLTdQ/7BKmExjTnn\r\ngmhoIRvW4w4kweoPLHb6f7L6tDFCXwngPo8f4FbOvfDYysHtqOiTnWZYho+D\r\nNxPjHYiFC+BbCtRCwzO7LTKC/+/EnW0izNY=\r\n=gFb2\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/embedly-card_1.2210041838.0_1664958578183_0.9637374709378432"},"_hasShrinkwrap":false},"1.2210052034.0":{"name":"@bentoproject/embedly-card","version":"1.2210052034.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210052034.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"8a0a0067f57f89d0566ee1db3d4bfeea072d3c56","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2210052034.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-3RehWCJRZtnqlCxXhJ4rT/2dbn2DQhu+SGn/vjjbR+Sq1iVFzwyUHSvfhx3wzGqKGaavDFyIxntAQlpOCa2TYw==","shasum":"771805685622fafd8ed1af14630601321a44e649","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2210052034.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBsBTfBjX4kIKaRQIkw2e29SILcPE/uK2sYcM2zP1lMVAiBK5hnLb0GmJWHBCy+tZz3QAArmOJwFb7LPNsh1+piqbQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPpDsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1/w/8CR7+tuMAw5lC2aAAqrRWLRVJagfM2pcwyNiPgbR5jsFTYcNU\r\nMU8GB3xuc/rEt1spopQoqjNiL+LmWmZT/9QQDobPYqeIrUNS/RrvB2HC3Bza\r\nru06+/IOi5v1f5IUtG7JXyNeXUSlyq4QjFpCyTigm3L0SGRQrWud2IPz7cw4\r\nzd+vZ4Yz9zm4hN+qeUlFzEb9mxoRY0sH9/MDFj6LWuwAbwEcMG8oY7eQzwkz\r\n2cC5KNR0yFxeQWOQxkL5/pWfdz/XT6ezjFzZQ9ztaS7jNrAqoUX5THo9aQc6\r\n9EnnQAwBMpxYTgjA77pS7PID9T7dGi6KQQUUFRDwIiariZH7uhoZ/GA6YxgK\r\nYgMrdBR4jhukXtRRa79io6kttTijS3llYU6byyHhVSpdTZ9Z4F8/R1J4HGP+\r\ncE67hcsfoOqWNwm5kIcmAYJ01qLr7kE+UHWRUKmfYV0Y+9iRKr04VZFQM/2Q\r\nR77At8pQWSlVpyR4PVQMlO8cypQ7AEe0i6sAajVTuFKEzE2l5eKIeT7hS7gr\r\nNySAOCqyyFbI32Ve2JyNJ+hmi+W7RPmMcuGZDNaPKk9r085IwEiAojXNzeDE\r\nVeIxpfi2KKEejGFe7PB00aYV6BgukQf3EKoBy6aYvNV1N0p/UB6piC2JtYXM\r\nCAKgochBfIoj4zzris3boRD8NySadOl8QOI=\r\n=8eVE\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/embedly-card_1.2210052034.0_1665044715869_0.0493667885096456"},"_hasShrinkwrap":false},"1.2210071758.0":{"name":"@bentoproject/embedly-card","version":"1.2210071758.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210071758.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"7c969ff5fd5406304f6a9867fa0db59b74e94524","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2210071758.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-V2kitoG1ZcM1DMRrHwpmagakn6bCfv1oOnruJVMU9r/3lGl2bXze+neoFzX5X+WxzLSb1IilVlaH4Aze2qAPZw==","shasum":"c4cfe4b9249d652ac9c860522dbc6b691025d716","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2210071758.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRnWcGIDd1AaPfAP9Av6g4aBFlrfbMZB/3SI8rjzRz/QIhAICYxkJbSjlbD+wSanjaEydcwQZWG1UFkKAdPTjRiI/X"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQTP4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTGA//ZhT02gvyzhh5uDdJtcT+4cWOONBMPrkqoKBkFRsP1FOKV7wg\r\nHOfkW1FrB+TMXUaCdLScnwHP26qjAvoYSylRwHhbZu3lwkxf/pBmdyssOG44\r\nOQXqXseRzfBlRsNz2Ofkr++otAu1xEmADNglTn6IOrqlDxs+BgIBlsh9deVc\r\nxmakbqx7jVAPHzpY4wNijROAcxZPzT7PlLPeRiMaJ6IpPVEEbwTiJUSp3tCx\r\ngN9dqx/Z2TMZGV/ZMjfDZxmSpMruHqIGCj8ULXyA9AHBP1XJuBc4393n9DwX\r\nKmu/X5F0EFZc/zsLoaBbk/Z3Lta0kyA+gJ5B8DGwGAthSO9A57/mSoVqePN1\r\nASQlvJWTcXzpjythB3KEwqmEBgboEUjbtf8yeuGERZtOj1g3PGanYoRmgjl9\r\nwzxg4atSqAQMEkjiBWdVlhi7F4Snnrv/j8nP1dDt1HWjGZL/UWVjdjtCVp3B\r\n+Yi9h77Kcl5DomprXuDJxA9YXlDhIhIQtIixCQ/8jjWj5l+IZivuE5RlYy8x\r\nptBFwtSIGNKzBV/yXJ8tht1wMjxp8Ln2dCGhQMOQlHOkJwSj2vG0Rs310rA/\r\nB9kAbkfTB+OtDnFg0s+HgJdFV4J16ydtaMNCNIq+jEhxqNQ1RtZ+iLPxag5L\r\ngEp/Ywx0y2vacvMIK6BK4ueDag76opLq6wM=\r\n=R+uW\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/embedly-card_1.2210071758.0_1665217527638_0.09464430083986874"},"_hasShrinkwrap":false},"1.2210112333.0":{"name":"@bentoproject/embedly-card","version":"1.2210112333.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210112333.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"1d82bae06844d5413aeb632cfb2f3ef443548ad0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2210112333.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-tZilWHSTZbGMzL3cqFkH3bntUzgQK2RbMCBUaCZv1Lfrg2xrBoDiWgxmP+77ajZ+AC66AeNaiSYFJYrIfCcBCw==","shasum":"97422b2c423e65b759e90ab64145b07d24a77c86","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2210112333.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUc2EniYiosfw/psnGtCjU39VT/IyzqrEV7SC+zXP02AIhAJCvzEWaoKWJs0jWy9qwKjtukelAbo01azrsdPnrNwE/"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRnm7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpD5A/9Hg2iOpPq12rqomg/XQPBFXjIxBLqhPIbOJcapJFx8m/lcxY8\r\nAhwIuHFXy8qTlLKaHv/grsBamSlevCef4/CEmA0aejWX2+qRGtPxopLF9kYu\r\n1ZVkRDfGVAHPt9GGkGWuQ77KhpmOErTk9m1nxCpPjOIU3YnzJpouGr56W5H+\r\njMZXsqsVSd/XVig4Whxz1iZKKvEXWM3kbxUjskxdp7Tgd4ua9Jvg7keO+Jpl\r\nzXECt5HmPh9Be2EhzHDqj+iO4Lf/CjJoCKbO+bcWS6t3Fztx2TB2yaYGq7y7\r\n4lJQopt36euiNdhe4CVui/aJSL/0MgJlFEEl1gvpmDDvWYseqRGFfSWIRXK0\r\nCvE7u3WSMAyO/Nz3VKajwBzsfvy23rEiXo+SoPGJOAzYkSpX4knW5a7qz2AN\r\nhqnQQYE3lJTX1rRcOhV2OR1dDdb2NJpQfwSWgjRj2isGEXW8ZtPAyvkitIaK\r\nxbFXLJ1YUDXZ2u6noaYpHeO5A/SF+IwaU25bdsLjMcLHaZYIHrCYtTNwaflb\r\nKMa7PwBfORCm4SksSg/joXAV9IVKp3DhQCjedq6cxnWcYiG/8V4Y3LIQG3Vk\r\nkrnPBVxaYh2WpnKQ81wNtbCSEgjuHDGK7NHoTIO3ft5Py0TO9oJe7ZIfIiRR\r\nz3ZSkxa3ysxrTTw38gIEL5xGf2o0vu784Sc=\r\n=Ry4l\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/embedly-card_1.2210112333.0_1665563067196_0.36955595931637486"},"_hasShrinkwrap":false},"1.2210142102.0":{"name":"@bentoproject/embedly-card","version":"1.2210142102.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210142102.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"4cbbe2b23e7b0c5b0c005c94a574ea48a45f7693","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2210142102.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-bqqmFhyC9X8n4ExZIOoxS6QtrZv4DrfPn2yQ9vMO73bpww1b6SCWe0JshpYQRT47WrlcLw+UqUWhidDnCF92uw==","shasum":"b5d898046f6bb8a68ae511b8a723603783a0dcba","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2210142102.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzSfImHkMUTsJBV/4zAeXhExnYheNsNOlRHYfhofZ7vwIgECFVUyv2yS2JKX7ajSn+pwpCH9l8CUDeB2JCaVIPSA8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSm4XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoD9BAAjiEY1ep1zBaQ4zSeTw4Fc5rghO3IU01CsV+z9Dz2uihgxP+j\r\nuOoYD8JaLe40neE+pWY972fQDrriOa9Wk5whlJ+qE09TFvls7dDjNNmedDU9\r\nFdn/CvrEn9BzQiWCxUfcgy5NyraNq+9Whn4DUaCAjfzWumYhXEYvj01BeKIt\r\nJpvDA7S4XDoherxEwl0MzlRhM1M2d4aEED8CL4YiVjfzkqRyBf/0wu0v12Lw\r\nKwkTN5XGHl1wAOy+9PP0ybk6MHQHEblPujwoUJ5pK3p1EfNngOz4jgBH7HnG\r\nKpCCCw5opEqOFjVfjo+1j47kgQOLXEDoEVMGh5LLaDnDwlRc5td6flADNZTc\r\nSYvbjwDoinFn9gYN4+dYRNGILgZ0ruNVfOvq73p+k8QeMV7+ZACzdWZGpgxm\r\nEnZ6/lfSHaBhyYuBYQQP/j6cs/+GsUqrZ7qQ+OUqrl0FHsXxTi3uJ9Mzs1Pq\r\ncCAOL7Gcj03Q8BjZ9L2V4EOCh9ZAhJ0ZPQc92Pdif9LdBiFXradqG0QNiBzu\r\nq4uGM8RldZaPIAQt8UPhK9y5GXyO46EIvdXcCvrSKage/5XuMw2HkDmjG4GU\r\n4Jy08NIFKBANA5pPCougtZi6wndsKxqnZ27E9OyCWBt19rTnL0Ex6b7dMoth\r\nFovkHbUAvVxvDVqfOEwv1cRJ7azjtun16Dg=\r\n=KH1n\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/embedly-card_1.2210142102.0_1665822230848_0.44443524085897823"},"_hasShrinkwrap":false},"1.2210172057.0":{"name":"@bentoproject/embedly-card","version":"1.2210172057.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2210172057.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-37qvihFhhaEoxdE66qileLVzc/Td8+9VKDvID9+piE5+oIQK7uJQvT82rz5KClUmjbgcdByX+wKsSmGYBKDuFA==","shasum":"43d62f5f3dcb1e9ee4d38d07dcdcc909aa586681","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2210172057.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDG/HltAQmjrk94RJfxbnJlK0wWtt3Wb8CgUhRyIxBj+wIhAPO6HZJHbqsCO6GF0W/cT2DGy4DCX/+o4to5MxHTV5wa"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTmNXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzRA/+MDlPVfk9y9lDeysF0IQcuCWO0cBvXwwfs4Hp4v7O0enPBcAK\r\nIGegAEAyAMCwOxCLDeTgIXcPvEAdvRZdUdsUayn/j/IfXvZXQEn3wlDH1NpH\r\noP5cWGADicojYQhVYT0ls2ewEsVQgTqu9qJsXId3tRzvooFGCTgpTvYXilZ7\r\n0vdcPG3D+Ls+FejQFK8q9a+PP7OPz0ct8tchXkb9Juisdr3fKB1yXJPPc0rJ\r\n2nETq8lo/25K+XpW2qOUKCZ9jiKvDXJ3R0K/6XJNmbVhk7wyifIHfR+OEIMd\r\n35pM4m9zEKZr2YSA6rZjubeHzEtV6CYP/MQIQTf/3n1kIvV/XKfuU6HWpSL2\r\nokDXLHS8fQZ0RqWOGzboOUKhiGQS5J5L8jQkYR+DR1qIxRxDo9IzfqbXD+ep\r\nZ4BiHvmJNZfySqcVtNCjGl0Xbze9t3bTomBvksMr7lyJ4ZSCHX6KPx1LVbgV\r\nqXTPbcjLqwteAgV4cVzcLTyIcD/TlfvtqMv0shPMtT3AUM/MQckSwdKqIVWR\r\n3j2Pi+TAgBomzb3OVFJXh1uLBibD5fwbbIJMLlOwobtaIh2naf2ydQgKJq20\r\n2maTXyYsIRRHaaJwWgj8xWMEKff681y9JZ5b7BRc20ZvBiQ2RDRLddRLzbAT\r\nzuDjXuWZ1te/PJDW4Z/EWHzg6HE3RCJsvuw=\r\n=m50J\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/embedly-card_1.2210172057.0_1666081623374_0.21472562903599512"},"_hasShrinkwrap":false},"1.2210191347.0":{"name":"@bentoproject/embedly-card","version":"1.2210191347.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210191347.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"b2888af97582abcfae901ed340328b22e9caf2fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2210191347.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-j3OCHeG9tkV7ssx89vBJtzRmXAMlLK/jBOjOJHUibqEu59flHwO0iBYLHVnFqMLM6s13kbwF1UDgrII+sdJdIg==","shasum":"90335c56b7a4f21e409ae159f2bf54c660d19003","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2210191347.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdc9eg1lYjbypUhOeDGuH7kRSQ65erjiqlUGCj1qSubAIgT4z7Sgnvj/F2YENnzOaM618iwq51e7qbCb3OiMZIdFg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUQXjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPog//VoPhd91xVcjPfOXI8LEEzJXm9xQcA4bT+eOVDeVRl8fvQpAe\r\ngxc8vSBBhXwjDOHki0SKmU53k+w5FlyayeqASvoun8Fq+xjBJkRkbq5+XjLe\r\nOJNxj6v/ZhDwA1IduM07QogiJgQGaqceaFDLSJYDT/DV/f+cGUbi4t/qXRxW\r\nbbdFEKlC68Tu9OMaeZ6QJNARivlEVW2SGD3ZgeeGEDRjfCzzdYhOIHldrO48\r\nPKf6Zd4DzucMXIBeJMn2y16L3cbrUyzn/4/2YiLX49wziOyct+lB1P/tQPsS\r\nQ3JLuGLdiU9idZMN1IFSkN0SoLt8VSZlVtQUdl5WqZ7grPPalrDp0MybPqnf\r\n2xR8omsR1Rx8udv1MOvP/mQV8BUErt0B9XnFocvmc7Gszni2bpRIwUVTG487\r\ntVvjsbFuFlMrc1aBXsuZ0Sk/snkMOCN0jCFshY24vcGvhmhi5iwMpwuEIZi2\r\n2kWwWZhJs7do95VJGEg5jvryCHzn8akohw2/1+sDDrEGSk+QUYIuOAMzSgVM\r\n9yQ0Hrm9tU+w2PHeBw0UhgL8xiJ0mzsMmchX4dL/oJCyCZFUIYTOYu206CyO\r\nAtKt6/CZSCZLK59iPSW+eMgC6iCTvuoXwuEj05Mm6wKiG+yZmWYj1lJ1DhBv\r\n/Rzf+Q04IDH8YZ7tGFlqi9o/Co2+auWVBIU=\r\n=IRLH\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/embedly-card_1.2210191347.0_1666254307609_0.5662976191972002"},"_hasShrinkwrap":false},"1.2210211855.0":{"name":"@bentoproject/embedly-card","version":"1.2210211855.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2210211855.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-GCM4Hyb/STFaSDBWmgLobWP9rOunrjZL/03dBzACEJ3CUtIEg8Di8f6+fILIJqdqtksst5rHOBOqOvG4H/hexA==","shasum":"8c46532fbf1349b5106d6b59a193478377abe234","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2210211855.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDsg7d6aDqa4yJANz8NdZEJB8GnaABz3QJFTnhY4ZJHNAiEAtbNhsXISzDU4l6dF5MMtXkUbHFiEOUiOVKT0a2dnndc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjU6iDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJZhAAlyqfXwWoKResrORboxO/IzpgLQ0YMA9Hnsf9BAI+QhbhA2h4\r\nu4mffwoN1UrsRUyfrx9Qv8KHoYsoO9b7GZWpoduCMlE8u5iBeQxWOMNdZq/C\r\npvj/lF5Pf6St1sNAo0cPTfSN6WCT9j2wnGRIvavekKTUPAP97dtAjHyYQ1rc\r\noPUqO+mtzVHyPnVWIpy0G5X9F8X0zKg1ArVfdvWUIZ9C2hIYNkthQQW6wffO\r\nI/EFQPP+ibcXhqq8OaKJlJq6/r2ed+KXymTmt+PFmzXkgJ80Z77ESv2BglWx\r\nhnyiavcFv9o2VOLq4snnTDPrOvjlkko+z6/adk7Pv19igyU76YitHZrloJLh\r\ngLV7HlIPLss+zjXMzH43HJdij3JPt1UsVXw1iWkWXRQSFpq7RDrIJoMhOeTe\r\n9DrAva3taOrFyGSkB9vvIX4KpzgZakZxjFw4zzVA86tppeSTK21XapUl9Ybv\r\nSrHLZCf9UjmUWRepk6jSNovsPQkX0z1QsZRWjpzRFHSU4DsyEp2INUj0TsJ7\r\nrB+allK/fB4NIcXwl33ZsPHy7w5U+cUHLJdnpUTS+uztqscJKuU4LwGlZaFX\r\nQTqEfvIv0+TaG8qUHF3d580NkEWlGilfrvWr5bnCyYdi5ua1IycwKp1Nrfnn\r\nqa9AN9k4TrkCb/ORLjaiclLIY9CN8NEFVWw=\r\n=g8nC\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/embedly-card_1.2210211855.0_1666427011509_0.5962051966789337"},"_hasShrinkwrap":false},"1.2210251605.0":{"name":"@bentoproject/embedly-card","version":"1.2210251605.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2210251605.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"a1f66509b5a6104dc33409f285dac1ab133942f6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2210251605.0","_nodeVersion":"16.17.1","_npmVersion":"8.15.0","dist":{"integrity":"sha512-6zIx01GmTPF+cW53zJUbVPEH+gbE9oasTMsLDp1GoHcHEUNr+2QgX9gIdgj0UobNGK6cbCBg5Elje1HAXe/LoA==","shasum":"730718243b4c39c1e30b11a157e2c181e4547203","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2210251605.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/zr9Q/V2coREWdOLeci3Hk05ShJrQAknSFBPmeNQVoQIhAMstUFdoe9Mtq6kFYQMBR80+DY/kQYk0/NcobOsqiu6A"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWO9WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcmBAAiX3ukmsZsS1DlxUzoQ9L+zxkU2MLsAj8ihijB7oIjOJsm59E\r\nYglcKJZsGkYQAyA2K4VRIAoiY9gqixBdAAs3LUEefUZscBpgUAg2rvDGbtWe\r\nt5P3xqzv32Nkw2/bx7WpjfpKy1bmKMslMbJTs6zKTjTKtCxMpHbeCF0hVmF8\r\nVz/wuSXMQ79IyBiVPQkbY5AxFncAtBuIRooNg1DKMye+84l4FV4gJe7fvHhR\r\n4blXBQlBqZzFRjePfdEEYbb3Ql6SqoHFCzHRc6TaHQDTULT4rzwECvIQVczB\r\nYXB4Hgdp17/XchswAAEQxBHnt4NGf+VEOFv4LnKryP3QY1DOey4vn8umkv1x\r\nqCOAZFNhqbF209hblESKuxGP2M9NIOasBnwMoc0WUOH7rWqyt3gaXTc1ll+v\r\niWjXfMzwviZyd3qu4Flbf4YKJ2x9NlFuJz5bNcIHJP2Xqyce4LadW6knGg3b\r\nr0SNvAlmWSVt40ldUkqGGDqa+oP7/fiycNtliIDpaCANeF5W1j4YSUIaAETl\r\nzdYvc5Y3xbTgbRHzUyjRrBszD5SBB3MZ3yNt9QB2OI5foZXp7HbknwCgf1Do\r\n+yJPwUuI1F0M0t5XuW5WidlAs2BpeEnWh2JqjlDR+z37HDBos4vPi7pOPc4r\r\n30hEGCjTG+hZiMyoTdpT4uVP6I8Z71jB6ro=\r\n=vV8r\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/embedly-card_1.2210251605.0_1666772821752_0.6426858269987032"},"_hasShrinkwrap":false},"1.2210272257.0":{"name":"@bentoproject/embedly-card","version":"1.2210272257.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2210272257.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-5iyk+dLZ9b45Reex5dTE0J1eGaHn7We9dTo5fPQInHFs5lry9cHgM5EY8VqvaXK9sG5pa5kgdRkujiBGed/WDg==","shasum":"b726d4ef347d5ad3795d167cf8787d28361cfe4a","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2210272257.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFIkQRNdshI/PtKXfO3jnqH/toqzxWi/FR6AHBUXOjS4AiEAvCvgX0ngN6zOY9SHcLwYPTKIkDFrL3GLbUT0sORHcwM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjW5IuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmohkg/+JCT32lIvGpJkDxWTpFjIcjx9pKG/kLkyZJNhW8BIQp5NTVtM\r\nhNMbAtD2anVd4Ar2+aTLX8RQnSZwghmLJ4A96czwBbfdE9J2lZ4CjHyOuFhK\r\ng0wpAAT5bB8dXz+17mRf41jHEme1h7igUspfe84oKaVN1STqOF3Y/ARjkAul\r\n7WojpY0J6wAC5yYyb+XsCJHn+dvcidQTiyyBA1GKwacIq8OQhzfE5xnE7GFN\r\nj/RmRtQ0alYM6o7YVGJD5fD9rv7bq5lYz2qL9PSMSEp/1e1R3zjPI/1E3nEQ\r\nxTXvilVGp8HLNgDD4YL5MV5dKG9sHFMwY4VaPuSiTe6YCqZrLEqCzIS/Zr5z\r\n3r7xnrpRIB5FEJ2aiforcIeifbwrAkdGsEtvTkeyuriggdV04ILeUWZY9Gk8\r\nQO9DyFuwLqPIMQ2B+Tom7fLn3MXGG9gB+PkwmZz8P7mtSPci1Xkq3+oQN1Xl\r\n4EI05AunlLEKcLh3St0JDuXfdQWU6fPBeQ/L9zQmmN9xyx3zUZjm6ZDPNU6n\r\nAHnyWR6cE2QuVnwAaaHNVsdpwJ/ngsVlE6w9ZRNlnqGdctOo6L+CqHaGgo8P\r\nD0ioeKbkp+/2cpyOlwrZmnJHxXDWIWOJXzjfUAqf99AwQvzZ8s/NKLYCCIG2\r\nUMRd/6mVxvIxM4nGDbsVEv7fUcKkzp3xWiM=\r\n=ZhuO\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/embedly-card_1.2210272257.0_1666945582650_0.4373977703292582"},"_hasShrinkwrap":false},"1.2211042305.0":{"name":"@bentoproject/embedly-card","version":"1.2211042305.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2211042305.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-qWm+RD9iNbz5DKldXTOaDfR+YAKHz27YtGOlY0hXRYEyhFYLAzPH2Lhe1Bx5ofNIB1EWF5x5rZb8Xr8UhWcDVw==","shasum":"5a670ddffe95f3cc2c0bbe4a0b8ff7d31b85ea36","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2211042305.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr5UZlrF0t9N63Ys+i01Sn+KUAnKcgpBVZ9SkfqGEDwgIhAPLT4F8D2OYA1EoNB7uqRGBBUsgPqjojqp4TFElk5YLj"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZh2oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmorwg//VSxXTFnS7F5HBzZYFWA854G2vOXvwtVxnwhjeV7lecEXPJcX\r\n4v4wOsPxGxe6JVtSnw5t47P0yXBAgIeRCBof/6Y47YMW47nXkmwQ63lCRy9V\r\nofKR9nQdZaAWanzoTi92Fx5zkAqsgY3FOBjcnmEhcNzI7OmMeNXRB1gLLRF+\r\nHW6Cuah9ChU8BNg1DWkTnEtMwodW/UGFR+He9x1d7vFiJzeNNNKoRXJnYWcJ\r\ns1213FpLk2JL1dRhkZij2CvXErUhnQnkaygQpjNdtXtckWzJ9mnQ6xizpQbT\r\nFnCehZxNDArIrmfUwboe8iXwsci/ur9bHOOcAKrECOXmfxyCYY4d5Bn9uAAn\r\nPmCXH77z5jnc3/TpDqEssTUgLxaNFJrZw0DGx7Dl/rNthwHk92BHkwhGnxgO\r\nbezsJNGL0yc5H6HERhdn3hfC+EebooTDysKT78GjrscL14VBqt/ZawuGZkDo\r\nQzMv0yu8SO+yhxXHww7ECWfeHkyJ5O6jcQ8RXkm8EFUAbrqT2uKT/CkAdbR/\r\nLca+hFFkzcSqCbnL7QwqFVzxAGpDMCuw5eYUctt4NKimr2bQyHQEjDZ3XiAm\r\niysSOQoYao7VqHGSIj4+qOIDdW7Ewy1d4aQ99dOIpc7kY/S5vHQNP5KnYLM2\r\nJFQcremeR4r5nOlvVaA3IrHOtvJtjL4DJFM=\r\n=wSB7\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/embedly-card_1.2211042305.0_1667636648095_0.37662756344144177"},"_hasShrinkwrap":false},"1.2211060024.0":{"name":"@bentoproject/embedly-card","version":"1.2211060024.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211060024.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"f6dce0a3fbdbc90de3eb1773dbfc31ff1e476460","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2211060024.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-DOTKwcoVv4Vx3j4u8b0azzVQNidZHCTrrOg3W1ebIc1drqg13HN7eFYxQEqQPtA+6mJYxx3wvD+CjtM3gyY8Ig==","shasum":"4835e9a2ed081487ac23b64b21645019bbf2d7ec","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2211060024.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAvQDm5xV2vy4C/tjBXil4hCFTzzJbnWjvQ4tVPKvqJRAiAKqd88EjNf3LRIfAti8X4rCtNBTdphA3UizdYUCLl3hQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjahJXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAMw/+I0Q4c6f+0nXRNDVwvA4yIdUxHLemzUOyscXpyyVIxrFjJ7O0\r\nRwnAntIiIxtMJcESfIeMkZxl41JjduICAxKI0i1Mf7ebs0YIyArTMPgqXAzu\r\nZNCbXXyBoK1HU40kY8PZZvKwwjHyRY2fJsGot24t9VMaAwX8hSkKFIZrfhne\r\nLb9GO0Jlk8cxMJ3z0ens2BBLIPejEuhrFIah2dfonRKkVFk557zmnQfZ5K3j\r\n7sf41xaQSOtN/YFVeH3kRSKijf+sC/5T9ZdKnXnpL3LNeNDUZI5/93Fzjjdf\r\nKa8sFDlllbVEjXaNj55CzWWHV/7PI206Vlz+PeNkiIi0SiEWBXthBQvECXvI\r\nRi57yMwaP2GXJ3rEMgPLX/PzTyILrwks3AAq68mBU5KLUXI9Hh11XRATMkJM\r\n7I8gpbCmIsqV4HjENWbyl78WlDRNuUq6sxPQJhIkV5qPju52c1/JvkPD+3K/\r\nZaLhp65jKneXqCJMvC3KQ4QFpIFm2zkhGKgGofMHcWPgp1Fb8YlGF/i0KULJ\r\nUThaUtmAHRkXJg1T11AChONMZzXvRVenkEUK2WupLRP/y/f4tLviYveDWUB/\r\nGBTUYIFEJw5eTPoLbsZuV2rOJtGfEb970K81dMg3sXzC2/nzLN1VdkPNOjlk\r\n7SBV48FVbDoMP+Z4aHPvZSQpiDlnTpQJEGk=\r\n=/QQe\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/embedly-card_1.2211060024.0_1667895895124_0.7790370218118154"},"_hasShrinkwrap":false},"1.2211111611.0":{"name":"@bentoproject/embedly-card","version":"1.2211111611.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211111611.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"f9c1138144838b5c4612a779bf407d2b2413d105","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2211111611.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-WgHAgcAKkKosdQYRmnE4hBL50+h+zrgvgupmcFmfG5VsoHicMoBjSRguL7HPOmhQm3JYnEZiB8PBmE7bNiansA==","shasum":"0abae86ca7547b60deb9640d7e2c3402e4898748","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2211111611.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC76FGIVgZfDsKo/PQPsGvzI1QioZRLMtadm4rzSu37hAiAn2aKRGn/Z1WicNWKL0h1eciPp5d9D+7WjrTp+wmNgzg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjb1gRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKaA//TpnjtbBMFLgSiz1PQDmoTy6fCx/SjJEPzFFJmbmthYNucCJe\r\nlOYYi1dUnyd1Y/ZXpESUscztXcvNbH1pbFrdAhNXtat1yeN3HRfN7cYWzBEM\r\nbg5/R2eV5pmIPnocF7mWKoVfuXk7ds2bNCuvy524XIjkq7rEdw+AAlGvAOV6\r\ny1KDqidDtT5EUrQ+PTZt4KWaed0HgimiTh7HbcymznecwbZDKEyOUxO1uJfs\r\nO3PXrFWFJV2OmeLSqbnCX5p3mH22SulE79VxEk2sjZ69n6TnAQ5euZUtS56f\r\nvJG5aVDiCnqgAZnFzWo39fiK6qDvayM+/OtsyDj7MdQPqXqLMN+tqRqp91wK\r\nxLpK635VEwEhMUwDHqap+1RkVU757w1CxMqxnfZ5ZuF/Q1of7CFjVAWHEoWp\r\ngXSXgp29jvWyenykUa/B+cKi59y1isIB65Tgo7Ka+E91CuW77JluaD6IzfTj\r\ntTWMZFocXQNl51lJ8/CahZ+2SqK3XHa/oDo7RszkgBzf7BBJNqO++194aJUa\r\n4zUytCY7KnVVaxT2AAiLEXHKplBT8dtnc1AZsGy53V34pA6I78poWXfUS+zs\r\n7Wgr9YP2LyK6g0RzRADzM1lt+mEEtDeTnr+AukZ1/htO2mhI8HdizrzUEgA1\r\nHhJpcbirN7IBxG08KEOJCRBU8H9wy4yPuuw=\r\n=nUUq\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/embedly-card_1.2211111611.0_1668241424888_0.9823612530479542"},"_hasShrinkwrap":false},"1.2211151402.0":{"name":"@bentoproject/embedly-card","version":"1.2211151402.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211151402.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"db41c24bd071b6322e0a5188c4bd74aa94cb9d5f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2211151402.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ne+1XHljCR0R/YihziGuk/L/zDK4WleCAZPAw1CqSSrt0ZQWFkoAEeNq+tdBuNseOXKR549U4FF7F8UEjzhb1A==","shasum":"741e63fcc28d34746289e289dfc16115e998a66b","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2211151402.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPxpvW2e1xuLXN+79oYAoo9qMj3Fgu4TSa4GGrTqAnzQIgILAAd++5B7LKLIgg5VZCE2d7Bd23Dm8za4MLSmTM7yo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS1DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7zw/+M6mmVVvvmPl6jTUWOMn8TAxU50vNnu7cs7sK7sw2NxVfmBUx\r\nqUiSgl8R8V/K7G4RV8yVnfimbvcYzwRZLAE7bI+UjXgDMButDXrX3dxQi64y\r\nF24YukoMWxL7f2BKGglRTUZjoACVoRi+lvoLczfFICfatqBRz7yB3+GNqh7C\r\nwjiqAPFndIRTUTcMfFLrR1yxyj9QGdxc4KAmhiv+o5FQXzDouAJa3UgM8UVG\r\nKkvmS8MtAhTtU+40Dsqlq6jhEkydaD+KBP29EwKeHG0pI1ujLKfBeR0xvK+A\r\nDg/TuuDtjpa2gsUy0Xz/MMt0KJtvUsqi3mQBtUSTMzgq1tualqer+cGapNtv\r\npPBE+amgr/crB+9h2n6taeWzrjpmXKl4d+RIT8BOdbfYKtMrNV9FnPWsVzPF\r\nJSC9L7+XnnU7Bwlm0uPwNdw40zxJhiSFU0n0jqzt/jPpL5b72zEmkaRKeaKv\r\nRlAV7uVuTQhnZSs+ZQok9ef5OdR2y6uRBMd3QQJjy0+KO9W7ZS2bZFhG40nw\r\nfQD2iXVl3wwEFaiCS6BjERrCnQULWIlWgIokNlnEYd0F2326YT08BtsEKO3r\r\nTMTdTKEbQjBpICPorJA83rh9RbZL2GXM3BRwM2FrDTwb8gVC4cgNld+59kZp\r\nxJuXyg9xpXVfYqE/i2Av5HSQPYEscpWZ91Y=\r\n=/2XO\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/embedly-card_1.2211151402.0_1668623683162_0.5412777713145625"},"_hasShrinkwrap":false},"1.2211182146.0":{"name":"@bentoproject/embedly-card","version":"1.2211182146.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2211182146.0","_nodeVersion":"18.12.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-YH6mNQrisdDw0MEiOtgQjID+0tN9W7AJqz/pcFKG+LaLMrBRaKCxhBOtITRbcZ4KtSrsRapwvNnKFiudjzNiOw==","shasum":"a97658dc19461b81a7a06e320316c748293f4974","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2211182146.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpxFkKAw+FwBtK0EtXeZTLv7XkLwWaU/X5bctsh/3CTAiAOg7Js+YQThzzNnkF/Ot8/UKl/eeZzJlA/SU5r5cJDPw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJL5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoADQ/+Ju3XiXCBAoyG0lIgu2BQ3mZLBCGJEAwvad2vNT/6XPEVAKxP\r\n/jueXVlZpYxeu/ICpND0Hbc3gp4AcOluY2oj6baWea7vPCDDlfenQhdIlOHH\r\nkBWVneGf+VXL86KCxwkBhsVhvP6YlPyAVmrFilJgGd+V7YzCwecyh5T/8zM1\r\nv2ETPuoTS2rrk10QgbUEBeJodl5lAUHwpQaC1A9aSK6G5i3y2xtYa6/jXs4W\r\njXbxZ4UET3bMFhZgLgodMV6e6MNSj402IfUs8UDj4oG7c8FmobPjGetFt9Ut\r\nGCNg6QXU+2hDE/P+YUdMayxRUN3Nu0ICAyTSZiWDoE5LzZUzqYWekbLjsnrd\r\n17wFIZnRzP7tQQS7JHsPdfTxYSoCN+UfaK4tsxmxR9XZjFSAYi5scCjTeL+F\r\nXedsnHlW+f3FBYdPzO1K+j7a/oiT04hEZigPpqYQMbZS2pfL+gZPqF9Hvb33\r\nrUio/HqJ4fIqWEsTB+3lAQRKk20flqrzukkSWfnqJLNdsFleWaTkX1ffn/Vl\r\n3ZQl0H02A19UI3Tc8dxLj/vgfLA/lh6Zfnmd1ydZyJ1Q8NW7IZWSD4ku4YrL\r\nYCYF5xG2LxhY5uogYcIS4kKbaPOy3Jjz1E9mu+jO4A8BYXpXxlMHnsB4CGGs\r\npbnNxc4ksYM21JmhzwP6wTaH6KhkEVVJaHk=\r\n=tUvd\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/embedly-card_1.2211182146.0_1668846329281_0.990300960576999"},"_hasShrinkwrap":false},"1.2211250451.0":{"name":"@bentoproject/embedly-card","version":"1.2211250451.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2211250451.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-zSFpcogQ2X4XkV5YFPZKJm9tH1KRmG8Gz1Q+ia+mhVfav5SBZfMkBLPZpPJy2SwcBxXl35t8B04tS+w+kyt3oQ==","shasum":"1d4faace92736d030f43063585aa981e2c02effd","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2211250451.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwDEClWDhlQ6YcG9FWNR1mvtXKqGkKKnGaYvw0+T27XAIgcNFwPFb7c70XbbBSJChbsjCF4q14AO2wlZCXzE77eaE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjgHvKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS1w/+N11s0uvaa3FRG0wzcm2+SULqJVuDW+w9VR4y/Wr7o7HXfRJy\r\nHYF3dCQiOdEPZpKbKs7CIg9o5/yoTXEsyeKNgG4D9T1ivcYLhmlNAaYDuwmO\r\nswLrrCaHtkGuJZv92x2wiqv1elIsUf982mCAZeUOl0U1sEGhdH++5H6ofnk+\r\ny16Oc4KkdFMQ8Rkes6w+SLpqx+B7HDEUrwpYujNztxOK6+PD1PfuYAdsRqK6\r\nDnoPRhoedKoRlA2K10SO8ChIVdGF24DfvMl+vYE2gcX+uuyboyoq1FVwlKGN\r\naIbyFWAN6lF3yOkKaCaMMupqQVRUj2l9YIQwX0Bz5jHHyLsf4TT/kq2T58yt\r\n/TPmDHJNQlTfWmjnIGXNkNPF4PXwHcwG5Vt9em5SKCTqIziO2Eg2/1A/XP+x\r\n5smWE6AQDdJ3f+/3NmZTn4/grQgtc4WzqKpRfff7hnDdXNLsKY8n3ajI8MP+\r\nk8DxZ8HFxvBb55Ei7o47EGoY0maWrT9EIXYI4F+WnhBMrRTEVxt09N/PxhMh\r\n7AXLqKHW6Qz07FF66qKr2ZB7S3rZ2N1V7+hU5KsuQczjy8Ii8DxQ62OuFpR4\r\nnT5F2lhLzn2dSVqWsBaZPU9NxpxeKFzt5cGPM2m7S5ZpzBlK8Puw5u8yTUIp\r\nI1EZJ2S9GDaE55BE37CxEfDGM3f8Pra1Dpg=\r\n=bndP\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/embedly-card_1.2211250451.0_1669364682644_0.431675197244185"},"_hasShrinkwrap":false},"1.2211302304.0":{"name":"@bentoproject/embedly-card","version":"1.2211302304.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2211302304.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"8ec16ecf1bb95c1a6368ab455a6cfc7b1caddc46","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2211302304.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-oKf4XcrkRr0AmzZuy6MGI+ElwBDbM0/Ox5wJ94nnxImjw/sQcPSE+ISJCNv/n5CVB8aICvpt4EFMA7wKVah6sw==","shasum":"db194f8842f1d00107f6535976b82b189bc5b3f5","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2211302304.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuTGDxgjRHbM+uhc/xuEdCaajf6WEW5DnBSSdHrkPDFAIhAPzY2eeJXSYu+55bssjTBmHSB7P6EKAJRTbQZw4nLlUb"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiGSbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3qg/9E5oZo5eIM2RuLxtKccXRa2LG1iaf2Ho9Q1jRgPN7sCOFI8lR\r\n87sCUIaWD1B9R2H7B4SoHmB+x5KoPT7OkXnewp9hn7ljuHMxuypOALKYhpSw\r\nvjctK7Wdy9vJBqcgyPYp/qL5u0Bxkr+twprhCYDdsJICG7cHiltZ8lhTh5A1\r\nHWF/729boFOrGDQqvV9EjDXHoz1ds4GB7ZC9JpSee4y1xFw9yQHgnMfjb2AF\r\nGZ90qLFwLiDwgobuaiwambjkj8qhmjTeDqu+yVmmaegvn3fOmg5QwAuroWxm\r\n+M4PB6FVC9XbIdXDBfwxUhlYGFuK/svet6RXGd68ab0klngdi3xmwZEdmhRZ\r\nN9+rUtkbamq2sPvDYwRV5yP/lnRvSizPwizbeuEEefI49WDZDVQglUonmZik\r\njNOOvJrpqJz0RabCqHaQRqlYu8KYy8MBVir4D8EHAFF5ZNpUvJUlHcsagN3i\r\nLo0qILw8OveT+8IZlIZoTMasYH86hqvY2Fqm5YdNbH8Ud+xouNA9rDEN+hfJ\r\n0eZ9OJ2QAwwnu0IJg3KxSRMCbwd00hkMsex0z62Nu6uQTVgTSFGEMeBaNlr5\r\nUmzRGX432i9wUNggSFIf4b231yL3VHPuS8/pZvFxxrx2dwPoslr46nQ5iIyF\r\nHryCVDf8YT5QAFBWnfwnnmQvhdbFZBWEYP8=\r\n=rZHn\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/embedly-card_1.2211302304.0_1669883035110_0.7573745184060303"},"_hasShrinkwrap":false},"1.2212071834.0":{"name":"@bentoproject/embedly-card","version":"1.2212071834.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212071834.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"9e7a659da459058028a29b649ceae3a2dda7771b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2212071834.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-reHGMlw88XNxtZX08gstmeKuca3mWQjWBZGLSfrYkw6FCU5JgI5SoTrI16ZhYcqJP3s0A50MOTP/6booOiUMqQ==","shasum":"6c151fdeebdb3b095b9145e37a914e9e8d47c08a","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2212071834.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiWFk12jc6QCSeBbzzf6SAye/b8IMbg6WFWufy2gbEYgIhAI1j4XEv1kr8xgvSNITuKz/w7LO1YDPzfnBjxt7BzYgJ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkOuMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO9Q//ex8EtISbNoPa6PkSpJC91ulffoy17HAjaMaKaznfBN6F1648\r\n8peG3BEzbyBQcj2gXFDABHc3g+qrc8UtyttQPqpbix4ZZ0A2o8nw1o4hYwDi\r\nVxMwCt7RfavaQHfTGlak1DPgMYSn7hu3c/WpQlJk0hv7VhW3bIR1Wml/M/el\r\nmAfvlmVfZ/p9PdATiMnnu8p2dqtmrcPAu1cxFmtOApTiKSZzw8icvCyuxTZh\r\nacAUMSvc/EH+BJe1X0TcC/TQVfgONR+RQ7rLUkznN3kNS9LLiOxBx41zAqw6\r\nVYT/vreirt+AeO2x8YkvB8VRyXJeItGrLlv/sfN9UBU53YHq/UToXiZ3nuCf\r\nfHX0+loIGdx37GHmTkoE5J5qAS7r+1+QXSGM68GnnUImbTX+ypq8wG51wLQS\r\ntuGnEm9SbGnD5dkL5D99prFrNupEJ+6eK6rT0nb4kkZEgTVcNTZUm+DnQZQG\r\npPoKRl9TEic3U7X3r0pWerDvOAJRr27gJnhwGw0tqmKXzZ84yl7sJ71KCmpV\r\ndKIM3VfHRJkPVlx5rZ5uHpcrnucJJ/GYvGdtPYqfIsOFYtEJMpPI8I+vW8Do\r\n6tC6Y4KP2lnUwGuaOrwbPAV+hyNEtqw7UF73MJHBZCKyyjdYbCjU8J4k2D0F\r\nReuAmYxyMwtGf4sCVSZ6CbOfjhcCsxD25LQ=\r\n=TIDg\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/embedly-card_1.2212071834.0_1670441867806_0.4628336104097619"},"_hasShrinkwrap":false},"1.2212092023.0":{"name":"@bentoproject/embedly-card","version":"1.2212092023.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212092023.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"16bff17f2a3e911f517c49d1fd2c74c8089e78e0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2212092023.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-tgjVq8cUnV9FNjUKUW8sY2tEEibsqGo/AZtQXrYNT+Guk5i/KtKBR1y4WyaHEReByJGpx9LQ/pWRFv5Yo9/gNw==","shasum":"525ab9cb0e636ef16b1c2b1588bb4916865329a1","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2212092023.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvKfnY3hUH1D8zJlYM4GX+rMoonnB0KRAo+gmuTJqvYAiAHRjzBwftv/RabTnLmXH7lcX80K03MZfpXTIFUhkslZA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjlEJJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSOg/7B+Nd8YSNxAlMueKl2iK4wQchpguMqMZxscW/UAq3CeTZ25t2\r\n3OVDJ4MDFkPU5IvzMTL+aqh6V6C3MPbi2oVd2VCBrpONMIVpbMPN9wlf+7l+\r\nxHzps0rwlV9nQXqbswvY14rCjyklXI/dHwjxFdrv5PXxXZ9PLUFzB8COGlWK\r\neZ0QbHMmxCavD53saoNbyVqkYJoV2OaT4sqKB5nsHUhr/16jRr7wSUuo5ZXO\r\nxe6zjpLdM+Yd2h8kqQqlr+ZHclueUBuwI2VATNoujbv6Pl4WjYtkfSNpvhcV\r\nLjX4e+ogL4j5vNRZyyLu4nWYsAerYdUOiC+W3DEPiFPhbFwHRW2q8w+tHJHF\r\nGwGGuZRukU+KhjjbK/Hrdwp1W2eAPRflgJ1uUvZ12KdcB3IJK+Na7YzP7jLv\r\nyKUwpXzpmolQEyUJTAiH75CONTcV81Zk6+lRZFG2vD+DlUZjzrE9qbGu9Z2M\r\nVqW94oKJcDj0Kvj1InfO+eMUVGxqnhiaEqYg/DfSDarlUyB5J+rD46+GSVOU\r\nISCnB4muHkZutyYiEsvI3RBR430z0g/UJsqxWbYLEwQxbZAnVyiu/xuMkJ5r\r\nFMi1cOU30aIHvczyLcrEuM4UVTbFvcJoNy3UFEHQsTp5GlhGDzVv9bXkW3K+\r\n5sDj8pn2GH9b/FIef/B9PSFoMqhYAn6ITdk=\r\n=EKiE\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/embedly-card_1.2212092023.0_1670660680844_0.5336228477257572"},"_hasShrinkwrap":false},"1.2211302304.1":{"name":"@bentoproject/embedly-card","version":"1.2211302304.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2211302304.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-PrhpayH9xosXA7Tm60F1XQ8Nue7dSHyTAmL417Y5UfXq+1dYF6ao39vm9MD+vXzUg+yiDvQdQVCNH2JEwmO4ng==","shasum":"5d1356ddd2d8cf77ecb6cf73524bfcce15c48442","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2211302304.1.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDO/LcsAQZDpOlLwj4d2BuCf2lDmaJrZLqhbCCeWyFSwgIhAPQtk3KdSNymPoe/Wi4CQBkJwpKS5hHGc5lDVBkm+nf7"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPQ3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdtA//ffkSoT8v6OVQzJjA8L79cO5bRJfEoJQ1m0tfNsW9pivSSqSN\r\nAaT1g9nTqN7L9Klrqu5ARFfVLmQTsPihK4+cFWdHBzELSS0gSxkaU6bh3EFb\r\nOl+6fqPuG6s1SQ6ppNTvdKugPCbzSNul/dJ+zo9g/4PW/NXO7bwBfTlncS5u\r\nQ3mF3T4o+AuW36Z3DMUfQTJ1wJQ2kh7pDMMm/yqpX7Q3PfB4JWkZUK5IIVWx\r\ncigfTEeprpKu4/5/CreUF5utiY4YaSL35dh13VnCm3VQliZWLiR3zkhdzdIe\r\n2aMeWlXaTJrNNp1OEF01Msr908rwYjLDED1Ov3D8liKpvTIL+HkuaUGwLyeL\r\nZStvU/wPTmoyrMzaeBwgUH+3lyYvhtGJ2XqMP78OlGeckNHqqVSWNK49fOqW\r\nQbT1IQVTlXaxyOoRy4xRnJebggyfBmMF1premBMwtoUZkYP81jhk7CmvbD7Q\r\nwKEnRNhlYX1U9nq2z9ZrsjtfOYookRLJ5vxPQT3ajnVYAhPSamnC+Ysz9uuf\r\nZET3tGN0davdpTC+KpVxoXBgrjQLRHIuFrCVb+WXk0lqPUMFAD8q4z2qgESO\r\nVHD8rnvVcVx9z66SpfwzpArWmwMSlTxqodnldD/4sJZ25pdMWilAY4h3iIZM\r\nPDQwFSzbcdChH8Shxr8tZiJb3/NlJj8iPEQ=\r\n=2gQb\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/embedly-card_1.2211302304.1_1670968375586_0.09650710175484245"},"_hasShrinkwrap":false},"1.2212151632.0":{"name":"@bentoproject/embedly-card","version":"1.2212151632.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"6754eb8b2feb7d6eadedb57776b91613ad5d6dcf","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2212151632.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-oOxN64lQw9zaxJzJXLYXo6cvQsgndnpnjU7zFitvNRYGx1+Ly4cpkwcei1zqasl2u1e+9oQyVGHb8ElCMI/I+Q==","shasum":"fa8bbbdc5903314904d3077d2e9630e098e2c327","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2212151632.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFVAKzY97UEgGkwxQ4ZqogonkjZbZp47RAw0RZU5cWnEAiAJ4MeCQ4vzRq28/X89k84EdeE4EEYPgwbdAIcV5wRtAw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjodo8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0PQ//d7Umc/f/YdJRNTvyCADfUWvMUpUJ7lpfqUjTB+wnS5CK3PXH\r\nRgNYeh+VfwNFmlZ5az7vOxuDpJzFIdptYVWf18LpYsK/sXw5qHSANaNx70oD\r\nOGsqbXMWwOmcCq3obXeJDsHABGjK5PCbl4VUCytUQsdpOZxu9Qd+BQ+o3BQD\r\ndFcaWXByMju1gsSk28UFUBNvMDHsabNwCyOLAoP//AADrWe9xMJId/9Dv3rR\r\nGwyUcwG7RfB9UESSj2LtDWDzpMLOdeLGJjF1xmt4L67xIXN+10fruikG3VKj\r\n2bFDJbTHPf2Eh8qR6qPfi8h7FsESOWiSqtlm4TSu6IJYbiWMYpUmYKXICY/F\r\nPqWYaKmyECfGcgrketuBx/j98iMclS9B0E/hfhCjf2EGgSG8hEFIDl+omWDg\r\nHL1urbO/3M4EA0KP0KgpklKAc5Mc/GwsZ6M0Q2OAF8GTrCaevRZ0FNzp7/uk\r\nmHZiK9VWJeGsxnlklraZ/2FPZUQaQUMpePn2upg8jzg0kJC7v5KGdAZNiwtX\r\nRhPgXiHaHsQkpUvB2E6Ck0B2qbc5HKX8F7NIHgv4TuA2BzCBIBDmnffKQ9eD\r\n+aOgGZvo72Ld9pPIv4r6ZNeJgNe5FYp3GzBvv2ikZkTF2s370k2QiomvVnmt\r\nq1mi2heqKunSgPzcQ4NR1uRJNfh6RATPsuM=\r\n=gGBH\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/embedly-card_1.2212151632.0_1671551548318_0.41457125271419515"},"_hasShrinkwrap":false},"1.2212151632.1":{"name":"@bentoproject/embedly-card","version":"1.2212151632.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2212151632.1"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"0daa515ff1e284cb2e31dc8fda7f29c073e60b60","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2212151632.1","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-JqozYjrHcTrMSUcuo1T6iJh/ExjgNiNy8e1P/U2D1TVoK7El+RBFToDoL3LBdJiiX8O8m9buZglfq14gvE0Tzw==","shasum":"e460ab86e3dcef411d5bc3bcf1a05a3737070790","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2212151632.1.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGI/c1tGVw9VFc8P3Bu+YPUibJXiqI9thOMbWrKEUOXAiEA/nxjzs/pLD0/L8h4KL0fo6TIX2DwRtLQ4RyHKhWSyuA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjohaIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUsQ//SpiBBbREeHvVPdghWIkEJShn7Ps+fS1jo6YUNWBO5azoz4Jf\r\nO0U7TIoseiD9CWcM7CDzm4U+Tb/TUzfckdv7H61b5ol8FWo9ebmNq1Ljay0A\r\nzIrGsa2ShCa3jDeb2kNUIy84Xruc3BQHYu4hYh+q5grGAvI9156DwxnZJqNm\r\nzpKVwESM2jb5HwoWQ7CB87vO/tfzMSW94/3RbCa/Tx1N3AApOAQhhGQeJvYN\r\nstOiKZI6ngzyD+qB3bPr7ZgWVX8om7v4tQOHu/VwSmORU3w+osRUQ6U5o0ww\r\n1uDE41O71ML/YYBZssKW7pnzpo259RKvTsmZNBPSyDbPssn54nY579yKHHC5\r\n8SSe/YbAPZErQcFw9en7dAC3xn4PNGn5/XVDx+n6fQ2CegcgjnBLKI47IBo5\r\nCJfaPvi+ByNGYKmODS3Pn9Oc8dsveGmTvFzDRYbf2J7MEo2B44uYNYGKFCZ7\r\nPj7e6tbXaeemsZQOiNZNVewdoxzsGDnVE6SwUpynEpdOpwHuAlxA2e4mAEHZ\r\n+aHKESMuOUMMJq4cuQdqvJGq36vLlKJMRv8/YAiciO85x3hTXqDRMyDSWgG1\r\n8rlN02riIzTHBloT8vPwExgLU6G8xEPTNOFc1SRmMUihqKD0iV9FvPTufg4r\r\ntOLZNe3fK9J37c1CYm253IHhxQ+oHlJ6Q4A=\r\n=XeYI\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/embedly-card_1.2212151632.1_1671566984327_0.8383531343754671"},"_hasShrinkwrap":false},"1.2211302304.2":{"name":"@bentoproject/embedly-card","version":"1.2211302304.2","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2211302304.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-vt+shFK3KLlJgG5KnLYWXijpfH6Jq09tSRXeI+cphj2AOjEjZ7fJyXWdr9rZF1tcMX8CfxSDAfx7qZ7mOPZ9dQ==","shasum":"527912086963d89ead30c4a43ac5b683110ccd44","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2211302304.2.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCn8A84ZSoaSswodSF9ZVbdXHr3wisxkzEdGL47OlWFuwIhAPUVnUgvVAfw4B4/PVGZMJob8p53VCCd3UTAwgsHKYB7"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjojgBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZiA//c+l/yForCC6fMLLW7UmSnXqIv3e5EWhwYW9N8t35dnGXqPoe\r\nRsbzszrkcTDTjXhTY8Uqi8yuXJ+IQ3eTAhztgKcqFOqNMsaBBreWk4lnc7B5\r\niJNkMjATG7/nT1MpWDnytl5zPxNVg82Qry8/t5npfeLgVmh0SfKWMmfsTaqL\r\nS+YQTP3BdN/BQCs6otBgub2tN0aPD9zxl1EM5O7mFmL9JAOFL8HEwoXVpSvG\r\naFb586IDyzX3zfGjKFHq3uXjLgojuBPLinvwQy4YqPtJwAeXGD+lsykofWu/\r\nf04ji7kF338BMkjqrvSYAgfA9wzIUEmtEPz9tuDTMosKgldsja2lH7IWqPHd\r\n8khUmEWMJbkBUVLVCc3i/YC12eyKd7zjv4NOtJlE/CCBIZ4GsdQcp4spHlcI\r\ntDrCJntsf9bu6S+3tiSwdtXdyQ9HhsiNDZc/Nr7+aOEVuCchwi3joEoUp7Wn\r\nOvyW5E+EpAPwBSOOmag2LKqO9QciXVNvilA8dhllMenne8tubLLFMYXJcT3J\r\ngBMBggFGyXgawIoKyNR46F/wbpgki7+Dr7q5U2lMBLKjZ4yNbXIRxqCGd4NQ\r\ns37KhC/cBGyqRcDJasdC5XyNfWqDouHlOMw6d9S4VAfQFIJQINiNds5SXGwK\r\n0pcoeODIyFJP4lx1uVWfRNqQ0kLNWJ9c0+k=\r\n=e39f\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/embedly-card_1.2211302304.2_1671575553175_0.011372516037643887"},"_hasShrinkwrap":false},"1.2212151632.2":{"name":"@bentoproject/embedly-card","version":"1.2212151632.2","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2212151632.2","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-lviZAthls2UTXtA9q9Nu7h1vXSSPPjPHPGbK34F33o6wZDiDok5A+HWbjN1VC96RdQ9tG0iJNh5BjowjVzx+EA==","shasum":"85f6d4636dd0aba4d42e463cbb63ccd07fcb7a7b","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2212151632.2.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICobr5raTLpoP3PEPoWuM8DG7qJKL2Jo9RPMxdusE+FOAiEA5gZRYYKfKZfG2NPapp0akJADM3419Gwn1pWI1Zd5CJI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtHAOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEXRAAhyH9NzUY0n10Yy/jAZ8/49XT6Rk4vgJf8D5OpTqaCLYlZiuu\r\nkqPJkcOLOBfzNQ6cDPeUndO+HCXwL6tB+uVt7NyytQrHfKpcsVTx8HUACJ0X\r\nCwoDlNL9dDsgSfZ5lquL1vGWu3c8D1MQJLCHZphxkz5xv7wiaM7AlTfYpFTu\r\nkPo+sDuT47Y37OMLnXlXgbFrsE59znXc9fWHfTDVoXh+yCtCCBp6uGppQGBB\r\nMHybqN7KnuX91V1ftWewl4wVFt/BBP/w4An/+yo1KpeoR4aDYoGM1wyOXDlf\r\nt81VFPv+b03YGi+4WdB1Vg2LB1K5cRAOKIudpoaba3r3uJQFY2JjncMyZriX\r\nsNdxLO5HdPmsJVHo/tAZnFQMIHNZelhKc7SwlyGwpwl9YVPY1o/LEKaPcl4D\r\ndx9IxDgjlbni3d/4WrR/OjSEIdvc2wh71+MH0GYeXRoPa8NQ9DgdZ9ryGQxf\r\nvalQyGSUTEksnxWSUQAN41k6REGqSfhevl1d5KjmrfiHdLC2PaIVTxTghJFJ\r\ngu+mN31scaR14GxO5RVPA2qahosaTmu4mXxDi3oUOn/SJG1/Pl3Ohw/WvpEU\r\nOLS4aGUgMGbfHaKp7pFv39bPQJgqJJOvCMhFStwmizz+J0fPfdJrVHZwe+pO\r\nBPtbA//AW8ZfaG1kIXNDBr5AZ0xvrJ2kyjM=\r\n=w9HV\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/embedly-card_1.2212151632.2_1672769550615_0.810072708093653"},"_hasShrinkwrap":false},"1.2301031703.0":{"name":"@bentoproject/embedly-card","version":"1.2301031703.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2301031703.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-91V6bSZu8Dq6Phms/zVb7skc+G7ewrH74h5WYNJAa4t63kRXXxcP38+YjN4PUrv/QYlRRttkOjaOchRwHtpoBA==","shasum":"d76922b925f1b4180913d22c24f240b5c8c0ea21","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2301031703.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZ5SSNQ5/4hQ2A7mE6cJSxKKcAnp8EBkpjmzVJa5T8eAiACtn9aXwBWIdeeuupdkaZvMJn9qFGs2lA348JU3od3HA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtJBDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvJA//XBRvB0aC8tXXnKYaLI1UF1ojoKyqemS9bMVQxzlYVv8VRHOv\r\nHaSlut1Z+WDcStOVaq+7+iqEs/vPfFZg0jAPTzH6NhM2CpnBgb8/uBpy7iSV\r\nWh2xJBv9uFt2te371Q+xZSouSzTQucvC0m0o3ge+K3yXYisQLAN1ElcHAjuj\r\n78UiARhGO4aLrjo5gyyiU93PDEdrqA5/xNs53MdyQUqELoM0WxSLsS5CIGJS\r\nejz95oMHoyg0RbHQl8zf4OL8fOlbjEsCQOS8+FIWqby9W8WWd9UkGV+0WeW5\r\nlV/vLBDrLKQfvs96WPtLT0opZp0lMcPp8jcokRkXEsr7Gi6PogJaYg9nniEw\r\n4oNVscQXIUh/WdiBvA0KyY5Oo8fFatEQmhyJ86xhUUt7kUob9ttXK8vFzqy7\r\nznV8z6AHh42eBhKZiRQKfdP+5TNv2+ECQv/aNVoVCZ9uiAw7D+5A+clViD6a\r\nTeWyjLk+sNH0JHDYkfsdXw/lZVNpXqGEPUmru3HkrLEvPgereY7aClzV22W+\r\nL2syLnXl2NGZ1Gmcs70HtUDitpm8NVJue/II9uDK3bIqKtkcT53DQ0HgeLY8\r\nyZmLgvIsMDeHPtP3Rq+kZf0MqdSfsyh1bvBE4i+wsfG87TAHZs0GxgB2Pv0M\r\n4i70+yQjGk8PEPZfBK+xl3ZhFntCjCZeDVE=\r\n=ygPc\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/embedly-card_1.2301031703.0_1672777795064_0.35430099432806683"},"_hasShrinkwrap":false},"1.2301032153.0":{"name":"@bentoproject/embedly-card","version":"1.2301032153.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301032153.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"418b16026c82f72bf8e885668d34a40fe043c9b7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2301032153.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-TNmDpaYgTvpTwwS8dAfcvcok1lEOuQcFg7IpzHbYqoJBVukeXyydGMr8AmnGWAAnNGqUegu9DD3/euWX50MKfg==","shasum":"1470f1a775669437a928c8d2467c96664aa1dbe4","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2301032153.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8ifmJzmpT35RvRk4qbL1g0Vh7bAea4Jy9f9vm/2bahAIgKKEuSxyUej/wv+BngIZwUsvziKGO/+itrQdbv07BWmg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtTfSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/QQ//V9+SJoojCvybCNTWxm7AE6rUDtmqrLz2VFAYAsh/dmtcMN+l\r\n87tywNj8Gm8WkwZkI4P6BlHUyOVdVob3pSiqw8ezLn9z4OKwX00WPnLX5cTA\r\nRUEU43Z0OcXgU0OlqouhxapyyHa4RBCRLjxfLm4X8bu0oZlDD1ddww6IQvm8\r\ncQQAQ8VdKjT9B2tyxmKU1zOzQl1dMpjkmGhRy/LTzvOeYHM/7n4qK78b7Nma\r\ncHgD4Ec3IF+3FsckPOlrTJgpH3JQMEhVO0kt1BPShqR6Q3Fl2OJIpq7Go00b\r\nw2emsbV34ZEv8bHG/pmvmY4B3KGWP1v1p8MLOXLwD4pMcGDZKbJ8a7NvLCcT\r\nMS5UUS8HZ4N/bmr3kV65rxWg1gV3m2IlThSJ3sbcL2U/mt+TdjZd0iTU/p8W\r\n5GaEEgcJjlLtQqLPo+PiH4fjgr9huVyVrc101nNGD8D5c48tU4jxRhGHIG12\r\nqcO+n49v1nB8lecAXom0Yn+jUzYpSwr+Y0IR4o2OXdRyUCxCjRYdcghUudEA\r\n+ycyTa7qKmSKz2iKiX8ClkVDh0xcvtNPvhlHq8+3ZUhUC+tNYtO0xP1lUS+Z\r\nanz3zfFACrA5XwQH4emeOFJw/8pFh0qt4TJ9UUCi7jllGVBSlNTQ/E2R+Z9E\r\njbtlg7+xn3io3zVvonnWR5CMsY3sIU/BDfw=\r\n=v7K2\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/embedly-card_1.2301032153.0_1672820690124_0.6023470070309458"},"_hasShrinkwrap":false},"1.2301041800.0":{"name":"@bentoproject/embedly-card","version":"1.2301041800.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2301041800.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-ThN30ujr25e+5XMz47d8TKEz7rCVr/2QdtKonTGxTABf78fu3o5/ya2uZprJccDn7Gsym9Sk9+TSH0YX+hrB9A==","shasum":"97d8386ea83cf8d931371f9d6c090d4277542bef","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2301041800.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1Fl8OTNI3eos6KwDbrea8ulqFG88ZdIja5ImHFgP2uAiAQuqRwTGCjRnwgSQGFnMLPudsUKOpxEWojd0OE//OxuA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtoltACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooIQ/+Mi+SHAPq26vpAvgynFrEsPQFxw5Wn6qG9k97quwF4zIXSLzD\r\n5+yoBMEI2WckWWCavpBkrOLiyXMB/PQlZLhGA6/VcIig4pNJN+e5uIGRrjWM\r\nO0FBBlUvLPU3AebBQdIEVkOQji6TMTt2y6i/S1Wkna+Z8jOD/TehTwBr6zvf\r\ntW4QGE5UnhviKFkAs1apgJTHhXJTEtpi2oSRpTHOokqkMIAUfGCZee76q5kC\r\nZ6g+/1Lvt/x/O/+3aBbIf2y4YPIpd0fdtb1pQ1jEG208d2OtMfmvAy4SNhE7\r\nQDLSxSPcpVXTSdrTEcXZ3AKEw135quM0ADQu2zn0BXnEVgek7cq3uWnhdrI7\r\nQczESOEI8e2GDmjsJPg6xsWKshf1P0qfH2mTnPcVjoE8w3apPfNIchshKXxl\r\n2DwqfWz9KPAZvUJwJXlsU8LTYQeJe6rk44mLqiKGZ0FuaWpSHW5lnYBdWwR0\r\n4QM3dW/0u5xTZ2X8r2F1vmFW4kgkGMwcSTGSdT7dSZTG2S8TQ+0zblE6OEd7\r\nqovTp9LdfImdbQKWJtNfzOfh/eiPAiOhtADEwZ8Ma/Dtznpi78khkM8B8iO6\r\nc/pF2OtAl7VCjzPWKhk31IW2yxr7A7dFd9g6xUZWNq0Gauxzw1zqG4mP9xei\r\ne75KULLgNh+/NnoOF6buIMARoN9NUZtw8bo=\r\n=gamr\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/embedly-card_1.2301041800.0_1672907117708_0.4796428542180411"},"_hasShrinkwrap":false},"1.2301100345.0":{"name":"@bentoproject/embedly-card","version":"1.2301100345.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301100345.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"12a8a2eb9a3656064439da35b736023090e7c78a","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2301100345.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-7D3/lEhoLk4ivFZ/IJ/XVALoqembqjVjzW8/5sU5Rsq4KGMyWe1nwY2NDFqEz99q/Cmw/2yxDUo90oWGdWjsIQ==","shasum":"211356451aed2f9f2777abc6f2d3d2c194473d39","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2301100345.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJXli3hoFPTL1jEVLUYf+Gjhh/HFOZ8lgWiekSCGcJnAiEApeAMgxIjcagTa5lNUOXD+dP+1KtJwxaW2SfdD5PbAok="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvSD1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcMw//WQYGAdKl6jGSftbtevhSRXSXruxzsM9Ix/r8hTwzFjyqAmBb\r\nvJxsTCrwUKOYY+F6KbZ/ubTasckboltrZD9saAK3i8WHngOwgS/8KdEWBgYS\r\ntREExOpynYMSWnXtZv8xQktmXP5ex05lVdqOpQi+QRuTZpqR/eR3CuHFId4p\r\nBAoS7NFPyOq0Ppscu3CIeC+ZfXzRgHhYatdKucTZ0l/pooRD4ioLeA/VKDCQ\r\nnxKyidHAXxHmeWpdrCLqtWTmRUkj43iTeVBBjgXMI8F/SpH6g3bugJizNW0T\r\np8DsDUQLrdyaHT/yVotKmKYURq6ADOxLgXUwoum84gRvz4PJr+svlkiRXSC9\r\npsG8/d+RmxicjshTdT2kZSJHlyMoO6Wu31Ch4Be/yHOpuQk7De4CMx0M2ugV\r\nxz2Wml/bnb6mXZIuR2T6qqRbb2ceFiCeT6sU8qWf8iGTlskC8krM9V1bOKrz\r\nkclpnzOysCDO1bw3QIUSsr4mMP8cTvuxogSVrA9KBe1FXGF0V0nHFmNCkHhn\r\nAz5VuSZNCij0dHP4tMAH4jcMtGesG/2nJEte+Xr82Kcm1LBJO2h5RlmHIWvd\r\n6e220Rl/fSSbHhP6p87DnEZ4l280smWiwt9+nxsSiQcXZLuYXDaz9s/Pgql7\r\n4r+sAQgqArbA1Zu+omxRVmAqXZPO8RMA0bA=\r\n=bh42\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/embedly-card_1.2301100345.0_1673339125616_0.27252799915282777"},"_hasShrinkwrap":false},"1.2301112346.0":{"name":"@bentoproject/embedly-card","version":"1.2301112346.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2301112346.0","_nodeVersion":"18.12.1","_npmVersion":"8.19.2","dist":{"integrity":"sha512-qMS6ylUUlwM/iZ8HUlXZgYvYJiGBFzRkDgf5uUtNjPSZ34uQL8+UWZWpPN9GJiCDoOwEdJjys0sAi8Aljm3stw==","shasum":"7a0583a67d8119f428a7dd89cf7283ada0b6865e","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2301112346.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZczPN8iItULirGZrkYew5CI2cYAL48E0bgipRmyvgwwIgN5hZRrxgFGevlC/u9W2ORIkx2GMdiEYcyj/Pprm1hso="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjv8RJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS6g//cj9ie78OAaoX4i6IH8v4aTSAmIa+M6cJNz/ZqItm9/t8oJhp\r\nuHXh9T92B1vblVUdTgSr4BBnJ4mGYREWJHDZJwgWAn6YeBERt7OEvkVp6+bb\r\n1WRAd0p95TiJHvYkoJ9/JlZh324lD3/T1mGA9f2bpbQgvtKjSmdSonxpbVHe\r\nTRZO76ZIgRyGtbyduYG4TxzpvMRfLpRYYZluopQzle+h04Z7kZ7M6ZD1kw9R\r\njHoVmOwkXx9jKu3xs6x8sbVZdhGcyeb5/JWqXhtd5NHw2VnSADh98zNmUZcK\r\n49VPlCClr8RjmQImF0jpGbHzlpAArIVshOcIGxXvU6UcoItVM5tCTwZBArfF\r\nNTvzCPStKNs/Y4uqo4TsgoayICk+2YG2uJuXOyqwGo3fS7k52IhsyHy9TqVV\r\npDwl+OXcMfWyCkXGX0gMkm4rvyymuiNojDo1VpQUdIvwErhEFcOadePDs0st\r\ncfe72eaEf9bJy07x6w64GsK2Ut0axeCJl98EwQLCUTs0EPQsJWPAX97NagoG\r\nZSPUd14goJTptN5Ai17FgcIVCBdDGcQFHxQSglxdUm0NcWdOkmui0LJ6AJy7\r\nysudX43qN2jhw6O94ooGkaP07ibnUjcdMuP8mcQ23Fn2OKoExCQlZwG+wHNs\r\nWZ0BwOKvI/2iVUmebyvHGY3Bsmn/aRuHLN8=\r\n=w72M\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/embedly-card_1.2301112346.0_1673512009584_0.1607370439578817"},"_hasShrinkwrap":false},"1.2301181928.0":{"name":"@bentoproject/embedly-card","version":"1.2301181928.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2301181928.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-tJsayylPofx9s3lAUXGFKvKTV/SuOwvdFtlsyg38tSmBHqVAtH962ekYAL5Kq+4E/PftoWlsjLjrpXFA3tbogQ==","shasum":"33ea13db2ea5f9169c4a6a768d781c57edaaa929","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2301181928.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEsP0rPakyMoZvO6FoUTGSzUpGueIBHtVM71UZW12advAiEAhFJbMQLqwUTIWPrO10EAYRQN7NkilKhF0YX7UM5AJWQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyP6OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUhhAAk8JPgebTwlGi3AnMuLuVhuaz+OsTeDs5b27SdaIyO1IMwb8i\r\nnvml5f6xIwMtPPzh8/C+RWbwuP8JlCW16HGy8QhZZXymNax+8jsaYiZLlMyX\r\noGwzu2DQkKL9VRgKftap52eiBt9G34sj8mgzo01viduxjkDPsT3gkFx0Sk0G\r\nmcf80l2QYiFPSbgm+4E7U4fi/1gmIlb97nUfIgzRzgYpJwA84p77RvpsGRXN\r\n0YcBeg6BInQ+z9LCmw7FXp9rjGmxj+J0dlTpKcxPkvVkujIXuu+JypZqYZDW\r\nw2/m74BXtdB6r1jzEL9GmAgeO+ZRgzUMzVtKEFIarM+2nTepxDBqKs+7a7IN\r\nrVz8goe/oO2mkeGnpyLx4krvfJIHJRb//pKarEvnzKc1NvzyLIHOWJDmkVlW\r\nIgE5oNp0DqPmWn/pEUyphZjfuIJZzEvPiDsNzYSvIMYnUrrgmdBsYt/heNiy\r\nVm0L/O+ZiC29RSE4laY08bU7i0PxD5YsfeWkJfZ/bfSZOcfyss+FPfRdWbyO\r\nF3/b5YJxlh1t9NvDEkjZ/2PHgM3WV+lV6wFn2USwK5HOTcXkWe7nO7208FmT\r\nkhVvuCY6twyq5iIZwuKC0Kxl0fl8l0jS/aI+01s8osvjqxTJPu1/OH1W4YSg\r\nGJdWKNelKwRZ8Qbuirmjwc1s6d5o4MTCsiQ=\r\n=h7qx\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/embedly-card_1.2301181928.0_1674116750386_0.13850994460432853"},"_hasShrinkwrap":false},"1.2301261900.0":{"name":"@bentoproject/embedly-card","version":"1.2301261900.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2301261900.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-9uNUUqM9LuMnniCLefWkHsPXup9tyJSzFhyZ0aqzNntfqgCO2ILyPEMyEa1VNSGcm/WApORe/7DzIfFPdKE0wg==","shasum":"9f0c0d8d5cd7c87a3a6da31a16149d94e01b9d3e","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2301261900.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDYXzz0/XKNLgl8igA3q4qIBE/w0N7NDKmsqBe4jZnvyAiBi5vx9BtBrbZlyxx3euiBGVaM4DPnPwu1i72R8FtaDqQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj04rXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1KQ/+I7uQJcdR/QfZwElBEQnJan4gaLX3GqM31fto/4F3/sxlvECq\r\n01dso7MzyI62hc9wSBkZTfo4dRqT9iWtNxnPVp/ZTigCzYbtMhDSBfXKrHnO\r\n7NIuECNmQ841y4vDIq0aZhmG9vaT5YR4KgWCagHioo66WwxVWDexdLplc8Ls\r\naaizpnDB/t7xy6X8Ku8yZvXghaMOeAInqygVM3tT1v1KtMjmKj7Me3FwJqkX\r\nUH1YVhkjGwiAmEYcQNu+eO7rCJ5XjGziqnbFsmEkOUbubx4qZJ+Gglc/MFnz\r\nOEfnPstpUbWFKvraOxULEfuCGaKKM8vSb6ROhZJwqyt0wCVVjOBeWSTbItMn\r\npbiyZYL95R6LjyXVr/Z3sVVABd1bQk16FZo/hixSbCH7+O46GQsLyFQRKyYN\r\n32yysx/LXR72FkICqRNpCEx4PfvHDT6rhB7+zP32JaqDiIfsIavW45VyOaAh\r\n4+gp6nnBz2GooXfFD0l3L8ylDrOb5n2vSlnLFcLmtv3KfP203+G+FFrF7s8O\r\nYlnx/WC98lb5htIDGtELKkl8aTdyKDeLt7fZjepRbbvfEw6E8xnraemfMKVP\r\nLnLdAlZqzhU03YXlwQ+PtFIB2FUkaOVLiJKCSqcw8qMmZgueNYgvWGP1p06Q\r\nLjS9su7RjVhsJrVXDk4Z74OM6SryLkk0378=\r\n=gVKX\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/embedly-card_1.2301261900.0_1674808023256_0.5357326799292885"},"_hasShrinkwrap":false},"1.2301301810.0":{"name":"@bentoproject/embedly-card","version":"1.2301301810.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2301301810.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"06d7a2baddf76737d7cde110a7b4bb9351feb38d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2301301810.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-D+kkUsaPw9FT1qjlKisqfFOOuezfbc0MUURiYPGmZzDZLkhNN3kwq4y38mQv7LzSKv/HES48Yzlo+cbwugaqJw==","shasum":"97bab12419761f53bc86348bc338723a605a82af","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2301301810.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDehRQJ4ao0IStpWhZw4gaXfipWJ1grWUwyMgq20zmOHQIhAKs5eDg6a+UC95L5udi0+eNQ4+xbyl6DoVuyscPS0SQs"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2NCbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+cg//Zadxph3G4xNNAujeLR4RYgJ//Fzx4cDP2zn8tp+itZtvglzF\r\nnyzK1DZbTI79ZVlkORHfxRDn51lWSdaWC/9slPkxCNlVAfg1jsJBbXtG9Y11\r\nPN6fspcgrv43uQEJ5HmkLlR0UFrm055bJuHUYMivccjuAIaHh92rNxYK4t62\r\nppq70bw/h7pnu1fuDx0RZNTZpf9D20a3N+zw5XkOGr1KEtrT1PHT2X40W9OF\r\n7Wj6c1KMdwNUaF6Ez5DvoQpIPS3B3KsODo+p02I77x9IsGgZgjpgnoWE3n48\r\nm+wmZS5Jy4LnzhgROvEB+3fBaldSssN34PuADAZl4QIi5JBCOWlw52V9jker\r\nKyr/CZRC+CMTNoSmsMSF8LgcRMKqPX0pOPIrJCWT6paunZUeDiq0erz7SZhd\r\nBcKDB56cxIYA0WpZ7txziwhNmSlAn8EQpivhrRSutMyxqdM/dcz+RG3AKzBp\r\nCKIOl98ETc3iOi/xb9txlLX00ec/eLEBUGzLQFi4Q6TtTA5ulhEPLpfb9pbD\r\nqUlVrzuBNaeh+Q05bL17C46GG46IdKdlDel2TCQaoQARXaZbMS5MlurpBkmm\r\n2lYOCXK85ibNpxmvUxJyXH/zmMGsfc9QKBNd1sHNmzBBTVYEGpP4NzIf3emX\r\nujvGD15MUW4hkVwNW9YMUBgtSGNg+f2/Lt4=\r\n=bcgs\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/embedly-card_1.2301301810.0_1675153563138_0.9669519597412084"},"_hasShrinkwrap":false},"1.2302012254.0":{"name":"@bentoproject/embedly-card","version":"1.2302012254.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302012254.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"e4c14ac075b71415995f07a6bcc3ca93a8af5cc0","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2302012254.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-wdnCCwGWO8HNx9kTl+AAd2RNXCEM0CnjHUtNZZk228F6s7ZAzbUDLEA+EYImMZH8M3gzsQM3Ka273ATaigTbKg==","shasum":"2e2e15a727043c26240fcae256e69b8fc5b0d511","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2302012254.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzn6QB1Lr3EglVLUexbDRMG8pUlwps/gpd8pXowruiEwIhAODX7WirGHkzO1gaRMG7sp2iME3BETqz27SpkUfKHDzo"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj23NYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSbA//StziAqjYMH4avaxaD2Ih085Dt7awHSjQdoHkIm3B7EwYaknp\r\nQF1/VpMBrxHiehSgXGjz+1dmA5ub7UD6J1TDwF9wycpKM9doU4N9LljPmQ/z\r\nVkMxwdjHmibm8+pol7WFas1iGsFbcAthxiFB12lEMA5itwJ/NcGlvsx22Rdb\r\nwiMtkoGpqkLiWBHvtxCw8hpDYZ2yhIL5SmXum1qNynGw8+avKyqmoNEZ1nxY\r\nMiWH9Pv5Wve6+OcYSfksXQCGs7ecYetOR5PFt/6A6tnkC/8uLc1vHWzNSt2s\r\n2039iRMci5hrFiINQwH/KKGd2iFjToUHq2W3U8ILIZG7M1YEdA7FdY1Hi6u6\r\nrETnu/2afZGb0NxUz0QiqqEfhlLDQNtXAc0eJcdWFk/XGNkYjl70nWY05n7l\r\n4nHh71+A148iYfhBxCflc9p7wH1i3sZi5eiGG6R8yUx254/aSbek+bcf/0jR\r\ncHb37F/0X4QOt48ZfHywUiUnU6aWI+uS775xYCWmzAeW283nUwwdZqFE7+76\r\nk19Ov31HvzXKWg8MEQ/g/QIuqPCjBC+rOs2wtp/7JwoDMqIRg4j6/iCBL3W1\r\niona1Ixv7z/psrwnNbegLIKzA9KXfFKF3rZOob0HVmniGnn8ZyKro4s6eyzc\r\nk26Sk6+NTnNZ0Nl1vQ0QJSp/1M/fbcSYRv0=\r\n=wvSs\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/embedly-card_1.2302012254.0_1675326296348_0.7921156678410521"},"_hasShrinkwrap":false},"1.2302021743.0":{"name":"@bentoproject/embedly-card","version":"1.2302021743.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302021743.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"a27cd72c15b628053806c94efc4c96730603dbd5","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2302021743.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-5lQMUOYPZStBvlLuN1vvKVglJ7pzMr6j/z8aITFwpd0hdTSmpmC302GOpQuKy4Iyh+tVd1jygrh41joDzvXVEw==","shasum":"890aec9fc2504ce8a670e1421eb140f13e4eb3c5","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2302021743.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDdvtdlt+zouokffi94n+0WaFagkmc1mXPEH8qfhxj/7AiA/jJDhHy3LGBHnV5y2kzKgdHgxkRr3lIopiDwU1yyvBg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3MUXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrrzg//Tm0tB5VJKUrCnsnVOL8ddp6eeKlKAZO5QcITZrok4lVna89J\r\nFfZx0Jmu6wkow8SMQYb8BYYq/xbNNNSnQMZgTEkzSrZwMoQMNQVw1XC5Dhkx\r\nQBaBcNaWhjZ9T4RdqkuSztwNz/c+eGIetbTegSLt9iKE1CRuGrtnxEitXKVt\r\n2aM8z6WUTW1o8iKWzdgMQWuY7XKUj1mUxn8x06xT8ZAjOoy3WKdSRW2ldYvc\r\nHzaH4tpFYyYLLM9LIKXoKJlghcZSMBwGNTpzoD3OhCWkna8V8vf2pTbfWeOb\r\nFPqytiYx+osESxww6ipSWDSDEb+bAsAMx4w81wQXp+OXn5fWd53a6XdyrRoW\r\nXHBZemWqO/cv6vl8QSVcZHFFzWj0yzuNIkTPMpoOl9pgO2pnoWK9rKsuVFBP\r\nMXgH6lZAUtx85K2OYZ9AIn5o0jLLfy0SHVvzG/0/BiEm1XXy4x+rL25fJEDA\r\n4gfgi/nKZjraTVZNZ5RJ/9M3MfGsKaBhdExKzuRwu2irzei3QYJp0XC2NxS5\r\nGOJTFtNQq5fnStgKTHmFAHx4HlhIZaLwOMZBejKUx0CobXal3lHqQQx4q0gX\r\nELbSM8BIuYNh43kT2xcbwIZr1v1SzEyz3w/hOsQnuzPEenZMX3LjJWDN6qHs\r\n6rVA8Zk3mmVUmliGiBfFhARAm0IHKWGpjVI=\r\n=lJlR\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/embedly-card_1.2302021743.0_1675412759578_0.8129823417310071"},"_hasShrinkwrap":false},"1.2302031721.0":{"name":"@bentoproject/embedly-card","version":"1.2302031721.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/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/embedly-card@1.2302031721.0","_nodeVersion":"18.13.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-r8MzjjKPGiiHp0X0QOfjIrNgKiU0itiPB/ntTDyn5fg5pdYhc4S5CW4QTPTx4sOJw7LBJBBORdBa4OoWTQD0PA==","shasum":"fdfe1d8c41f5342db9c7cb7d8cb5c9b1d8b27b87","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2302031721.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTa7ZfRxOuHyMMxUV6vh9qsIwSvUJtcSnt05kWOqo5WQIgN9zh5SIh3mF+9fts4C7jXaJUL17GUPpKadKE/hNJBkU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3hYqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmossw//YaC8FO/g9JgCcYDtkR9RLZBhKjI3TQLH7CtUMy6ZZOF9lXH2\r\nZyRxhW4Se+smVdhvifDuD/3B6XMjn1iLsfjw+yToqAyDuZzQf9tlWF6Vjgfu\r\nBLTfjQGYD/ziF3eidpyCBkhKOFxiqr2dajG6Alp0t5X71UceOvvVYFPtBAvW\r\nB4Q7ItJoSgmlnLzg31bDaMahPgixh1GGxiBEPXRCk3QoWuGELHqU72GnSkc1\r\n4nKhbkJYrAK4JZ3yzXISZHmi+6VI3N41mgOpFwZGcC6IWOC0dBWQBBiFkoeT\r\nXEIRLB0jCjSq3bF1Wco4yy7QQkPz/E7mtERWDQYofBH5UDaQbWskJUMbIKWM\r\nIQoGJzHeRiedQoLyySwuwUKfVKXJcVfgJiI7abTFYEEalm4ZnRbzgHTwc0z5\r\n6djk28DoF6u7Mcm3VSac8ApDyJLIeE6/XLZ6FCYPBviyUiHhbKdJvlDbjFlF\r\ngIjwxEpHQ690DworAc799KvyJTvEMexHAHlmcG6K47Vh1UUs50JHcgXP5LN6\r\noIbKcqvt7h5iQC9wUfWUFQRmaKlfc8hVbiGwGXBzSfI2RVY9lIPK88Gt10se\r\nWESFxZ/OET6IR5Rpn6DT1htZxVf4VzXyu+C9EjEWPF1oDg6ok/Kbhlhwwgi7\r\ni5yXvBn/hfBmSqkGKIhXVbNtznVLdalGloY=\r\n=VgPW\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/embedly-card_1.2302031721.0_1675499050106_0.30169397746894866"},"_hasShrinkwrap":false},"1.2302171719.0":{"name":"@bentoproject/embedly-card","version":"1.2302171719.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302171719.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"767b9ceecbb9759948c2b0db6f66c49097659f98","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2302171719.0","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-zCZApMEa/Pf2wEovksBTdZ8IEfGj0UFuvEBqWZee3QSZ712epKllwZlZzzAuNXYT1R65Nw3q1gTPUBbvT7DaVg==","shasum":"f4187a8e30cda07fb63fcb3cb735349071ba0f2e","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2302171719.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID9CXRAm+gAJkRlHku2cITsv9WwnXwpzMN4htfSbnKOkAiEAw2HV0IzPmsRa9OE0T6fR9HTOwjGMp5T4mSo4GQYjJtE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj8IrvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAFQ//XPHPg2SOO6zH/oOd5XPHkCfD3uZhV5jIO66wVzWLo2IB+osi\r\nKqROh+H3bEdzlkuEgRxAt0dtvqhdXz12XRArkMX+XhoxofsiQEEWUUrLemFN\r\nzuTLat58Co07DrjWEUjc0VI581TFE6kGY1bTzsZFi29cb11A1J1joQ8VJpNo\r\nXAyyzcd+nwLG93EfCTeBsygGEqnURhd4kmrsZUrCxYLzimQj9RJjofpGIJd4\r\nTiloiTT91TC8fLpikQ6KBDsm7r+Xd7afFnXYcdyMO+EttqAuYVnd7Y2l1jK9\r\n3Jc97iNu/IufnrQHcgsRCr0cef26U6BgZjOZFBRLfuawSW4IDZnYChCl+X1F\r\nBGUQwq44L0Tj454ez4A3r8PTwfbf3SgVQRJgTaTVBI0rMk6dr+XHov7gLblT\r\n8lGbwHAOXxrizLTQjHHTL5OMs8JA7MJfTLVzI3XUGOfK+k51AlXH+p6CVKYI\r\nw3RciXGwPosX++yBe655GRwdKt+GdA29Tz6g5HjlcXdYlwnu4FWnCrcEkeD0\r\n+SiZyz3iz/ArLnsyxfD36nYSesTIObk4DoYggIWiIith+1ZwYqhnA9uvSM0E\r\nl4vXurID3xZEbYf1m1ntr8EYX+odcm44BSE0tI0KwhyWywfVXIa79y8ZvWZO\r\nQoz2biHlZwCLHnY7r1kVC2SBOnUqhqFgR8I=\r\n=aPWJ\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/embedly-card_1.2302171719.0_1676708591101_0.984232622147456"},"_hasShrinkwrap":false},"1.2302271541.0":{"name":"@bentoproject/embedly-card","version":"1.2302271541.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2302271541.0"},"gitHead":"13cfe7f4354a82bebe08fd29496c4c7de848a18b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2302271541.0","_nodeVersion":"18.14.1","_npmVersion":"9.3.1","dist":{"integrity":"sha512-sfcCIXrbKZ676Pt6vLPZr2CL5jdJ8TU79v5AolC+VzisA5U80rVERFLzyzezWEOMvJjqq1TOyJC9Bwr9Zi7Aqg==","shasum":"331fd395a87e5eea681168748054a7da4bc3b12f","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2302271541.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDRno6bcH3d4RbVV6aYvvhkjg5y3FIztDnIEuhgFmJSJAiBYzlMy1ie3FXuRV4FoUSx9SXT/cpgTuUbiffbtHsxlYg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/jjBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrc/A//VUIS4ur5jGdZ3pWj1/9F+YfJY4PVKTV0XM+I/xp3O2KuDgZd\r\nsVm3gY6RxVB5JhgP6I+gFsxjetfBi7jQ7glZKWu5QsDA5tqBLFn05nDCe5aM\r\nH169TMqHooPAAF4QHmAUywWy3uzN7Yu2XZrYyrx3sSAwJh8pln2NANSih34E\r\ndJOkT8eYAlj0Hlg2KPYZzxLHIaTVLo4XyWC09HZoW7izyz9LiHPEJoD94bDA\r\nlhaoeTAYjg9Smn+tuFSwHX/V2ghvFXw0IFuosO2u8KsLlEVJ6rafWHcQQBFo\r\ntEhYxox/HKIEx5EeLRR/7RnvxzpLpOdMEdBUmPLm/CVWSOmbC9kYY1dcokfc\r\nDf0841M0mFs8Z95dLBl7cAAmu8cO8HU8i5ONObocN1/Eyp8jQh/4u5BzKym1\r\ngqDTqNnT+R7WZKfNqBd79E3GTPpE3dAmr16HbFClYseU8vfzRpQpa5mIE3uC\r\nG4I5+eANYIDg9Aqsh0rtdIXVRmy5jkbu3wtZfvpgK2Iosh3R0deOtXCI1ID3\r\nyvKUwwM2o04lmhW8RdEgxNNwxyeuYHs+MP3K1swAYv/dI+IStBwKILHNr2zq\r\nABHEQHvKE0BjCOBOlIRsfcWjyYhcKi4xfnUBm6zGmkmVii3UDbwJyZrD8rL7\r\n7NI84CcZ9iewDZa7TJxwDlr6Nnj4EcQGdy0=\r\n=Dpmh\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/embedly-card_1.2302271541.0_1677605057599_0.2694073006416726"},"_hasShrinkwrap":false},"1.2303151529.0":{"name":"@bentoproject/embedly-card","version":"1.2303151529.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2303151529.0"},"gitHead":"d02f1bef730eec6d78d3f2fa5968ca88a60acf17","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2303151529.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-Tq5DbQKvZXWZNLWleTzCagiDi6PnLDtRbL+mBCJQdY3BGlQEq6q8veRDXIBEs1c+YGLGe/S2SZVKdIWeeeZhLg==","shasum":"4ba20a93c233f30048eb3fc01e4c75d7d31ed0f5","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2303151529.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBawlNzQC1OHdFJg1sLytWRdHQi2B4SWI2ZyhoYAoS47AiEA0Yuh+n5U8/he3LD5RSzxLYY0ycV2C3CGhK67QatvM8Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEfGfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqn+w/9FXu78jEmPqH6cHbQzBX1H7ymZreUNroI8M6u5x48z2WOd/OH\r\nN/l993g3l+l+ZHItK93nmfboVE2nGCHwwMRPuFmlW9NQcdAjqnRkm8YqLWw6\r\nhKgoULu7ZFJ5iRu5UtB3fw4ikRXCYvxoFajw+mF4WGX8XzBoBmjhkA3zLXWb\r\nz0mSv0r1UqXu4gaiKxifOuqQf0ja7uOowRDO+jL9J1jm021a06ZJhvrQcP3p\r\nQrBwSB1qkH+r93iad6VKqcPa5EuOFpFdUa7UGshu70mtXVL55GuaUn8w4lqa\r\nDTk+USCVU4heMQElu/mO5l9a5ZHlTsWG3dTUNO3A25BWN7NB5z/K2O3ebC9x\r\nZYqrYaDjS9tIfHm8YAK8GBxCTmLBpFojywKW2YGVHSCYll4XrqxjNYkHcA2U\r\naXBS9HT3n+EwgqKTslMoWb12AV56WJ0j4R+7LfX03zcj2SGM6vWvhLBb3hFZ\r\nYrqaNudEYJMNyfPHoVCOInv0zPIQClc4oMZdVGMFcerXiH0OIzMnD6XNBXRc\r\ng3KhXnLa796Q6MrD8p3jR/kdmF2Q7Y6Ul8UuOaB4Z9y++bOE+dbx0f6m4LK/\r\nc4kd5rn4N92Os0UT58PrDbInzpFPeY1p145qe5GsuoeqXO9KCwLFMyuWP/bE\r\nA+G1MtpyP2Guu0892UA/S+bhY1o6s4RK+qQ=\r\n=vabV\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/embedly-card_1.2303151529.0_1678897567571_0.7356572431663226"},"_hasShrinkwrap":false},"1.2303151621.0":{"name":"@bentoproject/embedly-card","version":"1.2303151621.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2303151621.0"},"gitHead":"d02f1bef730eec6d78d3f2fa5968ca88a60acf17","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2303151621.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-1GPxI0q6xPVHmUtO3H/5f9b99oNKIXG5vJAgICfp9Y671PNg2c2vq/Y9vFPRMgaKvme3o+c4083Q7SPoSkllnw==","shasum":"4d613654b428a3a06890117c05a2817926ab42f3","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2303151621.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAoHZBFH0cN/8isS+0Ou5nVmEqxjC1mlkAdZjcjIjAQPAiEAh0kdWjZ9/i/NQOumKyuDk2Y8JUXjfzychfH2dMdcrgk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGrtDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRfw//eI5R6wiQuQsG4VhmLtx9M3XTOU7Lqarr0PYvoDjJFR8RIwFG\r\nbh8b+VdlgXd4X5tt8eo1i+6IWj8g1coTEU7w2UazZun4vTESqKNv3VDFeEDW\r\ndltOqlU7vcMFWMnv9Ucln6FBcoGAv0XkqEPATSfmUDYUXWTifG+jE5KQh+O7\r\n9m+Xdh28Sc8U22bY5nOIFdqzfo3RM+mAQIxPEgwUrNZ+YUFeBB6/cCukqbOm\r\n9EdhK8YmS7TJHcmNCpz+rx4ivtX6hW/Y6+2oCrKWLKa3bJYq+zCDB7aOZMbk\r\nFvVll70jXpyPfC0ILY//9qGqazoo4sOHs847pu3wA9AV98fcdH/5/8ZxbA76\r\nf9jGV0C0U+KzQZV1j9ErFRv2AK3Z93ChmrPlpRJQvJYRK1tb5TOTDXAJOOyj\r\n3Ad4kDllyih0WCxmc/oPVlJRMu41HbJxriQh+W+QjqUAUZokgRhpvzTDSWPK\r\nQlg9thWxv4eTxmzhlOu4xAKkgV7SwyAQaE75gfoHb3T2ChjkloZqtoTzKf3f\r\ndKJmTrmx/4U0YE4j6JD/G+LVdoxm+AASps8dLAYDETNFNkW1I4VO2UF6xaCY\r\nIHKBcr5v+1oWQot10uy9Bdm6ROrYHOwa3ge/xz8UY3Qxks/GCfoA3jpea/jo\r\nNYA35CAHEsq7W7Otpz2HoFgTgYmWaNDRu6o=\r\n=Bclz\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/embedly-card_1.2303151621.0_1679473475586_0.5488040764214686"},"_hasShrinkwrap":false},"1.2303231800.0":{"name":"@bentoproject/embedly-card","version":"1.2303231800.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2303231800.0"},"gitHead":"bb614003484012cda74511a460e3958f01512a79","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2303231800.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-Ese/4hJQglMZpkp5f9rBCcU2KuEMVU6nm9uF7TMRiM8h8t8HY7AVCqKA4il5kE/ghl2XQUltaEXfQw6vWW/KYg==","shasum":"08b38fbbdebfd8f8cc78a2952c8affd199e2dce0","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2303231800.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBz5XcehaW1QtBJlN5juVGGfsh5vNoxzdZ81BKPaq1/qAiAiPgF2zXSP49jpPltFVPIy/lXTY8prOOgaR9++eqezUw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJAsMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWLg/+O5cvfWRa/Sd+OAAcGXqiuLim4A4582HdC+WfqIzDIs4MheNV\r\nVafWD1G8UmlR5Vn2WUTvOb9RqOn8wFa9Q4PWzftt0rvdeKRUiWjl5Fe0ctqm\r\nuv5h9TMT9jZFobiODxbia5w2XQjrB9qwoE4tClMfFgT/EQ3ArD0hJI2VK09i\r\n0XTRNFxIMoElOx/HMnYeHQZJ/C3J0J3MMcK0IWj0wLVBIMuOGOjOW+NRrQNG\r\nBc5ZDrIZ/UAdNEQ34+MoN/JfINrUmkMq44aPpKvQpr5c96n4XHDQ370wP6lj\r\npEQFXno5zr1hKS4CHyoNXqr3cyPCBnCoOWQQ2wjSuTpEZUo8JKmKzwiXi+tZ\r\nl00njzAZ1jVMbrP4zzQ25VQRDGcAc9sHrtjrQ1Mk80Mkh5M0RUMOvFhz/LCd\r\nbiEGJaJksr7qWPIUsukGc/0Va5iPw3EoON4nBYBVcS/ouk5PzKufKn5A+sBS\r\nFQviqPei6xXe6zWrd65+UbQc2y2xIlmBKB7ZJgmRXnH2TUDk1BlhY/q+RH//\r\nduRgj7/x8QDCJuI9c5hhvr+fDdQPepocAc/zpPMPafQ2VuROW5GE8XovwaDg\r\n/YbO465aPdoHjw8q9vcCLcR9Do9OCZacu1/XajivXTflcSVg2WAnJgtjal+j\r\nz4wKtpBV2y5sIr+fqyLsTlChoIlSKN1wDbk=\r\n=uwgC\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/embedly-card_1.2303231800.0_1680083724082_0.5987750508688898"},"_hasShrinkwrap":false},"1.2304040531.0":{"name":"@bentoproject/embedly-card","version":"1.2304040531.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304040531.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"201864e5a81ca3bd8ba23d3a14d9ac4f88d7a66d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2304040531.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-72htb+eSPAItrp0uNnZlt96Ardg0TyOe7b5p0fGIUCOAR1cbUymT9WhlYnHOME2JrF5hRMKMnHVo+djDjWKKEw==","shasum":"e247dc9ee712e567cb878b620488049884cdb351","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2304040531.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVdFQ7yenv8Y0g9dfL+AKAn61Wgkn96hW04Uziua7h4wIhAIRwnaNdfokZ2QRVUDfk18ojvkjvrDnHfajVpkEUytqS"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkK97cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhPg//Ri2amuSBca2792h35DUtXLonGQY/riCi8+9wCEE6ZmnQJHRh\r\nDLi9kEPGQSJITrDnSjvgM6lCXBpJol1y5XSqQib3C0+OIAlnPbXP08zQM+4f\r\nJ8n2Lw3vDYgAVpGt4BsenPY4cJvXYH/EqCva96+bmgqBAOJg8N0uWiQffmci\r\nDaYWDwN5ipMQaG5a8cl3gbq+NPko+8hOm2H3dniFHPyb63sA7FhRtTr/mzYn\r\nh2wYL041YdBfYit/n4B+VdsCh+stBBrGKZ69wHk3RuQwC5lWEUExTY7sq7bS\r\nHvw7HjmdkEOqTGcbXdINMw06BKI+7AkRQoBy5f8L5gcOALBglPntCNGH2nLy\r\nRiYRzeauQjhlUwE6VO5XjptrBxsKoPPbrKcnJ51IQtXHcjLsdez3NmNs6c4W\r\nwXoYvVyaiyOzXFspG/aLdZlvhT0/rBOs2x7R/Dg/1kEOOvQ9FcHXFaq/Axxw\r\nmdDPqR1jOkugP9yp6bYuZ6Uz2RLnSk560RyfWrWCOc696MQobqyiT+eSBq3g\r\nmvF+JVuIOOaPaxcZ+8TvpJRzXfwU02K/4nLzwKAWF5Unp7NDThLagDxurBMN\r\n77HTEWLypXzMWJtHfz5SLFahM5IyiF5QW7djTsqXeRIP6Uxi5mkiiSaYrgPs\r\n1ntgnkIbbR6XYUdkVdYd8/c3qd003ITr6jg=\r\n=uu63\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/embedly-card_1.2304040531.0_1680596699918_0.09774382394506542"},"_hasShrinkwrap":false},"1.2304062309.0":{"name":"@bentoproject/embedly-card","version":"1.2304062309.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304062309.0"},"gitHead":"988ca302278a65b8d468409a444b029bc633cd01","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2304062309.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-O3XzjjNesnhjt1oJE3Ewp1ylNgwXENshp6sh0GY2GPIELw3UImpWDuEs7+qxe6rSJ/cfeCe1XUOJRPsaELptSA==","shasum":"04627d6c06b0062f1f8a2e1fab588a7641f5c9e9","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2304062309.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJpJt4r9UTpui52ehgQ4O464OgtIDEg57Y5WQJu3c6fAIhAMZX2TLqNFYArLZFTbZVYZY5BUUOBEH94POkX7KleBBB"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL9MqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqBxAAk7Wkmxq1kNs7yFRmJlnIe2Xtf2Ly1QFQJdktiUbS0Y47+o4Y\r\nbTqOI4pVMZDRQThsnlpMt+sK5pNd95YALjFfTIua+lDh3R1UooJN/itIQeTm\r\nKCbiM0xCeyVWslOVbsqoCNPd0zF3gaOesUTPNAz9Vx7WDQRtHVTHX4klkHWS\r\nyCAXWbxnk622K2P5ZtS4JpbZGKwEzg/OskShzy/gSgEAN+pVolSOw9An0ce2\r\ndtO4fIy2OJIF5v8U8f2OiRyOHzhcoWDIdgN6xTnkgCgVM6EV9mWQmAYbhpMo\r\nqbviV6eJLFvsrWXuOBFbY3/04xkA1keZUva45ZqowGT9arxhmiZH20OWCpMv\r\nhCxUvDYrGVHNAXSIZFP1t+YFAEyfh0LNNzTa4lpjiHIYcdZt7llky49WTeim\r\ngBLB1BNM7zICae5n4FpKwrqvotNkyomGNVgc4w0yfdPIEI9iweXAt3hnGOod\r\niSOF79MH6utV+44vGvc+rlg9r8ebLLt7e8G3kjSMF1JnzTe7qraJlvQ4QbDO\r\nkzkCvQ2BRbFfLBUNgcP2WWEpiKNildr5fRTLpzb3mN+6cUYXMk9jRzahD7aa\r\nZGqnA4XmR2z8A/vS33JgwKsGD32ozrNHUvjP9MMmSLS+/IgXQ4+UguWDxuz6\r\noK1IG094OgTTZb3JMbq8pgSNmLIVf8ql2uo=\r\n=nZ3q\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/embedly-card_1.2304062309.0_1680855850300_0.5360687333506837"},"_hasShrinkwrap":false},"1.2304122229.0":{"name":"@bentoproject/embedly-card","version":"1.2304122229.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304122229.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"a622b88bef291701e9f95f448f46d014e6e12d5b","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2304122229.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-9gMfng8mq5IVoy7VV4JIc2CfZAFO6/MlkeZ74TGzKvb0ol+b6Gh1G13doXcHW7UwldwZcMquRyq0ZJnZ6gO4Bg==","shasum":"bf4eb35fbaf738ddc4f9193985806325500f058d","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2304122229.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoPaOOyu1tCSvMIwI73btBDatXy2iOzQYVx8Zdh88FhwIgN5J6M1vHqoto3JkrQjeqp6XxfLU8SnL9MFajBh4rSlw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkN7xhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWUg/+JFPBYhmqVeTivEoQEabko3t1zK85eDsdHsPwgetL71PbOMMz\r\nXJ0Noact2YFI3sFvEn+//W9Qt/xX20cErr8tc7EZCUAbcH6BfvFyaIb+//7Q\r\n20u/XOpAal71okVPS2gdE9usyJWQVLCyhaByzso1DAfZkK5zUZJnnuXWqdjo\r\nL4Po91MhpeZVvdd8x8kDVsOzcWSVqXpCUJ+hkro1wI4q4Q7zr0RW7kdzFkzt\r\ndUzcrY6gye/zNNrFIG0ov0BK1F9L4z3VHda/hE8y+/J2+ZHUHrOKih6j40Sk\r\nyeuv8ZiKJ0hqIntqz8gMrrKgOSSNzDGL6nSsfcijy2LN7lUUg+1tb3WzWLzY\r\ntB339zvLX80PyT7QCeTgJavRxU+Q+jg0Fvsy1/jNF9ZvTPO1Gwdp5WJs/Snk\r\nC25MqfbNaF0n3zkJ1tfXca7otDxLfejmxjDslUcyeeUCGbFd0ILUxCOORzsl\r\nElEOyDDWuyNrAt+aQ/+37MTTPrv2i10eW6LaMJEPAvOqymeCpthoGTepqbFP\r\n9gtfFl5bcDeD9Z/sxMqzCTIIVlUgZkLnoqjkxrjnjcTU14GaFOqzXKSdxwjG\r\nPTivtK4uVtChMM2kvUkt5dnD4rpOOGfO1qrCFI52Ia06xFJKMb28vsNYiprh\r\nXpGm4Wgujc8mTMF3I+HqajKTafpBojM3dO4=\r\n=A0Pz\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/embedly-card_1.2304122229.0_1681374305133_0.41512354749813896"},"_hasShrinkwrap":false},"1.2304132133.0":{"name":"@bentoproject/embedly-card","version":"1.2304132133.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304132133.0"},"gitHead":"453223019920559443567aa4d698b7ca016b28d7","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2304132133.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-NvTTvYaD4aWKqQr/q06y+s6yBJRpjRMm2R3xukWXDuVaZgyTQVqe7Um9Kc8Hb4IaRR/b7GpkTgAKs/kyEbQ+EA==","shasum":"2814ba6c1c925e6edfa5ef7b389893b096e528cd","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2304132133.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCX+nQoKufY8qIJBnifG/lyLJTa8zWc2A6agCsKLjGl9wIgKgOrqz3gAkYuDmzN6HBwXIz2cDgVnUuFOy1RrV0TITo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOQ3hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXrw//X6pt0hFBjyCIH76IIIRQwIa0eLNrIpHpLQkCG67Hn9ZX+OI8\r\nZ7nGmslNyv6JdyoHon7PQWNxUBmzy0as3Cca5ZdY98/C02a1Lyh6FokjOOA0\r\n8Rc46ZvHYjpE8HUfK6Zgf4Syb5idIGArL0eE86r68xWK+q7mIKdBOrJAcBuH\r\nIVGI7vzsS6Y4Q3F2pvfYYGTAZLKr1uLWr8RJSHCW5VTxKSKFrssOVrYjo1QA\r\nOjAgEOfY16RoVAOgsi4A3W5QQoLV9lVnQv6z4/qlgg+7Otr8Upyxr3OVvJx1\r\nLFGZaTJi3tb3QDok217zQUm06KB++DUwmWAd3rsXlitSE4JBX+NTlwWSaymW\r\nT8FzRwDU2OkzR/gB0+0f6lglKWTwmdgz2Kr24OXGjytUvd0H4hBM41tDU3Ky\r\nmzcn0MXEBieigcVM7Bi/1r9d7pQeiIxDDEBCI2yeBnfB0w3FImhoBe8s01hP\r\n3vgKULb8QfbIP+8UxGV6Ig4IBhX3PsZwPzWkFSyvdF3e7sdxWG88p8QU+tKP\r\nnCEi/77uHJe2X72+gcoZz1sIRELXW3RCbn2bPXl3BudZx71JZid45/HbuNYi\r\nQKcwzokjf2nNCQb9tk2OtPzjp7X0otrOoSfUM+O4PWmNj1f9pY5lAalpsWJm\r\nSdkK0DccXmqGIj4HkzV12egmbbwzkgopUX4=\r\n=FrVv\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/embedly-card_1.2304132133.0_1681460704821_0.06140351682007972"},"_hasShrinkwrap":false},"1.2304212144.0":{"name":"@bentoproject/embedly-card","version":"1.2304212144.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304212144.0"},"gitHead":"74060fa076cb05cd0859ed848acd32302f1e46dc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2304212144.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-h74vKnCXMcOLuOpME1GuPyEuC9HgYCyPhi1Hg+8mOTUsw95WUXp99a02U9j2JKj9IZGE1lFGg+0xKNRyopyZLQ==","shasum":"8f7d9c59d204f550c757da99f9e15e5c77802dbf","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2304212144.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1YUpCdc449mUcBr14z2rb+pwAD03trkLHtK5WtoWnYAIgQBXwiw9aPc77m7JbEPDseorCIb494RZcmlBca8DHxY0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQ5pPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUVw/9Hf6mQe3iBT8QD6oqwEBEj7IzKn48aRG0pq956jBHGG1R5O2S\r\n5NZK/KNfnx8rxIEY/Gz1vVmcFt789U9+HE+dHDcDvgOk10+WX2Et1db58lRX\r\n0MZOh/663GyGEx3woSQmB/VrLxib6EF4rBcDBxJy44HIRwBZlybK5AnKSOrb\r\nVDxOMsZNzVM/wYC8uhEuOPFKYEyKgLn8xe/H7xQ9HZOKvN1G+5mFnF0NL9e4\r\noujaunUdYLcnPck/5RwNjaBuuA5QUixfct/1Bn6OkmJOQ0QcP6ROpGBCafhu\r\np3OhoiOednXBqCXBfvyKC9bNiXmLkXKKbyRkfwI9g6Myq5uPQO90z4PCFTfY\r\n98EoHSsTAvKNyfxc0TB5X191Nd14r6+5QgLMX1X59YdQOzNu3xNZjMWaYk80\r\nXC1+/E8TISOqzpfomG0U095hgJSYoFQc4Z84zBfvImBOXRU5NA4PNdkCwBky\r\nm/ZphyjKpXyzritexvtIvK1Me4DkIIKcIFLI3FzkjpgpcB5lIL6RQZ0L1ygL\r\n2LI62HqSIGOyT7DHYAhytQvAYj3SCkGsNw8lRlPKE2143pBqQaQuV2rE73Fb\r\nzH37ViaNKGeQTkDJobjLKzRw3qudzPeQ3/I1ZPxn2V7d8ute+irWQq9xhCPR\r\nag2ypR7LTCdwHmmJgkVaZHuaqlb4BEasrjM=\r\n=2KRk\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/embedly-card_1.2304212144.0_1682152015287_0.9776407943289085"},"_hasShrinkwrap":false},"1.2304241924.0":{"name":"@bentoproject/embedly-card","version":"1.2304241924.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304241924.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"f962c0db0e4934715d4bbce41c2220e6cc8bc1ec","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2304241924.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-fWbTPDOQCbvVTmo6PMcS2mbuEe8XVSsFzDxKy3kcc1eklM9ukUvDRMFsebDVO4kHii/UiRT7TNWwch6HysT/VQ==","shasum":"5fab67e4655944f1791af31d8b13dcfaa9ff5424","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2304241924.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBgw8WYulisWSz1DI+UiArFWP9YN9E9VXt1cIZgpMZ0kAiAZUUEdUP6skfZmDtzmdRlQAD0e5FCTwfDRLsdH6ahSmg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkR46rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRxhAAjzcJj7tSTZq9JvZtyYk9ZOA+doOFDbZ1VdA5ngA9y1U62ekv\r\nJ+7VgIz0LCReRrM9A8jSeQTwLP99ugXLnaIWWnGQXmDoxvLyHTRGtUIC8g6z\r\nN7NOxJvdCDzwCAB5ZeZd14NcRd3KT7iQm54jFH09LJe9P7/tHXxYhNd1ayzO\r\njsErOSKj9h7VSKT5hjEcvJCrr5aP9RGhuQu+7IbZeb7nyDrMrJDd1KK/YbjW\r\nXhud7r/K1AL43VsTR/uQU5CEImaOp/xmX2r4FMpM8jl4sUQTpfC+72/T6avh\r\nSZJeXZzSonbyBJ6G0jtoVN4Sqr6yeUZ2ddXqt89aTiYmt7IM8r/urVg9Z7Fx\r\nLMykZnKTLf2nagpMTBtiSx+gIfmAiXh0jQkabj+bpiGiugo66Rq4PewkDlGM\r\n/bv1P+CqWrFMnT5UjOHj2fOsqFL+8CxFchYCmXupUWAHQqGQ668z3HR1nHjl\r\nwHLPSzl3vOEvmfYac9FSSg2qEoH602RBUasfGPWuKdATZRr5StsdctQ7vWCd\r\nWZmIrkz1CoZHnuqbsCEWCawWn6ARa5PIwLTZbARX6Kh1XxFJ24+8R05qWJrN\r\nZnc9fQwhAM+RMOZTUWsZdknKtf7J5a7CGIw2s4lYoBq8tXx1yCb4yYdgkopg\r\nRclG9Bv6T8el07/9CVWBj7LLFVgS6jXV8T4=\r\n=Tp7d\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/embedly-card_1.2304241924.0_1682411179238_0.5905535336575614"},"_hasShrinkwrap":false},"1.2304262219.0":{"name":"@bentoproject/embedly-card","version":"1.2304262219.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2304262219.0"},"gitHead":"1e6e00ef42b6ca33dcb23d56bce6506f0b5b81b2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2304262219.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-5NB/Mkt9eroc+vq1ZPcGnWDS4Ue4oq30ncB+afDa7SpO1l1JWoYlEDbUXb/QeD51kt0vuaGfwPG7EwZ3D2LN2A==","shasum":"16dcbf3d9fe9c75ce71a17d7c6bda96bce9f38c4","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2304262219.0.tgz","fileCount":29,"unpackedSize":1196041,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDI1CXzzY+BgrWmMvz9kufZnlREX3BDE7+sXkbR4teuzAIhAL++gCec2ffPfXcadDXR6k1xEp2UX4YrAwA7R+3vYKcb"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSjHoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRPw//VEpr7NthMdEguofv8VoFR1qdLaSg0tSBPPHR8EJ8+gFGe43x\r\nHWtWRDwmaXOBPN0ittZ4XxiPLuQOVGDOLO4Wzt4MqegxKCu01odN4+mXvZEL\r\nnyVPy6rrqMni944FQJX4B9Gu3zR7eoGtcO3N8eDJlc0HP0ey1+EKgcpNg8WY\r\n3Ftz2XTsFdJndUb/PsEDjK3pq0HsIpaupe2+lCnQsVmWtJyjEbsxS3yIQc46\r\n9CBhAQFfAq5d9oUkLFwVLjqaQFhgdxA4YwytpwL9uUNnBktHjb+xoWOT8gTi\r\na9q81351+r4BxjBxgV8L1slqq1GnXefCborsANiIlNr7WBFOCETJUfPbzJw0\r\nWsBkZrREzOOhPZ/CP7FCR8bp6UeS3eH/3wfx1XCeLCTwfVpGPrJh16FEhZfY\r\nCBvgBdoqq893nb92N4AktsEYWXFMSa1r2PEIm5ZtFHElsExm0gPtIKsxcYLT\r\ny67nH76ST1onLN2WbEDW/AdVdqPtQF7mvFxPWgSz849z+Q98IoXp0UXxH3Nf\r\n1lqtv1BZrZU2/eWUnQP7om2+UaG2T+RzSG+t32GBoRako+qXOOycFlstkG7C\r\no/dpIxe8zsz1rMtKhRun5ihpOd6BY+bhZ06BL7bFIyJfRbs9SnGUMkTtvlZI\r\nNzx+xvDOA0jjIAdT8dMnRK5r0+I5t6nTGfw=\r\n=1jC+\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/embedly-card_1.2304262219.0_1682584039958_0.08703384645857892"},"_hasShrinkwrap":false},"1.2305022024.0":{"name":"@bentoproject/embedly-card","version":"1.2305022024.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305022024.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"275d6cbfacfdba2a626c1c3d191df16325439dc2","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2305022024.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-8D3jTmNI5NEK2djyD2wms8RCejLAzXPs3yLFi39zJXrxSULjiNk4LDVnASEKo0XsN7ZV1zSIeRj0a9e2scYNLw==","shasum":"f429d088c8110667197abe9b011e8623c6d91b1a","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2305022024.0.tgz","fileCount":29,"unpackedSize":1203578,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGn4dKRCPZis4ng/RostsSCyLdhYrx1aLYh5MkIh6k3OAiA8e24uipNMeKzwOW9tM4htKHt2xpJtqPqNHx9YGXFCsw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUhrkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnSw//Wwczv7FduQCHQz6pxuoe+Zb9dwBFmabRF0uemJuNCqOQDgsc\r\nfx94RT5mO7Ek33mACcHmw4lQwUC9qg2/S9Esd2S8SnBYanRd8uuZ/pXnQ4mc\r\nw+mJ1AVPendvISKCTUI1eDhMvbfAlTWXEiXZxKHPna+avp+bg+kFi1KIua6Z\r\nT3RSE6R98yv75ppObaOGBvXizZ9XdKu6vG7ALUKZ1CvPBrCiQAfUW+zBW0Qv\r\nWYdeZzvR+85L0k6QWOVGbEFqXSnoZUnjegl4yjZfHsCsC8TMk4sRLCLq8tBO\r\nKW5PvA188zvcjNmnYZddLwxlJaQMfUMk6mxW7D54ZeOW7cHmLsHJXxUjGMfH\r\n03JyKtmQhkIUL6u6+VnNtjaXdjTrrAerbv7eyckDHs7zSIXeVeW4ejsNLuxM\r\nD+wyMudGwb4zcwRFJ1MhkNluYgvH/PlG6ifDg65Ip4c+VDzBKK2xr3Cs2aJl\r\nUizGDwWlwYRIWl1KfBaYwdPIkMfExSd6a0ovmjMHnSfOS3egE4qd9SO5dNSw\r\nwtbfmSudL1QvL4h6puSKo0WlLKAlvKjDuR5uCaOeurPn7xcXiBzzZHdWemdQ\r\nUIFFXaEWRxv+FpTDX2CFjz0TIcm91V+/t8GSP5mEP9xdaBUwrNaXKCMMKkuB\r\njZXUSCRaXtwg76ST4JyYnx/y2C48Cqzc8Q8=\r\n=soNu\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/embedly-card_1.2305022024.0_1683102436163_0.7904118669350941"},"_hasShrinkwrap":false},"1.2305051745.0":{"name":"@bentoproject/embedly-card","version":"1.2305051745.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305051745.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"a6aa8f04998e5f74539b892e6fde8143851f1ef6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2305051745.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-tNZUmBgmMCO0nWvHTFtcFZ2tgdyk9fwgPZR/1cgsFZoJ1TogyXIlZepDDZlPU2F1oL9y3h72JRptalg1n27xqw==","shasum":"e39f5a0b0644652e5e816766cf28c16306cac102","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2305051745.0.tgz","fileCount":29,"unpackedSize":1203578,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD71RG/OLieXdzd2y23lfViGW5E8qt4oQ3TY1WUpNmrBAIhAOxF/Ic+RQuleZJHkwk8+mCyZHz0A4yHYokvdJHdQlys"}]},"_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/embedly-card_1.2305051745.0_1683361533734_0.0653309311077066"},"_hasShrinkwrap":false},"1.2305152039.0":{"name":"@bentoproject/embedly-card","version":"1.2305152039.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305152039.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"4130d5e4016e588172d11ef0a84dea019bf08e0f","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2305152039.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-261ErUpPD3vGmntkeJTQcAr+hBhrCAs9bjNRlltdLyF2l3F152qA9RhQWXS0ynKcTHi3WefQ+21vd39JPQ7osw==","shasum":"24f542a8eda30b4f236f520be7e47a652f6798ea","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2305152039.0.tgz","fileCount":29,"unpackedSize":1203578,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7eA67AAmvQwHa2UQmoDKseOutSJdIQ/8FzJY0+hMAYgIgZqlETNl8QPjieWbcs23PJUB0nwwGzjnwHm/rSOYWfUA="}]},"_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/embedly-card_1.2305152039.0_1684225646749_0.5128374249949124"},"_hasShrinkwrap":false},"1.2305182038.0":{"name":"@bentoproject/embedly-card","version":"1.2305182038.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305182038.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"885f40954f2783f7451ec4e195b909ce170466fc","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2305182038.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-rXA4tEhJl5VDamMT4kxblBcAGWTNnpvjaoHelrcWBMcyU0h0w+qFBD51UFg+YSRvS7oBJYMhtlP4Fn44WtkB7A==","shasum":"e95f0f2b96d9b029ddf22d49409431aa54e34859","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2305182038.0.tgz","fileCount":29,"unpackedSize":1203578,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBuuc8g8WHR6+PbCp/UZNGFbEGEQ/j1PUszMhsTaAgyYAiEA5uQ4d1fhms95DuE0RYxMh8fxCIFhWzIZZYIgQyJshqk="}]},"_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/embedly-card_1.2305182038.0_1684484846129_0.8161109247784011"},"_hasShrinkwrap":false},"1.2305221508.0":{"name":"@bentoproject/embedly-card","version":"1.2305221508.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305221508.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"f6a823a49114a57cdbf351ab983baaf0bdf4bd1d","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2305221508.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-MQ4cCANDpxZXh8kYysGB1IKbceD+NLM+TnIxAdNZj/+EfolJhGTKKTKH0JbV1cPLDOke284uRAeqW7zXCl9Ung==","shasum":"99418a37bb0616f02d350423eb4b5c69b8b5d648","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2305221508.0.tgz","fileCount":29,"unpackedSize":1203578,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+Zc5r+xrqTzsjyvPvsuFdM45WgsncUa+lXIYyAIezYAiBZepOGFy7zK4WOGUTJP6qc/5wVZ+SjBbYBJWe+/+TGKg=="}]},"_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/embedly-card_1.2305221508.0_1684830347223_0.4557787960469126"},"_hasShrinkwrap":false},"1.2305051745.1":{"name":"@bentoproject/embedly-card","version":"1.2305051745.1","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305051745.1"},"gitHead":"c7c16e5e6f51fa01e6e31b5edddf60feacb1ebb1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2305051745.1","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-wlN9brtV+w1ISOwNjFlMUT2vowvrTH3708ETLw+XzAo1Hi2Z9Oui7W7quhtGQVCVVmcFc9wphJa4NnPBaROloQ==","shasum":"17a066dff0c10f0b43087e062ef1b39f7a0f37f5","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2305051745.1.tgz","fileCount":29,"unpackedSize":1203611,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9je9J5wsOTSScNKZwXx/e5DdrXwmwKCve1vGFT4BBZAIgKFgS1iQtFu7A2A4rSxt50Qk4JM7Mn9/1cTmC8Ozs5oc="}]},"_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/embedly-card_1.2305051745.1_1684883017152_0.6606764083299805"},"_hasShrinkwrap":false},"1.2305232041.0":{"name":"@bentoproject/embedly-card","version":"1.2305232041.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305232041.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"c7c16e5e6f51fa01e6e31b5edddf60feacb1ebb1","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2305232041.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-T3GriwXhkJDURVQlnqNDz0iR4SZt7EchjkZXlOQZM+3MsEuOynyT8+lEBKfpiWVi/7o9+V5+8cdQUAdljJZScQ==","shasum":"9392f4e0ad26820b3cfe6dd760a4fa4b66fceddb","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2305232041.0.tgz","fileCount":29,"unpackedSize":1203611,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGHtIykVcll740jAghTtbKhspRty4f94a4BgWe6aaQVCAiATVINwXe0STPEhPba+5hYQ96XVaJNYxQ/cNxjUt0nyfw=="}]},"_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/embedly-card_1.2305232041.0_1684916772445_0.44379017577813484"},"_hasShrinkwrap":false},"1.2305241828.0":{"name":"@bentoproject/embedly-card","version":"1.2305241828.0","description":"Provides responsive and shareable embeds using Embedly cards","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-embedly-card/1.0"},"homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","peerDependencies":{"preact":"^10.2.1","react":"^17.0.0"},"dependencies":{"@bentoproject/core":"0.2305241828.0"},"readme":"# Bento Embedly Card\n\nProvides responsive and shareable embeds using [Embedly cards](http://docs.embed.ly/docs/cards)\n\nCards are the easiest way to leverage Embedly. For any media, cards provide a responsive embed with built-in embed analytics.\n\nIf you have a paid plan, use the `<bento-embedly-key>` or `<BentoEmbedlyContext.Provider>` component to set your API key. You just need one Bento Embedly key per page to remove Embedly's branding from the cards. Within your page, you can include one or multiple Bento Embedly Card instances.\n\n## Web Component\n\nYou must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-card';\ndefineBentoEmbedlyCard();\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-embedly-card-1.0.mjs\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\" crossorigin=\"anonymous\"></script>\n<link rel=\"stylesheet\" href=\"https://cdn.ampproject.org/v0/bento-embedly-card-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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\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-embedly-card-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-embedly-card {\n    display: block;\n    overflow: hidden;\n    position: relative;\n  }\n</style>\n```\n\n#### Container type\n\nThe `bento-embedly-card` 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-embedly-card {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Attributes\n\n#### `data-url`\n\nThe URL to retrieve embedding information.\n\n#### `data-card-embed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `data-card-image`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `data-card-controls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `data-card-align`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `data-card-recommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `data-card-via` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `data-card-theme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n\n#### API Example\n\nProgrammatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:\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    <link\n      rel=\"stylesheet\"\n      type=\"text/css\"\n      href=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css\"\n    />\n    <script\n      type=\"module\"\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs\"\n    ></script>\n    <script\n      nomodule\n      async\n      src=\"https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js\"\n    ></script>\n    <style>\n      bento-embedly-card {\n        width: 375px;\n        height: 472px;\n      }\n    </style>\n  </head>\n  <body>\n    <bento-embedly-key value=\"12af2e3543ee432ca35ac30a4b4f656a\">\n    </bento-embedly-key>\n\n    <bento-embedly-card\n      data-url=\"https://twitter.com/AMPhtml/status/986750295077040128\"\n      data-card-theme=\"dark\"\n      data-card-controls=\"0\"\n    >\n    </bento-embedly-card>\n\n    <bento-embedly-card\n      id=\"my-url\"\n      data-url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n    >\n    </bento-embedly-card>\n\n    <div class=\"buttons\" style=\"margin-top: 8px\">\n      <button id=\"change-url\">Change embed</button>\n    </div>\n\n    <script>\n      (async () => {\n        const embedlyCard = document.querySelector('#my-url');\n        await customElements.whenDefined('bento-embedly-card');\n\n        // set up button actions\n        document.querySelector('#change-url').onclick = () => {\n          embedlyCard.setAttribute(\n            'data-url',\n            'https://www.youtube.com/watch?v=wcJSHR0US80'\n          );\n        };\n      })();\n    </script>\n  </body>\n</html>\n```\n\n---\n\n## Preact/React Component\n\n### Import via npm\n\n```sh\nnpm install @bentoproject/embedly-card\n```\n\n```javascript\nimport {BentoEmbedlyCard} from '@bentoproject/embedly-card/react';\nimport '@bentoproject/embedly-card/styles.css';\n\nfunction App() {\n  return (\n    <BentoEmbedlyContext.Provider\n      value={{apiKey: '12af2e3543ee432ca35ac30a4b4f656a'}}\n    >\n      <BentoEmbedlyCard url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"></BentoEmbedlyCard>\n    </BentoEmbedlyContext.Provider>\n  );\n}\n```\n\n### Layout and style\n\n#### Container type\n\nThe `BentoEmbedlyCard` 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<BentoEmbedlyCard\n  style={{width: 300, height: 100}}\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\nOr via `className`:\n\n```jsx\n<BentoEmbedlyCard\n  className=\"custom-styles\"\n  url=\"https://www.youtube.com/watch?v=LZcKdHinUhE\"\n></BentoEmbedlyCard>\n```\n\n```css\n.custom-styles {\n  height: 100px;\n  width: 100%;\n}\n```\n\n### Props\n\n#### `url`\n\nThe URL to retrieve embedding information.\n\n#### `cardEmbed`\n\nThe URL to a video or rich media. Use with static embeds like articles, instead of using the static page content in the card, the card will embed the video or rich media.\n\n#### `cardImage`\n\nThe URL to an image. Specifies which image to use in article cards when `data-url` points to an article. Not all image URLs are supported, if the image is not loaded, try a different image or domain.\n\n#### `cardControls`\n\nEnables share icons.\n\n-   `0`: Disable share icons.\n-   `1`: Enable share icons\n\nThe default is `1`.\n\n#### `cardAlign`\n\nAligns the card. The possible values are `left`, `center` and `right`. The default value is `center`.\n\n#### `cardRecommend`\n\nWhen recommendations are supported, it disables embedly recommendations on video and rich cards. These are recommendations created by embedly.\n\n-   `0`: Disables embedly recommendations.\n-   `1`: Enables embedly recommendations.\n\nThe default value is `1`.\n\n#### `cardVia` (optional)\n\nSpecifies the via content in the card. This is a great way to do attribution.\n\n#### `cardTheme` (optional)\n\nAllows settings the `dark` theme which changes the background color of the main card container. Use `dark` to set this theme. For dark backgrounds it's better to specify this. The default is `light`, which sets no background color of the main card container.\n\n#### title (optional)\n\nDefine a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `\"Embedly card\"`.\n","readmeFilename":"README.md","gitHead":"fcd19c6354383946b2d66b95efec56661b06e5b6","bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"_id":"@bentoproject/embedly-card@1.2305241828.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-K/xlwlkImMv8y4xgFZVnAFJq3SJRRt0Dubh/uCsNv4aG5dY+Qq86/L5cXuWXeNoO5jUnnQumF5nM4gKa/jt4bQ==","shasum":"6169fa596cf8a8081197e3241b6df9421a54c82e","tarball":"https://registry.npmjs.org/@bentoproject/embedly-card/-/embedly-card-1.2305241828.0.tgz","fileCount":29,"unpackedSize":1203611,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMWFCd2gS7IxlePzUxv1HIwI6pam8Lzg7nt+223MMG4QIgKuYHyYOxmXTzq9Glbcby64LGqqgjVBtAWBB7aKfDbk0="}]},"_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/embedly-card_1.2305241828.0_1685003165621_0.010735396287557375"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-28T18:16:57.236Z","1.2110261518.0":"2021-10-28T18:16:57.520Z","modified":"2023-05-25T08:26:06.010Z","1.2110252343.0":"2021-10-28T21:47:26.634Z","1.2110281959.0":"2021-10-29T11:51:50.641Z","1.2110290545.0":"2021-10-30T11:22:10.379Z","1.2111011823.0":"2021-11-02T11:25:10.500Z","1.2110152252.3":"2021-11-02T22:04:08.626Z","1.2110212130.2":"2021-11-02T22:14:53.254Z","1.2111022043.0":"2021-11-03T11:21:41.550Z","1.2111180040.0":"2021-11-18T21:26:21.869Z","1.2111060251.3":"2021-11-18T21:42:15.140Z","1.2111182332.0":"2021-11-19T12:24:52.147Z","1.2111060251.9":"2021-11-19T16:31:02.663Z","1.2111191951.0":"2021-11-20T12:23:42.233Z","1.2111230244.0":"2021-11-23T12:24:28.181Z","1.2111230636.0":"2021-11-24T12:23:24.160Z","1.2111242025.0":"2021-11-25T12:42:44.068Z","1.2111292120.0":"2021-11-30T12:40:39.128Z","1.2111152338.2":"2021-11-30T17:54:56.076Z","1.2112010058.0":"2021-12-01T12:19:13.513Z","1.2112012300.0":"2021-12-02T12:30:46.176Z","1.2112021656.0":"2021-12-03T12:21:57.433Z","1.2112032204.0":"2021-12-04T12:20:14.738Z","1.2112062322.0":"2021-12-07T12:26:52.429Z","1.2112062322.2":"2021-12-07T22:28:51.606Z","1.2112080230.0":"2021-12-08T13:21:49.141Z","1.2112080230.1":"2021-12-08T15:57:12.185Z","1.2112082232.0":"2021-12-09T12:45:15.218Z","1.2111242025.1":"2021-12-10T00:11:55.291Z","1.2112091956.0":"2021-12-10T12:46:53.433Z","1.2112102136.0":"2021-12-11T12:31:51.705Z","1.2112132331.0":"2021-12-14T12:59:18.054Z","1.2112160003.0":"2021-12-16T12:19:16.726Z","1.2112162055.0":"2021-12-17T12:17:44.475Z","1.2112170012.0":"2021-12-18T12:18:11.312Z","1.2112201724.0":"2021-12-21T12:21:30.755Z","1.2112212349.0":"2021-12-22T12:23:58.381Z","1.2112221739.0":"2021-12-23T12:19:38.841Z","1.2112231523.0":"2021-12-24T12:20:28.169Z","1.2201042109.0":"2022-01-05T12:31:22.041Z","1.2201052144.0":"2022-01-06T12:40:56.827Z","1.2201061922.0":"2022-01-07T12:31:47.286Z","1.2201071715.0":"2022-01-08T12:22:09.975Z","1.2201101902.0":"2022-01-11T12:29:44.078Z","1.2112231523.1":"2022-01-11T19:26:08.216Z","1.2201120015.0":"2022-01-12T12:31:04.890Z","1.2112231523.2":"2022-01-12T22:38:54.248Z","1.2201122239.0":"2022-01-13T13:00:12.906Z","1.2201131702.0":"2022-01-14T13:04:16.244Z","1.2201141909.0":"2022-01-15T12:21:03.103Z","1.2201141909.1":"2022-01-25T19:49:12.602Z","1.2201141909.3":"2022-01-26T20:59:07.563Z","1.2201141909.4":"2022-02-01T21:37:35.378Z","1.2201212122.3":"2022-02-02T17:58:27.511Z","1.2202012258.0":"2022-02-02T19:12:51.262Z","1.2202022130.0":"2022-02-03T16:55:41.008Z","1.2202031816.0":"2022-02-04T15:47:07.466Z","1.2202042210.0":"2022-02-05T09:17:39.379Z","1.2202072236.0":"2022-02-08T09:20:06.637Z","1.2201262038.1":"2022-02-08T21:12:53.780Z","1.2202082004.0":"2022-02-09T22:16:17.715Z","1.2202092050.0":"2022-02-10T17:57:01.928Z","1.2202112230.0":"2022-02-14T21:05:47.791Z","1.2202142035.0":"2022-02-15T09:25:14.592Z","1.2202042210.1":"2022-02-15T18:23:25.750Z","1.2202152253.0":"2022-02-16T09:08:22.516Z","1.2202162256.0":"2022-02-17T09:30:01.424Z","1.2202180255.0":"2022-02-18T09:45:09.913Z","1.2202230359.0":"2022-02-23T09:29:43.087Z","1.2202232232.0":"2022-02-24T15:22:48.049Z","1.2202241911.0":"2022-02-25T15:17:44.614Z","1.2202252101.0":"2022-02-28T16:46:00.995Z","1.2202230359.1":"2022-03-01T22:05:25.348Z","1.2203041950.0":"2022-03-15T18:36:12.648Z","1.2203151539.0":"2022-03-16T08:22:00.003Z","1.2203172113.0":"2022-03-18T08:23:23.325Z","1.2203221937.0":"2022-03-23T08:25:16.995Z","1.2203231914.0":"2022-03-24T08:23:29.403Z","1.2203101844.0":"2022-03-24T20:09:38.512Z","1.2203281422.0":"2022-03-29T08:28:31.035Z","1.2204121632.0":"2022-04-12T18:14:48.119Z","1.2204122000.0":"2022-04-13T08:30:32.569Z","1.2204132005.0":"2022-04-14T08:32:11.797Z","1.2204142048.0":"2022-04-15T08:26:28.936Z","1.2204160405.0":"2022-04-16T08:23:36.211Z","1.2204182206.0":"2022-04-19T08:29:35.077Z","1.2204191429.0":"2022-04-20T08:30:56.809Z","1.2204211736.0":"2022-04-22T08:25:33.040Z","1.2204221712.0":"2022-04-23T08:25:09.738Z","1.2204252045.0":"2022-04-26T08:31:08.602Z","1.2204272205.0":"2022-04-28T08:31:04.316Z","1.2204281949.0":"2022-04-29T08:27:03.226Z","1.2204292129.0":"2022-04-30T08:24:30.799Z","1.2205031420.0":"2022-05-04T08:25:40.849Z","1.2205041533.0":"2022-05-05T08:25:43.651Z","1.2205051832.0":"2022-05-06T08:25:26.972Z","1.2205090810.0":"2022-05-10T08:31:54.436Z","1.2205101904.0":"2022-05-11T08:31:34.712Z","1.2205120110.0":"2022-05-12T08:30:49.645Z","1.2205161914.0":"2022-05-17T08:25:43.382Z","1.2205181800.0":"2022-05-19T08:26:05.129Z","1.2205191749.0":"2022-05-20T08:26:24.847Z","1.2205232225.0":"2022-05-24T08:25:13.392Z","1.2205120110.1":"2022-05-24T19:12:14.425Z","1.2205251942.0":"2022-05-26T08:26:35.877Z","1.2205270638.0":"2022-05-27T08:25:28.487Z","1.2206071918.0":"2022-06-07T22:26:50.118Z","1.2206072228.0":"2022-06-08T08:26:05.161Z","1.2206082301.0":"2022-06-09T08:29:35.303Z","1.2205270638.4":"2022-06-10T21:34:36.982Z","1.2206101637.0":"2022-06-11T08:25:27.201Z","1.2206131450.0":"2022-06-14T08:27:05.888Z","1.2206071918.1":"2022-06-14T21:25:54.751Z","1.2206162023.0":"2022-06-17T08:28:00.436Z","1.2206221455.0":"2022-06-23T08:26:35.517Z","1.2206291614.0":"2022-06-30T16:07:12.440Z","1.2207071723.0":"2022-07-08T08:32:46.578Z","1.2207181727.0":"2022-07-19T08:25:20.340Z","1.2207201724.0":"2022-07-21T08:25:46.336Z","1.2207221643.0":"2022-07-23T08:26:24.400Z","1.2207261725.0":"2022-07-27T08:25:17.424Z","1.2207281718.0":"2022-07-29T08:27:58.336Z","1.2208021808.0":"2022-08-03T08:26:55.430Z","1.2208042017.0":"2022-08-05T08:28:23.328Z","1.2208051912.0":"2022-08-06T08:27:43.322Z","1.2208081650.0":"2022-08-09T08:26:48.668Z","1.2208092047.0":"2022-08-10T08:26:55.550Z","1.2207281718.1":"2022-08-10T16:56:42.308Z","1.2207281718.2":"2022-08-10T18:15:01.761Z","1.2208112015.0":"2022-08-12T08:26:57.051Z","1.2208121708.0":"2022-08-13T08:26:08.015Z","1.2208051912.1":"2022-08-16T23:05:14.917Z","1.2208172101.0":"2022-08-24T20:54:43.486Z","1.2208242209.0":"2022-08-25T08:26:09.672Z","1.2209072154.0":"2022-09-08T08:24:35.653Z","1.2209131909.0":"2022-09-14T08:44:15.371Z","1.2208242209.1":"2022-09-15T16:42:08.702Z","1.2209142312.0":"2022-09-20T22:07:06.617Z","1.2210010655.0":"2022-10-04T16:48:48.117Z","1.2210041838.0":"2022-10-05T08:29:38.378Z","1.2210052034.0":"2022-10-06T08:25:16.090Z","1.2210071758.0":"2022-10-08T08:25:28.027Z","1.2210112333.0":"2022-10-12T08:24:27.419Z","1.2210142102.0":"2022-10-15T08:23:51.128Z","1.2210172057.0":"2022-10-18T08:27:03.612Z","1.2210191347.0":"2022-10-20T08:25:07.828Z","1.2210211855.0":"2022-10-22T08:23:31.787Z","1.2210251605.0":"2022-10-26T08:27:02.002Z","1.2210272257.0":"2022-10-28T08:26:22.947Z","1.2211042305.0":"2022-11-05T08:24:08.398Z","1.2211060024.0":"2022-11-08T08:24:55.395Z","1.2211111611.0":"2022-11-12T08:23:45.170Z","1.2211151402.0":"2022-11-16T18:34:43.384Z","1.2211182146.0":"2022-11-19T08:25:29.522Z","1.2211250451.0":"2022-11-25T08:24:42.910Z","1.2211302304.0":"2022-12-01T08:23:55.341Z","1.2212071834.0":"2022-12-07T19:37:48.010Z","1.2212092023.0":"2022-12-10T08:24:41.051Z","1.2211302304.1":"2022-12-13T21:52:55.804Z","1.2212151632.0":"2022-12-20T15:52:28.531Z","1.2212151632.1":"2022-12-20T20:09:44.566Z","1.2211302304.2":"2022-12-20T22:32:33.391Z","1.2212151632.2":"2023-01-03T18:12:30.880Z","1.2301031703.0":"2023-01-03T20:29:55.302Z","1.2301032153.0":"2023-01-04T08:24:50.353Z","1.2301041800.0":"2023-01-05T08:25:17.946Z","1.2301100345.0":"2023-01-10T08:25:25.822Z","1.2301112346.0":"2023-01-12T08:26:49.951Z","1.2301181928.0":"2023-01-19T08:25:50.628Z","1.2301261900.0":"2023-01-27T08:27:03.501Z","1.2301301810.0":"2023-01-31T08:26:03.461Z","1.2302012254.0":"2023-02-02T08:24:56.607Z","1.2302021743.0":"2023-02-03T08:25:59.776Z","1.2302031721.0":"2023-02-04T08:24:10.364Z","1.2302171719.0":"2023-02-18T08:23:11.373Z","1.2302271541.0":"2023-02-28T17:24:17.813Z","1.2303151529.0":"2023-03-15T16:26:07.835Z","1.2303151621.0":"2023-03-22T08:24:35.849Z","1.2303231800.0":"2023-03-29T09:55:24.333Z","1.2304040531.0":"2023-04-04T08:25:00.309Z","1.2304062309.0":"2023-04-07T08:24:10.561Z","1.2304122229.0":"2023-04-13T08:25:05.417Z","1.2304132133.0":"2023-04-14T08:25:05.096Z","1.2304212144.0":"2023-04-22T08:26:55.514Z","1.2304241924.0":"2023-04-25T08:26:19.782Z","1.2304262219.0":"2023-04-27T08:27:20.235Z","1.2305022024.0":"2023-05-03T08:27:16.386Z","1.2305051745.0":"2023-05-06T08:25:34.052Z","1.2305152039.0":"2023-05-16T08:27:27.072Z","1.2305182038.0":"2023-05-19T08:27:26.305Z","1.2305221508.0":"2023-05-23T08:25:47.454Z","1.2305051745.1":"2023-05-23T23:03:37.363Z","1.2305232041.0":"2023-05-24T08:26:12.678Z","1.2305241828.0":"2023-05-25T08:26:05.863Z"},"maintainers":[{"name":"bentoprojectbot","email":"bentobot@amp.dev"},{"name":"kristoferbaxter","email":"kbax@me.com"},{"name":"esth","email":"esther@amp.dev"}],"description":"Provides responsive and shareable embeds using Embedly cards","homepage":"https://github.com/ampproject/amphtml/tree/main/extensions/amp-embedly-card/1.0","repository":{"type":"git","url":"git+https://github.com/ampproject/amphtml.git","directory":"extensions/amp-embedly-card/1.0"},"author":{"name":"Bento Authors"},"bugs":{"url":"https://github.com/ampproject/amphtml/issues"},"license":"Apache-2.0","readme":"","readmeFilename":""}