📖 Populate Bento hero examples from READMEs (#36900)

These are just starting points, not the complete examples.
ampproject · Nov 12, 2021 · 29aa22a · 29aa22a
1 parent 4fb8271
commit 29aa22a
Show file tree

Hide file tree

Showing 15 changed files with 566 additions and 27 deletions.
diff --git a/extensions/amp-fit-text/1.0/README.md b/extensions/amp-fit-text/1.0/README.md
@@ -43,14 +43,11 @@ defineBentoFitText();
       async
       src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js"
     ></script>
-    <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
-    <style>
-      bento-fit-text {
-        display: block;
-        overflow: hidden;
-        position: relative;
-      }
-    </style>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css"
+    />
   </head>
   <body>
     <bento-fit-text id="my-fit-text">

diff --git a/extensions/amp-fit-text/1.0/example/index.html b/extensions/amp-fit-text/1.0/example/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/bento.mjs"
+    ></script>
+    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs"
+    ></script>
+    <script
+      nomodule
+      async
+      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"
+    />
+  </head>
+  <body>
+    <bento-fit-text id="my-fit-text">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
+      inermis reprehendunt.
+    </bento-fit-text>
+    <div class="buttons" style="margin-top: 8px">
+      <button id="font-button">Change max-font-size</button>
+      <button id="content-button">Change content</button>
+    </div>
+
+    <script>
+      (async () => {
+        const fitText = document.querySelector('#my-fit-text');
+        await customElements.whenDefined('bento-fit-text');
+
+        // set up button actions
+        document.querySelector('#font-button').onclick = () =>
+          fitText.setAttribute('max-font-size', '40');
+        document.querySelector('#content-button').onclick = () =>
+          (fitText.textContent = 'new content');
+      })();
+    </script>
+  </body>
+</html>
diff --git a/extensions/amp-iframe/1.0/example/index.html b/extensions/amp-iframe/1.0/example/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/bento.mjs"
+    ></script>
+    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/v0/bento-iframe-1.0.mjs"
+    ></script>
+    <script
+      nomodule
+      async
+      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"
+    />
+  </head>
+  <body>
+    <bento-iframe
+      id="my-iframe"
+      src="https://en.wikipedia.org/wiki/Bento"
+      style="width: 800px; height: 600px"
+    >
+    </bento-iframe>
+
+    <button id="change-source">Change source</button>
+
+    <script>
+      (async () => {
+        const iframeEl = document.querySelector('#my-iframe');
+        await customElements.whenDefined('bento-iframe');
+
+        // Reload iframe with new src
+        document.querySelector('#change-source').onclick = () => {
+          iframeEl.setAttribute('src', 'https://example.com');
+        };
+      })();
+    </script>
+  </body>
+</html>
diff --git a/extensions/amp-inline-gallery/1.0/example/index.html b/extensions/amp-inline-gallery/1.0/example/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/bento.mjs"
+    ></script>
+    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
+
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.mjs"
+    ></script>
+    <script
+      nomodule
+      async
+      src="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.ampproject.org/v0/bento-inline-gallery-1.0.css"
+    />
+
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.mjs"
+    ></script>
+    <script
+      nomodule
+      async
+      src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css"
+    />
+  </head>
+  <body>
+    <bento-inline-gallery id="inline-gallery">
+      <bento-inline-gallery-thumbnails
+        style="height: 100px"
+        loop
+      ></bento-inline-gallery-thumbnails>
+
+      <bento-base-carousel
+        style="height: 200px"
+        snap-align="center"
+        visible-count="3"
+        loop
+      >
+        <img src="img1.jpeg" data-thumbnail-src="img1-thumbnail.jpeg" />
+        <img src="img2.jpeg" data-thumbnail-src="img2-thumbnail.jpeg" />
+        <img src="img3.jpeg" data-thumbnail-src="img3-thumbnail.jpeg" />
+        <img src="img4.jpeg" data-thumbnail-src="img4-thumbnail.jpeg" />
+        <img src="img5.jpeg" data-thumbnail-src="img5-thumbnail.jpeg" />
+        <img src="img6.jpeg" data-thumbnail-src="img6-thumbnail.jpeg" />
+      </bento-base-carousel>
+
+      <bento-inline-gallery-pagination
+        style="height: 20px"
+      ></bento-inline-gallery-pagination>
+    </bento-inline-gallery>
+  </body>
+</html>
diff --git a/extensions/amp-lightbox-gallery/1.0/example/index.html b/extensions/amp-lightbox-gallery/1.0/example/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/bento.mjs"
+    ></script>
+    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
+    <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
+    <link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-lightbox-gallery-1.0.css">
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/v0/bento-lightbox-gallery-1.0.mjs"
+    ></script>
+    <script
+      nomodule
+      async
+      src="https://cdn.ampproject.org/v0/bento-lightbox-gallery-1.0.js"
+    ></script>
+  </head>
+  <body>
+    <bento-lightbox-gallery></bento-lightbox-gallery>
+    <figure>
+      <img id="my-img" src="img1.jpwg" lightbox />
+      <figcaption>dog wearing yellow shirt.</figcaption>
+    </figure>
+    <figure>
+      <img src="img2.jpeg" lightbox/>
+    </figure>
+    <figure>
+      <img src="img2.jpeg" lightbox/>
+    </figure>
+  </body>
+</html>
diff --git a/extensions/amp-lightbox/1.0/example/index.html b/extensions/amp-lightbox/1.0/example/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.ampproject.org/v0/bento-lightbox-1.0.css"
+    />
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/bento.mjs"
+    ></script>
+    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/v0/bento-lightbox-1.0.mjs"
+    ></script>
+    <script
+      nomodule
+      async
+      src="https://cdn.ampproject.org/v0/bento-lightbox-1.0.js"
+    ></script>
+  </head>
+  <body>
+    <bento-lightbox id="my-lightbox">
+      Lightboxed content
+      <button id="close-button">Close lightbox</button>
+    </bento-lightbox>
+    <button id="open-button">Open lightbox</button>
+    <script>
+      (async () => {
+        const lightbox = document.querySelector('#my-lightbox');
+        await customElements.whenDefined('bento-lightbox');
+        const api = await lightbox.getApi();
+
+        // set up button actions
+        document.querySelector('#open-button').onclick = () => api.open();
+        document.querySelector('#close-button').onclick = () => api.close();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/extensions/amp-mathml/1.0/example/index.html b/extensions/amp-mathml/1.0/example/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/bento.mjs"
+    ></script>
+    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/v0/bento-mathml-1.0.mjs"
+    ></script>
+    <script
+      nomodule
+      async
+      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"
+    />
+  </head>
+  <body>
+    <h2>The Quadratic Formula</h2>
+    <bento-mathml
+      style="height: 40px;"
+      data-formula="\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]"
+    ></bento-mathml>
+
+    <h2>Inline formula</h2>
+    <p>
+      This is an example of a formula,
+      <bento-mathml
+        style="height: 40px; width: 147px"
+        inline
+        data-formula="\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]"
+      ></bento-mathml>
+      placed inline in the middle of a block of text.
+    </p>
+  </body>
+</html>
diff --git a/extensions/amp-selector/1.0/README.md b/extensions/amp-selector/1.0/README.md
@@ -31,12 +31,6 @@ defineBentoSelector();
       src="https://cdn.ampproject.org/bento.mjs"
     ></script>
     <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
-    <!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
-    <style>
-      bento-selector {
-        display: block;
-      }
-    </style>
     <script
       type="module"
       async
@@ -47,6 +41,11 @@ defineBentoSelector();
       async
       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"
+    />
   </head>
   <body>
     <bento-selector class="sample-selector">

diff --git a/extensions/amp-selector/1.0/example/index.html b/extensions/amp-selector/1.0/example/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/bento.mjs"
+    ></script>
+    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/v0/bento-selector-1.0.mjs"
+    ></script>
+    <script
+      nomodule
+      async
+      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"
+    />
+  </head>
+  <body>
+    <bento-selector class="sample-selector">
+      <ul>
+        <li option="1">Option 1</li>
+        <li option="2">Option 2</li>
+        <li option="3">Option 3</li>
+        <li option="4">Option 4</li>
+      </ul>
+    </bento-selector>
+  </body>
+</html>