HTML in HTML Extreme Edition
Inspired by John Ankarström's article, Writing HTML in HTML , I ended up "downgrading" my site from using Hugo the static generator to just writing pages by hand. The idea is that if you're writing plain HTML, your site is always viewable a reload away, and you can implement anything that you can express with HTML and CSS (... vs with any kind of generator, static or not, you first need to think of the actual HTML & CSS, and then persuade your software to get it through. Most of the time, you'll conclude that it's not worth it.)
(It's worth reading John's article; it's a lot more persuasive than I am.)
This ended up working reasonably well for me. For example, my article about IndieAuth has some fancy colored dialog in it, with colored, rounded frames. They started out being <pre> blocks, and were being improved upon gradually by just adding an inline stylesheet, largely keeping the HTML non-ugly. (As in: not a lot uglier than it normally is.)
You can add code blocks (there are excellent JS code colorizers out there). You can drop in a math formula engine. It helps creativity a lot of you don't have to get through extra layers.
Editor support is not that hard either. John Ankarström is using Seamonkey's editor; I'm generally a "let's do everything in Emacs" person though, but it doesn't really take a lot if your editor is extensible enough:
- I have "close paragraph with a </p> and start a new one" bound on Ctrl-Enter
- also, quotation marks inject & instead.
Together with having mounted the actual web server on NFS, I was hoping that this would result in zero-effort addition of articles. However... it didn't quite yet happen. My guess for reasons: images and index pages .
First of all, adding images to a post is hugely annoying. First of all, you need to get the actual photo to your computer. Then, you generate thumbnails. Yes, it's a plural: you need one for the inline image, which, when clicked, shows a higher-resolution version, which is still not the crazy 10+ megapixel original. Also, don't forget to strip EXIF if you don't want the whole world to know where you live. (They should at least have a harder time figuring it out.)
(Not that static generators have this problem solved entirely: I did have Hugo time out and die while converting all the giant images I added.)
And once you're done with all that... not caring about "links to other fresh posts" in the content is one thing, but you'd generally want an index page, with a nice list of posts, excerpts, enticing images, possibly an RSS feed. Which... you could also write by hand. Or just provide a list of posts. But... if you go the "fancy blog" way, it's a lot more work.
Not a lot of work, but we're going for zero friction here. Remember, Future You is really lazy. (... at least if you're me.)
Let's solve it with more HTML!
So in a way, you'd want a static generator for part of the site, but your posts are in HTML.
Idea: could we use HTML to generate more HTML?
After all, with HTML5, you technically do know semantic meanings of tags. Also, HTML parser libraries definitely exist. So... our "generator" could just:
- scan the directory tree of the site
- parse every HTML file it finds
- generate an index page / RSS etc. based on them.
Furthermore, you can use the fact that unlike Markdown, HTML is easily extensible. Want drafts to be hidden from the index?
... want to specify which paragraph we should use as a summary?
<img src="IMG_20200101_smallthumb.jpg" data-orig="/home/simon/stuff/IMG_20200101.jpg" class="gallery summary" />
This is, by the way, a close-to-exact example from the system I have. We have:
- the style gallery, so that the JS gallery picks up the image & makes it clickable.
- the style summary, which will make it so that this will be the image representing the post in the index (... it's just the first image found by default, this is how it can be overridden)
- the attribute data-orig, which is an actual path of the original file that needs to be thumbnailed in various ways. The thumbnailer will pick up the "src" attribute and write the thumbnail to the right location; it'll also produce a medium-sized image with same name modifications that the JS gallery does in the same way. Meanwhile, you never have to put the original, large, EXIF-tagged image on the web server: the generator can run locally & pick it up.
Picking a summary paragraph works similarly easily. (For extra niceness, you can write a unique one by adding
display: hidden;to a paragraph in the actual article and still making it the summary one.
Meanwhile, the generator is ~250 lines of Lisp, including the template.