Update README, site data, and styles; add E2E tests for home and build pages

Author: alekswebnet

README.md

@@ -6,7 +6,7 @@ The site of the [missing-elements](https://github.com/missing-elements) web comp
 
 | Path | What it is | Source, and the detail |
 | --- | --- | --- |
-| `/` | The project list | [src/index.njk](src/index.njk); the projects are in [src/_data/site.js](src/_data/site.js) |
+| `/` | The project list, the tools (the build page, which links the skill's page), and a footer of links | [src/index.njk](src/index.njk); the lists are in [src/_data/site.js](src/_data/site.js) |
 | `/pdfjs-viewer/` | The docs of `<pdfjs-viewer-element>`, with a live preview | [src/pdfjs-viewer/](src/pdfjs-viewer/); [docs/pdfjs-viewer.md](docs/pdfjs-viewer.md) |
 | `/h5p/skill/` | The skill's files, and a page that lists each at its full address | [src/h5p/skill/](src/h5p/skill/), copied by [eleventy.config.js](eleventy.config.js); [docs/h5p-skill.md](docs/h5p-skill.md) |
 | `/h5p/bundles/` | The skill's build tool and a library bundle per content type, for a chat that runs Node but cannot reach npm | written by [vite.config.ts](vite.config.ts); [docs/h5p-bundles.md](docs/h5p-bundles.md) |

e2e/home.spec.ts

@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test'
+
+/*
+ * The org home, /: a card for each element, one for each tool, the build page, and a footer of
+ * links; and the build page links the skill's page at the whole address a person gives the chat.
+ */
+
+const SKILL = 'https://missing-elements.github.io/h5p/skill/'
+
+test('the home page links to the build page, and the build page to the skill’s page, and both answer', async ({ page, request }) => {
+  await page.goto('/')
+  await expect(page.getByRole('region', { name: 'Web components' }).getByRole('link', { name: 'pdfjs-viewer', exact: true })).toHaveAttribute('href', '/pdfjs-viewer/')
+  await expect(page.getByRole('region', { name: 'Tools' }).getByRole('link', { name: 'Build an H5P activity', exact: true })).toHaveAttribute('href', '/h5p/build/')
+  await expect(page.getByRole('navigation', { name: 'Useful links' }).getByRole('link', { name: 'pdfjs-viewer on npm' })).toHaveAttribute('href', 'https://www.npmjs.com/package/@missing-elements/pdfjs-viewer')
+  expect((await request.get('/h5p/build/')).ok()).toBe(true)
+
+  await page.goto('/h5p/build/')
+  await expect(page.getByRole('link', { name: SKILL, exact: true })).toHaveAttribute('href', SKILL)
+  expect((await request.get('/h5p/skill/')).ok()).toBe(true)
+})

src/_data/site.js

@@ -6,15 +6,27 @@ export default {
     {
       name: "pdfjs-viewer",
       tag: "pdfjs-viewer-element",
+      package: "@missing-elements/pdfjs-viewer",
       description: "A self-hostable PDF viewer web component, based on the PDF.js viewer.",
       docs: "/pdfjs-viewer/",
       repo: "https://github.com/missing-elements/pdfjs-viewer",
     },
     {
       name: "h5p-offline-player",
+      package: "@missing-elements/h5p-offline-player",
       description: "A browser-only H5P player as one web component. Self-hostable, and builds a fully offline PWA.",
       docs: "https://h5p-offline-player.vercel.app/",
       repo: "https://github.com/missing-elements/h5p-offline-player",
     },
   ],
+  // The tools on the home page, under the elements: pages built on them that run in the browser.
+  // A tool's GitHub link is where it is explained. The build page links the skill's page itself.
+  tools: [
+    {
+      name: "Build an H5P activity",
+      description: "Make H5P activities with an AI chat and the h5p-author skill: paste the source it wrote, play it, and download a .h5p file for any H5P site. Nothing is uploaded.",
+      page: "/h5p/build/",
+      repo: "https://github.com/missing-elements/missing-elements.github.io/blob/main/docs/h5p-build-page.md",
+    },
+  ],
 };

src/assets/site.css

@@ -25,6 +25,9 @@
   --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --radius: 6px;
   --preview-width: clamp(360px, 42vw, 760px);
+  /* The pages of one wide column, the org home and the H5P build page. Their prose keeps --measure. */
+  --page-width: 72rem;
+  --measure: 60ch;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -535,22 +538,48 @@ tbody th a:hover code { text-decoration: underline; }
 }
 
 /* Org home */
