JS or no JS, that's a problem - towards a ZERO JS blog

[This post is to be updated]

I’ve commissioned myself to build this blog completely without javascript: that’s simple. But how can I add “modern” features without adding “modern” javascript?

> CMS
I prefer managing my posts with plaintext/flatfiles. I don’t want any database in my CMS and I don’t need to edit the posts. I used hexo before but it requires that you have Node.js installed to render the site. I abandoned it because I dislike node’s way of package management¹. I switched to hugo, a single binary that works.

> Responsive
Can you write a responsive frontend without JS? YES YOU CAN! For example I have some CSS like this for mobiles.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

@media screen and (max-width: 600px) {
    body{
        font-size: 10pt !important;
    }
    td.li-meta  {
        display:none;
    }

    table.tidy tr td{
        /* border: 1px solid red; */
        min-width:0 !important;
        padding:0.5ch;
        border-bottom: 2px dotted #002255;
    }
}

> Not too boring
While I’m a huge fan of the motherfucking website , I still want to make my site “cooler”. You may argue that vanilla plaintext is the true cool, which I much agree… but anyways I think I’ve done a pretty good job ricing the site without losing the plaintext nature, including

• Logo and navigation panel
• Pretty cool listing of posts
• A colorscheme that works for color-blind people(me)
• Markdown and Code rendering, thanks to Hugo.

> Richer than rich text
I’m talking about math symbols and equations in particular. The easiest way is to include katex. This post shows how to include and configure katex in Hugo blog.

However as you can see this setup breaks our no-js promise. There is an open [issue] (https://github.com/gohugoio/hugo/issues/10044) requesting server side math rendering feature. Also this thread has some good insights, I may take a look in the future.

Also regarding richer text, hugo has support for GoAT:

> While looking good in the terminal
This one is a bit tricky because it means you can’t abuse <div> in your site. In my experience w3m simply puts every new <div> into a new line, which means you can’t make them positioned side-by-side…. or the epic question:“how to center a div?”… No you don’t.

So to make a good layout the good old <table> is required..

> And interactive features? (I mean comments).
In the previous post I have a sketch of a duct-tapped “static” comment system.

I learned that hugo could “get and cache remote resource” in the compiling pipeline. This offers a new option to integrate the comments.

https://gohugo.io/hugo-pipes/introduction/#find-resources-in-assets

> Thoughts and reasonale
without javascript your hands are tied but things are still possible. The question is: is it worthy?