Compare commits

...

2 Commits

Author SHA1 Message Date
dd5fa6f7a2
feat: custom theming for code blocks
Some checks failed
Code Analysis / SonarQube (push) Failing after 1m26s
Node.js CI / Lint and Test (push) Successful in 1m30s
2025-03-05 16:41:11 -08:00
38149e092e
feat: use codeblock titles for environment 2025-03-05 16:31:37 -08:00
3 changed files with 462 additions and 66 deletions

View File

@ -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]
}
}),
]
});

View File

@ -12,10 +12,7 @@ Naomi's local environment runs on the Arch Linux kernel.
This is the current diagnostic report from `hyfetch`.
<details>
<summary>Expand Information</summary>
```bash
```bash title="hyfetch"
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
```ini frame="code" title="~/.config/sway/config"
# 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
```ini frame="code" title="~/.config/swaylock/config"
# 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
```ini frame="code" title="~/.config/ghostty/config"
font-family="OpenDyslexicM Nerd Font"
theme="SakuraDreams"
background-opacity=1
gtk-titlebar=false
```
And this goes in `~/.config/ghostty/themes/SakuraDreams`.
```ini
```ini frame="code" title="~/.config/ghostty/themes/SakuraDreams"
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
```json frame="code" title="~/.config/discord/settings.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
```ini frame="code" title="~/.config/neofetch/config.conf"
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
```css frame="code" title="~/.config/wofi/style.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
```lisp frame="code" title="~/.config/emacs/init.el"
;; 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
```lisp frame="code" title="~/.config/emacs/themes/sakura-dreams-theme.el"
(deftheme sakura-dreams
"A light pink Emacs theme inspired by cherry blossoms.")

419
src/styles/theme.json Normal file
View File

@ -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"
}
}
]
}