danielz.fyi

Setting up this blog

2 min read

The main issue I ran into while setting up this blog was figuring out how to add support for TikZ. After some digging, I found this issue on the Quartz repository, under which a user linked to their own transformer plugin for TikZ.

However, that transformer didn’t work when I tried to use it directly, so I ended up digging up a copy of that transformer from an older version of his repo instead 😩 You can find my version here. I also had to add this bit

svg = svg
  .replaceAll(/("#000"|"black")/g, `"currentColor"`)
  .replaceAll(/("#fff"|"white")/g, `"var(--background-primary)"`)

as well as this to custom.scss

svg > g {
  fill: currentColor;
}

In order to get the diagrams to render properly in dark mode (which took me way too long to figure out).

Overall, I’d say the experience of setting up Quartz was not the greatest. It also took me a while to figure out how to add custom CSS (custom.scss) as well as how to hide title and reading time on the main page (which can be done like so).

Hoping for smoother sailing from here 🙏

UPD: 10/18

Ran into another stupid issue because Typst injected the following block of CSS into my page:

svg {
	fill: none
}

Genuinely, why? I was considering switching to KaTeX but ultimately decided against it, opting for a stupid, vibe-coded fix (see tikz.ts) instead that basically sets fill = currentColor for all SVG elements that don’t currently have fill set. Truly 🤮

UPD: 10/19

Replaced vibe-coded fix with this instead, hopefully everything works now

I ended up just converting all the typst blocks into latex first, then using rehype-katex afterwards (code) since using typst also created really faulty reading time estimates, and at that point it was just too much of a hassle

Graph View