feat: custom theming for code blocks

astro.config.mjs

@@ -1,8 +1,12 @@
 import { defineConfig } from 'astro/config';
 import starlight from "@astrojs/starlight";
+import { ExpressiveCodeTheme } from "@astrojs/starlight/expressive-code"
+import themeJson from "./src/styles/theme.json"
 
 import { navigation } from "./src/components/navigation.ts";
 
+const sakuraDreams = ExpressiveCodeTheme.fromJSONString(JSON.stringify(themeJson));
+
 export default defineConfig({
   site: "https://docs.nhcarrigan.com",
   integrations: [starlight({
@@ -64,5 +68,9 @@ export default defineConfig({
       "./src/styles/style.css",
       "./src/fonts/font-face.css"
     ],
-  })]
+    expressiveCode: {
+      themes: [sakuraDreams]
+    }
+  }),
+]
 });

src/content/docs/dev/environment.md

@@ -12,10 +12,7 @@ Naomi's local environment runs on the Arch Linux kernel.
 
 This is the current diagnostic report from `hyfetch`.
 
-<details>
+```bash title="hyfetch"
-  <summary>Expand Information</summary>
-
-```bash
 naomi@technomancer
 ------------------
 OS: Arch Linux x86_64
@@ -78,8 +75,6 @@ Editor: Emacs 30.1
 └─Nano: 8.3
 ```
 
-</details>
-
 ## 2. Packages
 
 Naomi uses the following packages.
@@ -91,7 +86,7 @@ These packages come from unofficial repositories, such as the AUR. This list is
 <details>
   <summary>Expand List</summary>
 
-```txt
+```txt frame="terminal" title="yay -Qm"
 1password-cli 2.30.3-1
 amor 15.08.3-11
 amor-debug 15.08.3-11
@@ -188,7 +183,7 @@ These are all of the packages Naomi has specifically installed. This list is gen
 <details>
   <summary>Expand List</summary>
 
-```txt
+```txt frame="terminal" title="yay -Qe"
 1password 8.10.60-27
 1password-cli 2.30.3-1
 7zip 24.09-3
@@ -469,7 +464,7 @@ zsh 5.9-5
 
 These packages have updates ignored, due to incompatibility issues. This list is generated with `grep "^IgnorePkg" /etc/pacman.conf`.
 
-```
+```ini frame="code" title="pacman.conf"
 IgnorePkg =
 ```
 
@@ -484,7 +479,7 @@ This list is quite large.
 <details>
   <summary>Expand List</summary>
 
-```txt
+```txt frame="terminal" title="yay -Q"
 1password 8.10.60-27
 1password-cli 2.30.3-1
 7zip 24.09-3
@@ -2132,7 +2127,7 @@ zziplib 0.13.78-1
 
 These are portable applications Naomi has installed locally.
 
-```txt
+```txt frame="terminal" title="ls ~/Applications"
 0ad-0.0.27-rc1-27645-alpha-2306180726-jammy-x86_64_cbded66ae29716e935227ef4cb299d37.AppImage
 Beyond-All-Reason-1.2988.0_9fb3f6a9297f1ec22d919932ae885bd3.AppImage
 CameoMod-playtest-20250216-x86_64_a41bc76b4c0745adb0dfb1d5c63cfcf0.AppImage
@@ -2160,11 +2155,9 @@ Naomi's specific application configurations are noted here for posterity.
 
 ### 3.1. `git`
 
-The global gitconfig goes in `~/.gitconfig`.
-
 The most important thing to note is that Naomi signs her commits with her SSH key, not a GPG key.
 
-```ini
+```ini frame="code" title="~/.gitconfig"
 [gpg]
     format = ssh
 [gpg "ssh"]
@@ -2187,11 +2180,9 @@ The most important thing to note is that Naomi signs her commits with her SSH ke
 
 ### 3.2. `zsh`
 
