The Tedium Of Making A Blogsite

2022-09-06 22:31:50 PDT

I just spent a bunch of time cleaning up the image links in the Markdown on this GitAtom blog. The images are now all properly formatted according to the CommonMark Github-Flavored Markdown (cmark-gfm) specification.

As I feared, it was about an hour of messing about without doing much that was new or constructive or interesting.

• I belatedly realized that I could probably leverage the site's CSS to format the images in a way "good enough" for my purposes. There wouldn't be much in the way of easy customization, but meh.

  So I went and figured out what CSS wanted me to do here, and modified my CSS accordingly. Big fun. In case you're curious, the new CSS looks like this:

  /* https://www.w3schools.com/css/css_align.asp */ 
  p img {
      display: block;
      margin-left: 3em;
      margin-right: auto;
      max-width: 50%;
      max-height: 20ex;
  }
  

  CSS is nothing if not beautiful.

  I copied that addition into GitAtom's default CSS also. It's something most folks will want, I think.

  I developed the new CSS on my development blogsite. Never a great idea to work directly on the production site. Seemed to work after a bunch of tweaking. Then I copied it here.

• I really wanted a CSS class tag for img elements to be generated by the Python cmarkgfm package that GitAtom is using for Markdown rendering. cmarkgfm's idea of a "handy" image tag is like this:

  [![A Literal Genie maliciously granting a wish.](/media/0019-literal-genie.png
  "A 19th century etching of a Literal Genie maliciously
  granting a wish.")](/posts/dall-e-credit.html)
  

  That is translated by the Markdown renderer to this HTML:

  <p><a href="/posts/dall-e-credit.html"><img src="/media/0019-literal-genie.png"
  alt="A Literal Genie maliciously granting a wish."
  title="A 19th century etching of a Literal Genie
  maliciously granting a wish." /></a></p>
  

  I wanted HTML something like this:

  <p><a href="/posts/dall-e-credit.html"><img src="/media/0019-literal-genie.png"
  class="cmark_image"
  alt="A Literal Genie maliciously granting a wish."
  title="A 19th century etching of a Literal Genie
  maliciously granting a wish." /></a></p>
  

  See the dramatic difference? No. That's computing for ya. But getting the second thing would allow changing my CSS selector to

  img #cmark_image
  

  to ensure that the CSS didn't accidentally catch stuff on this site that was not part of a blog post: for example the Feed logo.

  So I filed an issue against cmark-gfm. We'll see. I may end up contributing a few lines of C code there.

• I decided this was a good time to move all the images on the site from the /posts directory where the blog posts live to a separate /media directory. I had been planning to do it anyhow, because reasons; since I was messing with this stuff now was a good time.

  I'm hoping to someday get GitAtom to be cleverer about attached media, in particular in Atom feeds. In any case, I'm not too comfortable with the idea that the images live only in my site directory right now. Fixing it all will be in the far future though — very low priority.

• I next got to fix all the image links in my previous posts. That's the problem with co-developing GitAtom with FOB4: retroactive changes. I did a couple of posts by hand, and got the hang of it. Then I decided to partially automate the process for the rest of the links by writing a sed script. A few minutes of fiddling around later, I had this beauty:

  s@<p align="center"><a href="\([^"]*\)"><img alt="\([^"]*\)" title="\([^"]*\)" src="/posts/\([^"]*\)" width="[^"]*" */></a></p>@[![\2](/media/\4 "\3")](\1)@
  

  Sorry about the long line: sed has no great way to stick line breaks in stuff.

  But of course, it wasn't that simple. I had to yak-shave by trying to get a sed mode installed for emacs. I didn't find anything good, but I now get in a really primitive sed mode when I open emacs on a .sed file.

  Of course, after all that I realized that my fancy new sed script was only good for auto-fixing exactly two more links. Ugh. Even then, I had to wrap the HTML in the Markdown so that it was all on one line, so that sed could deal with it. Totally not worth it.

  I hand-fixed the rest of the links, which were much simpler.

After all that, I wrote this post.

It's always like that. Things get very incrementally easier after every little thing like this, of course. Still, it definitely feels like pushing a boulder up a hill. Unlike the canonical example, the boulder doesn't roll back down, really. The hill is just endlessly high, and every time I look back it doesn't look like I've come any distance at all.

Enjoy my bespoke post on my bespoke blog. Otherwise I'll just feel silly.