Please fix

.eleventy.js

@@ -1,25 +1,33 @@
 const markdownIt = require('markdown-it');
 const markdownItAnchor = require('markdown-it-anchor');
+const markdownItContainer = require('./third-party/@gerhobbelt/markdown-it-container');
+const pluginRss = require('@11ty/eleventy-plugin-rss');
 
 const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 const toc = require('eleventy-plugin-toc');
 
 const imageShortcode = require('./site/_shortcodes/Image.js');
+const iframeShortcode = require('./site/_shortcodes/Iframe.js');
 const noOpShortCode = require('./site/_shortcodes/NoOp.js');
 const {
   exampleShortCode,
   writeExamples,
 } = require('./site/_shortcodes/Example.js');
+const {heroExampleShortcode} = require('./site/_shortcodes/HeroExample.js');
 
 const {i18n} = require('./site/_filters/i18n');
 const md = require('./site/_filters/md');
 const date = require('./site/_filters/date.js');
 
 const insertStyles = require('./site/_transforms/insertStyles.js');
+const minifyHtml = require('./site/_transforms/minifyHtml.js');
 
 const components = require('./site/_collections/components.js');
 const componentCategories = require('./site/_collections/componentCategories.js');
 const highlights = require('./site/_collections/highlights.js');
+const guides = require('./site/_collections/guides.js');
+
+const notFound = require('./site/_config/404.js');
 
 const isProduction = process.env.NODE_ENV === 'production';
 global.__basedir = __dirname;
@@ -36,33 +44,70 @@ module.exports = (eleventyConfig) => {
     'md',
     markdownIt({
       html: true,
+      breaks: true,
     })
       .use(markdownItAnchor)
+
+
+      // Let folks customize markdown output with attributes (id, class, data-*)
+      .use(require('markdown-it-attrs'), {
+        leftDelimiter: '{:',
+        rightDelimiter: '}',
+        allowedAttributes: ['id', 'class', /^data-.*$/],
+      })
+
+      // Automatically add anchors to headings
+      /*
+      .use(require('markdown-it-anchor'), {
+        level: 2,
+        permalink: true,
+        permalinkClass: 'w-headline-link',
+        permalinkSymbol: '#',
+        // @ts-ignore
+        slugify: (s) => slugify(s, {lower: true}),
+      })
+      */
+
+      .use(markdownItContainer, 'raw', {
+        render: (tokens, idx) => {
+          return '\n';
+        },
+        content: (tokens, idx) => {
+          return tokens[idx].markup;
+        },
+      })
       .disable('code')
   );
 
+  eleventyConfig.addPlugin(pluginRss);
   eleventyConfig.addPlugin(syntaxHighlight);
   eleventyConfig.addPlugin(toc);
 
   eleventyConfig.addNunjucksAsyncShortcode('image', imageShortcode);
+  eleventyConfig.addShortcode('iframe', iframeShortcode);
   eleventyConfig.addJavaScriptFunction('image', imageShortcode);
   eleventyConfig.addPairedShortcode('tip', noOpShortCode);
   eleventyConfig.addNunjucksTag('examples', exampleShortCode);
+  eleventyConfig.addNunjucksTag('heroexample', heroExampleShortcode);
 
   eleventyConfig.addFilter('date', date);
   eleventyConfig.addFilter('i18n', i18n);
   eleventyConfig.addFilter('md', md);
 
   eleventyConfig.addTransform('insert-styles', insertStyles);
+  eleventyConfig.addTransform('minify-html', minifyHtml);
 
   eleventyConfig.addCollection('components', components);
   eleventyConfig.addCollection('componentCategories', componentCategories);
   eleventyConfig.addCollection('highlights', highlights);
+  eleventyConfig.addCollection('guides', guides);
 
   eleventyConfig.on('afterBuild', writeExamples);
 
