diff --git a/.brix.yml b/.brix.yml new file mode 100644 index 0000000..2e3f9c1 --- /dev/null +++ b/.brix.yml @@ -0,0 +1 @@ +version: '1.0' \ No newline at end of file diff --git a/.gitignore b/.gitignore index 5b0c1d0..9ee1270 100755 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ libs/ /node_modules /workspaces /dist +.keystore.yml diff --git a/.kick.yml b/.kick.yml index b8e6403..305efc2 100755 --- a/.kick.yml +++ b/.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'" diff --git a/README.md b/README.md index 953456b..d4ee875 100755 --- a/README.md +++ b/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 + + +``` -## `--joda-on-empty-class: ` +## Usage +### Defining Templates +Templates are registered using `Joda.registerTemplate`: -## Browser Compat +```typescript +import { Joda } from "@leuffen/jodastyle"; + +Joda.registerTemplate("header1", ` +
+ ... + + + ... +
+`); +``` + +#### Slot Attributes + +| Attribute | Description | Example | +|---------------|--------------------------------------------------|-----------------------------------| +| `data-select` | Selector for the content to replace the slot with | `` | +| `data-replace`| Indicates that the slot content should be replaced | `` | + +### Using Templates + +To apply a template, use the `layout` attribute: + +```html +
+ Logo +

Some text here

+
+``` + +### Processing HTML Input with JodaSplit + +JodaSplit reorganizes flat HTML into a structured tree: + +```html + + +

Page Title

+ ... + +``` + +### 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 | | diff --git a/composer.json b/composer.json new file mode 100644 index 0000000..07a9c3f --- /dev/null +++ b/composer.json @@ -0,0 +1,14 @@ +{ + + "require": { + "brixlab/coder": "dev-main" + }, + + "minimum-stability": "dev", + "config": { + "preferred-install": "source", + "allow-plugins": { + "php-http/discovery": false + } + } +} diff --git a/examples/example.html b/examples/example.html new file mode 100644 index 0000000..27afd18 --- /dev/null +++ b/examples/example.html @@ -0,0 +1,21 @@ + + + + + Title + + + + + + + +

Hello world

+

Some Paragraph

+ +

Next Paragraph

+ + + + + diff --git a/examples/jodasplit/jodasplit-input.html b/examples/jodasplit/jodasplit-input.html new file mode 100644 index 0000000..0d8e09f --- /dev/null +++ b/examples/jodasplit/jodasplit-input.html @@ -0,0 +1,62 @@ + +

Kontakt

+

Vielen Dank für Ihr Interesse. Nutzen Sie das Formular oder schreiben sie uns unter kontakt@leuffen.de.

+

Kontaktformular

+

Some Image

+ +

[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]

+

Systemwebsite.de

+
+

Ihr Partner für moderne medizinische Webseiten-Entwicklung

+
+

Links

+ +

Links

+ +

Folgen Sie uns

+ +
+

Copyright (c) 2023 Systemwebsite by leuffen.de

+ + diff --git a/examples/jodasplit/jodasplit-output.html b/examples/jodasplit/jodasplit-output.html new file mode 100644 index 0000000..3e6c808 --- /dev/null +++ b/examples/jodasplit/jodasplit-output.html @@ -0,0 +1,44 @@ +

Kontakt

Vielen Dank für Ihr Interesse. Nutzen Sie das Formular oder schreiben sie uns unter kontakt@leuffen.de.

Kontaktformular

Some Image

    +
  • Mathildenstr. 9-11, 45130 Essen
    • +
  • (0201) 7 58 59 936
    • +
  • kontakt@leuffen.de
    • +

+ +

Systemwebsite.de

+

Ihr Partner für moderne medizinische Webseiten-Entwicklung

+

Links

Links

Folgen Sie uns

Copyright (c) 2023 Systemwebsite by leuffen.de

 diff --git a/examples/jodasplit/jodasplit.txt b/examples/jodasplit/jodasplit.txt new file mode 100644 index 0000000..c8584da --- /dev/null +++ b/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. diff --git a/examples/jodatemplate/defining-a-template.ts b/examples/jodatemplate/defining-a-template.ts new file mode 100644 index 0000000..940926e --- /dev/null +++ b/examples/jodatemplate/defining-a-template.ts @@ -0,0 +1,24 @@ + + +import {Joda} from "@leuffen/jodastyle"; + +Joda.registerTemplate("header1", + // language=HTML + ` +
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+ + `); diff --git a/examples/jodatemplate/jodatemplate.txt b/examples/jodatemplate/jodatemplate.txt new file mode 100644 index 0000000..08b48b8 --- /dev/null +++ b/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 elements work in template context. diff --git a/examples/jodatemplate/using-templates.html b/examples/jodatemplate/using-templates.html new file mode 100644 index 0000000..f440532 --- /dev/null +++ b/examples/jodatemplate/using-templates.html @@ -0,0 +1,9 @@ + +
+ Logo + + +

Text

+
Text
+
Sub Elements
+
diff --git a/examples/overview.md b/examples/overview.md new file mode 100644 index 0000000..33c13e1 --- /dev/null +++ b/examples/overview.md @@ -0,0 +1,5 @@ + + +Purpose: A library to render Markdown-Style HTML in the Browser and apply Templates. + +