- TypeScript 48.6%
- JavaScript 42.6%
- SCSS 8.2%
- Shell 0.4%
- HTML 0.1%
|
|
||
|---|---|---|
| .forgejo/workflows | ||
| .github/workflows | ||
| .vscode | ||
| backend | ||
| containers | ||
| docs | ||
| frontend-checks@259e5b8c41 | ||
| LICENSES | ||
| messages | ||
| old | ||
| packages | ||
| project.inlang | ||
| scripts | ||
| src | ||
| test | ||
| tools | ||
| .env.development | ||
| .env.template | ||
| .gitignore | ||
| .gitmodules | ||
| AGENTS.md | ||
| flake.lock | ||
| flake.nix | ||
| frontend-checks.config.mjs | ||
| index.html | ||
| LICENSE | ||
| mise.toml | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| renovate.json | ||
| THIRD_PARTY_NOTICES.md | ||
| tsconfig.json | ||
| vite-plugin-notices.mts | ||
| vite-plugin-preview-frame.mts | ||
| vite.config.mts | ||
code.dencla.de
Lernplattform für HTML, CSS und JavaScript. Lernende bearbeiten Aufgaben im Browser, die Vorschau prüft ihren Code Schritt für Schritt. Lehrkräfte schreiben Aufgaben im Autorenbereich, stellen sie zu Paketen zusammen und veröffentlichen sie.
| Teil | Wo | Wer |
|---|---|---|
| Lernapp | /, /p/<paket>, /<paket>/<aufgabe> |
Lernende, ohne Konto; Fortschritt bleibt im Browser |
| Autorenbereich | /autor |
Lehrkräfte mit Konto |
| Backend | PocketBase, im Browser unter /api |
– |
Einblicke in die App
Lernende schreiben HTML, CSS und JavaScript direkt neben der Aufgabenstellung. Die Live-Vorschau zeigt das Ergebnis; bestandene Schritte werden automatisch abgehakt.
Ungelöster Stand und Fehlerhinweis ansehen
Die Demo beginnt mit einer ungelösten Aufgabe: Code schreiben, einen Fehlerhinweis lesen, die Überschrift korrigieren und die Video-Info öffnen. Ein weiterer Schritt bleibt bewusst offen.
Lehrkräfte stellen Aufgaben zu Paketen zusammen und veröffentlichen sie über einen Link für ihre Klasse.
Im Aufgaben-Editor bearbeiten Lehrkräfte Texte, Startdateien, Musterlösungen und Prüfungen. Die Lernansicht lässt sich dabei direkt daneben ansehen.
Textbearbeitung, Startcode und Aufgabenoptionen ansehen
Beide Abläufe gibt es auch als Video mit Abspielsteuerung. Alle Aufnahmen stammen aus einem isolierten Testserver mit lokalen Fixtures. Weitere Motive und Hinweise zur Wiederverwendung stehen in docs/media/README.md.
Dev Setup (microVM)
Die Entwicklungsumgebung läuft in einer isolierten KVM-MicroVM (qemu, aus dem gemeinsamen nix-dev-sandbox), um vollständige Isolation für Shell- und Agenten-Execution sicherzustellen, ohne Host-Secrets oder Host-ENVs zu exponieren.
1. Host-Voraussetzungen (Arch Linux / Linux)
KVM-Zugriff und Nix mit Flake-Support bereitstellen:
# Benutzer zur KVM-Gruppe hinzufügen (einmalig, danach neu einloggen)
sudo usermod -aG kvm $USER
# Sicherstellen, dass Nix Flakes aktiv sind (~/.config/nix/nix.conf)
mkdir -p ~/.config/nix
echo "experimental-features = nix-command flakes" >> ~/.config/nix/nix.conf
# Copy project config and set your data, especially DEV_SSH_PUBKEY
cp .env.template .env
Add to your ~/.ssh/config:
Host dencla-vm
HostName 127.0.0.1
Port 2200
User dev
StrictHostKeyChecking no
UserKnownHostsFile /dev/null
IdentityFile ~/.ssh/id_ed25519
ConnectTimeout 5
Start MicroVM
mkdir .microvm-state
nix run --impure # impure to allow reading untracked .env
Setup VS Code integration:
code --remote ssh-remote+dencla-vm /workspaces/code.dencla.de
Starten
In der MicroVM sind Node, pnpm, mise, PocketBase und Chromium bereits vorinstalliert (auf dem Host genügt mise install).
mise run backend:install # PocketBase nach backend/ holen (einmalig, Prüfsumme wird geprüft)
mise run dev # PocketBase :8090 + Vite :3000
Dann http://127.0.0.1:3000 öffnen. Vite reicht /api an PocketBase durch;
im Browser braucht es nur Port 3000.
Beim ersten mise run dev (noch keine backend/pb_data/data.db) legt
scripts/dev.sh die Datenbank aus den Migrationen an, erzeugt den Superuser
und spielt den Seed ein: ein Lehrkraft-Konto mit Admin-Rolle, die Kategorien
und die drei Pakete aus packages/, veröffentlicht und auf der Startseite. In
der MicroVM wird backend/pb_data dabei automatisch auf das schnelle
ext4-Volume /persist/pb_data gemountet.
Zugänge in der Entwicklung
Nur lokal, nie auf dem Server verwenden. Alle Werte lassen sich in .env
überschreiben (Vorlage: .env.template).
| Wofür | Wo | Anmeldung |
|---|---|---|
| Autorenbereich (Lehrkraft, Admin) | http://127.0.0.1:3000/autor | lehrkraft@code.dencla.local / testtest1234 |
| PocketBase-Dashboard (Superuser) | http://127.0.0.1:8090/_/ | dev@code.dencla.local / devdevdev123 |
| Kollegin, teilt ein Paket zum Bearbeiten | /autor | kollegin@code.dencla.local / testtest1234 |
| Andere Schule, Katalog, Entwurf zum Lesen geteilt | /autor | fremd@code.dencla.local / testtest1234 |
| Referendar, Fachschaftsgruppe, Review-Anfrage | /autor | referendar@code.dencla.local / testtest1234 |
Die Demo-Daten (backend/seed-demo.mjs) bringen dazu eine Gruppe „Fachschaft
Informatik“, veröffentlichte und auffindbare Pakete (auf der Startseite nach
„CSS“ oder „Spiele“ suchen), Katalog-Aufgaben und einen Entwurf. Sie gehen nur
in eine lokale Datenbank.
Konten gibt es nur auf Einladung (docs/registration.md).
Lokal verschickt PocketBase keine Mails; ein weiteres Konto legt man am
einfachsten im Dashboard an (Collection users, verified setzen). Um den
Ablauf selbst zu durchlaufen, mit Testpostfach starten, eine Einladung
erzeugen und den Link aus dem Postfach holen (Mailwiederholung ruht dabei):
DENCLA_TEST_MAILBOX=1 mise run dev
(cd backend && ./pocketbase invite create --email neu@code.dencla.local)
# nach „Einladung prüfen“: GET /api/test-mailbox/neu@code.dencla.local als Superuser
Häufige Aufgaben
mise tasks # alle Tasks mit Beschreibung
mise run backend:reset # Dev-Datenbank neu aus den Migrationen (löscht alles, legt den Superuser an)
mise run backend:seed # danach: Konto, Kategorien, Pakete und Demo-Daten wieder einspielen
mise run backend:assets # Bilder aller Aufgaben auf den Server holen (ohne --apply nur anzeigen)
mise run backend:serve # nur PocketBase
mise run build # Produktions-Build nach dist/ (mit allen statischen Prüfungen)
mise run preview # dist/ auf :4173 ausliefern
Tests und Prüfungen
mise run test # Unit-Tests (node:test)
mise run test:backend # Regeln und Hooks gegen ein Wegwerf-PocketBase (:8099)
mise run test:browser # Musterlösungen und Oberfläche im echten Browser
mise run check:all # Kontrast, Barrierefreiheit, Übersetzungen, Styles, Typen
Die Browsertests starten Vite und ein temporäres PocketBase auf freien
Loopback-Ports. Sie importieren ausschließlich lokale Aufgaben-Fixtures und
löschen die Testdaten nach dem Lauf. Die Entwicklungsdatenbank bleibt unberührt.
Chromium bei Bedarf mit mise run browser:install installieren.
Das Browser-Fixture-Konto ist author@code.dencla.local /
browser-test-password; es existiert nur im Wegwerf-Backend.
DENCLA_BASE_URL erlaubt einen bereits eingerichteten Testserver.
Geprüft werden Musterlösungen, Lernoberfläche und das Speichern im Autorenbereich.
Betrieb
Produktiv läuft code.dencla.de auf dem Server d0b als Dienst zumcode:
rootless Podman-Pod mit den Rollen web (Caddy mit der App) und pb
(PocketBase), beschrieben durch die Quadlets in containers/.
cp src/legal/impressum.example.md src/legal/impressum.md # einmalig; echte Rechtstexte (gitignored)
cp src/legal/datenschutz.example.md src/legal/datenschutz.md
mise run release:prepare 1.0.0-beta.2 # Version setzen, Commit + Tag v1.0.0-beta.2 (pusht nicht)
mise run release:deploy v1.0.0-beta.2 # getaggten Stand prüfen und bauen: deploy/ + dist/zumcode-<tag>.tar.zst
mise run test:containers # Rollen rootless, read-only, Health, Smoke, Browsertests
git push --follow-tags # erst jetzt nach außen
Die Version steht nur in package.json. Releases baut die Forgejo-CI aus dem
Tag v<version>; auf d0b genügt dann app deploy zumcode <tag>. Einrichtung, Umzug, Dashboard per SSH-Tunnel und
Backups: docs/deployment.md.
Dokumentation
- AGENTS.md – kompakter Einstieg für Agenten
- docs/qualitaet-und-coding-standards.md – Architektur und Qualitätsregeln
- docs/backend-concept.md – Konzept und Entscheidungen: warum PocketBase, Rechte, Veröffentlichen, Updates in der Lernapp
- docs/mfa.md – Anmeldung mit Code per Mail (eingebaute MFA): Ein/Aus im Konto, Gerät 30 Tage merken, Code nur nach Passwort
- docs/login-alerts.md – Mail bei Anmeldung auf einem unbekannten Gerät (Gerätetoken im HttpOnly-Cookie) statt des eingebauten Alerts
- docs/totp.md – Konzept, geparkt: eigene Zwei-Faktor-Anmeldung mit TOTP; vorerst gilt die eingebaute Mail-MFA von PocketBase
- docs/backend.md – Schema, Rechte, Routen, Prüfungen vor dem Veröffentlichen
- docs/deployment.md – Betrieb auf d0b: Podman-Quadlets, Release, Dashboard, Backups
- docs/checks.md – Überprüfungen: Aufbau, Register, eigene Prüfung, neue Prüffunktion anlegen
- docs/legal-standard.md – Standard für Impressum & Datenschutz (
src/legal/, Darstellung, Release-Prüfung, Git-Audit) in allen SolidJS-Apps der Familie
Aufbau
src/ Lernapp (SolidJS)
routes/author/ Autorenrouten – werden bei Bedarf geladen
components/author/ Fachkomponenten des Autorenbereichs
hooks/ Zustand und Abläufe der Ansichten
checks/ Prüffunktionen als Register (docs/checks.md)
utils/validator.ts führt Überprüfungen im Sandbox-Frame aus
preview/ Vorschau-Frame und Protokoll dorthin
backend/
pb_migrations/ Schema als Code
pb_hooks/ Routen und Regeln (lib/ = geteilter Code)
seed.mjs Dev-Daten
messages/ Texte Deutsch/Englisch (paraglide)
packages/ Ausgangsstand der Pakete für den Seed
Lizenzen und Veröffentlichung
Anwendungscode und Entwicklerdokumentation: MIT. Beispielaufgaben und zugehörige Bilder: CC BY-SA 4.0, Attribution „code.dencla.de“. Details und Drittkomponenten: THIRD_PARTY_NOTICES.md.
Vor öffentlichem Push: pnpm check:secrets und pnpm audit:history.
Das Audit ist eine ergänzende Musterprüfung, keine vollständige Secret-Prüfung.
Produktive Rechtstexte bleiben lokal; Release und Deployment lehnen
unvollständige Vorlagen ab. Der Build liefert Lizenztexte mit aus.
Betrieb und Löschfristen: docs/privacy-operations.md.
Bei knappen VM-Ressourcen Build und Browserprüfungen nacheinander ausführen. Unit-Tests laufen sequenziell; unter 6 GB RAM begrenzt der Browser-Runner auch ausdrücklich angeforderte Parallelität auf einen Chromium-Prozess.