Skip to content

Commit

Permalink
📖 Bento docs: Full snippets have <html> and <%-- example --%> (#3…
Browse files Browse the repository at this point in the history 
…6870)

- Some snippets were incorrectly formatted because they did not include `<body>` or `<html>`. Fixed.
- Adds `<%-- example --%>` as an annotation for the docs website.
  • Loading branch information
@alanorozco
alanorozco committed Nov 9, 2021
1 parent 9e54c0d commit 126767c
Show file tree
Hide file tree
Showing 20 changed files with 1,119 additions and 929 deletions.
87 changes: 47 additions & 40 deletions extensions/amp-accordion/1.0/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,47 +36,54 @@ defineBentoAccordion();
The example below contains an `bento-accordion` with three sections. The
`expanded` attribute on the third section expands it on page load.

<!--% example %-->

```html
<head>
<script src="https://cdn.ampproject.org/bento.js"></script>
<script
async
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"
/>
</head>
<body>
<bento-accordion id="my-accordion">
<section>
<h2>Section 1</h2>
<p>Content in section 1.</p>
</section>
<section>
<h2>Section 2</h2>
<div>Content in section 2.</div>
</section>
<section expanded>
<h2>Section 3</h2>
<div>Content in section 3.</div>
</section>
</bento-accordion>
<script>
(async () => {
const accordion = document.querySelector('#my-accordion');
await customElements.whenDefined('bento-accordion');
const api = await accordion.getApi();
// programatically expand all sections
api.expand();
// programatically collapse all sections
api.collapse();
})();
</script>
</body>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.ampproject.org/bento.js"></script>
<script
async
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"
/>
</head>
<body>
<body>
<bento-accordion id="my-accordion">
<section>
<h2>Section 1</h2>
<p>Content in section 1.</p>
</section>
<section>
<h2>Section 2</h2>
<div>Content in section 2.</div>
</section>
<section expanded>
<h2>Section 3</h2>
<div>Content in section 3.</div>
</section>
</bento-accordion>
<script>
(async () => {
const accordion = document.querySelector('#my-accordion');
await customElements.whenDefined('bento-accordion');
const api = await accordion.getApi();
// programatically expand all sections
api.expand();
// programatically collapse all sections
api.collapse();
})();
</script>
</body>
</body>
</html>
```

### Interactivity and API usage
Expand Down
120 changes: 64 additions & 56 deletions extensions/amp-base-carousel/1.0/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,63 +27,71 @@ defineBentoBaseCarousel();

### Example: Include via `<script>`

<!--% example %-->

```html
<head>
<script src="https://cdn.ampproject.org/bento.js"></script>
<!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
<style>
bento-base-carousel {
display: block;
overflow: hidden;
position: relative;
}
</style>
<script
async
src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js"
></script>
<style>
bento-base-carousel,
bento-base-carousel > div {
aspect-ratio: 4/1;
}
.red {
background: darkred;
}
.blue {
background: steelblue;
}
.green {
background: seagreen;
}
</style>
</head>
<bento-base-carousel id="my-carousel">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</bento-base-carousel>
<div class="buttons" style="margin-top: 8px">
<button id="prev-button">Go to previous slide</button>
<button id="next-button">Go to next slide</button>
<button id="go-to-button">Go to slide with green gradient</button>
</div>

<script>
(async () => {
const carousel = document.querySelector('#my-carousel');
await customElements.whenDefined('bento-base-carousel');
const api = await carousel.getApi();
// programatically advance to next slide
api.next();
// set up button actions
document.querySelector('#prev-button').onclick = () => api.prev();
document.querySelector('#next-button').onclick = () => api.next();
document.querySelector('#go-to-button').onclick = () => api.goToSlide(2);
})();
</script>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.ampproject.org/bento.js"></script>
<!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
<style>
bento-base-carousel {
display: block;
overflow: hidden;
position: relative;
}
</style>
<script
async
src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js"
></script>
<style>
bento-base-carousel,
bento-base-carousel > div {
aspect-ratio: 4/1;
}
.red {
background: darkred;
}
.blue {
background: steelblue;
}
.green {
background: seagreen;
}
</style>
</head>
<body>
<bento-base-carousel id="my-carousel">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</bento-base-carousel>
<div class="buttons" style="margin-top: 8px">
<button id="prev-button">Go to previous slide</button>
<button id="next-button">Go to next slide</button>
<button id="go-to-button">Go to slide with green gradient</button>
</div>

<script>
(async () => {
const carousel = document.querySelector('#my-carousel');
await customElements.whenDefined('bento-base-carousel');
const api = await carousel.getApi();
// programatically advance to next slide
api.next();
// set up button actions
document.querySelector('#prev-button').onclick = () => api.prev();
document.querySelector('#next-button').onclick = () => api.next();
document.querySelector('#go-to-button').onclick = () =>
api.goToSlide(2);
})();
</script>
</body>
</html>
```

