Hi, I'm Gregor, welcome to my blog where I mostly write about data visualization, cartography, colors, data journalism and some of my open source software projects.

Goodbye Hexo, hello SvelteKit


A few weeks ago I asked my peers on if I should write a newsletter instead of blogging, and the result was clear. Out of 47 of my most representative followers, only 4% voted for a newsletter, while 96% said they were fine with blog posts.

So I figured, it was time to brush up my blog a bit. In 2017, I moved this site from WordPress CMS to a static Hexo size, and started to write my blog posts in Markdown. And while nothing is wrong with Hexo, there are a few things on my wishlist that it made hard.

Sometimes I like to add interactive demos to my blog posts, and in order to do that in Hexo, I basically had to maintain a separate Svelte repo, copy the built bundles to Hexo and embed them as static files. How much nicer would it be, if I could just use Svelte in my blog posts directly!

The other thing that I had on my list for a while was a proper dark mode switch — including reloading of embedded Datawrapper charts. Oh, and faster page loads would be nice as well.

Fortunately, it’s 2023 already, and we have 🎉 SvelteKit which makes all of this insanely easy.

Migrating to SvelteKit

Migrating was relatively straightforward thanks to this amazing guide from JoyOfCode. I’m using mdsvex so I can still use Markdown files as sources for my blog posts. In fact, I didn’t have to touch most of the files at all.

Mdsvex supports remark plugins, so I can still use math expressions and Markdown extensions for inline footnotes etc.1

CO2=PopulationGDPPopulationEnergyGDPCO2EnergyCO2 = Population cdot rac{GDP}{Population} cdot rac{Energy}{GDP} cdot rac{CO2}{Energy}

For code syntax highlighting I switched from Highlight.js to Shiki, which supports more languages and is compatible to VSCode themes.

<button on:click={() => count++}>increment counter: <b>{count}</b></button>

dark mode is {$dark ? 'on' : 'off'}

And now I can embed Svelte code directly into my Markdown files:

dark mode is off

SvelteKit is pretty strict about broken internal links or images, so I went through each post to find the original images. In some cases, they were only available on (btw, you should donate to the project if you haven’t done so already).

A trip down memory lane

So after migrating the posts, I went through my archive of 14 years (!) of blog posts again to check how each looks now. I was astonished by how much was writing in the first years, and how much of it was about Flash programming. Like, I sometimes forget that I ported PROJ4 map projections and a text hyphenation library to ActionScript, and at some point even started working on a mapping framework called OpenFlashMaps.

By now, most of this code is either gone or obsolete, but I’m glad I at least documented it here, so the work wasn’t for nothing.

Finally, here’s a chart of my blog activity per year, which I mostly put here to test the ObservablePlot wrapper component, but also as encouragement to do more writing!

  1. such as this one