Site update (2025-10-27)

I’ve updated my site.

Contents

• Introduction
• Nanostores
  • LiveCursor
• Tooltips

Introduction

Previously, I was using Next.js’ static export feature. It sucked pretty bad, Next.js is only nominally designed for static export and as a result the site could get full-screen React errors on occasion.
This being at all possible depressed me.

With this update, the site is built using Astro, which is much better at static exports, and has a bunch of other attractive features.

Now, all interactive elements on my site degrade gracefully when Javascript is turned off. I mostly did this because it makes me feel good about my code. I also converted a bunch of React/Next.js components to Astro. Doing this means working with vanilla Javascript again, which I really missed.

I’m sure I’ll miss React if I try to make something that needs complicated state logic. Thankfully, I can just use it if I want to.

I now have an Atom (aka RSS) feed. Finally! (Update: JSON Feed)

My blog posts are now children of ‘logs’, a useful abstraction for pushing something that is not necessarily a blog post to my feed, like an external link or small updates.
I can also set these as ‘ongoing’, to mark that they’re gonna be updated at some point.

Don’t know how much use any of this is going to get, but I had fun setting up new features for blog posts:

• a custom rehype plugin to add external link icons
• image lightboxes (example)
• floating asides (example)

I’ve also started backdating a bunch of logs for things from the past.

Nanostores

In React, if you want to do things dependent on state, you use hooks. The Astro docs recommend using Nano Stores instead. Previously I was pretty dependent on a few external libraries that provided React hooks for very basic things I needed, like tracking the position of the mouse.
Obviously, it’s not that hard to track the position of the mouse, what’s complicated is accounting for all edge cases — that was my reasoning at the time, anyway.

Really though, the edge cases can be the most fun part.

LiveCursor

1
import { map } from 'nanostores';
2

3
export const $cursor = map({
4
  cursorX: 0, cursorY: 0
5
})
6

7
export const updateCursor = (e: MouseEvent) =>
8
  $cursor.set({ cursorX: e.clientX, cursorY: e.clientY })

5 collapsed lines
1
---
2

3
---
4

5
<script>
6
  import { getWindowCenter } from "@/lib/component/LiveWindow/LiveWindow"
7
  import { $cursor } from "./LiveCursor"
8
  import { updateCursor } from "./LiveCursor"
9

10
  window.addEventListener('mousemove', updateCursor)
11

12
  // Cursor position is set to window center in the edge case has not
13
  // been updated yet by the time the window has finished loading.
14
  const backupController = new AbortController()
15
  window.addEventListener('load', e => {
16
    const [x, y] = getWindowCenter()
17
    $cursor.set({ cursorX: x, cursorY: y })
18
  }, { once: true, signal: backupController.signal })
19
  window.addEventListener('mousemove', () => backupController.abort(), { once: true })
20
</script>

So yes, the actual functionality of tracking mouse position is easy, the browser provides the tools. But the non-instantaneous execution of scripts means that I can’t immediately rely on the cursor position, and so I have to paper over edge case #1. This is relevant in the case of tooltips that are somehow activated when $cursor is still in its initial state!

Tooltips

This site has tooltips! I’m not 100% satisfied with the current implementation, but it’s pretty complete I think! It’s also gone through 3 design iterations so far, first on the previous version of my site and second on thronebutt!

You can see plenty of examples in my homepage, for example!

1
/** Sets tooltip position to given coordinates using $window, $cursor, and $globalTooltip */
2
export const setTooltipPosition = (x: number, y: number) => {
3
  const { windowWidth, windowHeight, scrollbarWidth } = $window.get()
4
  const { width, height } = getGlobalTooltip().getBoundingClientRect()
5
  const offset = (height / 2) + $globalTooltip.get().tooltipOffset
6

7
  $globalTooltip.setKey('tooltipX', min([
8
    windowWidth - width - scrollbarWidth,
9
    max([0, x - (width / 2)])
10
  ]) ?? 0)
11

12
  $globalTooltip.setKey('tooltipY', min([
13
    windowHeight - height,
14
    max([0, (
15
      (y - (height / 2)) +
16
      (y > windowHeight / 2 ? -1 : 1) * offset
17
    )])
18
  ]) ?? 0)
19
}

Mostly I wish I had more options for positioning the tooltip, at present it can either be above or below the cursor by the given offset. I have a couple places where placing it left or right of the cursor might be interesting!

My favorite part of this newest implementation of tooltips is MutationObserver:

1
/**
2
 * Tooltip content mutation observer: if it fires, then we refresh the
3
 * global tooltip content and position.
4
 */
5
const tooltipContentObserver = new MutationObserver(() => {
6
  refreshContent()
7
  const { cursorX, cursorY } = $cursor.get()
8
  setTooltipPosition(cursorX, cursorY)
9
})
10

11
// Mouseover
12
element.addEventListener('mouseover', e => {
13
  // Update global tooltip content
14
  refreshContent()
15

16
  // Observe tooltip content so we can mirror updates to the global tooltip
17
  tooltipContentObserver.observe(tooltipTemplate, {
18
    subtree: true,
19
    childList: true,
20
    attributes: true,
21
    characterData: true
22
  })
23

24
  // Subscribe to cursor position changes
25
  $globalTooltip.setKey('liveCursorHandle', $cursor.subscribe(
26
    ({ cursorX, cursorY }) => setTooltipPosition(cursorX, cursorY))
27
  )
28

29
  // Make visible, set offset
30
  $globalTooltip.setKey('visible', true)
31
  $globalTooltip.setKey('tooltipOffset', options.offset ?? 0)
32
})
33

34
// Mouseout
35
element.addEventListener('mouseout', e => {
36
  // Make not visible
37
  $globalTooltip.setKey('visible', false)
38

39
  // Unsubscribe from cursor position changes
40
  $globalTooltip.get().liveCursorHandle()
41

42
  // Flush+disconnect tooltip content observer
43
  tooltipContentObserver.disconnect()
44
  tooltipContentObserver.takeRecords()
45
})

Tooltips are defined inline using a hidden ‘template element’, which is copied to the ‘global tooltip’, the one that follows your mouse onscreen. The code highlighted above watches the contents of this template element for changes, updates the global tooltip content, and recalculates its position.
This way, unrelated code can update the template to update the tooltip, live!