3 · Bausteine

Alles, was in einer Seite stehen darf. Die Liste ist vollständig und absichtlich kurz: wer sie kennt, kennt die Sprache.

Text

titel        "Große Überschrift"        # h1
ueberschrift "Abschnitt"                # h2
untertitel   "Kleiner"                  # h3
text         "Ein Absatz."              # p
hinweis      "Nebenbei bemerkt."        # p, grau und kleiner
fett         "Wichtig"                  # fett, in der Zeile
zitat        "Wer nichts weiß, muss alles glauben."
schild       "neu"                      # kleines Schildchen

Mehrere Werte werden aneinandergehängt:

text "Hallo " ich.name "! Beiträge bisher: " anzahl Beitrag

Behälter

karte          # mit Rahmen, Rundung und Schatten
kasten         # schlichter Bereich ohne Rahmen
reihe          # nebeneinander
spalte         # untereinander
mitte          # zentriert
raster         # gleichartige Kacheln, so viele wie hineinpassen

Was hineingehört, wird eingerückt:

karte
  untertitel "Anke"
  text "Verkauft Emailkannen."
  reihe
    knopf "Ansehen" -> /laden/anke
    knopf "Schreiben" -> /nachricht/anke

raster nimmt klein, gross oder riesig und bestimmt damit, wie breit eine Kachel mindestens ist:

raster gross
  karte
    untertitel "Erstens"
  karte
    untertitel "Zweitens"

Spaltenlayout

spalten
  seitenleiste klein
    karte
      untertitel "Filter"
  haupt
    raster
      ...
  seitenleiste
    karte
      untertitel "Auch noch was"

haupt nimmt den übrigen Platz, seitenleiste bleibt schmal und beim Scrollen stehen. Die Reihenfolge im Programm bestimmt links und rechts — es dürfen beliebig viele Seitenleisten sein, auf beiden Seiten. Unter 860 Pixel Breite wird alles automatisch ein Untereinander.

Inhaltsverzeichnis

spalten
  seitenleiste klein
    inhaltsverzeichnis
  haupt
    ueberschrift "So sieht das aus"
    ...
    ueberschrift "Was drin ist"
    ...

Ein Wort, und die Seite hat ein Verzeichnis ihrer Abschnitte: Jede ueberschrift mit festem Text wird ein Eintrag, und ein Klick springt dorthin. In einer seitenleiste bleibt es beim Scrollen stehen und markiert den Abschnitt, in dem man gerade liest.

• Die Sprungmarken entstehen aus dem Text: "Größe & Maß" wird zu #groesse-mass. Kommt ein Text zweimal vor, heißt die zweite Marke #…-2.
• Überschriften unter wenn oder in einer Liste zählen nicht — es gäbe sie vielleicht gar nicht, und der Verweis ginge ins Leere.
• Findet es keine Überschrift, meldet fibel prüfe das.
• Unter 860 Pixel Breite ist es ausgeblendet, und die native App lässt es weg.
• Der Sprung landet unter der Kopfzeile, nicht hinter ihr.

Trenner

linie            # waagerechter Strich
abstand          # Luft; klein, gross, riesig gehen auch

Bilder

bild "/__datei/abc123.jpg"
bild beitrag.bild
profilbild nutzer          # rund; ohne Bild der erste Buchstabe des Namens

Ein Bild, das nicht lädt, verschwindet, statt als kaputtes Kästchen dazustehen. Bilder werden erst geladen, wenn sie in die Nähe des Sichtfensters kommen.

profilbild sucht im Datensatz selbst nach einem Bildfeld (bild, foto, avatar, image, picture). Findet es keins, malt es den Anfangsbuchstaben aus name oder titel.

Bühne

Ein Abschnitt über die volle Fensterbreite mit einem Hintergrundbild — das, was auf einer Startseite ganz oben steht.