-The zsh config goes in `~/.zshrc`.
-
 Naomi uses Oh My ZSH instead of bash.
 
-```bash
+```bash frame="code" title="~/.zshrc"
 ####################
 # Dotfile for Oh My Zsh.
 # Installs on top of zsh,
@@ -2295,11 +2286,11 @@ eval "$(starship init zsh)"
 
 #### 3.2.1. `starship`
 
-Naomi uses `starship` to manage her customised shell prompt. This file goes in `~/.config/starship.toml`.
+Naomi uses `starship` to manage her customised shell prompt.
 
 Note that her config requires your terminal be using a Nerd Font, or the symbols will not render.
 
-```toml
+```toml frame="code" title="~/.config/starship.toml"
 cat ~/.config/starship.toml
 "$schema" = 'https://starship.rs/config-schema.json'
 
@@ -2399,11 +2390,9 @@ success_symbol = '✅'
 
 ### 3.3. `pacman`
 
-The pacman config goes in `/etc/pacman.conf`.
-
 Naomi's package manager configuration.
 
-```ini
+```ini frame="code" title="/etc/pacman.conf"
 [options]
 HoldPkg     = pacman glibc
 Architecture = auto
@@ -2429,9 +2418,7 @@ Server = https://download.sublimetext.com/arch/stable/x86_64
 
 ### 3.4 `sway`
 
-This is Naomi's `sway` config, which goes in `~/.config/sway/config`.
+```ini frame="code" title="~/.config/sway/config"
-
-```ini
 # Logo key. Use Mod1 for Alt.
 set $mod Mod4
 set $left Left
