Bento docs: split Example and Import via script sections

ampproject · Nov 18, 2021 · 5f87c83 · 5f87c83
1 parent 42cb39b
commit 5f87c83
Show file tree

Hide file tree

Showing 17 changed files with 170 additions and 0 deletions.
diff --git a/extensions/amp-accordion/1.0/README.md b/extensions/amp-accordion/1.0/README.md
@@ -27,6 +27,16 @@ defineBentoAccordion();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-accordion-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-accordion-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-base-carousel/1.0/README.md b/extensions/amp-base-carousel/1.0/README.md
@@ -19,6 +19,16 @@ defineBentoBaseCarousel();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-embedly-card/1.0/README.md b/extensions/amp-embedly-card/1.0/README.md
@@ -23,6 +23,16 @@ defineBentoEmbedlyCard();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-facebook/1.0/README.md b/extensions/amp-facebook/1.0/README.md
@@ -19,6 +19,16 @@ defineBentoFacebook();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-facebook-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-facebook-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-facebook-1.0.css"/>
+```
+
+### Example
+
 ##### Embed a Facebook Post
 
 <!--% example %-->

diff --git a/extensions/amp-fit-text/1.0/README.md b/extensions/amp-fit-text/1.0/README.md
@@ -21,6 +21,16 @@ defineBentoFitText();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-iframe/1.0/README.md b/extensions/amp-iframe/1.0/README.md
@@ -23,6 +23,16 @@ defineBentoIframe();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-iframe-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-iframe-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-iframe-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-inline-gallery/1.0/README.md b/extensions/amp-inline-gallery/1.0/README.md
@@ -19,6 +19,16 @@ defineBentoInlineGallery();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-instagram/1.0/README.md b/extensions/amp-instagram/1.0/README.md
@@ -19,6 +19,16 @@ defineBentoInstagram();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-instagram-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-instagram-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-instagram-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-jwplayer/1.0/README.md b/extensions/amp-jwplayer/1.0/README.md
@@ -19,6 +19,16 @@ defineBentoJwplayer();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-mathml/1.0/README.md b/extensions/amp-mathml/1.0/README.md
@@ -19,6 +19,16 @@ defineBentoMathml();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-mathml-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-mathml-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-mathml-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-selector/1.0/README.md b/extensions/amp-selector/1.0/README.md
@@ -19,6 +19,16 @@ defineBentoSelector();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-selector-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-selector-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-selector-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-sidebar/1.0/README.md b/extensions/amp-sidebar/1.0/README.md
@@ -19,6 +19,16 @@ defineBentoSidebar();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-sidebar-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-sidebar-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-sidebar-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-social-share/1.0/README.md b/extensions/amp-social-share/1.0/README.md
@@ -21,6 +21,16 @@ defineBentoSocialShare();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-social-share-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-social-share-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-social-share-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-soundcloud/1.0/README.md b/extensions/amp-soundcloud/1.0/README.md
@@ -19,6 +19,16 @@ defineBentoSoundcloud();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-soundcloud-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-stream-gallery/1.0/README.md b/extensions/amp-stream-gallery/1.0/README.md
@@ -21,6 +21,16 @@ defineBentoStreamGallery();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-stream-gallery-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-twitter/1.0/README.md b/extensions/amp-twitter/1.0/README.md
@@ -19,6 +19,16 @@ defineBentoTwitters();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-twitter-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-twitter-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-twitter-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html

diff --git a/extensions/amp-wordpress-embed/1.0/README.md b/extensions/amp-wordpress-embed/1.0/README.md
@@ -19,6 +19,16 @@ defineBentoWordpressEmbed();
 
 ### Include via `<script>`
 
+```html
+<script type="module" src="https://cdn.ampproject.org/bento.mjs"></script>
+<script type="nomodule" src="https://cdn.ampproject.org/bento.js"></script>
+<script type="module" src="https://cdn.ampproject.org/v0/bento-wordpress-embed-1.0.mjs"></script>
+<script type="nomodule"  src="https://cdn.ampproject.org/v0/bento-wordpress-embed-1.0.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/bento-wordpress-embed-1.0.css"/>
+```
+
+### Example
+
 <!--% example %-->
 
 ```html