buehne "/__datei/abc123.jpg" voll mitte dunkel parallax
  hinweis "Erfahrung. Qualität. Vertrauen."
  titel "Karat"
  text "Lose Diamanten in Anlagequalität."
  reihe mitte
    knopf "Ansehen" -> /katalog
    knopf "Beratung" -> /beratung

Bild, ein Schleier und der Inhalt liegen als drei Schichten übereinander. Der Schleier hält die Schrift lesbar, ohne dass man das Bild bearbeiten muss.

Ohne Bildangabe bleibt die Bühne einfarbig — praktisch, wenn man einen farbigen Abschnitt über die volle Breite will.

parallax gilt nur, wenn im Betriebssystem nicht „weniger Bewegung" eingestellt ist. Wer das eingeschaltet hat, bekommt ein ruhig stehendes Bild und verpasst nichts.

Bilder, die zum Programm gehören

Ein Logo, ein Bühnenbild oder ein Foto auf der Startseite hängt an keinem Datensatz. Solche Bilder legst du in einen Ordner neben die .fibel-Datei, der genauso heißt, nur mit .bilder statt .fibel:

karat.fibel
karat.bilder/
  buehne.jpg
  logo.svg

buehne "/__bilder/buehne.jpg" voll dunkel
bild "/__bilder/team.jpg"

• Sie sind öffentlich — anders als hochgeladene Dateien unter /__datei/, die nur sieht, wer den Datensatz sieht, an dem sie hängen.
• Erlaubt sind jpg, png, webp, avif, gif und svg, direkt im Ordner, mit schlichten Namen aus Buchstaben, Ziffern, Punkt, Bindestrich und Unterstrich.
• Ein SVG wird gezeichnet, darf aber nichts nachladen und nichts ausführen.
• Liegt die App in einem Unterordner, bekommt die Adresse den Basis-Pfad von selbst.

Abschnitt

abschnitt getoent mitte
  ueberschrift "Was drin ist"
  raster
    ...

Ein Band über die volle Breite, ohne Bild. Wie es aussieht — Hintergrund, Schrift, Luft, Rand —, steht im design-Block, siehe Gestaltung.

Verweise und Knöpfe

verweis "Start" -> /
verweis "Zum Beitrag" -> /beitrag/ beitrag        # Kennung wird angehängt
knopf "Neu anlegen" -> /neu
knopf "Löschen" -> loesche beitrag
knopf "Noch eins" -> plus beitrag.gelesen
knopf "Noch fünf" -> plus beitrag.vorrat 5
knopf "Abmelden" -> abmelden

verweis sieht aus wie ein Link, knopf wie ein Knopf. Beide können beides: zu einer Seite führen oder eine Aktion auslösen.

Ein Symbol für sich

raster 3
  karte
    symbol sperre gross
    untertitel "Anmeldung und Rechte"

Ein Symbol in einer leicht getönten Fläche in der Akzentfarbe — für Merkmale auf einer Startseite. klein, gross und riesig ändern die Größe, gedaempft nimmt Grau statt Akzent. Die Namen sind dieselben wie bei Knöpfen (fibel symbole zeigt alle); ein unbekannter wird beim Lesen gemeldet, mit Vorschlägen.

Ein Symbol davor

knopf "Löschen" -> loesche beitrag symbol papierkorb
verweis "Zurück" -> / symbol pfeil-links
knopf "Anlegen" -> /neu symbol plus

49 Symbole bringt Fibel mit; fibel symbole zeigt alle Namen — jedes unter einem deutschen und einem englischen (papierkorb / trash, pfeil-links / arrow-left). Ein Name, den es nicht gibt, wird beim Prüfen gemeldet — mit Vorschlägen, was gemeint gewesen sein könnte.

Die Symbole sind derselbe Zeichenpfad im Browser und im Telefon: Der Browser bekommt daraus ein SVG, die App zeichnet ihn mit Compose. Es gibt nur eine Quelle, und deshalb kann kein Symbol im Web erscheinen und in der App fehlen.

