Newer
Older
To check out docs and examples, visit [gitlab.schukai.com/oss/bob](https://gitlab.schukai.com/oss/bob)
First, clone this repository. Then change into the source directory and build the project.
git clone https://gitlab.schukai.com/oss/bob.git
cd bob/source
go build
This repository contains a file called flake.nix. You can install this program
#### Devenv.nix
If you have devenv.nix in use, you can add bob to the `devenv.yaml`.
```yaml
inputs:
nixpkgs:
url: github:nixos/nixpkgs/nixos-23.11
bob:
url: git+https://gitlab.schukai.com/oss/bob.git
flake: true
```
In the `devenv.nix` file, you must then add bob under packages.
```nix
packages = [
inputs.bob.packages."${builtins.currentSystem}".default
### Template
#### Prepare
```bash
This will create files in the `./output/` directory with all parsed templates from `./templates/` directory.
Also, a data YAML. This data YAML is used to generate the final files with the `bob html generate` command.
This command prepares the title, description, keywords, and other metadata for the templates.
Furthermore, it will parse the templates for images, anchors, and text.
If the argument `--data-file` is not set, the data YAML will be written to `./output/data.yaml`.
| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `<html lang="en"><head>` | `<html lang="en" data-attributes="lang path:lang"><head>` |
| `<title>Bob</title>` | `<title data-attributes="title path:title">Bob</title>` |
| `<meta name="description" content="Bob is a html and html fragment builder">` | `<meta name="description" content="Bob is a html and html fragment builder" data-attributes="description path:meta.description">` |
| `<img alt="alt text" title="my title" src="..." ` | `<img alt="alt text" title="my title" src="..." data-attributes="alt path:img.id1003.alt title path:img.id1003.title src path:img.id1003.src">` |
| `<a href="https://gitlab.schukai.com/oss/bob">` | `<a href="https://gitlab.schukai.com/oss/bob" data-attributes="href path:a.id1004.href">` |
| `<p>Bob is a html and html fragment builder</p>` | `<p><span data-attributes="text path:p.id1005.text">Bob is a html and html fragment builder</span></p>` |
If you want to translate the text, you can copy the default `data.yaml` to a new file and translate the text there.
A good practice is to use the language code as the file name.
For example, `de.yaml` for German, `en.yaml` for English, etc.
Beside text, images and metadata, special attributes are also extracted.
For example, the Monster datatable headers `data-monster-head` are extracted.
```html
<monster-datatable>
<template id="datatable-order-list-row">
<div data-monster-head="OID" ...></a></div>
...
If you want to add Javascript translations, a consecutive ID is assigned if not
specified separately. This is not ideal for several reasons. It is better to assign
your own ID. To be independent of HTML, JavaScript and CSS selectors, there is a
separate attribute `data-bob-reference` for this.
```html
<script type="application/json"
data-monster-role="translations"
data-bob-reference="my-translation">
{
"key1": "value1",
"key2": "value2",
"key3": {
"one": "value3",
"two": "value4"
}
}
```
This will generate HTML files from the prepared templates and data YAML.
The YAML must be located in the input directory. Any file with `.yaml` extension
will be processed.
bob html generate --input ./input/ --output ./output/ --data-files ./pages/
If the `--data-files' attribute is not defined, the `--input' directory is used.
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
export: en/test1.html
lang: en
title: TEST
meta:
author: schukai GmbH
description:
images:
- id: tickyesdata-image-gi-4013311193
source: |-
data:image/gif;base64,R0lGODdhEAAQAMwAAPj7+FmhUYjNfGuxYYDJdYTIeanOpT+DOTuANXi/bGOrWj6CONzv2sPjv2Cm
V1unU4zPgI/Sg6DJnJ3ImTh8Mtbs00aNP1CZSGy0YqLEn47RgXW8amasW7XWsmmvX2iuXiwAAAAAEAAQAAAFVyAgjmRpnihqGCkpDQ
PbGkNUOFk6DZqgHCNGg2T4QAQBoIiRSAwBE4VA4FACKgkB5NGReASFZEmxsQ0whPDi9BiACYQAInXhwOUtgCUQoORFCGt/g4QAIQA7
alt: tick
title: "yes"
anchors:
- id: test-link-test-html
href: /test.html
hreflang: ""
title: test-link
- id: yes-a-html
href: /a.html
hreflang: ""
title: "Yes"
text:
- text: The request was incorrect, the server could not process it.
id: the-request-was-inco-2640993422
- text: |-
If you received this message as a result of a request to the server API, then check the structure
against the documentation.
id: if-you-received-this-423958995
- text: "You can try the following steps:"
id: you-can-try-the-foll-3363859033
translations:
- id: translations
type: application/json
translations:
key1: value1
key2: value2
key3:
one: value3
two: value4
modifications:
remove:
- .example1
add:
- selector: .example2
html: <b><span>New Content</span></b>
attributes:
- selector: .example3
name: data-example
value: example
The `modifications' rules are executed last. Here you can remove tags, add content and set attributes.
##### Sync
This will sync HTML nodes from a source to a destination.
```bash
The structure of the specification file is as follows:
```yaml
sync:
- source:
With the above specification, the `head` node from `./source.html` will
be synced to all files in `./` except `./source.html`.
Furthermore, the `title` node will be kept.
Relative paths are relative to the specification file. Absolute paths are absolute, obviously.
#### Cut
This will cut a node from a source file and save it to a destination template file.
```bash
```
The structure of the specification file is as follows:
```yaml
snippet:
destination: ./snippets/container.html
attribute:
Relative paths are relative to the specification file.
## Contributing
The bob command line tool is written in Go. The environment is defined in the
`flake.nix` file.
If you want to build the project, you can use the `nix build` or use the task build.
```bash
task build
```
To update the version and get the vendor hash,
the task `task update-code` must be called.
The hash is currently always null, as a vendor directory is used
in the project. This is created with `go mod vendor`.
##### generate
Bob can use **ESBuild** to transform JavaScript code directly from an HTML file.
For this, the relevant `<script>` tags must include specific attributes.
ESBuild is licensed under the [MIT license](https://github.com/evanw/esbuild?tab=MIT-1-ov-file#readme).
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
Here’s an example:
```html
<script
data-bob-source="source/main.mjs"
data-bob-script-dist="scripts/main.mjs"
data-bob-style-dist="styles/main.css"
src="/scripts/main.mjs"
type="module">
</script>
```
**Attribute Explanation:**
- **`data-bob-source`**
Specifies the file to be used as the source for the build process (e.g., `source/page.mjs`).
- **`data-bob-target`** *(optional)*
Defines the target JavaScript format. The default is `esnext`. A common alternative is `es6`.
- **`data-bob-script-dist`**
Specifies the path to the output JavaScript file relative to the template, e.g., `scripts/page.mjs`.
- **`data-bob-style-dist`**
Defines the path to the output styles file, e.g., `styles/page.css`.
- **`src`**
Indicates the URL where the script is served in the browser. This value is **not** used by ESBuild for the build process.
### Notes:
- These attributes help separate development and delivery paths clearly.
- `src` is used solely for delivery and has no impact on the ESBuild process.
For questions and commercial support, please contact [schukai GmbH](https://www.schukai.com/).
The issue list of this repo is exclusively for bug reports and feature requests.
Please make sure to read the Issue Reporting Checklist before opening an
issue. Issues not conforming to the guidelines may be closed immediately.
© schukai GmbH, released under the AGPL 3.0 License.
[AGPL](https://www.gnu.org/licenses/agpl-3.0.de.html)