ZADA – Zwischenstand / Notes

Diese Seite hält den aktuellen Zwischenstand der Überlegungen fest (damit man am nächsten Tag schnell wieder reinkommt). Stand: 2026-02-20

Ziele

• ZADA als Framework-Name (globaler Namespace window.ZADA ok)
• Framework soll nicht “techie” wirken, so dass auch Websites wie Bäckerei/Kindergarten möglich sind
• Programmier-/Spezialfeatures sollen ausgelagert werden (Plugins)
• Branding höchstens optional (z.B. “Built with ZADA” im Footer per Config)
• Option: später Open Source

Snippets / ACE Editor

Problem

• Snippets als JSON-Strings in der HTML sind nicht wartbar.
• Snippets sollen als echte Dateien gepflegt werden (JS/HTML/JSON/XML …).

Entscheidung

• Snippets in eigenem Ordner, z.B.: /snippets/zada-framework/
• Ein manifest.json listet Snippets (Label, Pfad, optional ACE-Mode)
• ACE lädt Inhalte per fetch() und setzt Mode passend zur Dateiendung (oder explizit)
• Kein Playground (read-only Viewer reicht; Playground kann extern via CodePen etc.)

Beispiel Struktur

snippets/
  zada-framework/
    manifest.json
    PAGE_META.json
    updatePageMeta.js
    extractPageMeta.js
    seo-template.html

Plugin-Architektur (UI Plugins)

Motivation

• Framework-Core soll generisch bleiben.
• Spezialfeatures (z.B. ACE Snippets Viewer) als Plugins auslagern.
• Es wird vermutlich mehr als ein solches Feature geben.

Minimal-Design

• Core stellt ZADA Namespace bereit und eine Plugin-Registry/Loader.
• Plugin-Contract: plugin.init(ctx, options) (async erlaubt).
• Seiten aktivieren Plugins über JSON Config, z.B. <script id="ZADA_PLUGINS" type="application/json">…
• Loader lädt Plugin-Skripte dynamisch und ruft init in definierter Reihenfolge auf.

Vorgeschlagenes Layout

js/
  zada/
    core/
      plugins.js
    plugins/
      ace-snippets/
        plugin.js
snippets/
  ...

Beispiel Config auf einer Seite

<script type="application/json" id="ZADA_PLUGINS">
{
  "plugins": [
    {
      "name": "ace-snippets",
      "src": "/js/zada/plugins/ace-snippets/plugin.js",
      "options": {
        "manifestUrl": "/snippets/zada-framework/manifest.json",
        "tabsSelector": "#ZADA_TABS",
        "editorSelector": "#ZADA_EDITOR"
      }
    }
  ]
}
</script>

Branding (optional)

• ZADA-Branding soll optional sein (z.B. Footer-Badge via Config).
• Core soll ohne sichtbares Branding nutzbar sein.

Idee: ZADA_CONFIG (JSON) mit z.B. { "branding": { "showFooterBadge": false } }.

Open Source – ToDos (später)

• Lizenz wählen (z.B. MIT oder Apache-2.0)
• README: Konzept, Quickstart, Ordnerstruktur
• Plugin-API dokumentieren
• Beispiel-Plugins + Beispiel-Site

Nächste Schritte

1. Plugin-Core implementieren: js/zada/core/plugins.js
2. ACE-Snippet-Feature in Plugin auslagern: js/zada/plugins/ace-snippets/plugin.js
3. Snippet-Ordner + Manifest anlegen: /snippets/zada-framework/*
4. zada-framework.html nutzt nur noch Plugin-Config + UI Container