Bewusst keine fremde Symbolbibliothek: Eine für den Browser nützt im Telefon nichts und umgekehrt. Ein eigener kleiner Satz gilt überall.

Ein verweis, der in eine Absage führen würde, erscheint gar nicht erst; einer, hinter dem nur die Anmeldung wartet, schon. Ein loesche-Knopf an einem fremden Datensatz erscheint ebenso wenig — siehe Anmeldung und Rechte.

quelltext

quelltext
  seite / als "Start"
    titel "Hallo"

Zeigt ein Stück Programm so, wie es dasteht: in gleichbreiter Schrift, mit Zeilen, Einrückung, Leerzeilen und Kommentaren. Was darunter steht, ist Text — es wird nicht als Programm gelesen, nicht geprüft und beim Übersetzen nicht angefasst. Ein unfertiges Beispiel ist deshalb kein Fehler.

Gedacht für Seiten, die über Programme reden: eine Doku, einen Kurs, die Startseite einer Sprache. In der App kommt der Text an, nur nicht gleichbreit.

Spielwiese

seite /ausprobieren als "Ausprobieren"
  spielwiese

Links ein Fibel-Programm zum Bearbeiten, rechts die App, die daraus entsteht — beim Tippen neu gezeichnet. Darunter stehen Fehler und Hinweise der Prüfung; ein Klick auf „Zeile 12“ springt dorthin. Solange ein Fehler drinsteht, bleibt rechts die letzte App stehen, die lief.

• Vorlagen zum Laden: ein Notizbuch, eine Einkaufsliste, eine Pinnwand mit Anmeldung und eine gestaltete Seite ohne Daten.
• Die Einträge bleiben, während man am Programm ändert. „Daten leeren“ fängt von vorn an.
• Mitnehmen: „Als Datei speichern“ lädt das Programm als .fibel herunter, benannt nach der app-Zeile; danach steht der Startbefehl in der Statuszeile. „Programm kopieren“ legt es in die Zwischenablage.
• Nichts geht an den Server. Programm und Einträge liegen im Browser, getrennt von den Daten echter Apps unter derselben Adresse.
• Tab rückt ein, Enter behält die Einrückung, Esc verlässt das Feld.

Die Vorschau läuft abgeschottet, in einem Rahmen ohne eigenen Ursprung. Ein Programm, das jemand einem zum Einfügen schickt, kommt dort weder an die Kekse der Seite noch an die Sitzungen anderer Apps unter derselben Domain.

Die Spielwiese braucht einen Fibel-Server, denn der Interpreter kommt von /__fibel/. In einer gebauten Seite und in der App bleibt der Baustein leer.

Mit der Fibel-KI schreiben

Auf einem Server kann die Spielwiese ein Feld „Mit der Fibel-KI schreiben“ zeigen. Die Fibel-KI ist vorerst kein eigenes Modell: Dahinter steht Claude von Anthropic. Wer einen Wunsch hineinschreibt — „eine Vereinsseite mit Terminen“ oder „mach die Karten grün“ —, bekommt ein geprüftes Programm in den Editor, mit „Rückgängig“ daneben.

Der Zugang zu Claude liegt dabei nicht auf dem Server. Der nimmt nur Wünsche an; ein Helfer auf einem anderen Rechner holt sie ab:

# auf dem Server, in der Umgebung des Dienstes
FIBEL_WERKSTATT=<mindestens 24 zufällige Zeichen>

# auf dem Rechner mit Claude
FIBEL_WERKSTATT=<dieselbe Marke>
fibel werkstatt https://deine-domain.de

Der Helfer fragt Claude über Claude Code (claude -p) mit dessen Anmeldung — Claude Code muss dort installiert und angemeldet sein. Liegt claude nicht im Pfad, sagt FIBEL_CLAUDE_CLI, wo. Mit FIBEL_KI_ANBIETER=api geht es stattdessen über die Claude-API und ANTHROPIC_API_KEY. Die Angaben dürfen auch in ~/.config/fibel/werkstatt.env stehen.