+  eleventyConfig.setBrowserSyncConfig(notFound);
+
   return {
-    templateFormats: ['njk', 'md'],
+    templateFormats: ['njk', 'md', '11ty.js'],
     htmlTemplateEngine: 'njk',
     markdownTemplateEngine: 'njk',
     dir: {

.eleventyignore

@@ -0,0 +1 @@
+site/de

.eslintrc.json

@@ -4,7 +4,7 @@
     "ecmaVersion": 2018,
     "sourceType": "module"
   },
-  "plugins": ["prettier"],
+  "plugins": ["prettier", "plugin:@next/next/recommended"],
   "rules": {
     "max-len": [
       2,

.gitignore

@@ -6,3 +6,12 @@ temp
 /assets/js/
 .DS_Store
 .vscode
+
+/examples/next.js/.next
+/examples/next.js/out
+
+/examples/react/.next
+/examples/react/out
+/examples/react/pages/**/*
+!/examples/react/pages/_app.js
+

.prettierignore

@@ -1,3 +1,4 @@
-node_modules
-amphtml/**/*
-site/*/components/**
+dist/
+node_modules/
+amphtml/
+site/*/components/**

README.md

@@ -1,12 +1,12 @@
-# bento.dev
+# bentojs.dev
 
 The official homepage of the Bento.
 
 ## Contributing
 
 We welcome contributions to bento.dev.
 
-- **Bug reports and feature requests:** something missing or not working on [bento.dev](https://bento.dev)? Please file an issue [here](https://github.com/ampproject/bento.dev/issues/new).
+- **Bug reports and feature requests:** something missing or not working on [bentojs.dev](https://bentojs.dev)? Please file an issue [here](https://github.com/ampproject/bento.dev/issues/new).
 
 ## Setup
 
@@ -20,15 +20,15 @@ We welcome contributions to bento.dev.
 
 ### Fork & clone the repository
 
-To get started with contributing to bento.dev, you first need to [fork the repository](https://help.github.com/en/articles/fork-a-repo). Once you've done that you can clone the repository:
+To get started with contributing to bentojs.dev, you first need to [fork the repository](https://help.github.com/en/articles/fork-a-repo). Once you've done that you can clone the repository:
 
 ```sh
-$ git clone --recurse-submodules git@github.com:YOUR-USERNAME/bento.dev.git
+$ git clone --recurse-submodules git@github.com:YOUR-USERNAME/bentojs.dev.git
 ```
 
 ... and then install the dependencies via NPM:
 
 ```sh
-$ cd bento.dev
+$ cd bentojs.dev
 $ npm install
 ```

app/bundles/all.js

@@ -1,5 +1,11 @@
+import '../components/AnnouncementBanner';
+import CopyToClipboard from '../components/CopyToClipboard';
 import Header from '../components/Header';
 
 window.addEventListener('load', () => {
   new Header(document.querySelector('.bd-header'));
+
+  for (codeSnippet of document.querySelectorAll('.bd-copy-pasteable > pre')) {
+    new CopyToClipboard(codeSnippet);
+  }
 });

app/bundles/documentation.js

@@ -11,7 +11,7 @@ window.addEventListener('load', () => {
     document.getElementById('bd-button-toc')
   );
 
-  for ($example of document.querySelectorAll('.bd-example')) {
-    new Example($example);
+  for (example of document.querySelectorAll('.bd-example')) {
+    new Example(example);
   }
 });

app/bundles/home.js

@@ -3,7 +3,7 @@ import HomeDemo from '../components/HomeDemo';
 window.addEventListener('load', () => {
   new HomeDemo(
     document.getElementById('bd-demo-selector'),
-    document.querySelectorAll('.bd-demo-code-sample'),
+    document.getElementById('bd-demo-source-selector'),
     document.getElementById('bd-demo-iframe')
   );
 });

app/components/AnnouncementBanner.js

@@ -0,0 +1,42 @@
+/*
+ * Based on https://github.com/zachleat/herald-of-the-dog/blob/main/herald.js with modifications
+ */
+class Banner extends HTMLElement {
+  connectedCallback() {
+    // No matter when this runs, the close button will not be visible
+    // until after this class is added—prevents ghost clicks on the button
+    // before the event listener is added.
+    this.classList.add('banner--show-close');
+
+    this.addEventListener('click', (e) => {
+      if (e.target.closest('[data-banner-close]')) {
+        this.savePreference();
+        this.close();
+      }
+    });
+  }
+
+  getButton() {
+    return this.querySelector('[data-banner-close]');
+  }
+
+  savePreference() {
+    let storageKey = this.getAttribute('data-banner-key');
+    if (!storageKey) {
+      const cta = this.querySelector('a[href]');
+      if (cta) {
+        storageKey = cta.getAttribute('href');
+      }
+    }
+
+    if (storageKey) {
+      localStorage.setItem('banner--cta-url', storageKey);
+    }
+  }
+
+  close() {
+    this.classList.add('--hidden');
+  }
+}
+
+window.customElements.define('announcement-banner', Banner);

app/components/CopyToClipboard.js

@@ -0,0 +1,29 @@
+class CopyToClipboard {
+  constructor(element, textToCopy) {
+    this.element = element;
+    this.textToCopy = textToCopy;
+
+    this.animationDuration = 1000;
+    window.requestAnimationFrame(() => {
+      const button = document.createElement('button');
+      button.classList.add('bd-copy');
+      button.ariaLabel = 'Copy code';
+      button.innerHTML = `<svg class="bd-copy-icon-default" xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
+       <svg class="bd-copy-icon-success"  xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>`;
+      this.element.appendChild(button);
+      button.addEventListener('click', this.onClick.bind(this));
+    });
+  }
+
+  async onClick() {
+    const textToCopy =
+      this.textToCopy || this.element.querySelector('code').innerText;
+    await navigator.clipboard.writeText(textToCopy);
+    this.element.classList.add('--success');
+    setTimeout(() => {
+      this.element.classList.remove('--success');
+    }, this.animationDuration);
+  }
+}
+
+export default CopyToClipboard;

app/components/DocumentationSidebar.js

@@ -1,15 +1,14 @@
 class DocumentationSidebar {
-  constructor($sidebar, $button) {
-    this.$sidebar = $sidebar;
-    this.$button = $button;
-
+  constructor(sidebar, button) {
+    this.sidebar = sidebar;
+    this.button = button;
     this.init();
   }
 
   async init() {
     await customElements.whenDefined('bento-sidebar');
-    const api = await this.$sidebar.getApi();
-    this.$button.addEventListener('click', () => {
+    const api = await this.sidebar.getApi();
+    this.button.addEventListener('click', () => {
       api.toggle();
     });
   }

app/components/Example.js

@@ -1,3 +1,5 @@
+import CopyToClipboard from '../components/CopyToClipboard';
+
 class Example {
   constructor($example) {
     this.$example = $example;
@@ -15,6 +17,13 @@ class Example {
     this.$button.preview.addEventListener('click', (e) => {
       this.toggle(e, true);
     });
+
+    let code = '';
+    for (const codeElement of this.$example.querySelectorAll('pre')) {
+      code = code + codeElement.innerText;
+    }
+
+    new CopyToClipboard(this.$code, code);
   }
 
   toggle(e, force) {

app/components/Header.js

@@ -9,6 +9,7 @@ class Header {
   toggle(e, force) {
     e.preventDefault();
     this.$header.classList.toggle('--mainmenuopen', force);
+    document.documentElement.classList.toggle('--main-overflow', force);
   }
 }
 

app/components/HomeDemo.js

@@ -1,41 +1,24 @@
 class HomeDemo {
-  constructor($selector, $code, $previewEl) {
-    this.$selector = $selector;
-    this.$code = Array.from($code);
-    this.$previewEl = $previewEl;
-
-    this.$selector.addEventListener('select', this.toggleDemo.bind(this));
+  constructor(buttonSelector, sourceSelector, previewEl) {
+    this.buttonSelector = buttonSelector;
+    this.sourceSelector = sourceSelector;
+    this.preview = previewEl;
+    this.init();
   }
 
-  toggleDemo(e) {
-    e.preventDefault();
-    const previewId = e.data.targetOption;
-    const button = this.$selector.querySelector(
-      `button[option='${previewId}']`
-    );
-    this.selectButton(button);
-    this.changePreview(previewId);
+  async init() {
+    await customElements.whenDefined('bento-selector');
+    this.buttonSelector.addEventListener('select', this.toggleDemo.bind(this));
   }
 
-  selectButton(button) {
-    const invertedClass = '--inverted';
-    const buttons = Array.from(this.$selector.querySelectorAll('button'));
-    buttons.map((btn) => {
-      btn.classList.add(invertedClass);
-    });
-    button.classList.remove(invertedClass);
-  }
+  async toggleDemo(event) {
+    const previewId = event.data.targetOption;
 
-  changePreview(previewId) {
-    const hideClass = '--hide';
-    const iframeSrc = `assets/iframes/homepage-examples/${previewId}.html`;
-    this.$previewEl.setAttribute('src', iframeSrc);
-
-    this.$code.map((code) => {
-      code.classList.add(hideClass);
-    });
-    const currentCode = document.getElementById(previewId);
-    currentCode.classList.remove(hideClass);
+    (await this.sourceSelector.getApi()).toggle(previewId, true);
+    this.preview.setAttribute(
+      'src',
+      `assets/iframes/homepage-examples/${previewId}.html`
+    );
   }
 }