lernapps.github.io
Home page of the lernapps organisation (brand: lernapps.net), served at https://lernapps.net/ (custom domain; https://lernapps.github.io/ redirects there).
The home page is static HTML. Its only scripts are the usage counter (once it is on) and cat.js, a small joke in the hero: a quiet line "Lieber Katzenvideos" under the features opens a 15-second cat video in a dialog, and at the end a card points to the catalog. The page is complete without it. Its story follows the platform design (agents: see the skill skills/pdt in lernapps/docs), solution first, and it stays calm: each section has a heading, one sentence of value and at most one link at its end; the details live on the pages behind it. The sections: the promise (learning apps with no strings attached, with red ticks and a highlighter on the key words); a gallery from the catalog (section #beispiele, in English #examples: one app large with a desktop and a phone screenshot, the others beside it as examples, switched by radio inputs without JavaScript, the large preview is also a link to the app's page, and the button "Mehr im App-Katalog"); what teachers and parents get; the learner's own tutor (section #ki, in English #ai: one sentence, the details on /tutor/); makers (section #mitmachen, in English #get-involved: the idea and the foundation, and how to join); why another platform (it belongs to no company); and a person behind it. The pages of this repository follow the system's dark mode (prefers-color-scheme, no switch, no script): uno.config.js gives the light sections dark values in a preflight, home.css the gallery. The shared tokens and the frame in site-frame/ are not changed by it. A word in [[double brackets]] in a heading gets the highlighter (the filter marked in eleventy.config.js); it is drawn while it scrolls into view only where the browser can do that and the reader allows motion (prefers-reduced-motion), otherwise it is finished from the start. Four more pages, all in the common header, hold the details: tutor (/tutor/: the learning companion of the explainer apps, parallel to the tooling: the learning content is readable and referable, so the learner's own assistant can accompany, guide and support them, with a real example conversation; how it works from the self-assessment to "Back to the tutor", the tutor's rules, what it gets, privacy, limits), features (/features/: what the apps can do for users; what developers get: foundations or their own stack, guidance for the AI assistant, how an app is listed, ownership and licence; and what makes the platform unique: GitHub as a free backbone, no server and no data, readable for AI assistants, planned in the open, with the principles), join (/join/: one block per persona with a prompt for their AI assistant) and about (/about/: the founder's long text and an honest answer for sceptics that links to the design). It links to the sites that live in other repos on the same origin: the app overview (/apps/), the docs (/docs/) and the tooling (/tooling/). Apart from the four examples in the gallery it does not list apps itself; that is the job of the app overview in lernapps/apps. See ORGANIZATION.md for how the repos fit together.
This repo also holds the site frame shared by all sites on lernapps.net: design tokens, header with the common navigation, footer, and the deploy check, in site-frame/. The sites use it as the npm package @lernapps/site, straight from git.
Layout
| Path | Purpose |
|---|
src/index.njk, tutor.njk, features.njk, join.njk, about.njk | Templates (Nunjucks) of the home page and of the pages "Tutor", "Features", "Mitmachen" and "Über uns". Markup and utility classes only, no texts. Each is generated once per language (pagination over languages): /, /tutor/, /features/, /join/, /about/ in German, the same below /en/ in English |
src/_includes/ki-dialog.njk, ki-flow.njk | The example conversation with a tutor (addresses shown as links with the site's mark, no title or explanation) and the way a result takes (app, one click, the learner's assistant), used by /tutor/. Text only; the link to the whole conversation goes to another site and loads nothing |
src/join.js | Progressive enhancement of /join/: a copy button for each prompt. Without it, the prompt is plain text |
src/_data/icons.js | The icons that replace emoji: the drawing of each (inner SVG, 24 × 24 grid) from Lucide (ISC licence; the notice is in the file). {% icon "lock", "size-8" %} draws one inline, {% iconDefs %} defines the filter rough once per page, which makes the lines wobble a little like drawn by hand (set on a group inside the SVG, so every browser finds it). The text data names the icon (icon: "lock"); add a new one by copying its SVG into this file. |
src/media/oliver-jaegle.webp | The portrait next to the founder's quote on the home page: his GitHub avatar, saved here (192×192, WebP) because the site requests nothing from other servers. |
src/home.css, src/media/apps/ | The styles that UnoCSS cannot generate (gallery switched by radio inputs, highlighter, red ticks, dark gallery) and the screenshots of the four example apps (desktop 1280×800 and phone 390×780 at 2×, WebP, taken from the running apps under lernapps.net/apps/start/; the three apps with a dark mode also have -dark shots, which <picture> shows in dark mode; replace them when an app changes visibly). |
src/cat.js, |
Rules for the page (org-wide): no external requests (system fonts, no CDNs; the one exception is the usage counter of the platform sites, never in an app, see Usage counter), referrer meta, lang on <html> (de, en below /en/), skip link, WCAG 2.1 AA contrast, no horizontal scrolling at 360 px, all content readable without JavaScript.
Commands
npm ci # install the exact pinned versions
npm run build # Eleventy → _site/, then UnoCSS scans _site/**/*.html → _site/uno.css
npm run check # site-check on _site/ (run after the build, before pushing)
npm run dev # build, then serve http://localhost:8080/ with live reload (HTML and CSS)
npm ci sets the git hooks in .githooks/. Both are quiet and log to node_modules/.cache/lernapps/.
pre-commit: no whitespace errors or conflict markers, the staged JavaScript and JSON parse. pre-push: the
change scope of the pushed commits (the classifier of lernapps/tooling, at the commit the workflows pin): nothing for
only the plan (.vibe/**), otherwise npm run build && npm run check. npm test tests the hook (CI's job test).
Links to /apps/, /docs/ and /tooling/ only resolve on the deployed origin. Links to pages of this repo go through the filter own (from site-frame/eleventy.js), so they also work in a preview.
Usage counter
Purpose: to see whether the apps are used at all, nothing more. The counter is not part of the shared site frame,
because apps use the frame too and apps are never counted. This repo serves it as /lernapps-count.js
(src/lernapps-count.njk, endpoint in src/_data/counter.js), and each platform site adds it to its own pages,
outside a pull request preview:
<script src="/lernapps-count.js" defer></script>
| Site | Where |
|---|
| home (this repo) | src/_includes/counter.njk, included after laHead in every page; the 404 page counts as /404/ |
/apps/, /docs/, /tooling/ | in their own repos, the same tag in their own layout (not through @lernapps/site) |
It sends the path of the page to GoatCounter, with the origin of the website the visitor came from (only another
website's, no path or query: a link from a school platform tells nothing about the course or the pupil), and the
name of a link marked data-la-count="<name>" as an event: the catalog marks its "open app" links with
data-la-count="app/<slug>". Nothing else: no query, title or screen size, no cookies, no localStorage; not with
Global Privacy Control or Do Not Track, not in a preview. Browser, system, language and country GoatCounter derives
itself from the request, and stores them only as totals.
site-check fails a site outside the platform sites whose pages carry the counter.
While endpoint is empty, the script does nothing and the privacy notice says the counter is planned. To turn it on,
in one commit here:
- Make sure there is a data processing agreement (Art. 28 GDPR) with GoatCounter, and in its site settings turn
off what is not needed (individual pageviews stay off; screen sizes are never sent).
- Set
endpoint in src/_data/counter.js to "https://<code>.goatcounter.com/count".
- Set
legal.updated in src/_data/legal.js: the privacy notice now shows the section on the counter
(site.counter). Check that the section still matches src/lernapps-count.njk and GoatCounter's privacy policy.
Brand mark
The mark is a lowercase "l" drawn as a route from a start point to a goal: white line, blue points (#60a5fa) on dark slate (#0f172a). It was chosen on 2026-09-28 over more geometric variants because it is the calmest; keep it unchanged.
| File | Use |
|---|
src/brand/mark.svg | Master, rounded tile. Source for everything else. |
src/brand/mark-plain.svg | Mark without tile, for the wordmark on dark backgrounds (nav, footer): same height as the text, on its baseline, gap ≈ 0.8 em |
src/brand/mark-square.svg | Square tile, for places that round corners themselves |
src/brand/avatar-500.png | GitHub org avatar (from mark-square.svg) |
src/brand/mark-512.png | Raster version of the master, transparent corners |
src/favicon.svg, src/favicon.ico (16/32/48), src/apple-touch-icon.png (180) | Browser icons |
Deployed under https://lernapps.net/brand/, so other repos can link the mark instead of copying it. The PNG and ICO files are rendered from the SVGs with a headless browser; re-render them whenever the SVG changes.
License
MIT, for the code and the texts in this repo. Contributions are made under the same license.
