Skip to content

Commit 43eac04

Browse files
alekswebnetalekswebnet
committed
Refactor site structure: enhance footer with site links, update topbar branding, and improve element descriptions
1 parent 0a7c0f4 commit 43eac04

9 files changed

Lines changed: 256 additions & 147 deletions

File tree

‎src/_data/site.js‎

Lines changed: 51 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,37 +19,80 @@ const buildFeedback = {
1919

2020
export default {
2121
name: "Missing Elements",
22+
// What the organization makes, in a line: under the name in the top bar.
23+
tagline: "Browser-based OSS and tools",
2224
url: "https://missing-elements.github.io",
2325
github: "https://github.com/missing-elements",
2426
// Google Search Console's code for the site, from the "HTML tag" check of its URL-prefix property,
2527
// https://missing-elements.github.io/: base.njk writes it on every page while it is set.
2628
googleSiteVerification: "_z8PPC9AkWc2rKheTsM0kGmM6UA6FLfgMf0aRxDzULU",
29+
// The web components, on the home page with their element's tag, and in its footer by their npm
30+
// package and their issues. `docs` is where each is shown working, named by `docsText`.
2731
elements: [
2832
{
2933
name: "pdfjs-viewer",
3034
tag: "pdfjs-viewer-element",
3135
package: "@missing-elements/pdfjs-viewer",
32-
description: "A self-hostable PDF viewer web component, based on the PDF.js viewer.",
36+
description: "Views and edits PDF files in Firefox's PDF.js viewer, in an isolated iframe, with no runtime dependencies.",
3337
docs: "/pdfjs-viewer/",
38+
docsText: "Docs and playground",
3439
repo: "https://github.com/missing-elements/pdfjs-viewer",
3540
},
3641
{
3742
name: "h5p-offline-player",
43+
tag: "h5p-player",
3844
package: "@missing-elements/h5p-offline-player",
39-
description: "A browser-only H5P player as one web component. Self-hostable, and builds a fully offline PWA.",
45+
description: "Plays .h5p files from your own URLs or from disk with no H5P server, offline too, and reports results as xAPI, cmi5 or SCORM.",
4046
docs: "https://h5p-offline-player.vercel.app/",
47+
docsText: "Demo",
4148
repo: "https://github.com/missing-elements/h5p-offline-player",
4249
},
4350
],
44-
// The tools on the home page, under the elements: pages built on them that run in the browser.
45-
// A tool's GitHub link is its source. The build page links the skill's page itself.
51+
// The tools on the home page, under the elements: built on them, in the browser, an editor or an AI
52+
// agent. Each card's title goes where its first link does; a GitHub link is the tool's source.
4653
tools: [
4754
{
4855
name: "Build an H5P activity with AI",
49-
description: "Describe a lesson to an AI chat and get an H5P activity, from a quiz to a branching scenario: play it, and download a .h5p file for Moodle or any other H5P site. Free, and nothing is uploaded.",
50-
page: "/h5p/build/",
51-
guide: "/h5p/create-with-ai/",
52-
repo: "https://github.com/missing-elements/missing-elements.github.io/tree/main/src/h5p/build",
56+
description: "Describe a lesson to ChatGPT, Claude or Grok and get an H5P activity, from a quiz to a branching scenario: play it, and download a .h5p file for Moodle or any other H5P site.",
57+
links: [
58+
{ text: "Open", href: "/h5p/build/" },
59+
{ text: "How-to", href: "/h5p/create-with-ai/" },
60+
{ text: "GitHub", href: "https://github.com/missing-elements/missing-elements.github.io/tree/main/src/h5p/build" },
61+
],
62+
},
63+
{
64+
name: "H5P to SCORM",
65+
description: "Turns a .h5p file into a SCORM zip that an LMS plays and grades, in your browser.",
66+
links: [
67+
{ text: "Open", href: "https://h5p-offline-player.vercel.app/demo/scorm.html" },
68+
{ text: "GitHub", href: "https://github.com/missing-elements/h5p-offline-player/tree/main/packages/embed" },
69+
],
70+
},
71+
{
72+
name: "H5P Offline Player",
73+
description: "An app you install from the browser that plays .h5p files with no network.",
74+
links: [
75+
{ text: "Open", href: "https://h5p-offline-player.vercel.app/app/" },
76+
{ text: "GitHub", href: "https://github.com/missing-elements/h5p-offline-player" },
77+
],
78+
},
79+
{
80+
name: "H5P Preview",
81+
description: "Plays .h5p files in VS Code, Cursor and VSCodium: offline, and nothing leaves your computer.",
82+
links: [
83+
{ text: "VS Code Marketplace", href: "https://marketplace.visualstudio.com/items?itemName=MissingElements.h5p-preview" },
84+
{ text: "Open VSX", href: "https://open-vsx.org/extension/MissingElements/h5p-preview" },
85+
{ text: "GitHub", href: "https://github.com/missing-elements/h5p-offline-player/tree/main/packages/vscode" },
86+
],
87+
},
88+
{
89+
name: "H5P skills for AI agents",
90+
description: "Five skills for Claude Code and other agents: H5P from a prompt, a check that it plays, a SCORM zip, H5P on your site, and video that streams.",
91+
links: [
92+
{ text: "Install", href: "https://skills.sh/missing-elements/h5p-offline-player" },
93+
{ text: "For a chat", href: "/h5p/skill/" },
94+
{ text: "GitHub", href: "https://github.com/missing-elements/h5p-offline-player/tree/main/skills" },
95+
],
5396
},
5497
],
5598
buildFeedback,

‎src/_includes/pdfjs-viewer.njk‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,6 @@ bodyClass: docs-page
5050
<button type="button" class="button preview-open" data-preview-open aria-controls="preview" aria-expanded="false" hidden>Preview</button>
5151
</div>
5252

53-
<footer class="site-foot">
54-
<div class="wrap">
55-
<p>Found a mistake? <a href="https://github.com/missing-elements/missing-elements.github.io/blob/main/{{ page.inputPath | replace('./', '') }}">Edit this page</a> or <a href="{{ pdfjsViewer.repo }}/issues">open an issue</a>.</p>
56-
</div>
57-
</footer>
53+
{%- set footIssues = pdfjsViewer.repo ~ "/issues" %}
54+
{% include "site-foot.njk" %}
5855
<script type="module" src="/pdfjs-viewer/docs.js"></script>

‎src/_includes/site-foot.njk‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{#- The foot of every page: what the site is, beside where else to go, in columns: the elements and
2+
the tools (site.js), the guides, and where the source is. Under them what the page says of
3+
itself where it says something (`footNote`, captured before the include with
4+
{% set footNote %}…{% endset %}), the notice the H5P tools' names need, and where to fix the
5+
page: its source here, and the issues of what it is about (`footIssues`, else this site's). -#}
6+
<footer class="site-foot">
7+
<div class="wrap">
8+
<div class="foot-main">
9+
<div class="foot-about">
10+
<a class="brand" href="/">
11+
<img src="/assets/logo.svg" alt="" width="32" height="32">
12+
<span class="brand-text"><span class="brand-name">{{ site.name }}</span> <span class="brand-tagline">{{ site.tagline }}</span></span>
13+
</a>
14+
<p>Free and open source: the elements and the tools are MIT. No sign-up, and no server of ours between you and your files.</p>
15+
</div>
16+
<nav class="footer-links" aria-label="Site">
17+
<div>
18+
<h2>Web components</h2>
19+
<ul role="list">
20+
{%- for element in site.elements %}
21+
<li><a href="{{ element.docs }}">{{ element.name }}</a></li>
22+
{%- endfor %}
23+
</ul>
24+
</div>
25+
<div>
26+
<h2>Tools</h2>
27+
<ul role="list">
28+
{%- for tool in site.tools %}
29+
<li><a href="{{ tool.links[0].href }}">{{ tool.name }}</a></li>
30+
{%- endfor %}
31+
</ul>
32+
</div>
33+
<div>
34+
<h2>Guides</h2>
35+
<ul role="list">
36+
<li><a href="/h5p/create-with-ai/">Create H5P content with AI</a></li>
37+
<li><a href="/h5p/skill/">The h5p-author skill, for a chat</a></li>
38+
</ul>
39+
</div>
40+
<div>
41+
<h2>Open source</h2>
42+
<ul role="list">
43+
<li><a href="{{ site.github }}">GitHub</a></li>
44+
<li><a href="https://www.npmjs.com/org/missing-elements">npm</a></li>
45+
<li><a href="{{ site.github }}/missing-elements.github.io">This site's source</a></li>
46+
<li><a href="https://donatello.to/OleksandrShevchuk">Support the project</a></li>
47+
</ul>
48+
</div>
49+
</nav>
50+
</div>
51+
<div class="foot-base">
52+
{%- if footNote %}
53+
{{ footNote | safe }}
54+
{%- endif %}
55+
<p>Not affiliated with H5P Group; H5P is a registered trademark of H5P Group AS.</p>
56+
<p>Found a mistake? <a href="{{ site.github }}/missing-elements.github.io/edit/main/{{ page.inputPath | replace('./', '') }}">Edit this page</a> or <a href="{{ footIssues or (site.github ~ '/missing-elements.github.io/issues') }}">open an issue</a>.</p>
57+
</div>
58+
</div>
59+
</footer>

‎src/_includes/topbar.njk‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@
44
one), and the theme switch. -#}
55
<header class="topbar">
66
<div class="wrap topbar-row">
7-
<a class="brand" href="/"{% if page.url == "/" %} aria-current="page"{% endif %}><img src="/assets/logo.svg" alt="" width="24" height="24">{{ site.name }}</a>
7+
<a class="brand" href="/"{% if page.url == "/" %} aria-current="page"{% endif %}>
8+
<img src="/assets/logo.svg" alt="" width="32" height="32">
9+
<span class="brand-text"><span class="brand-name">{{ site.name }}</span> <span class="brand-tagline">{{ site.tagline }}</span></span>
10+
</a>
811
<div class="topbar-end">
912
{%- if topbarLinks %}
1013
<nav class="topbar-links{% if topbarLinksClass %} {{ topbarLinksClass }}{% endif %}" aria-label="On this page">

‎src/assets/site.css‎

Lines changed: 55 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -340,9 +340,14 @@ tbody th a:hover code { text-decoration: underline; }
340340
font-size: 0.875rem;
341341
scroll-target-group: auto;
342342
}
343-
.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); font-weight: 600; text-decoration: none; }
344-
.brand img { width: 1.5rem; height: 1.5rem; }
345-
.brand:hover { text-decoration: underline; }
343+
/* The top bar's brand: the logo, then the name over what the organization makes. A hover underlines
344+
the name alone, which a line on the link itself would not let the subline out of. */
345+
.brand { display: inline-flex; align-items: center; gap: 0.625rem; min-inline-size: 0; color: var(--text); text-decoration: none; }
346+
.brand img { flex: none; width: 2rem; height: 2rem; }
347+
.brand-text { display: grid; min-inline-size: 0; line-height: 1.25; }
348+
.brand-name { font-weight: 600; }
349+
.brand-tagline { color: var(--muted); font-size: 0.8125rem; text-wrap: balance; }
350+
.brand:hover .brand-name { text-decoration: underline; }
346351
.toc ol, .toc-inline ol { margin: 0; padding: 0; list-style: none; }
347352
.toc li + li, .toc-inline li + li { margin-top: 0; }
348353
.toc ol a, .toc-inline a {
@@ -546,41 +551,48 @@ tbody th a:hover code { text-decoration: underline; }
546551
.flash { animation: none; }
547552
}
548553

