Zonelets – Storing new posts in a custom file

An idea for improvement

This is in regards to the cool new 'Zonelets Blogs', created and maintained by Marina Kittaka.

Marina create this new project last month, November 2020, and it's got some really interesting aspects – a very simple approach, pure html source code, allowing people to learn and get familiar with the inner workings of the Web.

It is a minimalist approach, intentionally – as opposed to the heavy and too complex situation we see with WordPress and other large publishing platforms.

Based on simple fundamentals

Like having a free host (like NeoCities.org), which gives everyone a home, 1 GigaByte of storage space for their files, full access to them via a web tool, allows java-scripting and other good points.

I have been blogging for a year now with the very nice Write.freely platform, and am very happy. It is simple, polished and fast – a comparison with WordPress really did not impress me (bloated, slow to load a page upon an edit, preview).

Zonelets is based on pure html source editing, by hand (or with some other tools we find convenient). It's great for learning, amazing how puzzling things can be when you misplace a semicolon or forget to close a tag. 😜

Zonelets is javascript driven

All of the work needed to show a list of all recent posts, the one previous or newer to one you are currently reading, some assorted headers for the blog as desired — all of this is done via Marina's nice work in the 'scripts.js' file.

(In stark comparison to that, my loved Write.freely platform does not allow any javascript at all to be used; for security, which is understandable.)

Zonelets works well, it's light and fast.

But I was worried about messing up the magical 'scripts.js' file with the frequent editing needed to add new posts to the blog (hopefully a frequent occurrence, no?)

The idea was suggested

The banner image on this post is a screen capture of my tweet – which included a question to the author about that.

“Thanks, Marina! A suggestion, if possible to have 'posts array list' on a separate file from script.js, it could make maintenance easier, add new pages.”

A reply came :

Thanks for the suggestion! I'm curious: for you personally, what specifically would make it more convenient to have that in a separate file? Is it mostly not wanting to regularly mess with the file containing the core stuff?

And I reasoned so :

“I think it's mostly more peace of mind of not messing the big javascript file, with some editing error.

With a smaller, posts only file, we could leave the main js file alone, once the basic user config is saved to it (author, blog name, etc).”

Fast forward a day, and we have it.

Thanks to the assistance of a fellow programmer, much more versed in web dev than myself, I have made some modifications that allow this to happen.

New features – proposed for addition to main project branch :

Modifications required :

Edits needed – in main 'script.js' file :

Here we are removing the existing post Array entries (the detailed list of post dates and titles.)

All of that is cut off and pasted into the new 'my-posts.js' file.

We introduce a new line, which will import the Post Array data :

import {postsArray} from "./my-posts.js";

And the new 'my-posts.js' list file :

We could use any name for the new file to store the posts. I chose 'my-posts.js' for simplicity, and to differentiate it easily on the Neocities file manager window from the similar 'posts' folder we use for most blog pages.

The screenshot above shows my current file. There's a key statement at the bottom which allows the data to be exported for use with other scripts :

export { postsArray };

In every other respect, it's identical to the 'post array', section 2 of Marina's original script.js file. (we moved any posts from there to our new separate file)

And near the bottom of the Blog posts :

From the main level, the root folder of the blog – where we have the index, archive, about and not_found html pages — use this at bottom :

The two key lines being these :

<script type="module" src="./my-posts.js"></script> <script type="module" src="./script.js"></script>

For Existing and New Blog posts :

These files are placed in a sub-folder, so they require a very minor change in these two lines — the '. ' (representing the current directory) is replaced with a '..' , which points to one directory level above, to the location of both javascript files.

The two key lines being these :

<script type="module" src="../my-posts.js"></script> <script type="module" src="../script.js"></script>

And that is it.

The editing will be needed just to switch to this new scheme. You should edit the '2020-11-10-Post-Template.html' (default, included in Marina's package), and save it.

From this point on, use it – open the file and save to a new filename as you start a new Blog page. It will have all the needed, current scripting included.

When you finish creating the new Blog page, don't forget to add it to the new 'my-posts.js' file, and upload both to NeoCities.org. Done!

Tested and working on my personal Zonelets blog.

I hope this can be useful and thank Aduros for the assistance with the coding, and to Marina for the whole project initiative.

@rgx@write.tedomum.net

This page created entirely in MarkDown language. Thank you for reading, feel free to comment about this post – reach me at my Writer's Lounge.

R.G. @rgx@muensterland.social ^—top of page