index.njk

---
layout: base.njk
title: Missing Elements
description: Standalone, self-hostable web components for viewing documents and content in the browser.
---
{#- The cards and links are lists drawn without bullets, and Safari then reads one as a list only if it is told. -#}
<main class="home" id="main">
  <h1 class="brand-title"><img src="/assets/logo.svg" alt="" width="48" height="48">Missing Elements</h1>
  <p class="lead">Standalone, self-hostable web components for viewing documents and content in the browser.</p>

  <section aria-labelledby="elements-heading">
    <h2 id="elements-heading">Web components</h2>
    <ul class="elements" role="list">
      {%- for element in site.elements %}
      <li>
        <h3><a href="{{ element.docs }}">{{ element.name }}</a></h3>
        <p>{{ element.description }}</p>
        <div class="links">
          <a href="{{ element.docs }}">Docs</a>
          <a href="{{ element.repo }}">GitHub</a>
        </div>
      </li>
      {%- endfor %}
    </ul>
  </section>

  <section aria-labelledby="tools-heading">
    <h2 id="tools-heading">Tools</h2>
    <p>Apps built on the elements, which run in your browser.</p>
    <ul class="elements" role="list">
      {%- for tool in site.tools %}
      <li>
        <h3><a href="{{ tool.page }}">{{ tool.name }}</a></h3>
        <p>{{ tool.description }}</p>
        <div class="links">
          <a href="{{ tool.page }}">Open</a>
          <a href="{{ tool.repo }}">GitHub</a>
        </div>
      </li>
      {%- endfor %}
    </ul>
  </section>

  {#- Each element's name twice, under npm and under Issues: the hidden words say which, in a list of the page's links. -#}
  <footer class="site-footer">
    <nav class="footer-links" aria-label="Useful links">
      <div>
        <h2>npm</h2>
        <ul role="list">
          {%- for element in site.elements %}
          <li><a href="https://www.npmjs.com/package/{{ element.package }}">{{ element.name }}<span class="visually-hidden"> on npm</span></a></li>
          {%- endfor %}
        </ul>
      </div>
      <div>
        <h2>GitHub</h2>
        <ul role="list">
          <li><a href="{{ site.github }}">The organization</a></li>
          <li><a href="{{ site.github }}/missing-elements.github.io">This site's source</a></li>
        </ul>
      </div>
      <div>
        <h2>Issues</h2>
        <ul role="list">
          {%- for element in site.elements %}
          <li><a href="{{ element.repo }}/issues">{{ element.name }}<span class="visually-hidden"> issues</span></a></li>
          {%- endfor %}
        </ul>
      </div>
    </nav>
  </footer>
</main>