eleventy-plugin-popover

A plugin for Eleventy, that defines a paired shortcode to create a <toggle-popover> custom element. It uses the Popover API declaratively.

Used in mobile theme — Dive Into Accessibility repository.

eleventy.config.js:

import togglePopoverShortcode from 'eleventy-plugin-popover';

export default async function (eleventyConfig) {
  // …
  eleventyConfig.addPlugin(togglePopoverShortcode);
  // …
}

Shortcode Usage

Use the shortcode in your Liquid or Nunjucks template:

{% togglePopover 'Translations' %}
  <nav aria-label="Translations">
    <ul>
      <li><a href="english.html" lang="en">English</a>
      <li><a href="francais.html" lang="fr">Français</a>
      <li><a href="#…" lang="…">…</a>
    </ul>
  </nav>
{% endtogglePopover %}

Hamburger Popover Shortcode

There is also a hamburgerPopover shortcode:

{% hamburgerPopover 'Toggle menu' %}
  <nav>
    <ul>
      <li><a href="pageOne">Page One</a>
      <li><a href="pageTwo">Page Two</a>
      <li><a href="pageThree…">Page Three …</a>
    </ul>
  </nav>
{% endhamburgerPopover %}

Used APIs

This server-side JavaScript library builds on the follow Web APIs:

• Autonomous custom elements (Can I use? 96%)
• Declarative shadow DOM (Can I use? 94%)
• Popover API (Can I use? 88%)
• CSS Anchor Positioning (Can I use? 76%)

Why?

1. The Popover API provides a way to open and close a popup or menu using declarative HTML attributes. No client-side JavaScript is required.
2. Anchor positioning simplifies positioning one element in relation to another.
3. Both of the above require uniqueness - unique ID values and unique CSS variables. Declarative shadow DOM can provide uniqueness via encapsulation, without the need for client-side JavaScript.

License

• License: MIT