missing-elements.github.io/src/index.njk at main · missing-elements/missing-elements.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
---
layout: base.njk
title: Missing Elements
description: Elements the web platform is missing, as web components you host yourself, and tools built on them that run in your browser, your editor and your AI agent.
---
{% include "topbar.njk" %}

{#- The build page's bands: a first screen that says what the organization makes, then the elements
    and the tools as cards. The cards and links are lists drawn without bullets, and Safari then
    reads one as a list only if it is told. A card's links say whose they are to a screen reader,
    which may list them apart from the card: "Open, H5P to SCORM". -#}
<main class="home" id="main">
  <section class="hero" aria-labelledby="page-title">
    <div class="wrap">
      <div class="hero-words">
        <h1 id="page-title">Elements the web platform is missing, and tools built on them</h1>
        <p class="lead">
          Web components you host yourself, in any framework or none, and tools that run in your
          browser, your editor and your AI agent. Free and open source, with no server of ours
          between you and your files.
        </p>
        <div class="hero-actions">
          <a class="button button-large button-support" href="{{ site.support }}">Support development</a>
        </div>
      </div>
    </div>
  </section>

  <section class="band" aria-labelledby="elements-heading">
    <div class="wrap">
      <header class="band-head">
        <h2 id="elements-heading">Web components</h2>
        <p>Custom elements for any framework or none, which you serve from your own host, under a strict Content Security Policy.</p>
      </header>
      <ul class="cards" role="list">
        {%- for element in site.elements %}
        <li><article>
          <h3><a href="{{ element.docs }}">{{ element.name }}</a></h3>
          <p class="card-tag"><code>&lt;{{ element.tag }}&gt;</code></p>
          <p>{{ element.description }}</p>
          <footer class="links">
            <a href="{{ element.docs }}">{{ element.docsText }}<span class="visually-hidden">, {{ element.name }}</span></a>
            <a href="https://www.npmjs.com/package/{{ element.package }}">npm<span class="visually-hidden">, {{ element.name }}</span></a>
            <a href="{{ element.repo }}">GitHub<span class="visually-hidden">, {{ element.name }}</span></a>
          </footer>
        </article></li>
        {%- endfor %}
      </ul>
    </div>
  </section>

  <section class="band band-tint" aria-labelledby="tools-heading">
    <div class="wrap">
      <header class="band-head">
        <h2 id="tools-heading">Tools</h2>
        <p>Built on the elements, for making and playing H5P: in your browser, your editor and your AI agent.</p>
      </header>
      <ul class="cards" role="list">
        {%- for tool in site.tools %}
        <li><article>
          <h3><a href="{{ tool.links[0].href }}">{{ tool.name }}</a></h3>
          <p>{{ tool.description }}</p>
          <footer class="links">
            {%- for link in tool.links %}
            <a href="{{ link.href }}">{{ link.text }}<span class="visually-hidden">, {{ tool.name }}</span></a>
            {%- endfor %}
          </footer>
        </article></li>
        {%- endfor %}
      </ul>
    </div>
  </section>
</main>

{% include "site-foot.njk" %}