From de27d4beee95f2576689da0ad9a5a819a37ebabc Mon Sep 17 00:00:00 2001
From: Sebastian Benz <sbenz@google.com>
Date: Thu, 18 Nov 2021 20:59:19 +0100
Subject: [PATCH] Bento docs: split Example and Import via script sections

---
 extensions/amp-accordion/1.0/README.md       | 12 +++++++++++-
 extensions/amp-base-carousel/1.0/README.md   | 12 +++++++++++-
 extensions/amp-embedly-card/1.0/README.md    | 12 +++++++++++-
 extensions/amp-facebook/1.0/README.md        | 12 +++++++++++-
 extensions/amp-fit-text/1.0/README.md        | 12 +++++++++++-
 extensions/amp-iframe/1.0/README.md          | 12 +++++++++++-
 extensions/amp-inline-gallery/1.0/README.md  | 12 +++++++++++-
 extensions/amp-instagram/1.0/README.md       | 12 +++++++++++-
 extensions/amp-jwplayer/1.0/README.md        | 12 +++++++++++-
 extensions/amp-mathml/1.0/README.md          | 12 +++++++++++-
 extensions/amp-selector/1.0/README.md        | 12 +++++++++++-
 extensions/amp-sidebar/1.0/README.md         | 12 +++++++++++-
 extensions/amp-social-share/1.0/README.md    | 12 +++++++++++-
 extensions/amp-soundcloud/1.0/README.md      | 12 +++++++++++-
 extensions/amp-stream-gallery/1.0/README.md  | 12 +++++++++++-
 extensions/amp-twitter/1.0/README.md         | 12 +++++++++++-
 extensions/amp-wordpress-embed/1.0/README.md | 12 +++++++++++-
 17 files changed, 187 insertions(+), 17 deletions(-)

diff --git a/extensions/amp-accordion/1.0/README.md b/extensions/amp-accordion/1.0/README.md
index a682f9e1608c..37d74a9fd57e 100644
--- a/extensions/amp-accordion/1.0/README.md
+++ b/extensions/amp-accordion/1.0/README.md
@@ -25,7 +25,17 @@ import {defineElement as defineBentoAccordion} from '@bentoproject/accordion';
 defineBentoAccordion();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-accordion-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-accordion-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-base-carousel/1.0/README.md b/extensions/amp-base-carousel/1.0/README.md
index a43b0fc3f835..3b7f72dd89c4 100644
--- a/extensions/amp-base-carousel/1.0/README.md
+++ b/extensions/amp-base-carousel/1.0/README.md
@@ -17,7 +17,17 @@ import {defineElement as defineBentoBaseCarousel} from '@bentoproject/base-carou
 defineBentoBaseCarousel();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-embedly-card/1.0/README.md b/extensions/amp-embedly-card/1.0/README.md
index 9c4825780481..8cb62aed9eb8 100644
--- a/extensions/amp-embedly-card/1.0/README.md
+++ b/extensions/amp-embedly-card/1.0/README.md
@@ -21,7 +21,17 @@ import {defineElement as defineBentoEmbedlyCard} from '@bentoproject/embedly-car
 defineBentoEmbedlyCard();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-facebook/1.0/README.md b/extensions/amp-facebook/1.0/README.md
index 86479aacc808..04020b361d3a 100644
--- a/extensions/amp-facebook/1.0/README.md
+++ b/extensions/amp-facebook/1.0/README.md
@@ -17,7 +17,17 @@ import {defineElement as defineBentoFacebook} from '@bentoproject/facebook';
 defineBentoFacebook();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-facebook-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-facebook-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-facebook-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 ##### Embed a Facebook Post
 
diff --git a/extensions/amp-fit-text/1.0/README.md b/extensions/amp-fit-text/1.0/README.md
index f6cf1a77efd7..e58e34b75296 100644
--- a/extensions/amp-fit-text/1.0/README.md
+++ b/extensions/amp-fit-text/1.0/README.md
@@ -19,7 +19,17 @@ import {defineElement as defineBentoFitText} from '@bentoproject/fit-text';
 defineBentoFitText();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-iframe/1.0/README.md b/extensions/amp-iframe/1.0/README.md
index c56a230ad343..5457fa6fe9e0 100644
--- a/extensions/amp-iframe/1.0/README.md
+++ b/extensions/amp-iframe/1.0/README.md
@@ -21,7 +21,17 @@ import {defineElement as defineBentoIframe} from '@bentoproject/iframe';
 defineBentoIframe();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-iframe-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-iframe-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-iframe-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-inline-gallery/1.0/README.md b/extensions/amp-inline-gallery/1.0/README.md
index 44441e6d901b..12f7e7604c07 100644
--- a/extensions/amp-inline-gallery/1.0/README.md
+++ b/extensions/amp-inline-gallery/1.0/README.md
@@ -17,7 +17,17 @@ import {defineElement as defineBentoInlineGallery} from '@bentoproject/inline-ga
 defineBentoInlineGallery();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-instagram/1.0/README.md b/extensions/amp-instagram/1.0/README.md
