# The Swyx.io 2022 Rewrite

Original: https://swyx.io/rewrite-2022
Published: 2022-01-27

> Discussing the 2022 migration of swyx.io to SvelteKit and GitHub Issues

> Note: there was a [2023 update](https://www.swyx.io/rewrite-2023) since this post.

I've rewritten this site once again.

![image](https://user-images.githubusercontent.com/6764957/151311175-9a15d313-cace-48a0-844e-2361644a21f5.png)

For those keeping count:

- Oct 2017: Used [raw HTML/JS](https://5aa731a27b6ee82f8e825e3a--scout-videos-51664.netlify.app/)
- Nov 2018: I used [Gatsby](https://5befbba205c41716cb2627ba--scout-videos-51664.netlify.app/)
- Aug 2019: [Tried Gatsby Themes](https://5d7699e172ae430007210374--scout-videos-51664.netlify.app/writing/moving-to-novela)
- Sep 2019: [Moved to Svelte and Sapper](https://www.swyx.io/svelte-static)
- Sep 2020: [Moved to Elder.js](https://github.com/sw-yx/swyxdotio/pull/45)
- Jan 2022: Moved to SvelteKit (you are here!)

If you want to have the same site without my customizations, I've also open sourced a SvelteKit starter called [swyxkit](https://github.com/sw-yx/swyxkit) that you can use as a starting point.

## Problems I faced

I've been very happy with the move to Svelte.js over the years ([Why Svelte?](https://www.swyx.io/why-svelte-short)). Elder.js was very fast (due to the [Islands architecture](https://jasonformat.com/islands-architecture/)) and I loved the shortcodes and flexible data layer. However two choices hobbled my productivity/satisfaction and caused me to consider a rewrite:

- Having to pregenerate every page and do a full rebuild any time I changed a page
- [Using Dev.to as a Headless CMS](https://www.swyx.io/devto-cms).

I was excited about using Dev.to as a dual distribution strategy, but unfortunately the community seems to have completely stalled, and the API became extremely flaky (failing 9 out of every 10 calls for reasons I still do not yet understand). Dev.to also imposed additional restrictions I didn't like - an arbitrary max of 5 tweets embedded, max of 4 tags, no support for `details/summary` tags (my favorite HTML tags!) and having to manually upload my images one by one was STILL slower than I would like.

Build times also crept up from 2 to 3 minutes... when my builds succeeded.

![image](https://user-images.githubusercontent.com/6764957/151313388-8cbf940d-69f1-4e73-bdb0-d120a8a1ebdd.png)

## Solutions

I moved to SvelteKit, and used GitHub Issues as my CMS:

{% twitter 1480356418817753088 %}

My builds are back down to 1 minute and I now have a free comment layer/much nicer writing experience.

![image](https://user-images.githubusercontent.com/6764957/151314310-442bf42e-102e-4a74-a846-936cdaee4a79.png)

I also included a bunch of smaller features I've wanted, including a togglable dark mode (previously, dark mode was based on system preferences), as detailed in the swyxkit readme.

## The new look

This was a rewrite, not so much a redesign, because I just wanted to remove the blockers to my writing productivity. Believe it or not I've wanted to do this rewrite for [almost a full year](https://github.com/sw-yx/swyxdotio/issues/5#issuecomment-624669594) before actually doing it!

Permalink here: https://61f1ec1ede71a50007f6f3cd--scout-videos-51664.netlify.app/

![image](https://user-images.githubusercontent.com/6764957/151311175-9a15d313-cace-48a0-844e-2361644a21f5.png)

![image](https://user-images.githubusercontent.com/6764957/151311251-4e8f8009-3e87-4acc-afa9-f4bc1e7a6eed.png)

![image](https://user-images.githubusercontent.com/6764957/151311329-51c1bdb3-c978-4fd6-8a31-681d6383c2e2.png)

I also added almost a year's worth of talks and podcasts that I hadn't been updating on my site.

![image](https://user-images.githubusercontent.com/6764957/151314959-6b1aaea9-ec29-430e-8873-87f607aeba9d.png)

## Todos

Things I want to add:

- some "live" interactive component with https://replicache.dev/
- some auth+faving system with Supabase
- viewcounts
- recommendations
- lightbox and fullbleed for images
- curated content index like https://jvns.ca/
- user themable site
- nice footnote support like in https://arcana.computer/miscellany/this-site
- lead capture/newsletter drip
- command palette ([Sheldon Hull](https://twitter.com/sheldon_hull/status/1486852148860268545) suggests [ninja-keys](https://github.com/ssleptsov/ninja-keys))

## Addendum

Issues that users spotted after I launched:

{% tweet 1486725434540580871 %}

- theme-color https://twitter.com/kilianvalkhof/status/1486733537004830724?s=20&t=Nrz48yQ6YNVjBDyPv8AWrQ
- command palette https://twitter.com/sheldon_hull/status/1486852148860268545
- doesnt reload https://twitter.com/Benghamine/status/1486768425934286848?s=20&t=Nrz48yQ6YNVjBDyPv8AWrQ ([fix here](https://www.youtube.com/watch?v=HXg04ySByk0))
- RSS bug - 3 of them
	-  https://twitter.com/rubenartus/status/1486730512072777730?s=20&t=Nrz48yQ6YNVjBDyPv8AWrQ (fixed [here](https://github.com/sw-yx/swyxdotio/commit/b308ac5c5fac0611baee1ad61272d2582b43b4ec) and then
	- [here](https://github.com/sw-yx/swyxdotio/commit/74ad82dafe105746f209fb52a13ea49878593c7f) - just a lazy oversight issue, would have been spotted if i used typescript)
	- the render link didnt work with prerender: https://github.com/sw-yx/swyxdotio/pull/406
- skip link and align nav https://twitter.com/Richienb2/status/1486997958595727361?s=20&t=Nrz48yQ6YNVjBDyPv8AWrQ