ziba-js/README.md

# 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">
			<p>
				Hello world!
			</p>
			<p>
				Here is a ziba-link to my <ziba-link>resume</ziba-link>.
				That ziba-link will get turned into <a href="./resume">resume</a>.
				Notice that the text and the href are the same.
			</p>
			<p>
				Here is another one <ziba-link title="four">fource</ziba-link>
				This ziba tag will get turned into <a href="./four">fource</a>
				Notice that the href now has the value of the title of the ziba-link
			</p>
			<p>
				<ziba-link tramsform="lowercase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./once twice thrice fource">once Twice tHRICE FOURCE</a>
			</p>
			<p>
				<ziba-link tramsform="uppercase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCE TWICE THRICE FOURCE">once Twice tHRICE FOURCE</a>
			</p>
			<p>
				<ziba-link tramsform="lowersnakecase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./once_twice_thrice_fource">once Twice tHRICE FOURCE</a>
			</p>
			<p>
				<ziba-link tramsform="uppersnakecase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCE_TWICE_THRICE_FOURCE">once Twice tHRICE FOURCE</a>
			</p>
			<p>
				ziba-link is designed to work for only local links.
			</p>
		</div>

		<script type="module">
			import * as ziba from "./ziba.js" // <--- Your path of ziba.js might be different.

			const rootElement = document.getElementById("main") // <--- the HTML element you get will probably be different than this.

			ziba.transform(rootElement)
		</script>
	</body>
</html>
```

## Tags

* `<ziba-link>` — used for local links.
  * attributes:
    * `title`
    * `tramsform`

## 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)
initial commits 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">`
initial commits 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>.`
transform & logging 2023-11-16 16:26:46 +00:00			`That ziba-link will get turned into <a href="./resume">resume</a>.`
initial commits 2023-11-15 18:08:27 +00:00			`Notice that the text and the href are the same.`
			`</p>`
			`<p>`
			`Here is another one <ziba-link title="four">fource</ziba-link>`
transform & logging 2023-11-16 16:26:46 +00:00			`This ziba tag will get turned into <a href="./four">fource</a>`
initial commits 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>`
transform & logging 2023-11-16 16:26:46 +00:00			`<ziba-link tramsform="lowercase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./once twice thrice fource">once Twice tHRICE FOURCE</a>`
			`</p>`
			`<p>`
			`<ziba-link tramsform="uppercase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCE TWICE THRICE FOURCE">once Twice tHRICE FOURCE</a>`
			`</p>`
			`<p>`
			`<ziba-link tramsform="lowersnakecase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./once_twice_thrice_fource">once Twice tHRICE FOURCE</a>`
			`</p>`
			`<p>`
			`<ziba-link tramsform="uppersnakecase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCE_TWICE_THRICE_FOURCE">once Twice tHRICE FOURCE</a>`
			`</p>`
			`<p>`
			`ziba-link is designed to work for only local links.`
initial commits 2023-11-15 18:08:27 +00:00			`</p>`
initial commits 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.`

transform & logging 2023-11-16 16:26:46 +00:00			`const rootElement = document.getElementById("main") // <--- the HTML element you get will probably be different than this.`
initial commits 2023-11-15 17:50:49 +00:00
			`ziba.transform(rootElement)`
			`</script>`
			`</body>`
			`</html>`
			```

			`## Tags`

			* `<ziba-link>` — used for local links.
transform & logging 2023-11-16 16:26:46 +00:00			`* attributes:`
			* `title`
			* `tramsform`
initial commits 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)`