vis4.net

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

#meta#hexo#sveltekit

A few weeks ago I asked my peers on vis.social 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 web.archive.org (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