Bento docs: split Example and Import via script sections

ampproject · Nov 18, 2021 · ae4cabd · ae4cabd
1 parent 05b0864
commit ae4cabd
Show file tree

Hide file tree

Showing 17 changed files with 187 additions and 17 deletions.
diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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
 

diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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 %-->
 

diff --git 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"></script>
+<script 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 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 %-->