549-
/* The pages of one column, the org home, the skill page and the guide: in the build page's
550-
container, under its top bar. */
551-
:is(.home, .skill, .guide) { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(3.5rem, 2rem + 5vw, 6rem); }
552-
553-
/* Org home */
554-
.home h1 { margin: 0 0 0.5rem; font-size: 2rem; }
555-
.brand-title { display: flex; align-items: center; gap: 0.75rem; }
556-
.brand-title img { width: 3rem; height: 3rem; }
557-
.home .lead { max-width: var(--measure); margin-bottom: 2rem; }
558-
/* A group of cards under its title, the size of a docs page's section title, without its rule. */
559-
.home section + section { margin-top: 3rem; }
560-
.home section > h2 { margin: 0 0 0.75rem; padding: 0; border: 0; font-size: 1.5rem; }
561-
.home section > p { max-width: var(--measure); margin: 0 0 1.25rem; color: var(--muted); }
562-
/* Cards: on the home page, the elements and the tools. Two to a row where two fit and never more,
563-
so one alone keeps the width of the others. Each is as tall as its row, with its links at its
564-
foot. */
554+
/* The pages of one column, the skill page and the guide: in the build page's container, under its
555+
top bar. */
556+
:is(.skill, .guide) { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(3.5rem, 2rem + 5vw, 6rem); }
557+
558+
/* Org home: the build page's bands, its first screen's words no wider than a heading of two lines. */
559+
.home .hero-words { max-inline-size: 46rem; }
560+
/* Cards: on the home page, the elements and the tools, as the build page's steps are drawn. Three to
561+
a row on a wide screen, two on a tablet, one on a phone; each an <article> as tall as its row,
562+
with its links in its <footer>, at its foot. */
565563
.cards {
566564
display: grid;
567-
grid-template-columns: repeat(auto-fill, minmax(min(100%, max(18rem, calc((100% - 1rem) / 2))), 1fr));
568-
gap: 1rem;
565+
grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
566+
gap: 1.25rem;
569567
margin: 0;
570568
padding: 0;
571569
list-style: none;
572570
}
573-
.cards > li { display: flex; flex-direction: column; margin: 0; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
574-
.cards :is(h3, h4) { margin: 0 0 0.25rem; font-size: 1.125rem; }
575-
.cards p { margin: 0 0 0.5rem; color: var(--muted); }
576-
.cards .links { display: flex; gap: 1rem; margin-top: auto; font-size: 0.875rem; }
577-
/* The home page's footer: where else the elements are, in columns of links. */
578-
.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem 4rem; }
579-
.footer-links h2 { margin: 0 0 0.5rem; padding: 0; border: 0; color: var(--text); font-size: 0.875rem; }
571+
.cards > li { display: grid; margin: 0; }
572+
.cards article { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: 12px; background: var(--raised); }
573+
.cards h3 { margin: 0; font-size: 1.125rem; }
574+
.cards p { margin: 0; color: var(--muted); }
575+
.card-tag code { font-size: 0.8125rem; }
576+
.cards .links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: auto; padding-top: 0.5rem; font-size: 0.875rem; }
577+
/* The foot of every page (site-foot.njk): what the site is, then where else to go in four columns,
578+
two to a row on a phone, and beside it where both fit; under a rule, what the page says of
579+
itself and where to fix it. A count, not as many as fit, so a column is never left alone. */
580+
.site-foot { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 2.5rem; border-block-start: 1px solid var(--border); color: var(--muted); font-size: 0.875rem; }
581+
.site-foot p { max-inline-size: var(--measure); margin: 0 0 0.5rem; }
582+
.foot-main { display: grid; gap: 2rem 4rem; }
583+
@media (width >= 72rem) { .foot-main { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); } }
584+
.foot-about .brand { font-size: 1rem; }
585+
.foot-about p { margin-block-start: 1rem; }
586+
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
587+
@media (width >= 48rem) { .footer-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
588+
.footer-links h2 { margin: 0 0 0.75rem; padding: 0; border: 0; color: var(--text); font-size: 0.875rem; }
580589
.footer-links ul { margin: 0; padding: 0; list-style: none; }
581-
.footer-links li + li { margin-top: 0.35rem; }
590+
.footer-links li { text-wrap: balance; }
591+
.footer-links li + li { margin-top: 0.5rem; }
582592
.footer-links a { color: var(--muted); text-decoration: none; }
583593
.footer-links a:hover { color: var(--text); text-decoration: underline; }
594+
.foot-base { margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); padding-block-start: 1.5rem; border-block-start: 1px solid var(--border); }
595+
.foot-base > :last-child { margin-block-end: 0; }
584596

