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 >
2023-11-16 21:12:24 +00:00
< 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 >
2023-11-16 21:12:24 +00:00
< / 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 >
2023-11-16 21:12:24 +00:00
< / 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`
2023-11-17 17:39:40 +00:00
* `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 )