### Interactivity and API usage
Expand Down
121 changes: 64 additions & 57 deletions extensions/amp-embedly-card/1.0/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,64 +25,71 @@ defineBentoEmbedlyCard();

### Example: Include via `<script>`

<!--% example %-->

```html
<head>
<script src="https://cdn.ampproject.org/bento.js"></script>
<!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
<style>
bento-embedly-card {
display: block;
overflow: hidden;
position: relative;
}
</style>
<script
async
src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js"
></script>
<style>
bento-embedly-card {
width: 375px;
height: 472px;
}
</style>
</head>
<body>
<bento-embedly-key value="12af2e3543ee432ca35ac30a4b4f656a">
</bento-embedly-key>

<bento-embedly-card
data-url="https://twitter.com/AMPhtml/status/986750295077040128"
data-card-theme="dark"
data-card-controls="0"
>
</bento-embedly-card>

<bento-embedly-card
id="my-url"
data-url="https://www.youtube.com/watch?v=LZcKdHinUhE"
>
</bento-embedly-card>

<div class="buttons" style="margin-top: 8px">
<button id="change-url">Change embed</button>
</div>

<script>
(async () => {
const embedlyCard = document.querySelector('#my-url');
await customElements.whenDefined('bento-embedly-card');
// set up button actions
document.querySelector('#change-url').onclick = () => {
embedlyCard.setAttribute(
'data-url',
'https://www.youtube.com/watch?v=wcJSHR0US80'
);
};
})();
</script>
</body>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.ampproject.org/bento.js"></script>
<!-- These styles prevent Cumulative Layout Shift on the unupgraded custom element -->
<style>
bento-embedly-card {
display: block;
overflow: hidden;
position: relative;
}
</style>
<script
async
src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js"
></script>
<style>
bento-embedly-card {
width: 375px;
height: 472px;
}
</style>
</head>
<body>
<body>
<bento-embedly-key value="12af2e3543ee432ca35ac30a4b4f656a">
</bento-embedly-key>

<bento-embedly-card
data-url="https://twitter.com/AMPhtml/status/986750295077040128"
data-card-theme="dark"
data-card-controls="0"
>
</bento-embedly-card>

<bento-embedly-card
id="my-url"
data-url="https://www.youtube.com/watch?v=LZcKdHinUhE"
>
</bento-embedly-card>

<div class="buttons" style="margin-top: 8px">
<button id="change-url">Change embed</button>
</div>

<script>
(async () => {
const embedlyCard = document.querySelector('#my-url');
await customElements.whenDefined('bento-embedly-card');
// set up button actions
document.querySelector('#change-url').onclick = () => {
embedlyCard.setAttribute(
'data-url',
'https://www.youtube.com/watch?v=wcJSHR0US80'
);
};
})();
</script>
</body>
</body>
</html>
```

### Layout and style
Expand Down

0 comments on commit 126767c

Please sign in to comment.