website/_src/data/blog/Rewrite 2.0.md

---
description: I heard you like rewrites, so we put rewrites in your rewrites, so you can rewrite while you rewrite
date: 2025-06-25
blurb: <p>i hate luxon</p><p><a href="/assets/img/blog/luxon.png"><img src="/assets/img/blog/luxon.png" alt="Collage of various cartoon characters from different media wielding a pistol pointed at Luxon, collectively saying 'Sorry Luxon but your documentation sucks, so die' to which Luxon replies with 'I understand'"></a></p>
avatar: /assets/img/art/sundae_lick.gif
---
## {{page.fileSlug}}

<time datetime="{{date|ISO}}">Published: {{date|readable}}</time>
{%if modified%}
<time datetime="{{modified|ISO}}">Last modified: {{modified|readable}}</time>
{%endif%}

I haven't worked on much of anything the past 8+ months, and out of the blue, I decided that I wasn't happy with how my website was looking, so I've been spending a couple of weeks working on rewriting the site and writing this post up.

### So, what's new?

It's now {{"open source"|link:"https://bunsin.space/forgejo/sundae/website"}} under <abbr title="Creative Commons Attribution-NonCommercial-ShareAlike 4.0">CC-BY-NC-SA 4.0</abbr>!

Besides that, a lot is new, actually. For starters, I ported the site over to a fresh build of {{"Eleventy 3.1.0"|link:"https://github.com/11ty/eleventy/releases/tag/v3.1.0"}}, which was way easier than I expected, {{"since I originally started from a base"|link:"/blog/break-time#i-have-no-some-idea-what-i'm-doing"}}.

I figured out that standard `markdown` doesn't implement header links (without manually adding in inline `html` headings with `id` attributes), so I ended up switching to {{"markdown-it"|link:"https://github.com/markdown-it/markdown-it"}} and {{"markdown-it-anchor"|link:"https://github.com/valeriangalliat/markdown-it-anchor"}}.

I switched to using {{"date-fns"|link:"https://date-fns.org"}} aswell, instead of {{"Luxon"|link:"https://github.com/moment/luxon/"}}. This library is just way better documented, for someone that still sort of struggles with JavaScript.

Here's a snippet of my time filters in my `eleventy.config.js`:

```js
import { format } from "date-fns";

eleventyConfig.addFilter("ISO", (dateObj) => {
    return format(dateObj, "yyyy-LL-dd");
});
eleventyConfig.addFilter("readable", (dateObj) => {
    return format(dateObj, "LLLL do, yyyy");
});
```

They're just two, which I [previously struggled to achieve with Luxon](/blog/break-time/#you're-telling-me-that-java-scripted-this%3F), requiring me to end up writing an extra filter, which I still do not know why it was erroring.

### Smaller stuff

I wasn't exactly a fan of how I laid out my [interests](/home#interests), previously presenting them as game boxes and CD jewel cases on a shelf.

I've changed them to be more minimal, mimicking Windows desktop entries with the shortcut icon.

If you'd like to implement the shelving for your own website, you can find the source files in the {{"old branch"|link:"https://bunsin.space/forgejo/sundae/website/src/branch/old"}}.

<section><a href="/assets/img/blog/shelf.png"><figure><img src="/assets/img/blog/shelf.png" alt=""><figcaption>How the shelving featuring my personal favorite games and music looked before.</figcaption></figure></a>
<a href="/assets/img/blog/media.png"><figure><img src="/assets/img/blog/media.png" alt=""><figcaption>How it looks now.<br>Note: the cut-off in the middle is meant to showcase the light and dark theme.</figcaption></figure></a></section>

I largely wanted to move away from it because, I mean... it's all a huge `css` crime, and I just wanted something less flashy, really.

Although, I did re-implement a pretty simple `button` toggle to switch the theme to my website's old look, because I feel like that it was too iconic to get rid of.

I'd like it to be more modular, but I do not like sitting down and staring at `js` code if I can help it.

It's also not a 1:1 port, since I'm working with a different site layout, folder structure and just different principles for how I write `css` now.