@@ -2620,9 +2607,7 @@ include /etc/sway/config.d/*
 
 #### 3.4.1. `swaylock`
 
-This goes in `~/.config/swaylock/config`.
+```ini frame="code" title="~/.config/swaylock/config"
-
-```ini
 # Background image
 image=/home/naomi/pics/background.png
 scaling=fill
@@ -2682,11 +2667,9 @@ font-size=24
 
 These manage Naomi's waybar instance.
 
-All of these files go in `~/.config/waybar`.
-
 #### `config.jsonc`
 
-```json
+```json frame="code" title="~/.config/waybar/config.jsonc"
 {
   "layer": "top",
   "position": "top",
@@ -2890,7 +2873,7 @@ All of these files go in `~/.config/waybar`.
 
 #### `style.css`
 
-```css
+```css frame="code" title="~/.config/waybar/style.css"
 * {
   border: none;
   font-family: "OpenDyslexicM Nerd Font";
@@ -2963,12 +2946,12 @@ tooltip {
 
 #### Scripts
 
-There are a few scripts necessary for waybar to work. These all go in `~/.config/waybar/scripts`:
+There are a few scripts necessary for waybar to work.
 
 <details>
   <summary><code>disk-use.sh</code></summary>
 
-```sh
+```sh frame="code" title="~/.config/waybar/scripts/disk-use.sh"
 #!/usr/bin/env sh
 
 home_use=$(df -h /home | tail -1);
@@ -2991,7 +2974,7 @@ echo "{\"text\":\"${text}\", \"tooltip\":\"${tooltip}\"}";
 <details>
   <summary><code>cpuinfo.sh</code></summary>
 
-```sh
+```sh frame="code" title="~/.config/waybar/scripts/cpuinfo.sh"
 #!/usr/bin/env sh
 
 model=$(cat /proc/cpuinfo | grep 'model name' | head -n 1 | awk -F ': ' '{print $2}')
@@ -3021,7 +3004,7 @@ echo "{\"text\":\"${thermo} ${temp}°C\", \"tooltip\":\"${model}\n${thermo} Temp
 <details>
   <summary><code>dunst.sh</code></summary>
 
-```sh
+```sh frame="code" title="~/.config/waybar/scripts/dunst.sh"
 #!/bin/bash
 
 if dunstctl is-paused | grep -q "true"; then
@@ -3036,7 +3019,7 @@ fi
 <details>
   <summary><code>weather.py</code></summary>
 
-```py
+```py frame="code" title="~/.config/waybar/scripts/weather.py"
 #!/usr/bin/env python
 
 import subprocess
@@ -3121,18 +3104,14 @@ print(json.dumps(out_data))
 
 ### 3.6 Ghostty
 
-This goes in `~/.config/ghostty/config` (without a file extension).
+```ini frame="code" title="~/.config/ghostty/config"
-
-```ini
 font-family="OpenDyslexicM Nerd Font"
 theme="SakuraDreams"
 background-opacity=1
 gtk-titlebar=false
 ```
 
-And this goes in `~/.config/ghostty/themes/SakuraDreams`.
+```ini frame="code" title="~/.config/ghostty/themes/SakuraDreams"
-
-```ini
 palette = 0=#fff0f5
 palette = 1=#ff1493
 palette = 2=#ff69b4
@@ -3160,9 +3139,7 @@ cursor-text = #fff0f5
 
 ### 3.7 Discord
 
-This file goes in `~/.config/discord/settings.json`.
+```json frame="code" title="~/.config/discord/settings.json"
-
-```json
 {
   "chromiumSwitches": {},
   "IS_MAXIMIZED": false,
@@ -3181,9 +3158,9 @@ This file goes in `~/.config/discord/settings.json`.
 
 ### 3.8 Hyfetch
 
-There are two config files here. The first is for `hyfetch` itself, and goes in `~/.config/hyfetch.json`.
+There are two config files here.
 
-```json
+```json frame="code" title="~/.config/hyfetch.json"
 {
   "preset": "transfeminine",
   "mode": "rgb",
@@ -3203,9 +3180,7 @@ There are two config files here. The first is for `hyfetch` itself, and goes in
 }
 ```
 
-The second goes in `~/.config/neofetch/config.conf`.
+```ini frame="code" title="~/.config/neofetch/config.conf"
-
-```ini
 home_disk_info() {
     df -h | grep '/home$' | awk '{printf "%s: %s/%s (%s)", $NF, $3, $2, $5}'
 }
@@ -3335,9 +3310,7 @@ stdout="off"
 
 ### 3.9 Wofi
 
-This file goes in `~/.config/wofi/style.css`.
+```css frame="code" title="~/.config/wofi/style.css"
-
-```css
 #window {
   background-color: rgba(219, 112, 147, 0.75);
   border-radius: 1rem;
@@ -3384,9 +3357,9 @@ This file goes in `~/.config/wofi/style.css`.
 
 ### 3.10 Dunst
 
-`dunst` manages Naomi's system notifications, and (like many other aspects of her environment) has been highly customised. This file goes in `~/.config/dunst/dunstrc`.
+`dunst` manages Naomi's system notifications, and (like many other aspects of her environment) has been highly customised.
 
-```toml
+```toml frame="code" title="~/.config/dunst/dunstrc"
 [global]
   follow=mouse
   width=(0, 750)
@@ -3423,9 +3396,9 @@ Naomi uses Pulsar as her current code editor.
 
 #### 4.1.1. Settings
 
-This is Naomi's configuration. It goes in `~/.pulsar/config.cson`.
+This is Naomi's configuration.
 
-```cson
+```cson frame="code" title="~/.pulsar/config.cson"
 "*":
   core:
     autoHideMenuBar: true
@@ -3466,7 +3439,7 @@ This is Naomi's configuration. It goes in `~/.pulsar/config.cson`.
 
 Naomi uses the following extensions sourced from the Pulsar marketplace. This list does not include the core extensions bundled with the editor.
 
-```txt
+```txt frame="terminal" title="Pulsar Extensions"
 pulsar-discord
 ```
 
@@ -3480,9 +3453,7 @@ Naomi uses `emacs` for her terminal editing.
 
 #### 4.2.1. Config
 
-This goes in `~/.config/emacs/init.el`.
+```lisp frame="code" title="~/.config/emacs/init.el"
-
-```lisp
 ;; Initialize package system
 (require 'package)
 (setq package-archives '(("melpa" . "https://melpa.org/packages/")
@@ -3659,9 +3630,7 @@ This goes in `~/.config/emacs/init.el`.
 
 #### 4.2.2. Theme
 
-This goes in `~/.config/emacs/themes/sakura-dreams-theme.el`.
+```lisp frame="code" title="~/.config/emacs/themes/sakura-dreams-theme.el"
-
-```lisp
 (deftheme sakura-dreams
   "A light pink Emacs theme inspired by cherry blossoms.")
 

src/styles/theme.json

@@ -0,0 +1,419 @@
+{
+	"$schema": "vscode://schemas/color-theme",
+	"type": "light",
+	"colors": {
+		"activityBar.background": "#ffd6e0",
+		"activityBar.foreground": "#d87093",
+		"activityBarBadge.background": "#ff69b4",
+		"activityBarBadge.foreground": "#ffffff",
+		"button.background": "#ff69b4",
+		"button.foreground": "#ffffff",
+		"dropdown.background": "#fff0f5",
+		"dropdown.foreground": "#d87093",
+		"editor.background": "#ffefef",
+		"editor.foreground": "#d87093",
+		"editor.lineHighlightBackground": "#1073cf2d",
+		"editor.lineHighlightBorder": "#9fced11f",
+		"editor.selectionBackground": "#ffb6c1",
+		"editor.selectionHighlightBackground": "#ffb6c180",
+		"editor.wordHighlightBackground": "#ffb6c180",
+		"editorCursor.foreground": "#ff69b4",
+		"editorGroupHeader.tabsBackground": "#ffe4e8",
+		"editorWhitespace.foreground": "#ffe4e8",
+		"focusBorder": "#ff69b4",
+		"input.background": "#fff0f5",
+		"input.foreground": "#d87093",
+		"input.placeholderForeground": "#ff77a8",
+		"list.activeSelectionBackground": "#ffefef",
+		"list.activeSelectionForeground": "#d87093",
+		"list.hoverBackground": "#fff0f5",
+		"list.hoverForeground": "#d87093",
+		"sideBar.background": "#fff0f5",
+		"sideBar.foreground": "#d87093",
+		"sideBarTitle.foreground": "#ff69b4",
+		"statusBar.background": "#ffd6e0",
+		"statusBar.foreground": "#d87093",
+		"statusBar.noFolderBackground": "#ffefef",
+		"tab.activeBackground": "#ffefef",
+		"tab.activeForeground": "#d87093",
+		"tab.inactiveBackground": "#ffd6e0",
+		"tab.inactiveForeground": "#ff77a8",
+		"terminal.ansiBlack": "#ffe4e8",
+		"terminal.ansiBlue": "#db7093",
+		"terminal.ansiBrightBlack": "#ffefef",
+		"terminal.ansiBrightBlue": "#f08080",
+		"terminal.ansiBrightCyan": "#ffc0cb",
+		"terminal.ansiBrightGreen": "#ff77a8",
+		"terminal.ansiBrightMagenta": "#ff9aac",
+		"terminal.ansiBrightRed": "#ff0066",
+		"terminal.ansiBrightWhite": "#fff5f7",
+		"terminal.ansiBrightYellow": "#ffa6c9",
+		"terminal.ansiCyan": "#ffafc5",
+		"terminal.ansiGreen": "#ff69b4",
+		"terminal.ansiMagenta": "#ff85a2",
+		"terminal.ansiRed": "#ff1493",
+		"terminal.ansiWhite": "#ffd1dc",
+		"terminal.ansiYellow": "#ffb6c1",
+		"terminal.background": "#ffefef",
+		"terminal.foreground": "#d87093",
+		"titleBar.activeBackground": "#ffd6e0",
+    "titleBar.activeForeground": "#d87093"
+	},
+	"tokenColors": [
+		{
+			"scope": [
+				"comment",
+				"punctuation.definition.comment"
+			],
+			"settings": {
+				"foreground": "#E5A3B5",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": [
+				"string",
+				"string.quoted.single",
+				"string.quoted.double",
+				"string.quoted.triple",
+				"string.template",
+				"constant.character",
+				"constant.other.symbol"
+			],
+			"settings": {
+				"foreground": "#FF69B4"
+			}
+		},
+		{
+			"scope": [
+				"constant.numeric",
+				"constant.language",
+				"constant.character.escape",
+				"constant.other",
+				"support.constant"
+			],
+			"settings": {
+				"foreground": "#C96385"
+			}
+		},
+		{
+			"scope": [
+				"variable",
+				"variable.other",
+				"variable.parameter",
+				"variable.language",
+				"variable.object.property"
+			],
+			"settings": {
+				"foreground": "#D87093"
+			}
+		},
+		{
+			"scope": [
+				"keyword",
+				"keyword.control",
+				"keyword.operator",
+				"keyword.other",
+				"storage.type",
+				"storage.modifier",
+				"punctuation.decorator"
+			],
+			"settings": {
+				"foreground": "#E35A8F"
+			}
+		},
+		{
+			"scope": [
+				"entity.name.function",
+				"entity.name.method",
+				"support.function",
+				"meta.function-call",
+				"meta.method-call",
+				"meta.function.dart"
+			],
+			"settings": {
+				"foreground": "#D45A88"
+			}
+		},
+		{
+			"scope": [
+				"entity.name.type",
+				"entity.name.class",
+				"entity.name.struct",
+				"entity.name.enum",
+				"entity.name.union",
+				"entity.name.trait",
+				"entity.name.interface",
+				"support.class",
+				"support.type",
+				"meta.return-type"
+			],
+			"settings": {
+				"foreground": "#FF77A8",
+				"fontStyle": "bold"
+			}
+		},
+		{
+			"scope": [
+				"meta.decorator",
+				"meta.annotation",
+				"punctuation.definition.annotation"
+			],
+			"settings": {
+				"foreground": "#C96385"
+			}
+		},
+		{
+			"scope": [
+				"entity.name.tag",
+				"punctuation.definition.tag"
+			],
+			"settings": {
+				"foreground": "#E35A8F"
+			}
+		},
+		{
+			"scope": [
+				"entity.other.attribute-name",
+				"entity.other.attribute-name.html",
+				"entity.other.attribute-name.css",
+				"support.type.property-name.css",
+				"entity.other.attribute-name.class"
+			],
+			"settings": {
+				"foreground": "#FF77A8"
+			}
+		},
+		{
+			"scope": [
+				"support.type.primitive",
+				"support.type.builtin",
+				"keyword.type",
+				"storage.type.primitive",
+				"storage.type.built-in",
+				"support.type.primitive.dart"
+			],
+			"settings": {
+				"foreground": "#FF77A8"
+			}
+		},
+		{
+			"scope": [
+				"string.regexp",
+				"constant.character.escape.regex"
+			],
+			"settings": {
+				"foreground": "#FF69B4"
+			}
+		},
+		{
+			"scope": [
+				"markup.heading",
+				"entity.name.section"
+			],
+			"settings": {
+				"foreground": "#D45A88",
+				"fontStyle": "bold"
+			}
+		},
+		{
+			"scope": [
+				"markup.bold"
+			],
+			"settings": {
+				"fontStyle": "bold"
+			}
+		},
+		{
+			"scope": [
+				"markup.italic"
+			],
+			"settings": {
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": [
+				"markup.inline.raw",
+				"markup.fenced_code",
+				"markup.raw"
+			],
+			"settings": {
+				"foreground": "#FF69B4"
+			}
+		},
+		{
+			"scope": [
+				"support.type.property-name.json",
+				"support.type.property-name.jsonc"
+			],
+			"settings": {
+				"foreground": "#FF77A8"
+			}
+		},
+		{
+			"scope": [
+				"keyword.operator.expression",
+				"keyword.operator.new",
+				"keyword.operator.optional",
+				"keyword.operator.comparison",
+				"keyword.operator.arithmetic",
+				"keyword.operator.assignment",
+				"keyword.operator.logical"
+			],
+			"settings": {
+				"foreground": "#E35A8F"
+			}
+		},
+		{
+			"scope": [
+				"meta.embedded",
+				"source.groovy.embedded",
+				"meta.template.expression"
+			],
+			"settings": {
+				"foreground": "#D87093"
+			}
+		},
+		{
+			"scope": [
+				"meta.object-literal.key",
+				"variable.object.property",
+				"variable.other.property",
+				"variable.other.object.property"
+			],
+			"settings": {
+				"foreground": "#FF77A8"
+			}
+		},
+		{
+			"scope": [
+				"support.variable.property",
+				"support.variable.object.process",
+				"support.variable.object.node"
+			],
+			"settings": {
+				"foreground": "#FF77A8"
+			}
+		},
+		{
+			"scope": [
+				"source.rust storage.type.rust",
+				"source.rust entity.name.type.rust",
+				"source.rust entity.name.type.struct.rust"
+			],
+			"settings": {
+				"foreground": "#FF77A8"
+			}
+		},
+		{
+			"scope": [
+				"source.rust keyword.operator",
+				"source.rust keyword.operator.arithmetic",
+				"source.rust keyword.operator.logical"
+			],
+			"settings": {
+				"foreground": "#E35A8F"
+			}
+		},
+		{
+			"scope": [
+				"source.python support.type.python",
+				"source.python support.function.builtin.python"
+			],
+			"settings": {
+				"foreground": "#D45A88"
+			}
+		},
+		{
+			"scope": [
+				"source.cs entity.name.type.class.cs",
+				"source.cs storage.type.cs"
+			],
+			"settings": {
+				"foreground": "#FF77A8"
+			}
+		},
+		{
+			"scope": [
+				"source.dart support.class.dart",
+				"source.dart support.type.dart"
+			],
+			"settings": {
+				"foreground": "#FF77A8"
+			}
+		},
+		{
+			"scope": [
+				"source.prisma keyword.operator",
+				"source.prisma constant.language",
+				"source.prisma keyword.type"
+			],
+			"settings": {
+				"foreground": "#E35A8F"
+			}
+		},
+		{
+			"scope": [
+				"source.graphql support.type",
+				"source.graphql constant.character"
+			],
+			"settings": {
+				"foreground": "#FF77A8"
+			}
+		},
+		{
+			"scope": [
+				"source.sql keyword.other",
+				"source.sql storage.type"
+			],
+			"settings": {
+				"foreground": "#E35A8F"
+			}
+		},
+		{
+			"scope": [
+				"meta.jsx.children",
+				"meta.embedded.block.tsx",
+				"meta.embedded.block.jsx"
+			],
+			"settings": {
+				"foreground": "#D87093"
+			}
+		},
+		{
+			"scope": [
+				"meta.decorator.ts",
+				"meta.decorator.tsx",
+				"meta.decorator.angular"
+			],
+			"settings": {
+				"foreground": "#C96385"
+			}
+		},
+		{
+			"scope": "token.info-token",
+			"settings": {
+				"foreground": "#316BCD"
+			}
+		},
+		{
+			"scope": "token.warn-token",
+			"settings": {
+				"foreground": "#CD9731"
+			}
+		},
+		{
+			"scope": "token.error-token",
+			"settings": {
+				"foreground": "#CD3131"
+			}
+		},
+		{
+			"scope": "token.debug-token",
+			"settings": {
+				"foreground": "#800080"
+			}
+		}
+	]
+}