99 lines
2.6 KiB
Markdown
99 lines
2.6 KiB
Markdown
# Balloon
|
|
|
|
Reuse chunks of HTML in other HTML files via preprocessing.
|
|
|
|
Reuse the chunk in `global_nav.html` via `<include src="global_nav.html" />`.
|
|
|
|
Balloon will inflate the chunk in place of the `<include>` tag in the source file, dumping a released target file which can be pushed to the web server.
|
|
|
|
--
|
|
|
|
I do plan to migrate this project to rust once I'm finished tinkering around with the concept. I am considering adding the ability to add includes which wrap other includes.
|
|
|
|
This could be useful for templates, so that the base html template could look like this:
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<title>{Inserted Var}</title>
|
|
<meta />
|
|
<link />
|
|
</head>
|
|
<body>
|
|
{Inserted Nav Chunk}
|
|
{Inserted Page Chunk}
|
|
</body>
|
|
</html>
|
|
|
|
With the actual composing file, say `index.html` looking like this:
|
|
|
|
<!-- Without the DOCTYPE line -->
|
|
<!DOCTYPE html>
|
|
|
|
<include src="templates/template.html">
|
|
<insert id="title">Home | MySite.tld</insert>
|
|
<insert id="chunk_nav">
|
|
<include src="nav.html"></include>
|
|
<h1>Welcome</h1>
|
|
<p>lorem ipsum...</p>
|
|
</insert>
|
|
</include>
|
|
|
|
Perhaps I could do this with a custom `<insert>` tag with maybe an `id` parameter. How you would declare a variable, I'm not sure. At the very least, I'll likely have to make a proper parser to make this happen. The script is kinda hacky as it is.
|
|
|
|
The idea being that `<include>` in effect pulls in stuff from another file, and `<insert>` places in within something. Perhaps think of it as sewing; you stitch both sides together by pushing the pin through, and pulling it back.
|
|
|
|
|
|
Setting or getting values from `<const>` and `<insert>` depends on whether the element self-closes or not.
|
|
|
|
For example, this will set a value to the const id of 'my_const':
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<const id="my_const">Value</const>
|
|
|
|
This will pull the value:
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<const id="my_const" />
|
|
|
|
A full example:
|
|
|
|
src/title.html
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<title>
|
|
<insert id="my_title" />
|
|
</title>
|
|
|
|
src/index.html
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<!-- title_const = "My Homepage" -->
|
|
<const id="title_const">My Homepage</const>
|
|
|
|
<html>
|
|
<head>
|
|
<include src="title.html">
|
|
<!-- my_title = title_const -->
|
|
<insert id="my_title">
|
|
<const id="title_const" />
|
|
</insert>
|
|
</include>
|
|
</head>
|
|
</html>
|
|
|
|
target/index.html
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<title>My Homepage</title>
|
|
</head>
|
|
</html>
|