I want to make posts more capable. Some ideas are easier to explain with an equation, a diagram, or a chart.

The baseline post is still Markdown. The blog still uses Hugo.

Math

KaTeX is now enabled for posts that need formulas embedded. A useful test is the scaled dot-product attention equation from the Transformer paper:

$$ \operatorname{Attention}(Q, K, V) = \operatorname{softmax}\left(\frac{QK^\mathsf{T}}{\sqrt{d_k}}\right)V $$

Diagrams

Mermaid is now enabled and rendered.

flowchart LR
  tokens[Tokens] --> embed[Embeddings]
  embed --> attention[Self-attention]
  attention --> norm1[Add + norm]
  norm1 --> ffn[Feed-forward]
  ffn --> norm2[Add + norm]
  norm2 --> output[Output states]

Charts

I will be using Chart.js to render charts; that should work better than screenshots because the charts can reflow across screen sizes and support tooltips.

BirdNET detections

Bar chart of seven completed Warsaw-local days ending 2026-05-24: May 18: 619, May 19: 468, May 20: 641, May 21: 926, May 22: 590, May 23: 967, May 24: 909. Peak: May 23 with 967 detections.

The BirdNET detections are sourced from my BirdNET setup.

Sketches

p5.js can be used for small interactive sketches.

p5.js orbit sketch

Animated p5.js sketch showing a blue point orbiting an orange center point.

Typst to SVG

I have enabled Typst to SVG experimentally. I will figure out if I need it going forward.

A small diagram showing front matter, shortcodes, and static SVG output A small diagram showing front matter, shortcodes, and static SVG output

Static SVG output is just an image to the browser. No per-page JavaScript flag is needed.

Implementation details

The post opts into browser-side features from front matter:

[features]
math = true
mermaid = true
chartjs = true
p5 = true

The theme partials read those flags and only load the libraries the page asks for. The body uses shortcodes for the parts that need structure. Ordinary posts do not load KaTeX, Mermaid, Chart.js, or p5.js by default.

Typst is handled differently. I keep the .typ source in assets/typst/, compile it to SVG, and reference the generated file from static/images/. That makes the figure version-controlled without adding runtime JavaScript to the page.

The idea was inspired by Maxime Guerreiro’s post about his agent workflow: How I use agents to write this blog.