ZADA interim status / notes

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

Goals

• SOMETHING as a framework name (global namespace window.ZADA ok)
• Framework should don't seem techie , so that websites such as bakery/kindergarten are also possible
• Programming/special features should outsourced become (plugins)
• Branding h�chstens optional (z.B. Built with ZADA im Footer per Config)
• Option: sp�ter Open Source

Snippets / ACE Editor

Problem

• Snippets as JSON strings in HTML are not maintainable.
• Snippets should be as real files maintained (JS/HTML/JSON/XML &).

Decision

• Snippets in their own folder, e.g.: /snippets/zada-framework/
• A manifest.json lists snippets (label, path, optional ACE mode)
• ACE loads content via fetch() and sets mode to match the file extension (or explicitly)
• No playground (read-only viewer is enough; Playground can be viewed externally via CodePen etc.)

Example structure

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

Plugin architecture (UI plugins)

Motivation

• Framework Core should remain generic.
• Outsource special features (e.g. ACE Snippets Viewer) as plugins.
• There will probably be more than one such feature.

Minimal-Design

• Core provides ZADA Namespace ready and a plugin registry/loader.
• Plugin-Contract: plugin.init(ctx, options) (async allowed).
• Activate pages plugins via JSON Config, e.g. <script id="ZADA_PLUGINS" type="application/json">&
• Loader dynamically loads and calls plugin scripts init in a defined order.

Suggested layout

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

Example config on one page

                                                    
                                                        <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 should be usable without visible branding.

Idea: ZADA_CONFIG (JSON) a z.B. { "branding": { "showFooterBadge": false } } .

Open Source ToDos (sp�ter)

• Select license (e.g. MIT or Apache 2.0)
• README: Concept, quick start, folder structure
• Document plugin API
• Example plugins + example site

Next steps

1. Implement plugin core: js/zada/core/plugins.js
2. Outsource ACE snippet feature to plugin: js/zada/plugins/ace-snippets/plugin.js
3. Create snippet folder + manifest: /snippets/zada-framework/*
4. zada-framework.html only uses plugin config + UI container