ziba-js/README.md

114 lines
3.6 KiB
Markdown
Raw Normal View History

2023-11-15 17:50:49 +00:00
# ziba.js
**ziba.js** is a JavaScript implementation of a **ziba markup** renderer.
**ziba markup** is a set of HTML tags designed to help better use HTML as a **document** format (rather than a cross-platform application format).
## Example
Here is an example usage of **ziba.js**:
```html
<!DOCTYPE html>
<html>
<body>
<div id="main">
2023-11-15 18:08:27 +00:00
<p>
Hello world!
</p>
<p>
Here is a ziba-link to my <ziba-link>resume</ziba-link>.
2023-11-16 16:26:46 +00:00
That ziba-link will get turned into <a href="./resume">resume</a>.
2023-11-15 18:08:27 +00:00
Notice that the text and the href are the same.
</p>
<p>
2023-11-17 02:43:26 +00:00
Here is another one <ziba-link name="four">fource</ziba-link>
2023-11-16 16:26:46 +00:00
This ziba tag will get turned into <a href="./four">fource</a>
2023-11-15 18:08:27 +00:00
Notice that the href now has the value of the title of the ziba-link
</p>
<p>
2023-11-17 06:23:28 +00:00
<ziba-link transform="lowercase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./once twice thrice fource">once Twice tHRICE FOURCE</a>
2023-11-16 16:26:46 +00:00
</p>
<p>
2023-11-17 06:23:28 +00:00
<ziba-link transform="uppercase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCE TWICE THRICE FOURCE">once Twice tHRICE FOURCE</a>
2023-11-16 16:26:46 +00:00
</p>
<p>
2023-11-17 06:23:28 +00:00
<ziba-link transform="lowersnakecase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./once_twice_thrice_fource">once Twice tHRICE FOURCE</a>
2023-11-16 16:26:46 +00:00
</p>
<p>
2023-11-17 06:23:28 +00:00
<ziba-link transform="uppersnakecase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCE_TWICE_THRICE_FOURCE">once Twice tHRICE FOURCE</a>
2023-11-16 16:26:46 +00:00
</p>
<p>
2023-11-17 06:23:28 +00:00
<ziba-link transform="lowerllamacase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./oncetwicethricefource">once Twice tHRICE FOURCE</a>
</p>
<p>
2023-11-17 06:23:28 +00:00
<ziba-link transform="upperllamacase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCETWICETHRICEFOURCE">once Twice tHRICE FOURCE</a>
</p>
<p>
<ziba-link dir="apple Banana CHERRY">>once Twice tHRICE FOURCE</ziba-link> should become <a href="./apple Banana CHERRY/once twice thrice fource">once Twice tHRICE FOURCE</a>
</p>
2023-11-16 16:26:46 +00:00
<p>
ziba-link is designed to work for only local links.
2023-11-15 18:08:27 +00:00
</p>
2023-11-15 17:50:49 +00:00
</div>
<script type="module">
import * as ziba from "./ziba.js" // <--- Your path of ziba.js might be different.
2023-11-16 16:26:46 +00:00
const rootElement = document.getElementById("main") // <--- the HTML element you get will probably be different than this.
2023-11-15 17:50:49 +00:00
ziba.transform(rootElement)
</script>
</body>
</html>
```
## Tags
* `<ziba-link>` — used for local links.
2023-11-16 16:26:46 +00:00
* attributes:
2023-11-17 06:23:28 +00:00
* `dir`
* `name`
* `transform` — possible values: `"lowercase"`, `"uppercase"`, `"lowerllamacase"`, `"upperllamacase"`, `"lowersnakecase"`, `"uppersnakecase"`, `"lowerslugcase"`, `"upperslugcase"`
2023-11-15 17:50:49 +00:00
2023-11-17 17:46:15 +00:00
### Text-Case
Here are some examples to help understand the text-casing for the `transform` attribute:
```
"once TWICE tHRICE Fource" -- (lowercase) -------> "once twice thrice fource"
"once TWICE tHRICE Fource" -- (uppercase) -------> "ONCE TWICE THRICE FOURCE"
"once TWICE tHRICE Fource" -- (lowerllamacase) --> "oncetwicethricefource"
"once TWICE tHRICE Fource" -- (upperllamacase) --> "ONCETWICETHRICEFOURCE"
"once TWICE tHRICE Fource" -- (lowersnakecase) --> "once_twice_thrice_fource"
"once TWICE tHRICE Fource" -- (uppersnakecase) --> "ONCE_TWICE_THRICE_FOURCE"
"once TWICE tHRICE Fource" -- (lowerslugcase) ---> "once-twice-thrice-fource"
"once TWICE tHRICE Fource" -- (upperslugcase) ---> "ONCE-TWICE-THRICE-FOURCE"
```
2023-11-15 17:50:49 +00:00
## Import
To import module **ziba** use `import` code like the following:
```javascript
import * as ziba from "./ziba.js" // <--- Your path of ziba.js might be different.
```
## Author
Module **ziba** was written by [Charles Iliya Krempeaux](http://changelog.ca)