585597
/* The skill page: one wide column, its prose at --measure, and its sections as steps. */
586598
.skill > * { max-inline-size: var(--page-width); }
@@ -647,7 +659,12 @@ tbody th a:hover code { text-decoration: underline; }
647659
.topbar-links { display: flex; gap: 1.75rem; font-size: 0.9375rem; }
648660
.topbar-links a { color: var(--muted); text-decoration: none; }
649661
.topbar-links a:hover { color: var(--text); text-decoration: underline; }
650-
@media (width < 48rem) { .topbar-links { display: none; } }
662+
/* Narrower than the brand and the longest section links need side by side, the guide's, the brand
663+
and the switch alone, on one row: the subline wraps before the switch would. */
664+
@media (width < 52rem) {
665+
.topbar-links { display: none; }
666+
.topbar-row { flex-wrap: nowrap; }
667+
}
651668

652669
/* The first screen: the title, what the page makes and two ways on, and the sample, which plays,
653670
beside them where there is room for both and under them where there is not. The sample takes
@@ -779,9 +796,16 @@ tbody th a:hover code { text-decoration: underline; }
779796
}
780797
.how h3 { margin: 0 0 0.4rem; font-size: 1.0625rem; }
781798
.how p { margin: 0; color: var(--muted); }
782-
/* The prompt, in a code block's frame for its Copy button: prose, so it wraps. */
799+
/* The prompt, in a code block's frame for its Copy button: prose, so it wraps. It is on the
800+
accent's tint, which a code block's color is not: that is a tinted band's own, as on the build
801+
page, and next to the page's. Its frame takes the tint once, the text and the bar showing it
802+
through; the bar's label then takes the text's color, where the muted one is too faint on the
803+
tint in the dark theme (4.4:1). */
783804
.prompt-box { max-inline-size: 48rem; }
784805
pre.prompt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9375rem; }
806+
pre.prompt, .code:has(> pre.prompt) { background: var(--tint); }
807+
.code > pre.prompt { background: none; }
808+
.code:has(> pre.prompt) .code-bar { color: var(--text); }
785809