-.home { max-width: 44rem; margin: 0 auto; padding: 4rem 1rem; }
+.home { max-width: var(--page-width); margin: 0 auto; padding: 4rem clamp(1rem, 4vw, 3rem); }
 .home h1 { margin: 0 0 0.5rem; font-size: 2rem; }
 .brand-title { display: flex; align-items: center; gap: 0.75rem; }
 .brand-title img { width: 3rem; height: 3rem; }
-.home .lead { margin-bottom: 2rem; }
-.elements { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
-.elements li { margin: 0; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
-.elements h2 { margin: 0 0 0.25rem; padding: 0; border: 0; font-size: 1.125rem; }
+.home .lead { max-width: var(--measure); margin-bottom: 2rem; }
+/* A group of cards under its title, the size of a docs page's section title, without its rule. */
+.home section + section { margin-top: 3rem; }
+.home section > h2 { margin: 0 0 0.75rem; padding: 0; border: 0; font-size: 1.5rem; }
+.home section > p { max-width: var(--measure); margin: 0 0 1.25rem; color: var(--muted); }
+/* The cards two to a row where two fit, each as tall as its row, with its links at its foot. Every
+   section has the same two columns, so a section of one card keeps it the width of the others. */
+.home section { container-type: inline-size; }
+.elements {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+@container (width > 36rem) {
+  .elements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+.elements li { display: flex; flex-direction: column; margin: 0; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
+.elements h3 { margin: 0 0 0.25rem; font-size: 1.125rem; }
 .elements p { margin: 0 0 0.5rem; color: var(--muted); }
-.elements .links { display: flex; gap: 1rem; font-size: 0.875rem; }
+.elements .links { display: flex; gap: 1rem; margin-top: auto; font-size: 0.875rem; }
+/* The home page's footer: where else the elements are, in columns of links. */
+.site-footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.875rem; }
+.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem 4rem; }
+.footer-links h2 { margin: 0 0 0.5rem; padding: 0; border: 0; font-size: 0.875rem; }
+.footer-links ul { margin: 0; padding: 0; list-style: none; }
+.footer-links li + li { margin-top: 0.35rem; }
+.footer-links a { color: var(--muted); text-decoration: none; }
+.footer-links a:hover { color: var(--text); text-decoration: underline; }
 
 /* The h5p-author skill's files, /h5p/skill/: whole addresses, which give way on a phone. */
 .skill-files a { overflow-wrap: anywhere; }
 
 /* H5P build page, /h5p/build/ */
 .build {
+  max-width: var(--page-width);
   --ok: var(--live);
   --bad: var(--t-tag);
   /* Masked, like the preview pane's icons, so they take a color like text does. */
@@ -560,6 +589,8 @@ tbody th a:hover code { text-decoration: underline; }
 .build-brand { margin-bottom: 1.25rem; font-size: 0.9375rem; }
 /* A longer heading than the docs' package names, so it gives way on a phone. */
 .build .docs-header h1 { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.25rem); }
+/* Prose keeps a line a reader can follow; the source, the lists and what plays take the whole width. */
+.build p:not(.status) { max-width: var(--measure); }
 
 /* The steps are a timeline: a marker for each, on a rail that runs on to the next. A step the page
    hides, as the files of a source that names none, is not on it, and the rail ends at the last shown. */

src/h5p/build/index.njk

@@ -27,6 +27,11 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' da
       site takes. Nothing is uploaded: the package is built in your browser, from the libraries this
       site serves.
     </p>
+    {#- The skill's page at its whole address, which a person gives the chat as it is. -#}
+    <p>
+      No source yet? Give the chat <a href="{{ site.url }}/h5p/skill/">{{ site.url }}/h5p/skill/</a>
+      and ask it for an activity: the h5p-author skill there tells it how to write one.
+    </p>
   </header>
 
   {#- The steps are drawn as a timeline by site.css: a marker for each, on a rail that runs on to

src/index.njk

@@ -3,19 +3,70 @@ 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>
-  <ul class="elements">
-    {%- for element in site.elements %}
-    <li>
-      <h2><a href="{{ element.docs }}">{{ element.name }}</a></h2>
-      <p>{{ element.description }}</p>
-      <div class="links">
-        <a href="{{ element.docs }}">Docs</a>
-        <a href="{{ element.repo }}">GitHub</a>
+
+  <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>
-    </li>
-    {%- endfor %}
-  </ul>
+      <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>