In order to fully utilize Tabvoid, it helps to understand the code! I will be going through the important stuff so you can get a general idea of how everything works. Please keep in mind that I wrote this with the assumption you have a a bit of an understanding of how Javascript works.

[1] Page Template

We first store the element of our template within a variables. They're encoded as strings so it won't be too difficult to edit it. The words wrapped around curly brackets with a dollar sign (${}) are variables. The example below is the navigation with ${relativePath} variable that ensures that every link starts at the root.

const navigation =`
<div>
    <a href="#"><img src="${relativePath}img/pfp.png"></a>
    <h3>`+ blogname +`</h3>
    <nav>
        <a href="${relativePath}index.html">Home</a>
        <a href="${relativePath}about.html">About</a>
        <a href="${relativePath}archive.html">Archive</a>
        <a href="#" onclick="randomPost()">Random</a>
        <a href="${relativePath}../index.html">Head Back »</a>
    </nav>
</div>
`

We declare different elements and stitch them all together into one variable to make one big template.

const template =`
<div id="container">
    <header>${header}</header>
    <div id="nav">${navigation}</div>
    <main></main>
    <footer>${footer}</footer>
</div>
`

Once we've put all of that together, we append it to the document. We then find all the elements with the main-content class and add them to the newly added template's main element.

document.querySelector("body").innerHTML+= template;

main = document.querySelectorAll(".main-content");
for(i=0; i < main.length; i++) {
    document.querySelector("#container main").append(main[i]);
}

And that's basically it! If you want to add more elements, just edit the template then reuse the last few lines of the code above to change what to grab and where to put them.

[2] Modifying Array

All your posts are stored inside an array of objects. You just need to write the file you want to include. The script will automatically get the title from file name.

const posts=[
    {file:"YYYY-MM-DD-Title.html"}
]

Here's a list of the optional properties you can set:

• alt - Title that will override the one taken from the file name.
• desc - A short description shown in the archive
• img - A thumbnail shown in the archive

[3] That's it!

Okay that's a lie; There's a lot more going on but that's all you really need to know tbh. If you're really curious of how everything works, you are free to go through and take apart the code. I've tried my best to keep it readable.

I strongly encourage you to mess around and adjusting the code to whatever you like. Hell, even go out and claim it as your own!!