Moving to Eleventy

When I started this version of this blog, I did so using Jekyll. I was impressed with the ease of setting everything up, and when I wanted to write a plugin to allow writing articles in a literate style, that was straightforward too. Unfortunately bit-rot got to me.

I'm a pretty infrequent blogger, which is fine, but unfortunately it means that I haven't kept up with changes in the ecosystem since I started using Jekyll.

I wanted to write a new article, and didn't have the machine that I have used for blogging to hand, so simply pulled the repo and tried to run things. And failed. I set everything up in 2023, and was depending on a gem for markdown support that has evolved significantly, and has dropped support for the custom rendering that I needed for the literate plugin.

No amount of futzing could get me the right combination of ruby, jekyll and commonmarker. I don't normally use ruby, In my current day job it is rust and typescript, for fun it is typescript and zig, and I've used C, C++, Java, C#, Python, and Go in production environments, but I'm not familiar enough with the ruby ecosystem to solve a problem like this as quickly as I would like, so I elected to spend probably 10x as long and port everything to an entirely new environment.

I chose Eleventy pretty much at random without giving too much thought to it.

My biggest concern was to how I would handle the literate style articles. In the end it was fairly simple.

I installed @11ty/eleventy-plugin-syntaxhighlight, which does an excellent job of syntax highlighting.

I wrote a couple of very simple shortcodes

  eleventyConfig.addShortcode("literate_create", function (name, output) {
    return `<script type="text/x-literate-data">${JSON.stringify({
      name,
      action: "create",
      output,
    })}</script>`;
  });
  eleventyConfig.addShortcode("literate_append", function (name) {
    return `<script type="text/x-literate-data">${JSON.stringify({
      name,
      action: "append"
    })}</script>`;
  });
);

This allows me to replace

``` python : <<hello.*>>= hello.py
print('Hello, World')
```

with

{% literate_create "hello" "hello.py" %}
``` python
print('Hello, World')
```

which will then generate

<script type="text/x-literate-data">{"name":"hello","action":"create","output":"hello.py"}</script>
``` python
print('Hello, World')
```

Then a fairly simple script is used to scrape the data islands from the page source and assemble (tangle in literate terms) the marked code blocks and allow links to the tangled files to be downloaded.

All of which was much more fun that fixing the old site.

I have mostly replicated the mininma theme with tailwindcss, and defined colors using values from OKSolar

@theme {
  --color-solarized-base03: oklch(27.4% 0.05 219.6deg);
  --color-solarized-base02: oklch(32.1% 0.053 219.6deg);
  --color-solarized-base01: oklch(53.5% 0.029 219.6deg);
  --color-solarized-base00: oklch(54.4% 0.017 219.6deg);
  --color-solarized-base0: oklch(71.8% 0.017 198deg);
  --color-solarized-base1: oklch(71.8% 0.03 198deg);
  --color-solarized-base2: oklch(93.4% 0.031 90deg);
  --color-solarized-base3: oklch(97.7% 0.012 90deg);
  --color-solarized-yellow: oklch(63.1% 0.129 86.4deg);
  --color-solarized-orange: oklch(63.1% 0.166 50.4deg);
  --color-solarized-red: oklch(63.1% 0.221 21.6deg);
  --color-solarized-magenta: oklch(63.1% 0.205 349.2deg);
  --color-solarized-violet: oklch(63.1% 0.121 280.8deg);
  --color-solarized-blue: oklch(63.1% 0.141 244.8deg);
  --color-solarized-cyan: oklch(63.1% 0.102 187.2deg);
  --color-solarized-green: oklch(63.1% 0.148 118.8deg);
}