update

.brix.yml

@@ -0,0 +1 @@
+version: '1.0'

.gitignore

@@ -6,3 +6,4 @@ libs/
 /node_modules
 /workspaces
 /dist
+.keystore.yml

.kick.yml

@@ -1,17 +1,14 @@
 # Kickstart container config file - see https://gitub.com/infracamp/kickstart
 # Run ./kickstart.sh to start a development-container for this project
 version: 1
-from: "ghcr.io/nfra-project/kickstart-flavor-jekyll:2.0"
+from: "ghcr.io/nfra-project/kickstart-flavor-php:8.1"
 ports: "80:80;4000:4000;4100:4100"
 
+packages: [php8.1-curl, php8.1-http, php8.1-raphf]
+
 command:
   build:
-    - "jekyll build -s /opt/docs -d /var/www/html"
-
-  run:
 
-  jekyll: |
-    jekyll serve -s /opt/docs -d /var/www/html --drafts --livereload --port 4000 --livereload-port 4100 --host 0.0.0.0
 
   dev:
     - "killall webpack || echo 'No Proc'"

README.md

@@ -1,24 +1,127 @@
-# themejs1
-ThemeJS Version 1
 
+# JodaStyle Documentation
 
+## Table of Contents
+- [Overview](#overview)
+- [Installation](#installation)
+- [Usage](#usage)
+  - [Defining Templates](#defining-templates)
+  - [Using Templates](#using-templates)
+  - [Processing HTML Input with JodaSplit](#processing-html-input-with-jodasplit)
+  - [Responsive Design](#responsive-design)
+- [API Reference](#api-reference)
+- [Configuration](#configuration)
+- [Debugging](#debugging)
+- [Contributing](#contributing)
+- [License](#license)
+- [FAQs](#faqs)
 
+## Overview
 
+JodaStyle is a library designed to render Markdown-style HTML in the browser and apply templates dynamically. It provides a set of tools for defining templates, restructuring HTML input, and implementing responsive design through the `layout=""` attribute.
 
+## Installation
 
-## Templating using CSS Styles
+To include JodaStyle in your project, add the following script and stylesheet to your HTML:
 
+```html
+<script src="path/to/jodastyle.js"></script>
+<link rel="stylesheet" href="path/to/jodastyle.css">
+```
 
-## `--joda-on-empty-class: <classname>`
+## Usage
 
+### Defining Templates
 
+Templates are registered using `Joda.registerTemplate`:
 
-## Browser Compat
+```typescript
+import { Joda } from "@leuffen/jodastyle";
+
+Joda.registerTemplate("header1", `
+    <section class="tjs-header1">
+        ...
+        <slot></slot>
+        <slot data-select="img" data-replace></slot>
+        ...
+    </section>
+`);
+```
+
+#### Slot Attributes
+
+| Attribute     | Description                                      | Example                           |
+|---------------|--------------------------------------------------|-----------------------------------|
+| `data-select` | Selector for the content to replace the slot with | `<slot data-select="img"></slot>` |
+| `data-replace`| Indicates that the slot content should be replaced | `<slot data-replace></slot>`      |
+
+### Using Templates
+
+To apply a template, use the `layout` attribute:
+
+```html
+<div layout="use: #header1">
+    <img src="logo.webp" alt="Logo">
+    <p>Some text here</p>
+</div>
+```
+
+### Processing HTML Input with JodaSplit
+
+JodaSplit reorganizes flat HTML into a structured tree:
+
+```html
+<joda-split>
+    <nav layout="use: #navbar"></nav>
+    <h1 layout="use: #header1">Page Title</h1>
+    ...
+</joda-split>
+```
+
+### Responsive Design
+
+JodaStyle includes a processor for responsive design, which applies classes based on the viewport size and custom responsive classes.
+
+## API Reference
+
+- `Joda.registerTemplate(name, template)`: Registers a new template.
+- `Joda.getRegisteredTemplate(name)`: Retrieves a registered template.
+- `JodaContentElement.setContent(content)`: Sets the content of a `JodaContentElement`.
+
+## Configuration
+
+JodaStyle can be configured using `jodaSiteConfig`:
+
+```javascript
+import { jodaSiteConfig } from "@leuffen/jodastyle";
+
+jodaSiteConfig.disable_templates = true;
+```
+
+## Debugging
+
+To enable debug visualization and see the processed content structure:
+
+```javascript
+jodaSiteConfig.debug_visualize = true;
+```
+
+## Contributing
+
+Contributions are welcome through standard GitHub pull requests. Please ensure you follow the project's coding standards and include tests for any new or changed functionality.
+
+## License
+
+JodaStyle is MIT licensed. See the LICENSE file for details.
+
+## FAQs
+
+**Q: How do I define a new template?**
+A: Use the `Joda.registerTemplate` method to define a new template. Provide a unique name and the HTML structure for the template.
+
+**Q: Can I use JodaStyle for responsive design?**
+A: Yes, JodaStyle includes a processor for responsive design that allows you to apply classes based on the viewport size.
+
+**Q: How can I contribute to JodaStyle?**
+A: Contributions can be made via GitHub pull requests. Please ensure your code adheres to the project's standards and includes appropriate tests.
 
-| Browser | Version | Support |
-|---------|---------|---------|
-| Chrome  | 92      |         |
-| Firefox | 90      |         |
-| Safari  | >10     | Yes     |
-| Edge    | 92      |         |
-| IE      | 11      |         |

composer.json

@@ -0,0 +1,14 @@
+{
+
+    "require": {
+        "brixlab/coder": "dev-main"
+    },
+
+    "minimum-stability": "dev",
+    "config": {
+        "preferred-install": "source",
+        "allow-plugins": {
+            "php-http/discovery": false
+        }
+    }
+}

examples/example.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+<joda-content>
+    <!-- Everything below here will have joda-responsive and templates applied -->
+    <joda-split>
+        <!-- Everything below here will be reordert with jodasplit -->
+        <h1 layout="use: #hero1">Hello world</h1>
+        <p>Some Paragraph</p>
+
+        <h2 layout="use: #header1; cols: 6">Next Paragraph</h2>
+    </joda-split>
+</joda-content>
+
+</body>
+</html>

examples/jodasplit/jodasplit-input.html

@@ -0,0 +1,62 @@
+<joda-split><nav layout="use: #navbar-switch1" class="floating">
+    <div class="brand"><a href=""><img src="/images/logo-systemwebsite.webp"></a></div>
+    <ul class="navbar-top">
+        <li class=":: d-none :lg: "><a href="">Beratungstelefon</a></li>
+        <li class=":: :lg: d-none"><a href="">Beratung-Tel.: (0201) 12345</a></li>
+        <li><a href="">Angebot anfordern</a></li>
+    </ul>
+    <ul class="navbar-main">
+        <li><a href="#home">Punkt1</a></li>
+        <li><a href="#home">Punkt2</a></li>
+        <li><a href="#home">Hello World</a></li>
+        <li><a href="#home">Hello World</a></li>
+    </ul>
+    <ul class="nav-menu">
+        <li><a href="#home">Home</a></li>
+    </ul>
+</nav>
+    <h1 :="" layout="use: #header1" data-section-class="decreased-height">Kontakt</h1>
+    <p>Vielen Dank für Ihr Interesse. Nutzen Sie das Formular oder schreiben sie uns unter <a href="[email protected]">[email protected]</a>.</p>
+    <h2 :="" layout="use: #contact-form">Kontaktformular</h2>
+    <p><img src="/images/illustration-a1.webp" alt="Some Image"></p>
+    <ul>
+        <li><i class="bi bi-geo-alt-fill"></i> Mathildenstr. 9-11, 45130 Essen</li>
+        <li><i class="bi bi-telephone-fill"></i> (0201) 7 58 59 936</li>
+        <li><i class="bi bi-envelope-fill"></i> [email protected]</li>
+    </ul>
+    <p>[input type="text"  name="Name" required .mb-3]
+        [input type="email" name="E-Mail" data-invalid-msg="Bitte geben Sie eine gültige E-Mail Adresse ein" required .mb-3]
+        [textarea name="Nachricht" .mb-3]</p>
+    <h2 :="" layout="use: #footer">Systemwebsite.de</h2>
+    <blockquote>
+        <p>Ihr Partner für moderne medizinische Webseiten-Entwicklung</p>
+    </blockquote>
+    <h3>Links</h3>
+    <ul>
+        <li><a href="#">Konditionen</a></li>
+        <li><a href="#">Leistungen</a></li>
+        <li><a href="#">FAQ</a></li>
+        <li><a href="#">Kontakt</a></li>
+    </ul>
+    <h3>Links</h3>
+    <ul>
+        <li><a href="#">Konditionen</a></li>
+        <li><a href="#">Leistungen</a></li>
+        <li><a href="#">FAQ</a></li>
+        <li><a href="#">Kontakt</a></li>
+    </ul>
+    <h3>Folgen Sie uns</h3>
+    <ul>
+        <li><a href="#">LinkedIn</a></li>
+        <li><a href="#">Xing</a></li>
+        <li><a href="#">Facebook</a></li>
+        <li><a href="#">Instragram</a></li>
+    </ul>
+    <hr :="" class="footer-nav">
+    <p>Copyright (c) 2023 Systemwebsite by leuffen.de</p>
+    <ul>
+        <li><a href="#">AGB</a></li>
+        <li><a href="#">Datenschutz</a></li>
+        <li><a href="#">Impressum</a></li>
+    </ul>
+</joda-split>

examples/jodasplit/jodasplit-output.html

@@ -0,0 +1,44 @@
+<joda-split><section class="section-h1pre"><div class="content"><nav layout="use: #navbar-switch1" class="floating">
+    <div class="brand"><a href=""><img src="/images/logo-systemwebsite.webp"></a></div>
+    <ul class="navbar-top">
+        <li class=":: d-none :lg: "><a href="">Beratungstelefon</a></li>
+        <li class=":: :lg: d-none"><a href="">Beratung-Tel.: (0201) 12345</a></li>
+        <li><a href="">Angebot anfordern</a></li>
+    </ul>
+    <ul class="navbar-main">
+        <li><a href="#home">Punkt1</a></li>
+        <li><a href="#home">Punkt2</a></li>
+        <li><a href="#home">Hello World</a></li>
+        <li><a href="#home">Hello World</a></li>
+    </ul>
+    <ul class="nav-menu">
+        <li><a href="#home">Home</a></li>
+    </ul>
+</nav></div></section><section class="section-h1 decreased-height" layout="use: #header1"><div class="content"><h1 :="" data-section-class="decreased-height">Kontakt</h1><p>Vielen Dank für Ihr Interesse. Nutzen Sie das Formular oder schreiben sie uns unter <a href="[email protected]">[email protected]</a>.</p></div></section><section class="section-h2" layout="use: #contact-form"><div class="content"><h2 :="">Kontaktformular</h2><p><img src="/images/illustration-a1.webp" alt="Some Image"></p><ul>
+    <li><i class="bi bi-geo-alt-fill"></i> Mathildenstr. 9-11, 45130 Essen</li>
+    <li><i class="bi bi-telephone-fill"></i> (0201) 7 58 59 936</li>
+    <li><i class="bi bi-envelope-fill"></i> [email protected]</li>
+</ul><p><input class="mb-3" type="text" name="Name" required="">
+    <input class="mb-3" type="email" name="E-Mail" data-invalid-msg="Bitte geben Sie eine gültige E-Mail Adresse ein" required="">
+    <textarea class="mb-3" name="Nachricht"></textarea></p></div></section><section class="section-h2" layout="use: #footer"><div class="content"><h2 :="">Systemwebsite.de</h2><blockquote>
+    <p>Ihr Partner für moderne medizinische Webseiten-Entwicklung</p>
+</blockquote></div><div class="children"><div class="section-h3" layout=""><div class="content"><h3>Links</h3><ul>
+    <li><a href="#">Konditionen</a></li>
+    <li><a href="#">Leistungen</a></li>
+    <li><a href="#">FAQ</a></li>
+    <li><a href="#">Kontakt</a></li>
+</ul></div></div><div class="section-h3" layout=""><div class="content"><h3>Links</h3><ul>
+    <li><a href="#">Konditionen</a></li>
+    <li><a href="#">Leistungen</a></li>
+    <li><a href="#">FAQ</a></li>
+    <li><a href="#">Kontakt</a></li>
+</ul></div></div><div class="section-h3" layout=""><div class="content"><h3>Folgen Sie uns</h3><ul>
+    <li><a href="#">LinkedIn</a></li>
+    <li><a href="#">Xing</a></li>
+    <li><a href="#">Facebook</a></li>
+    <li><a href="#">Instragram</a></li>
+</ul></div><div class="children"><div class="section-hr footer-nav" layout="" style=""><div class="content"><hr :="" class="d-none" orig-class="footer-nav" orig-pre-split-class=""><p>Copyright (c) 2023 Systemwebsite by leuffen.de</p><ul>
+    <li><a href="#">AGB</a></li>
+    <li><a href="#">Datenschutz</a></li>
+    <li><a href="#">Impressum</a></li>
+</ul></div></div></div></div></div></section></joda-split>

examples/jodasplit/jodasplit.txt

@@ -0,0 +1,3 @@
+Jodasplit will take the input from jodasplit-input.html and reformat it to jodasplit-output.html.
+
+The flat input is reoganized as a tree structure. Provide detailed information about the structure of the output.

examples/jodatemplate/defining-a-template.ts

@@ -0,0 +1,24 @@
+
+
+import {Joda} from "@leuffen/jodastyle";
+
+Joda.registerTemplate("header1",
+    // language=HTML
+    `
+        <section class="tjs-header1 :: mobile :lg: ">
+            <div class="tjs-wrapper container-fluid">
+
+                <div class="tjs-header1__hero container">
+                    <div class="tjs-header1__hero--row">
+                        <div class="tjs-header1__hero--col tjs-header1__hero--col-text">
+                            <slot></slot>
+                        </div>
+                        <div class="tjs-header1__hero--col tjs-header1__hero--col-image">
+                            <slot data-select="img" data-replace></slot>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    `);

examples/jodatemplate/jodatemplate.txt

@@ -0,0 +1,3 @@
+JodaTemplate applys Templates to the generated structure of the Jodasplit result based on the layout="" attribute.
+
+Show how Template developers can define Templates, how the <slot> elements work in template context.

examples/jodatemplate/using-templates.html

@@ -0,0 +1,9 @@
+
+<div layout="use: #header1">
+    <img src="/images/logo-systemwebsite.webp" alt="Logo"><!-- This image will be pulled to the image slot-->
+
+    <!-- the rest will be placed to the <slot></slot> -->
+    <p>Text</p>
+    <blockquote>Text</blockquote>
+    <div>Sub Elements</div>
+</div>

examples/overview.md

@@ -0,0 +1,5 @@
+
+
+Purpose: A library to render Markdown-Style HTML in the Browser and apply Templates.
+
+