Termine und Lernmaterialien aus Edufeed in jede Webseite einbetten – ein <div>, ein <script>, fertig. Kein iframe, kein Build, keine Abhängigkeiten.
Das Snippet funktioniert überall, wo man eigenes HTML einfügen darf – HTML-Boxen in CMS, Moodle-Textblöcke, statische Seiten. Es lädt die Daten direkt per WebSocket vom Relay und rendert sie an Ort und Stelle. Mehrere Boxen auf einer Seite sind kein Problem; das Script muss nur einmal eingebunden werden.
<!-- Kommende Termine -->
<div data-edufeed="events" data-limit="5"></div>
<!-- Lernmaterialien zum Fach Religion -->
<div data-edufeed="materials" data-subject="Religion" data-limit="8"></div>
<!-- Interaktive Suche über alle Materialien -->
<div data-edufeed="search"></div>
<script src="https://edufeed-org.github.io/edufeed-examples/embed/edufeed-embed.js"></script><div>s einfügen. Wird es früher geladen, bindet es sich trotzdem nach dem Laden der Seite an alle data-edufeed-Elemente.<div data-edufeed="events" data-limit="6"></div><div data-edufeed="events" data-layout="list" data-limit="8"></div>Ohne weitere Angabe zeigt das Widget kommende Termine (data-when="upcoming"): heutige und künftige zuerst, dahinter laufende Kurse, die früher begonnen haben. data-when="today" zeigt alles, was heute stattfindet, data-days="7" begrenzt kommende Termine auf die nächsten sieben Tage (bei past: die letzten sieben). Mit data-from und data-to (JJJJ-MM-TT, to inklusive) lässt sich ein fester Zeitraum wählen, etwa für eine Jahresübersicht.
<!-- Heute -->
<div data-edufeed="events" data-when="today" data-layout="list"></div>
<!-- Die nächsten 7 Tage -->
<div data-edufeed="events" data-days="7" data-limit="20"></div>
<!-- Fester Zeitraum -->
<div data-edufeed="events" data-from="2026-11-01" data-to="2026-11-30"></div>Mit data-author lassen sich Termine auf einen Nostr-Schlüssel einschränken – als npub… oder Hex. Vergangene Termine zeigt data-when="past", alle data-when="all".
<div data-edufeed="events" data-author="npub1…" data-when="all" data-layout="list"></div>Wenn mehrere Personen für eine Einrichtung eintragen, ist data-author unpraktisch: Es filtert nach dem Schlüssel, der den Termin signiert hat, also nach der einzelnen Person. Mit data-community zeigt das Widget stattdessen alles, was Mitglieder in eine Edufeed-Community geteilt haben – egal, wer es angelegt hat. Angegeben wird der Schlüssel der Community (npub… oder Hex), hier die Edufeed-Community selbst. Mehrere Communities lassen sich durch Komma getrennt angeben.
<div data-edufeed="events" data-community="npub1hhpplya3ut9h2cyvant6pgq2w7thnkfk0hyhnz7e7gflqmy4h3yqp2p4pk" data-when="all" data-layout="list" data-limit="6"></div><div data-edufeed="materials" data-subject="Religion" data-limit="8"></div>data-search nutzt die Suche des Relays (NIP-50) – die Treffer kommen nach Relevanz sortiert.
<div data-edufeed="materials" data-search="Schöpfung" data-layout="list" data-limit="6"></div>Analog zu den Terminen: data-community zeigt die Materialien, die in eine Community geteilt wurden. Lässt sich mit data-author kombinieren („nur Beiträge von X in Community Y“) und funktioniert auch im interaktiven Suchfeld.
h-Tag, geteilte Inhalte (Reposts, kind 16) und ältere Freigaben (kind 30222) und wendet dann die Zugriffsregeln der Community an – bei moderierten Communities die Mitgliederliste der Gruppe, bei geschlossenen das öffentliche Publisher-Fenster. Was ein Nicht-Mitglied in eine Community mit Mitglieder-Regel schreibt, zeigt das Widget nicht. Die Regeln werden bei jedem Laden neu gelesen.<div data-edufeed="materials" data-community="npub1hhpplya3ut9h2cyvant6pgq2w7thnkfk0hyhnz7e7gflqmy4h3yqp2p4pk" data-limit="8"></div>Ein Suchfeld, in dem Besucher:innen selbst suchen. Die Anfrage geht live an die Volltextsuche des Relays, Treffer erscheinen beim Tippen (ab 2 Zeichen) oder nach Enter. Mit data-search lässt sich eine Startsuche vorbelegen, mit data-subject, data-language, data-author oder data-community der Suchraum einschränken.
<div data-edufeed="search" data-placeholder="Lernmaterial suchen…" data-limit="12"></div><div data-edufeed="search" data-subject="Religion" data-layout="list" data-search="Advent"></div>| Attribut | Gilt für | Bedeutung | Standard |
|---|---|---|---|
data-edufeed | – | events, materials oder search (interaktives Suchfeld über Materialien) | events |
data-relay | beide | WebSocket-URL des Relays | wss://relay.edufeed.org bzw. wss://amb-relay.edufeed.org |
data-limit | beide | Maximale Anzahl Einträge (1–250) | 12 |
data-layout | beide | cards oder list | cards |
data-lang | beide | Sprache der Beschriftungen: de oder en | de |
data-author | beide | Nur Einträge, die mit diesem Schlüssel signiert wurden (npub oder Hex-Pubkey). Mehrere Schlüssel durch Komma getrennt: „von einem davon“ | – |
data-community | beide | Nur Einträge, die in diese Edufeed-Community geteilt wurden (npub oder Hex-Pubkey der Community, h-Tag). Mehrere Communities durch Komma getrennt: „in einer davon“; kombinierbar mit data-author | – |
data-when | events | upcoming, today, past oder all. Bei upcoming und today kommen heutige und künftige Termine zuerst (nach Beginn), dahinter noch laufende, die an einem früheren Tag begonnen haben (z. B. mehrmonatige Kurse) | upcoming |
data-days | events | Nur die nächsten N Tage (bei upcoming) bzw. die letzten N Tage (bei past) | – |
data-from, data-to | events | Fester Zeitraum, JJJJ-MM-TT; to inklusive, beide optional. Ersetzt data-when | – |
data-kinds | events | 31922 (ganztägig), 31923 (mit Uhrzeit) oder beide | 31922,31923 |
data-search | materials, search | Volltextsuche (serverseitig, NIP-50); bei search die vorbelegte Startsuche | – |
data-keyword | materials, search | Exaktes Schlagwort (t-Tag) | – |
data-subject | materials, search | Fach-Bezeichnung, z. B. Religion (clientseitig, about:prefLabel:de) | – |
data-language | materials, search | Sprachcode des Materials, z. B. de | – |
data-placeholder | search | Platzhaltertext im Suchfeld | Lernmaterial suchen… |
data-min | search | Mindestzahl Zeichen, ab der gesucht wird | 2 |
Das Script stellt window.EdufeedEmbed bereit. Damit lassen sich Boxen auch dynamisch anlegen, z. B. nach einem Klick oder mit Werten aus dem eigenen System:
EdufeedEmbed.mount(document.getElementById('box'), {
type: 'materials', search: 'Advent', layout: 'list', limit: 5
});
// Wenn die Daten da sind, feuert das Element ein Event:
box.addEventListener('edufeed:loaded', e => console.log(e.detail.items));
// Beim Suchfeld enthält e.detail.query zusätzlich den gesuchten Begriff.Alle Elemente tragen Klassen mit Präfix ef- (.ef-card, .ef-row, .ef-title, .ef-badge, …). Eigene CSS-Regeln, die nach dem Script geladen werden oder spezifischer sind, überschreiben das mitgelieferte Styling. Schriftart und Textfarbe erbt das Widget von der umgebenden Seite.
<script> erlauben (manche CMS filtern das in HTML-Boxen heraus).wss://*.edufeed.org und edufeed-org.github.io nicht blockieren.amb-relay.edufeed.org (Reposts), relay-rpi.edufeed.org (Community-Definitionen) und bei moderierten Communities das Gruppen-Relay (groups.edufeed.org) angefragt – die CSP muss diese zulassen.Das Snippet zeigt Daten an. Zum Eintragen von Material oder Terminen braucht es einen Nostr-Schlüssel zum Signieren und Schreibrechte auf dem Relay – das Edufeed-Material-Relay akzeptiert nur freigeschaltete Autoren. Ein Eingabe-Snippet ist in Vorbereitung; bis dahin: app.edufeed.org oder per CLI mit nak (siehe Data-Pool-Guide).
Die Datei edufeed-embed.js ist eine einzelne, abhängigkeitsfreie JavaScript-Datei – sie kann auch auf den eigenen Server kopiert und von dort eingebunden werden. Wer tiefer einsteigen will: die Termin- und Material-Demos zeigen das Protokoll Schritt für Schritt.
Quelle: github.com/edufeed-org/edufeed-examples · Lizenz siehe Repository.