index ac513db18faa..9c7b58fd84af 100644
--- a/extensions/amp-instagram/1.0/README.md
+++ b/extensions/amp-instagram/1.0/README.md
@@ -17,7 +17,17 @@ import {defineElement as defineBentoInstagram} from '@bentoproject/instagram';
 defineBentoInstagram();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-instagram-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-instagram-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-jwplayer/1.0/README.md b/extensions/amp-jwplayer/1.0/README.md
index d7a473936220..218f76a87c28 100644
--- a/extensions/amp-jwplayer/1.0/README.md
+++ b/extensions/amp-jwplayer/1.0/README.md
@@ -17,7 +17,17 @@ import {defineElement as defineBentoJwplayer} from '@bentoproject/jwplayer';
 defineBentoJwplayer();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-mathml/1.0/README.md b/extensions/amp-mathml/1.0/README.md
index 92c12cd60d25..c74229773db9 100644
--- a/extensions/amp-mathml/1.0/README.md
+++ b/extensions/amp-mathml/1.0/README.md
@@ -17,7 +17,17 @@ import {defineElement as defineBentoMathml} from '@bentoproject/mathml';
 defineBentoMathml();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-mathml-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-mathml-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-mathml-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-selector/1.0/README.md b/extensions/amp-selector/1.0/README.md
index 1d7427f79b08..2b177ec0c798 100644
--- a/extensions/amp-selector/1.0/README.md
+++ b/extensions/amp-selector/1.0/README.md
@@ -17,7 +17,17 @@ import {defineElement as defineBentoSelector} from '@bentoproject/selector';
 defineBentoSelector();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-selector-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-selector-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-selector-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-sidebar/1.0/README.md b/extensions/amp-sidebar/1.0/README.md
index 6174743ea7b2..aca5f6d8718d 100644
--- a/extensions/amp-sidebar/1.0/README.md
+++ b/extensions/amp-sidebar/1.0/README.md
@@ -17,7 +17,17 @@ import {defineElement as defineBentoSidebar} from '@bentoproject/sidebar';
 defineBentoSidebar();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-sidebar-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-sidebar-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-sidebar-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-social-share/1.0/README.md b/extensions/amp-social-share/1.0/README.md
index 49b689b57002..648d9c8994d9 100644
--- a/extensions/amp-social-share/1.0/README.md
+++ b/extensions/amp-social-share/1.0/README.md
@@ -19,7 +19,17 @@ import {defineElement as defineBentoSocialShare} from '@bentoproject/social-shar
 defineBentoSocialShare();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-social-share-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-social-share-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-social-share-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-soundcloud/1.0/README.md b/extensions/amp-soundcloud/1.0/README.md
index 9aa9750cdb67..176cbdd5cfe2 100644
--- a/extensions/amp-soundcloud/1.0/README.md
+++ b/extensions/amp-soundcloud/1.0/README.md
@@ -17,7 +17,17 @@ import {defineElement as defineBentoSoundcloud} from '@bentoproject/soundcloud';
 defineBentoSoundcloud();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-stream-gallery/1.0/README.md b/extensions/amp-stream-gallery/1.0/README.md
index 66e24a6365b4..8bd1bb614f01 100644
--- a/extensions/amp-stream-gallery/1.0/README.md
+++ b/extensions/amp-stream-gallery/1.0/README.md
@@ -19,7 +19,17 @@ import {defineElement as defineBentoStreamGallery} from '@bentoproject/stream-ga
 defineBentoStreamGallery();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-twitter/1.0/README.md b/extensions/amp-twitter/1.0/README.md
index 3df4b53af64a..ed417640eedd 100644
--- a/extensions/amp-twitter/1.0/README.md
+++ b/extensions/amp-twitter/1.0/README.md
@@ -17,7 +17,17 @@ import {defineElement as defineBentoTwitters} from '@bentoproject/twitter';
 defineBentoTwitters();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-twitter-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->
 
diff --git a/extensions/amp-wordpress-embed/1.0/README.md b/extensions/amp-wordpress-embed/1.0/README.md
index ebbdfabb447e..38a8e5f4f682 100644
--- a/extensions/amp-wordpress-embed/1.0/README.md
+++ b/extensions/amp-wordpress-embed/1.0/README.md
@@ -17,7 +17,17 @@ import {defineElement as defineBentoWordpressEmbed} from '@bentoproject/wordpres
 defineBentoWordpressEmbed();
 ```
 
-### Example: Include via `<script>`
+### Include via `<script>`
+
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-wordpress-embed-1.0.mjs" crossorigin="anonymous"></script>
+<script nomodule src="https://cdn.ampproject.org/v0/bento-wordpress-embed-1.0.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-wordpress-embed-1.0.css" crossorigin="anonymous">
+```
+
+### Example
 
 <!--% example %-->