3.6 KiB

Raw Permalink Blame History

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:

<!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 name="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 transform="lowercase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./once twice thrice fource">once Twice tHRICE FOURCE</a>
			</p>
			<p>
				<ziba-link transform="uppercase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCE TWICE THRICE FOURCE">once Twice tHRICE FOURCE</a>
			</p>
			<p>
				<ziba-link transform="lowersnakecase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./once_twice_thrice_fource">once Twice tHRICE FOURCE</a>
			</p>
			<p>
				<ziba-link transform="uppersnakecase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./ONCE_TWICE_THRICE_FOURCE">once Twice tHRICE FOURCE</a>
			</p>
			<p>
				<ziba-link transform="lowerllamacase">once Twice tHRICE FOURCE</ziba-link> should become <a href="./oncetwicethricefource">once Twice tHRICE FOURCE</a>
			</p>
			<p>
				<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>
			<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:
  - dir
  - name
  - transform — possible values: "lowercase", "uppercase", "lowerllamacase", "upperllamacase", "lowersnakecase", "uppersnakecase", "lowerslugcase", "upperslugcase"

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"

Import

To import module ziba use import code like the following:

import * as ziba from "./ziba.js" // <--- Your path of ziba.js might be different.

Author

Module ziba was written by Charles Iliya Krempeaux

3.6 KiB Raw Permalink Blame History