Glossar

Statisches Glossar mit Live-Suche und Light/Dark Mode. Jeder Begriff liegt in einer eigenen .bib-Datei. Der Build-Prozess kombiniert alle Einträge zu einer einzigen, serverseitig komplett passiven index.html.

Projektstruktur

entries/        ← je eine .bib-Datei pro Begriff
config/style.config.json ← Farb- und Schriftkonfiguration für die Website
build.js        ← Build-Skript (kein npm install nötig)
Makefile
.gitlab-ci.yml  ← automatisches Deployment via GitLab Pages

Konfiguration von Farben und Schriftarten

Die Datei config/style.config.json steuert die Hintergrundfarbe des Headers sowie die Sichtbarkeit einzelner Spalten.

Einstellungen:

• colors.light.headerBg — Header-Hintergrundfarbe für den Light-Mode.
• colors.dark.headerBg — Header-Hintergrundfarbe für den Dark-Mode.
• columns.unternehmensbereich — Spalte „Unternehmensbereich“ ein-/ausblenden (true/false).
• columns.status — Spalte „Status“ ein-/ausblenden (true/false).
• columns.tags — Spalte „Tags“ ein-/ausblenden (true/false).

Die Schriftgrößen, Schriftarten und alle anderen Farben außer dem Header-Hintergrund sind fest im Build-Skript definiert und können hier nicht geändert werden.

Standardwerte:

• colors.light.headerBg: #1e3a5f
• colors.dark.headerBg: #010409
• columns.unternehmensbereich: true
• columns.status: true
• columns.tags: true

Auch wenn eine Spalte ausgeblendet ist, bleibt das zugehörige Feld über die Suche auffindbar — es wird nur nicht in der Tabelle angezeigt.

Optional kannst du zusätzlich die Quell-Repository-URL angeben. Diese URL wird im Header und im Footer der erzeugten Seite angezeigt und wird als HTTP(S)-Link ausgegeben.

Beispiel:

{
  "colors": {
    "light": {
      "headerBg": "#1e3a5f"
    },
    "dark": {
      "headerBg": "#010409"
    },
  "repository": {
    "url": "https://gitlab.com/dein/projekt"
  },
  "columns": {
    "unternehmensbereich": true,
    "status": true,
    "tags": true
  }
}

Wenn repository.url fehlt, versucht das Build-Skript automatisch, die Remote-URL von Git (origin) zu verwenden. Dabei werden etwaige Ports aus der erkannten URL entfernt.

Neuen Begriff anlegen

Neue Datei unter entries/mein_begriff.bib erstellen:

@glossary{eindeutiger_schluessel,
  Begriff             = {Vollständiger Begriffsname},
  Abkuerzung          = {ABK},
  Erklaerung          = {Ausführliche Beschreibung des Begriffs.
    
    Zeilenumbrüche werden unterstützt.
    Links im Markdown-Format: [Linktext](https://example.com)},
  Unternehmensbereich = {IT},
  Status              = {aktiv},
  Tags                = {tag1, tag2, tag3}
}

Tags: Kommagetrennte Liste beliebiger Schlagwörter. Sie werden als klickbare Chips in einer eigenen Spalte dargestellt und sind über die Suche auffindbar. Ein Klick auf einen Tag setzt ihn als Filter; es lassen sich mehrere Tags gleichzeitig auswählen (ODER-Logik — ein Eintrag erscheint, wenn mindestens einer der ausgewählten Tags zutrifft). Erneutes Klicken oder das × am Filter-Chip entfernt den Tag wieder aus der Auswahl.

Mögliche Status-Werte: aktiv · inaktiv · veraltet · In Bearbeitung

Der Dateiname spielt keine Rolle — alle .bib-Dateien in entries/ werden beim Build alphabetisch eingelesen.

Formatierung in der Erklärung

Im Feld Erklaerung werden folgende Formatierungen unterstützt:

• Zeilenumbrüche: Verwende reguläre Zeilenumbrüche (Enter im Editor) — diese werden als <br> dargestellt.
• Links: Verwende das Markdown-Format [Linktext](https://example.com) — diese werden als klickbare Links mit target="_blank" dargestellt.
• Fett: Verwende **Text** oder __Text__ — wird als <strong> dargestellt.
• Kursiv: Verwende *Text* oder _Text_ — wird als <em> dargestellt.

Funktionen der Webseite

• Live-Suche — filtert beim Tippen; Treffer im Feld „Begriff" werden priorisiert oben angezeigt
• Bereichsfilter — Klick auf einen Unternehmensbereich in der Tabelle setzt einen aktiven Filter-Chip
• Statusfilter — Klick auf ein Status-Badge setzt einen zweiten Filter-Chip
• Tag-Filter — Klick auf einen Tag-Chip setzt einen dritten Filter-Chip
• Alle Filter lassen sich gleichzeitig mit der Textsuche kombinieren (AND-Logik) und per × entfernen
• Light / Dark Mode — Toggle-Button im Header; übernimmt beim ersten Besuch das System-Farbschema, speichert die Wahl danach im Browser

Lokal bauen und vorschauen

make          # baut public/index.html
make preview  # baut und startet Vorschau auf http://localhost:8080
make clean    # löscht public/

Voraussetzung: Node.js ≥ 26 und Python 3 (für make preview).

Deployment via GitLab

Der Job pages in .gitlab-ci.yml wird automatisch ausgelöst, sobald auf den Default-Branch gepusht wird. GitLab stellt die fertige public/index.html dann über GitLab Pages bereit.

Das public/-Verzeichnis wird ausschließlich durch die CI generiert und ist in .gitignore eingetragen.

Lizenz

MIT