• Claude bekommt die Sprachreferenz, den Wunsch und — beim Ändern — das bisherige Programm, aber keine Werkzeuge. Heraus kommt nur Text.
• Der Helfer prüft, was zurückkommt; bei Fehlern bessert Claude bis zu zweimal nach. Der Server prüft das Ergebnis noch einmal, bevor es in die Spielwiese geht.
• Grenzen: sechs Wünsche pro Stunde je Adresse, höchstens zehn wartende, ein Wunsch bis 1000 Zeichen. Der Helfer arbeitet einen nach dem anderen ab und nimmt höchstens FIBEL_KI_JE_STUNDE (Vorgabe 30) pro Stunde an.
• Ist kein Helfer da, sagt die Spielwiese das, statt zu warten.
• Das Modell stellt FIBEL_KI_MODELL ein (Vorgabe claude-opus-5).

Welche KI antwortet, sagt FIBEL_KI_ANBIETER. Am Rest ändert das nichts: dieselbe Referenz im Systemprompt, dieselbe Prüfung, dasselbe Nachbessern.

Zum Kontextfenster bei ollama: Die Sprachreferenz allein sind ein paar tausend Tokens. Ollama nimmt ab Werk ein kleines Fenster und schneidet still ab — deshalb setzt Fibel es ausdrücklich. Ein kleines Modell kennt Fibel aus keinem Training; es lernt die Sprache erst aus dem Prompt. Rechne damit, dass es öfter nachbessern muss als Claude.

Wünsche und Programme gehen an Anthropic. Das gehört in die Datenschutzerklärung der Seite — und ein Ausgabenlimit für den Schlüssel in die Konsole von Anthropic.

Dokument

seite /handbuch als "Handbuch"
  dokument "handbuch.md"

Setzt eine Markdown-Datei als Teil der Seite: Überschriften, Absätze, Listen, Tabellen, Zitate und Codeblöcke, im Text Code, fett und Verweise. Die Datei liegt neben dem Programm und wird mit ihm geladen; ändert sie sich, steht es beim nächsten Aufruf da.