786810
/* Build it: the steps on the same left edge as the rest, no wider than the source's editor reads. */
787811
.tool .step { max-inline-size: 60rem; }
@@ -808,9 +832,6 @@ pre.prompt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9375re
808832
.closing-grid p { margin: 0; color: var(--muted); }
809833
.feedback-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: auto; padding-block-start: 0.5rem; }
810834

811-
.site-foot { padding-block: 2.5rem 3rem; border-block-start: 1px solid var(--border); color: var(--muted); font-size: 0.875rem; }
812-
.site-foot p { max-inline-size: var(--measure); }
813-
814835
/* H5P build page, /h5p/build/ */
815836
.build {
816837
--ok: var(--live);

‎src/h5p/build/index.njk‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -297,17 +297,15 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' da
297297
</div>
298298
</main>
299299

300-
<footer class="site-foot">
301-
<div class="wrap">
302-
<p>
303-
Built with <a href="https://github.com/missing-elements/h5p-offline-player">h5p-offline-player</a>
304-
and <code>@missing-elements/h5p-author</code>, MIT. The H5P runtime the player loads is
305-
<a href="/h5p/assets/runtime-LICENSE.txt">GPL-3.0</a>. Not affiliated with H5P Group; H5P is a
306-
registered trademark of H5P Group AS.
307-
</p>
308-
<p>Found a mistake? <a href="https://github.com/missing-elements/missing-elements.github.io/blob/main/{{ page.inputPath | replace('./', '') }}">Edit this page</a> or <a href="https://github.com/missing-elements/h5p-offline-player/issues">open an issue</a>.</p>
309-
</div>
310-
</footer>
300+
{%- set footIssues = site.github ~ "/h5p-offline-player/issues" %}
301+
{%- set footNote %}
302+
<p>
303+
Built with <a href="https://github.com/missing-elements/h5p-offline-player">h5p-offline-player</a>
304+
and <code>@missing-elements/h5p-author</code>, MIT. The H5P runtime the player loads is
305+
<a href="/h5p/assets/runtime-LICENSE.txt">GPL-3.0</a>.
306+
</p>
307+
{%- endset %}
308+
{% include "site-foot.njk" %}
311309
{#- What the page is, for a search engine: a free web application for teaching, run in the browser.
312310
It is data, not a script that runs; the policy's hash for it (eleventy.config.js) is unused. -#}
313311
<script type="application/ld+json">

‎src/h5p/create-with-ai/index.njk‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -231,13 +231,11 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; o
231231

232232
</main>
233233

234-
<footer class="site-foot">
235-
<div class="wrap">
236-
<p>
237-
The h5p-author skill is MIT, from
238-
<a href="https://github.com/missing-elements/h5p-offline-player/tree/main/skills/h5p-author">h5p-offline-player</a>.
239-
Not affiliated with H5P Group; H5P is a registered trademark of H5P Group AS.
240-
</p>
241-
<p>Found a mistake? <a href="https://github.com/missing-elements/missing-elements.github.io/blob/main/{{ page.inputPath | replace('./', '') }}">Edit this page</a> or <a href="https://github.com/missing-elements/h5p-offline-player/issues">open an issue</a>.</p>
242-
</div>
243-
</footer>
234+
{%- set footIssues = site.github ~ "/h5p-offline-player/issues" %}
235+
{%- set footNote %}
236+
<p>
237+
The h5p-author skill is MIT, from
238+
<a href="https://github.com/missing-elements/h5p-offline-player/tree/main/skills/h5p-author">h5p-offline-player</a>.
239+
</p>
240+
{%- endset %}
241+
{% include "site-foot.njk" %}

0 commit comments

Comments
 (0)