Website Style & My Writing Flow

This post is the start of the meta series where I’d write how I write in this blog, and any code or flow updates. The other ulterior motives behind this series are: One is to force myself to practice writing for an audience. The other is to serve as a log for the progress I make in this “writing system”.

The why

Let’s start by stating the obvious:

I very, really, extremely, incredibly, like minimalism.
I want to understand and be in control of everything about my website.
I am not a web developer, and currently, I don’t consider myself any type of developers.
I am making this “system” while writing this post.
I think in lists. So there will be a lot of lists, not only in this post, but everywhere in this site.

Also, bear with me here, let me list my blogging system intended “features”:

Minimal, shouldn’t require preprocessors or extra pieces of software.
Minimal, no JavaScript and only the necessary styling.
Minimal, just static content and no server-side code.
Minimal, and requires a bit of tinkering.

The website style

First things first, THE STYLE.css:

I want, at some point, to be able to write a post that contains both Arabic and English text, so the first thing I put in the stylesheet of this website and the versions before is this:

* {
    unicode-bidi: plaintext;
}

This should save me the trouble of adjusting the direction of each element. And as long as I start a paragraph with a language, the browser should automagically align and set text direction accordingly.

The second important thing, is that I wanted the website to use as few HTML tags as I could. This, along with my love for monospace font, and that I wanted the site to look like how I would like to see it in a terminal window, made me steal from a couple of the 1k club entries some ideas:

body {
    font-family: monospace;
    white-space: pre-wrap;
}

This would make the entire body a big <pre> tag. Not ideal for accessibility, but it takes away so much of the formatting and styling hassle.

Then there is the automatic dark-mode:

@media (prefers-color-scheme: dark) {
    html, body[theme="auto"] {
        filter: invert(1);
    }
}

And for this to work correctly I had to set the text and background colors:

body {
    color: black;
    background: white;
}

Finally, some styling for code blocks:

code {
    display: block;
    border-style: solid;
    border-width: thin;
    padding: 0.3rem;
}

The remaining are just some adjustments to the page margins and width.

My writing flow

Now, there’s the matter of writing. I made a checklist for myself so I don’t forget a step in publishing:

First thing I scribble my thoughts on OneNote and try to refine them till it resembles an article.
I copy the blank.html file and give it another name related to the post as this will be the slug of the article.
I copy the article in the <body> of the template, using <a> <em> <strong> <code> tags only for now.
Then I add the current date in the article body.
In the home page and the index of /writings section, I put the link of the new article.
I git commit to set the exact time and date of writing the article.
Using git log, I retrieve the time stamp of the last commit in RFC822 format.
I update the RSS feed file.
Finally, I commit the changes and push to sourcehut.

Hosting

Have I mentioned that this site is hosted on sourcehut pages? Well, it is. And since it’s mostly static files, the build script is very, you guessed right, minimal. I used their basic example with only two additions:

git log --format='[%aD] %h %s' > log
rm -fr .* *.md

To generate /log page. And to keep markdown and other hidden files and directories from being published.

In the next couple of days I will try to automate this process a bit. And I will probably use Atom feed instead of RSS mainly because I don’t like RFC822 time and date format.

Till next time.