The old blog was an express server that looked for .md files in a directory, converted them to HTML, and served it. That worked mostly fine. However, the converter didn't support many Markdown features, and was pretty buggy. Using an express server also meant that the site wasn't static, and had limited options for hosting.

Replit's free tier was pretty unreliable, and Render only allowed one free web service per account, which I was already using to run my faucet. I could've created a new Render account, but they recently started requiring credit card verification, which I didn't really want to do.

Besides, making the blog static instead of relying on an express server wouldn't be that hard. A month before, I had already wrote a better (?) or at least more fully featured Markdown to HTML parser, Makoto, so that was already one of the problems with the old blog solved.

Anyways, once I decided to start completely rewriting the blog, I established some goals that I wanted the new blog to accomplish.

Technical Goals

• Static, so it can be deployed by eg, Github Pages or Cloudflare Pages
• Built from scratch with no third-party dependencies (builtin modules like path and fs are ok of course, makoto is not third party, also doesn't count)
• Use Typescript
• No Javascript running client side - the web pages should be pure HTML and CSS
• Style-wise, should be minimalistic, nothing fancy
• Load quickly and be small in size

Non-Technical Goals

• Make two things I can call "Ryuji" and "Saki" to go along with "Makoto" (those are the three main characters of one of the best manga series ever)
• Move over some of the old blog posts (only the stuff I like), after rewriting them
• Start writing stuff on the blog again, at least semi-regularly

Code

Hedgeblog (oh, that's what I'm calling it by the way) is made of three components: Makoto (Markdown to HTML parser), Ryuji (templating language), and Saki (build system).

You can find the code here.

Makoto

Makoto is the Markdown-to-HTML parser, made with no dependencies. It was made around two months before Ryuji and Saki, and is meant to be more of a standalone thing. This is the sole npm dependency of the project. I npm installed it instead of just copying the file over mostly because I published Makoto to npm and wanted to make sure it worked. Also, it has a different license, documentation and stuff.

All the standard Markdown are supported (headers, bolds, italics, images, links, blockquotes, unordered lists, ordered lists, code, code blocks...), as well as superscripts and tables (although tables are probably buggy). Makoto also does some pretty neat stuff like passing on the language of the code block (if given) as a class in the resulting div: code-<language>, or automatically add ids to headers, so they can have anchor links.

It also has a very cool warnings feature, which isn't used in this project, but can be seen in action if you use the Makoto Web Editor.

Ryuji

Ryuji is a simple templating system that supports if statements, for loops, components, and inserting variables. It isn't quite as fully featured as Jinja/Nunjucks, but on the upside, Ryuji is less than 280 lines of code, and worked very well for my usecase. I think it's pretty cool.

Here's a quick overview of the syntax:

After finishing writing Ryuji, and writing some tests to make sure it all worked, I realized that I needed a few features that were missing.

There was no way to see the current index in a for loop, or the max index (length-1) of whatever variable we were looping over. This was needed for the tag links in the post.

In addition, if statements only checked if the variable was truthy (not false or 0 or ""), but I needed if statements making sure two variables were equal, as well as if statements making sure two variables were not equal. You can see this being used in the post's tags along with the new for loop features, as well as the "Next Post" link at the bottom of the post.

So, I added those features. Let's take a look of these new features being used to show and link post tags.

Formatting the code a little nicer, this is what it looks like:

Ok, in the first line (for:post.tags:tag:index:max), we are looping over the variable post.tags, and assigning each item in post.tags as the variable tag. That's nothing new, what's new is the :index:max portion. index is the index variable, starting at 0 and incrementing every loop, while max is the maximum index (the length of the variable to loop over - 1).

If you look at the Ryuji code, now you can see that it is looping over the tags of the post, and creating a link for each tag. If the tag is not the last tag (index is not equal to max), we will also add a comma (and a space).

Here's the equivalent python code, if it helps:

While Ryuji is meant for HTML, there is no reason it can't be used for other formats.

Take a look at the docs for Ryuji.

Saki

Saki is the build system that uses Ryuji templates to generate all the HTML files, and then outputs everything (including static files, of course) to the build directory. Even more simple than Ryuji, it is just around 70 lines of code.

Here are the very short docs for Saki.

Putting It All Together

When building, the program (index.ts) reads /posts/_metadata.json and passes all the post metadata information to the templates/index.html template, which is the home page! Then, it renders all the posts with the templates/post.html template and outputs to /posts/*. Next, it looks again at the post metadata and gets all the tags used. Once it has all the tags, pages for the tags are generated at /tags/*. That page lists all the posts with that tag. Scroll up and try it! It also outputs the static directory, as well, static files.

Tip: Serve Without The .html

Say we want to serve a HTML file at /posts/example instead of /posts/example.html. Just create a directory called example and put example.html inside it, renaming it index.html.

Basically, /posts/example.html becomes /posts/example/index.html, and now the HTML file is served at /posts/example. You probably already knew that, but if you didn't now you know ^{[citation needed]}.

Buttons Without Javascript

If you think back to around 950 words ago, you may recall that this site has zero frontend Javascript (or WebAssembly, as cool as it is). If you didn't recall that, I just reminded you. I will be sending an invoice later.

So how does the "Show MD", "Fancy Title", and Dark/Light theme toggle work? The key thing here is that all three of these are checkboxes. Yes, even the Dark/Light theme toggle is a checkbox. That toggle hides its checkbox and takes advantage of the fact you can click on a <label> with an appropriate for attribute to toggle a checkbox, and uses the ::after psuedo-element to change the content between the moon emoji and the sun emoji, depending on the state of the checkbox.

What's so special about checkboxes? The :checked (see MDN) property, that's what! With the :checked property, we can apply styles depending on whether a checkbox is checked. See the following, which scales the checkbox by 3x when the checkbox is checked:

And because of the a ~ b (select selector b after selector a) and a + b (select selector b immediately after selector a) CSS selectors, we can change the properties of other elements. Unfortunately, there doesn't seem to be a pure CSS way to change the style of elements before the checkbox. There are ways around this, like putting the checkbox before the desired element in the code, but using position: relative, position: absolute, and other ways to make the checkbox visually look like it is after the desired element. I didn't really want to do that though, so you can notice that all the checkboxes on this website are before the element whose style they change.

Here's a real example. The following CSS makes the "Show MD" checkbox functional:

Other Style Notes

I used Verdana for headers, Courier New for code, and Times New Roman for everything else. These fonts were chosen mostly because they are websafe, ie included in most OSes. You cannot stop me from using Times New Roman. I like the look.

The colour for visited links is orchid, and the colour for non-visited links is forestgreen.

Since this blog is basically for my own "enjoyment", and doesn't need to look "sleek" or "professional", this site's design philosophy is moreso a rejection of those overdesigned corporate sites with too many popups, as well as certain React (or other framework) sites that don't even load with Javascript disabled, than a specific set of tenets. Combined with the fact that choosing colour schemes makes me angry, don't expect very consistent or aesthetic designs.

But I'll try my best.

Running

After git cloneing the repo, cd into the directory and install the (sole) dependency:

To build:

To build and preview locally at http://localhost:8042:

To run tests for Ryuji:

Todo

In the future, I would love to have those fun box gifs^[0] you used to see on geocities and other websites (like the ones on the bottom of the pensquid website), plus also something similar to Wikipedia Userboxes.

And I'll keep improving the site and fixing bugs, and occasionally write articles for the roughly four readers of this blog.

===

• [0]: This has been done! Plus, there's a RSS feed now too.

QED, destroyed with facts and... aw, damn.

mi open tawa lon suno open. mi pini tawa lon pimeja open. noka mi li pilin ike. lawa mi li pilin lape.

mi lukin e nena wawa e kulupu kasi wawa e jan wawa e tomo wawa. mi pilin e ni: "pilin ike ali li lili tawa mi. ali li pona lukin a! noka li pilin ike la lawa mi li pilin lape la tawa mi li awen ken." tan ni la, mi awen tawa.

jan li pana e sona tawa mi: "tenpo poka kama la telo sewi li kama." mi wile ala e telo sewi. mi weka e toki ona tan lawa mi.

tenpo poka kama li kama. telo sewi li kama ala. mi toki insa e ni: "sewi o, pona tawa sina a!" mi awen tawa.

tenpo suno mute li pini. tenpo ni la, kon pimeja li lon sewi. mi lukin e ilo mi la, ilo mi li toki e ni: "telo sewi li kama." mi wile ala e telo sewi. mi weka e toki ona tan lawa mi.

tenpo ona la, toki ona li lon. telo mute li tawa anpa tan sewi. mi jo e len pi weka telo. mi pana e len ni lon sijelo mi. len ni li awen e sijelo sewi mi. len ni li awen ala e sijelo anpa mi. poki noka mi kin li ken weka e telo. poki noka mi li lon telo la insa pi poki noka li kama ala telo. ni li pona mute tawa mi. mi toki insa e ni: "telo sewi li pona ala. telo mute li lon nasin. tan ni la, nasin li kama ike. taso, mi jo e len pona e poki pona. sijelo mi li ken ala kama telo. ni li pona." mi awen tawa.

taso, mi kama sona e ni: len anpa mi li weka ala e telo a! sijelo anpa mi li kama telo. telo li tawa anpa tan sijelo anpa mi, li tawa insa pi poki noka mi. noka mi li kama telo mute. len noka mi li kama telo mute. mi tawa la len noka mi li kalama: "mu mu mu." noka mi li pilin telo li pilin nasa li pilin ike mute.

mi pini tawa lon tenpo lili lon tomo. mi weka e poki noka e len noka. len noka li lon luka mi. luka mi li weka e telo tan len noka. telo mute li weka. mi pana sin e len noka e poki noka tawa noka mi. len noka mi li awen pilin telo. mi awen tawa.

tenpo lili la, len noka li kama telo mute sin. mi tawa la, len noka li kalama: "mu mu mu." mi pini tawa sin. mi weka e poki noka e len noka. luka mi li weka e telo tan len. mi awen tawa.

mi tawa lili. mi kama telo. mi pini tawa. mi weka sin e len. mi weka sin e telo tan len.

pimeja li kama. mi tawa tomo lape. tenpo suno ni li ike mute tawa mi. mi pilin ike mute. mi pilin e ni: "ken la, mi wile ala tawa lon tenpo suno pi telo sewi. jan li wile tawa la tenpo pi telo sewi li tenpo ike. sewi o, sina o weka e telo sewi."

tenpo suno sin li open. mi open tawa. telo sewi li tawa anpa. len noka mi li kama telo. len noka li kalama: "mu mu mu." taso, mi pini ala tawa. mi pilin nasa. mi awen tawa.

mi tawa la, pilin telo li weka tan mi. mi lukin e ma e kasi e tomo e sewi. ali li sewi lukin. kute mute li lon. kon li pona. mi pilin e ni: "ni li ike ala a. telo sewi mute li lon. len mi li telo mute. taso, mi pilin ike ala."

nasin li awen ike tan telo sewi. tenpo la, mi toki insa e ni: "mi lukin pona ala li tawa pona ala la mi ken moli lon nasin ni." ni li tan telo sewi. taso, telo sewi li ike ala. telo sewi li telo sewi. telo sewi li pona e ijo mute li ike e ijo mute. ijo ali li sama ni. mi awen tawa.

toki wawa li kama lon lawa mi:

"mi wile ala pilin ike. telo sewi li lon la, ijo tu li ken:

nanpa wan la, telo mute li lon sijelo mi, mi pilin ike mute.

nanpa tu la, telo mute li lon sijelo mi, mi pilin pi ike ala.

mi tawa la mi pilin telo. ni li lon. taso, pilin mi li ken pona li ken ike. mi lawa e pilin mi."

tenpo suno tu la telo sewi li awen tawa anpa. tenpo suno tu li pini la, telo sewi li pini li kama ala.

The big new thing is support for forms with text inputs that send a GET request on submit. For me, this primarily means Wikipedia's search box is now supported. Yay!

The interface and UX has been overhauled to be more similar to Malvim, the Vim-like text editor bundled with ming-wm. Some bugs and annoying things were fixed. The usual. Here are some fun images, the same ones in the README.md:

I plan to mostly use it to browse Wikipedia and HN, so I'm not too worried about the browser becoming useless^[0]. It's quite unfortunate that so many sites cannot be simply rendered, or even don't work without Javascript. I really miss the many sites that basically only used the <p> tag, and maybe some <b> and <img> if the economy was good.

You can still find a decent amount of these simpler sites, especially on university subdomains, where older professors (rightfully) simply don't see the point in going beyond basic readability, but there's obviously more of these sites going down every year than coming up. Though, things like neocities seem to be "cool" again, in certain circles. Most neocities sites wouldn't really be readable on Koxinga, but another recently popular site, bearblog.dev is perfectly usable with Koxinga.

What is interesting is that unlike the other obstacles that anyone trying to use a simple browser (eg, the Cloudflare challenges, Javascript loading the content instead of it being in the static HTML, etc), there's no one to really blame. Modern web development is awful, but having only text-based sites (like in the Gemini protocol) is too restricting.

So I don't think Koxinga is the ideal browser in an ideal world. I would have loved for it to support more complex formatting, I just don't really want to work that hard on it, and I'm not really sure how I would do all this complicated rendering anyways. It does what I want.

...By the way, the ideal browser, in my opinion, would be Lynx.

===

[0]: It is a great POC app for ming-wm, anyhow. Plus, the development process for Koxinga led me to add several things to ming-wm itself that I realised were kinda important, like font data caching for faster text rendering.

Anyways, reading the manga, you'll notice that Tsukumizu (the author and artist) makes a large amount of literary references. Certainly enough to have a... book club! Yay! Read with us, it'll be fun!!!

Here, I'll write some brief reflections on the referenced books in the first 3 chapters, followed by thoughts about how it relates to the manga. If you read any of these books and would like to share your own feelings, please email us^[1].

Chapter 1: The Old Man and the Sea

How to cope with life

This novella by Ernest Hemingway was read by Shimeji, and can be prominently seen in the second-to-last panel of the 4th page of the chapter 1. In the subsequent panel, Shimeji thinks sadly about the marlin getting eaten.

The Old Man and the Sea is fundamentally about the universal human experience of giving it your all and being in a worse position than before; of getting beaten down for no good reason at all. The titular old man, Santiago, hasn't caught any fish in a long time. This is bad, because he is a fisherman. He goes far out to sea, and snares a ridiculously large marlin on his hook. He fights it for several days and nights. When he finally reels it in, some blood in the water alerts swarms of sharks, which despite the best efforts of the old man (he kills several), bite off all the flesh. When he returns to shore with the skeleton, tourists don't even know what creature the skeleton is from.

On the book itself, is it good? The prose is simple, and maybe a little tiresome to read. But somehow, Hemingway uses this to make you feel exactly what the old man is feeling. I felt the pain the old man felt when the line cut into his hands, or his hands cramped. I felt his fatigue every night, and his despair when the sharks ate his catch. It became my favourite book the second I finished it^[2]. It still is. So yeah, it is good, Very Good. You will be convinced of Hemingway's exceptional talent. He's a fucking genius.

The book and Shimeji Simulation share many thematic similarities. Both explore how we should respond to adverse situations. Hemingway, through his book, clearly has an opinion: "A man can be destroyed but not defeated", or in other words, don't give up! Your efforts justify itself, regardless of the results. You cannot be miserable if you refuse to consent to be miserable. A stoic-seeming philosophy, though it could be seen as a Catholic/Nietzsche-like view of "suffering builds character". Well, stoic views might not disagree with that either. I guess the key difference is that the Catholic/Nietzsche perspective glorifies suffering in a way that stoicism does not. Catholics might compare suffering to that of the Christ, or martyrs. Nietzsche also seems to embrace suffering as a path to greatness. Seeking out suffering and bearing it almost becomes a proof of virtue. Stoicism appears to agree that reactions to suffering are important, but disagrees in that suffering itself is not desirable, just inevitable. Shimeji Simulation, on the other hand, (imo) is more open ended, and explores many responses, including nihilism (most obvious in Mogawa) and the milder apathy (Shimeji), though both are ultimately rejected by the characters. It seems closer to stoicism than any Catholic of Nietzschean attitude, but it isn't quite that either. Regardless of the underlying philosophy, both Shimeji Simulation and The Old Man and the Sea brilliantly stir an emotional reaction, and both convey the feeling that we are not alone in feeling the way we do.

Both (but especially Shimeji Simulation, with the hole digging machine and Shimeji's older sister's inventions) are now especially important to read and reflect on, with the rise of "AI" and the general trend of ownership turning into rentership. With these worries already posing an existential threat to human livelihoods, creativity, and meaning, how do we manage?

That is obviously a complicated question, and one that Shimeji Simulation does cover... I think? But we'll get to that later. I personally found both the old man's grit, and Shimeji's indifference to death admirable, though I'd have to think about "why".

Chapter 2: The Catcher in the Rye

Cynicism vs. Apathy

The Catcher in the Rye, by J.D. Salinger, can be seen very faintly as a book Shimeji is reading in the last panel of chapter 2.

This book is alright. It seemed to me like the protagonist, Holden, an angsty American teenage boy, was supposed to be at least somewhat sympathetic, but I did not think so. I found him and his narration mildly annoying. To the book's credit, it covers themes that for whatever reason, don't seem to be present in other similar coming-of-age genre books, such as alienation, uncertainty, and confusion. I guess since the book is written from the perspective of Holden, the annoying style shows his emotions and frame of mind well.

On the surface, Holden and Shimeji seem similar. Both previously suffered some kind of unpleasant event (the death of Holden's brother, the incident that made Shimeji dislike school, mentioned but unelaborated upon in chapter 1). Both are youths that are isolated from other people, and are unsure of their place in the world.

They are fundamentally different, however. Holden's misanthropy is a reaction to his attempts at connection with others failing. He is angry about others not acting the way he expects him to, and believes that they are in the wrong, that adults are all "phonies". After failing to find what he wants (meaning, sex, or friends), Holden believes the solution is just to run away and minimally interact with others. He prefers the innocence of childhood (his younger sister is the one who ultimately convinces him not to run away), and behaves in a childlike manner^[3]. He is both cynical and naive.

Shimeji's misanthropy is not misanthropy at all. Shimeji doesn't hate anyone, she just does not believe that interacting with others has any real value. She is apathetic to most things, but is not a nihilist, not cynical, and not naive. After all, she did presumably study for the senior high school exams, and she does go to school. I initially interpreted Shimeji going to school and going along with Majime's antics as a deep but hidden desire to connect with others (ie, apathy is not her "true" nature), but I now think otherwise. Shimeji strikes me as a person who thinks life is a bit of a chore. She wants to take the path of least resistance, and have everything pass by quicker. So, she indulges Majime, and because of the norms of modern society, goes to school. Of course, her character eventually changes, and she finds value in her friends and Majime. Holden does change a little by the end, but whether the change is significant is questionable.

Chapter 3: Alice in Wonderland

Acknowledging changing circumstances

This short children's book, by Lewis Carroll, is a little different from the other two. On the last page of chapter 3, Shimeji compares Majime leading her to join the bizarre hole digging club to the White Rabbit leading her down the rabbit hole to a bizarre world.

It is a children's book, it did popularise surreal fiction, and it does have immense cultural influence, so I won't be overly harsh. It wasn't a bad read by any means, but I was glad it was only twelve chapters. The poems did start to grow on me by the end though, and some parts were amusing^[4].

I took most of it at face value, though clearly the author put in some critiques (for example, the Duchess' obsession with everything neededing to have a moral, is probably a jab at childrens' education at the time).

What stood out to me most was Alice's reactions to the strange situations she found herself in. While she wasn't a stoic^[5] (she cries a small lake of tears), she seems to adjust surprisingly well. As children, the world defies our idea of how it ought to be, or how we are told it is; so maybe this is not much different for her. When reading Shimeji Simulation, I noticed the characters seemed similarly nonchalant and adaptive, at least relative to their situation of the fabric of reality changing completely. Shimeji may have been apathetic from the start, and never had that firm an attachment to the previous reality, but the nonchalantness is true for everyone. The world of Shimeji Simulation may be one much more laid-back and less stubborn than ours.

Then again, is the world of Alice or Shimeji so different to ours? Yes, obviously on a mundane level our world doesn't have talking rabbits, or perpetual motion machines. But absurd, surreal things happen all the time in our world. By and large, most people don't seem to be too freaked about it.

===

[0]: Why not? How unusual. wasona is a great way to learn

[1]: xrussianfanclub [at] xrotonmail [dot] com, xrussia [at] xrussia [dot] dev, except change all x's to p's

[2]: Hemingway's "For Whom the Bell Tolls" must too, be recommended. Thematically, it feels quite similar. "The Sun Also Rises", also by Hemingway, is quite different, but also good. That book almost seems like an earlier stage of an evolution into the themes of other two books. By that, I mean that the themes of emptiness and disillusionment with the hedonistic life ("The Sun Also Rises") seem as if they could naturally progress to the acceptance of struggle (in the other two books). Curiously, "For Whom the Bell Tolls" and "The Old Man and the Sea" were in fact written decades after "The Sun Also Rises".

[3]: There are many instances, but the title of the book being Holden's mishearing of a poem proves to me Holden's childlike nature

[4]: I normally like puns and wordplay (Shimeji Simulation has tons!), but I only found one or two funny...

[5]: In the colloquial sense