• Verweise auf eine andere .md-Datei führen zu der Seite, die diese Datei zeigt — samt Sprungmarke (kapitel.md#abschnitt). Zeigt keine Seite sie, bleibt der Verweis Text.
• Überschriften bekommen Sprungmarken wie auf GitHub: „Bilder, die zum Programm gehören“ wird #bilder-die-zum-programm-gehören.
• HTML im Markdown bleibt Text. Nichts aus der Datei wird als Seite ausgeführt.
• Erlaubt ist nur eine .md-Datei, angegeben relativ zur .fibel-Datei. So liest ein Tippfehler nicht die Zugangsdaten vor, die neben dem Programm liegen.

Jeder Codeblock — aus einem Dokument wie aus quelltext — hat oben rechts einen Knopf Kopieren.

So ist das Handbuch auf fibel.uber.space gebaut: eine Seite je Kapitel, jede mit einer Zeile dokument.

Listen

fuer beitrag in Beitrag sortiert am absteigend hoechstens 20
  karte
    fett beitrag.titel
    text beitrag.inhalt
sonst
  hinweis "Noch nichts da."

fuer bestellung in Bestellung wo bestellung.kunde == ich sortiert am absteigend
  ...

sonst muss genau gleich weit eingerückt stehen wie das fuer — sonst sagt die Prüfung Bescheid.

Blättern

hoechstens und blättere sagen zweierlei. hoechstens 20 heißt: mehr gibt es nicht zu sehen. blättere 20 heißt: es gibt alles zu sehen, nur nicht auf einmal.

fuer artikel in Artikel sortiert name aufsteigend blättere 20
  karte
    text artikel.name

Unter der Liste steht dann „Zurück · Seite 3 · Weiter". Die Nummer steht in der Adresse, unter dem Namen der Listenvariablen:

/laden?artikel.seite=3

Deshalb ist eine Seite verweisbar, der Zurück-Knopf des Browsers tut, was er soll, und zwei Listen auf derselben Seite blättern unabhängig voneinander.

Was nicht dasteht: „Seite 3 von 12". Die Gesamtzahl wäre ein zweites Zählen über den ganzen Bestand — genau das, wovon Blättern befreien soll. Ob es noch weitergeht, weiß die Liste dagegen umsonst: sie holt einen Eintrag mehr, als sie zeigt.

Beides zusammen (hoechstens 50 blättere 20) ist ein Fehler beim Prüfen. Es ist nicht schwer umzusetzen, aber niemand außer dem, der es geschrieben hat, kann sagen, was gemeint war.

Suchen

fuer artikel in Artikel suche
  karte
    text artikel.name

Über der Liste steht dann ein Suchfeld. Ohne Angabe wird in allen Textfeldern gesucht (text, langtext, auswahl, verweis); einzelne Felder kann man nennen:

fuer artikel in Artikel suche name beschreibung

Jedes eingegebene Wort muss vorkommen, Groß- und Kleinschreibung spielen keine Rolle, Umlaute auch nicht: „grün" findet „Ring GRÜN". Findet sich nichts, wird der sonst-Zweig gezeigt — das Suchfeld bleibt trotzdem stehen, sonst wäre die Seite eine Sackgasse.

Auch der Suchtext steht in der Adresse (?artikel.suche=ring) und lässt sich mit dem Blättern verbinden.

Was das kostet: Gesucht wird immer in JavaScript, nie in der Datenbank. SQLite faltet bei LIKE nur ASCII — „Grün" fände „grün" nicht, und eine Suche, die je nach Speicher andere Treffer liefert, wäre schlimmer als eine, die den Bestand durchgeht. Bei einer Suche wird also der ganze Bestand des Models gelesen, auch mit blättere. Für einige tausend Einträge ist das kein Problem; für einen großen Katalog bräuchte es einen Textindex, und den gibt es noch nicht.

Bedingungen

wenn stein.zertifikat
  schild "mit Zertifikat"
sonst
  hinweis "Zertifikat auf Wunsch"

Vergleiche: == != > < >= <= Verknüpfung: und oder nicht Werte: "text" 42 ja nein nichts jetzt ich

wenn ich.rolle == "verwalter" und anzahl Bestellung > 0
  verweis "Alle Bestellungen" -> /verwaltung

Ein einzelner Wert ohne Vergleich ist wahr, wenn er gefüllt ist: wenn beitrag.bild heißt „wenn es ein Bild gibt".

Rechnen

text "Gesamt: " bestellung.menge * bestellung.preis " Cent"

Plus, minus, mal, geteilt:

feld summe       = eintrag.menge * eintrag.preis
feld einzelpreis = eintrag.summe durch eintrag.menge

Punkt vor Strich — in menge * preis + versand wird zuerst die Position gerechnet.

Jede Rechenart hat ein Wort; drei haben zusätzlich ein Zeichen.

So schreibt sich dieselbe Rechnung kurz oder ausführlich: menge mal preis durch 100 und menge * preis durch 100 sind dasselbe.

Fürs Teilen gibt es kein Zeichen, und das hat einen handfesten Grund: / beginnt in Fibel einen Pfad, und ein alleinstehender ist die Startseite. verweis "Zurück" -> / symbol pfeil-links steht so in diesem Handbuch und in zwei Beispielen. Ein / zwischen Leerzeichen zum Bruchstrich zu erklären, hätte genau diese Zeilen gebrochen — der Zerteiler müsste raten, und raten soll er nie.

plus ist dasselbe Wort, mit dem ein Knopf ein Feld hochzählt (-> plus beitrag.herzen). Das ist keine Doppelbedeutung, sondern derselbe Begriff in anderer Stellung: addieren.

+ hat zwei Bedeutungen, je nachdem, was links und rechts steht: Zwischen zwei Zahlen addiert es, sonst hängt es Texte aneinander. Es ist dasselbe +, mit dem "Hallo " ich.name zusammengefügt wird.

Was sich nicht rechnen lässt, ergibt nichts und bleibt eine leere Stelle — auch die Teilung durch null. "drei" * 2 schreibt also nichts hin statt NaN: Eine leere Stelle liest sich als fehlende Angabe, NaN als Fehler im Programm.

Für Geld mit Vorsicht. Gerechnet wird mit Gleitkommazahlen, und 0.1 * 3 ergibt dort nicht genau 0.3. Einen eigenen Feldtyp für Beträge gibt es noch nicht (siehe OFFEN.md). Bis dahin ist ein Preis in ganzen Cent der verlässlichere Weg: ganze Zahlen rechnen genau, und durch 100 macht daraus erst beim Anzeigen wieder Euro.

Zählen

text "Beiträge: " anzahl Beitrag

anzahl nimmt genau ein Model und keinen Filter. Wer eine gefilterte Zahl braucht, zählt heute noch nicht — das steht auf der Liste.

Die Zahl gehört hinter das Wort, nicht davor. anzahl Beitrag " Beiträge" liest sich bei drei richtig und bei einem falsch („1 Beiträge"), und Fibel kennt keine Einzahl zu einem Wort, das in Anführungszeichen steht. "Beiträge: " anzahl Beitrag stimmt bei jeder Zahl.

Was anzahl aber tut: es zählt nur, was der Betrachter auch sehen darf. Hat ein Model ein sichtbar, bekommt niemand über die Zahl heraus, wie viele Datensätze es sonst noch gibt.

Modifikatoren

Stehen am Ende einer Zeile und ändern nur diesen einen Baustein:

titel "Willkommen" mitte gross
hinweis "kleingedruckt" klein gedaempft
reihe getrennt

Formulare

Eigenes Kapitel: Formulare.

Eigene Bausteine

Wer dieselbe Karte an fünf Stellen schreibt, ändert sie irgendwann an vier. Ein eigener Baustein steht einmal auf oberster Ebene:

baustein beitragskarte(beitrag)
  karte
    text beitrag.inhalt
    hinweis beitrag.am

und wird danach benutzt wie jeder andere Baustein:

für b in Beitrag sortiert am absteigend
  beitragskarte b

In den Klammern stehen die Werte, die er mitbekommt — beliebig viele, durch Komma getrennt. Beim Benutzen stehen sie in derselben Reihenfolge dahinter:

baustein kopf(was, wie)
  reihe getrennt
    überschrift was
    schild wie

# ...

kopf "Neuestes" "3 Stück"

Neu ist daran nichts: Im Rumpf stehen dieselben Bausteine wie auf einer Seite, und heraus kommt genau das, was dort auch stünde. Eine Abkürzung, kein Sprachmittel. fibel erkläre schreibt ihn deshalb einmal aus und verweist danach nur noch darauf.

Ein Baustein sieht nur seine eigenen Werte. Nicht die Variable der Liste, in der er gerade steht:

baustein karteFuer(eintrag)
  karte
    text beitrag.inhalt      # "beitrag" gibt es hier nicht

Das ist Absicht. Erbte ein Baustein die Namen der Aufrufstelle, ginge derselbe Baustein an einer Stelle und an der nächsten nicht — je nachdem, wie die Liste dort zufällig ihre Variable genannt hat. Und es fällt nicht still hin:

Zeile 9: "beitrag" ist im Baustein "karteFuer" nicht bekannt
         ein Baustein sieht nur seine eigenen Werte: eintrag

Ebenso gemeldet werden: ein Baustein, der sich selbst aufruft (auch über Umwege), ein Aufruf mit zu wenigen oder zu vielen Werten, und — als Warnung — einer, den niemand benutzt.

Weiter: Daten