Building a new site in May

posted 2 days ago ⋄ last updated about 18 hours ago ⋄ 4 min read

All because someone asked for an RSS feed…

Things picked up for me a lot in April, so it’s now May. I’ve been slowly chugging along on my blog challenge, and I’ve finally made some progress. One of my friends asked me to add an RSS feed to my site, and that was the final straw that pushed me to sit down and do the work.

I decided to switch from Hugo to Astro, since I couldn’t quite get the features in Hugo that I wanted, especially to get animations working in an ergonomic way. Plus, Maggie Appleton’s site is built with Astro, and I look up to her in a lot of ways.

Animations#

One of the things I wanted to do was build some new features into my site and update the design a little bit. For example, one thing I wanted to be able to do was to embed animations from Motion Canvas in my posts:

Example Animation

I also wanted to figure out how to toggle between light and dark mode, including for the animations on the page. You can try clicking the button in the top right to toggle the theme and see the animation update.

This was a pretty hacky solution, involving reading a bunch of variables from the :root element and applying them to the animation. It works, but it’s not the best. It ended up looking something like this:

1
---
2
const { src, caption, variables, auto = true, ...props } = Astro.props;
3
---
4

5
<figure>
6
  <motion-canvas-player
7
    src={src}
8
    variables={JSON.stringify(variables)}
9
    auto={auto}
10
    {...props}></motion-canvas-player>
11
  {caption && <figcaption>{caption}</figcaption>}
12
</figure>
13

14
<style>
15
  motion-canvas-player {
16
    width: 100%;
17
  }
18

19
  figure {
20
    background-color: var(--mantle);
21
    margin: 1em 0;
22
    border-radius: 1em;
23
    padding: 1em;
24
  }
25

26
  figcaption {
27
    text-align: center;
28
    font-size: 0.8em;
29
    margin-top: 0.5em;
30
    font-style: italic;
31
  }
32
</style>
33

34
<script>
35
  // Side-effect, client-side imports
36
  import "@motion-canvas/player";
37
  import "@motion-canvas/core";
38

39
  const listenedColors = [
40
    "--text",
41
    "--subtext",
42
    "--surface",
43
    "--crust",
44
    "--mantle",
45
    "--red",
46
    "--peach",
47
    "--yellow",
48
    "--green",
49
    "--blue",
50
    "--sky",
51
  ];
52

53
  function updateVariables(values: Record<string, string>) {
54
    const motionCanvasPlayers =
55
      document.querySelectorAll(`motion-canvas-player`);
56
    motionCanvasPlayers.forEach((motionCanvasPlayer) => {
57
      const oldVariables = JSON.parse(
58
        motionCanvasPlayer.getAttribute("variables") || "{}"
59
      );
60
      const newVariables = { ...oldVariables, ...values };
61
      motionCanvasPlayer.setAttribute(
62
        "variables",
63
        JSON.stringify(newVariables)
64
      );
65
    });
66
  }
67

68
  function readColors(element: HTMLElement) {
69
    const colors: Record<string, string> = {};
70
    listenedColors.forEach((color) => {
71
      colors[color] = window.getComputedStyle(element).getPropertyValue(color);
72
    });
73
    return colors;
74
  }
75

76
  const styleObserver = new MutationObserver((mutations) => {
77
    if (!(mutations[0].target instanceof HTMLElement)) {
78
      return;
79
    }
80
    if (
81
      mutations[0].type !== "attributes" ||
82
      mutations[0].attributeName !== "class"
83
    ) {
84
      return;
85
    }
86
    const newValues = readColors(mutations[0].target as HTMLElement);
87
    updateVariables(newValues);
88
  });
89

90
  styleObserver.observe(document.documentElement, {
91
    attributes: true,
92
    attributeFilter: ["class"],
93
  });
94

95
  updateVariables(readColors(document.documentElement));
96
</script>

I then use these variables in the animation using a utility I made to pull them from the project variables:

1
import { Colors } from "@hhenrichsen/canvas-commons";
2
import { Color, SignalValue, useScene } from "@motion-canvas/core";
3

4
const defaultColors: Record<string, string> = {
5
  "--text": Colors.Catppuccin.Mocha.Text,
6
  "--subtext": Colors.Catppuccin.Mocha.Subtext0,
7
  "--surface": Colors.Catppuccin.Mocha.Surface0,
8
  "--crust": Colors.Catppuccin.Mocha.Crust,
9
  "--mantle": Colors.Catppuccin.Mocha.Mantle,
10
  "--red": Colors.Catppuccin.Mocha.Red,
11
  "--peach": Colors.Catppuccin.Mocha.Peach,
12
  "--yellow": Colors.Catppuccin.Mocha.Yellow,
13
  "--green": Colors.Catppuccin.Mocha.Green,
14
  "--blue": Colors.Catppuccin.Mocha.Blue,
15
  "--sky": Colors.Catppuccin.Mocha.Sky,
16
};
17

18
export function getColors(): Record<
19
  keyof typeof defaultColors,
20
  SignalValue<Color>
21
> {
22
  return Object.fromEntries(
23
    Object.entries(defaultColors).map(([key, value]) => {
24
      return [key, () => new Color(useScene().variables.get(key, value)())];
25
    })
26
  );
27
}

Shoutout to Waldi’s work here for the initial implementation of the Motion Canvas player in Astro. Mine works a little differently, but it’s still based on his work.

I’ll likely end up making my own player component eventually, but this works for most of what I want to do for now.

Code and Design#

If you haven’t used the old site, I also took the opportunity to update the design to use the Cappuccin colors, and decided to throw in the towel and use a third party library for code blocks, which has improved the terminal and code block experience a lot, I think. It also keeps the markdown content I use a lot simpler, which is nice since I do most of my composition in Obsidian.

Other Stuff#

I’ve decided to collect some of the other work that I’ve been doing in the background. These include my lecture notes, which I’m working on porting over to this site, some of my creative writing, and some other ideas I want to steal from other sites I’ve seen.