Files
balloon/README.md
2025-07-21 13:26:31 -04:00

2.6 KiB

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>