Yejun Su

Modus themes

Fri, 13 Feb 2026 11:19:00 +0800

The Modus themes is created by Prot. I love its aesthetic and use it almost everywhere.

Emacs

The original modus-themes package.

Zed

The modus-themes extension created by Vitaly Slobodin.

Ghostty

The config is transformed from the DIY Range of color with terminal emulators section.

background = #000000
foreground = #ffffff
palette = 0=#000000
palette = 1=#ff8059
palette = 2=#44bc44
palette = 3=#d0bc00
palette = 4=#2fafff
palette = 5=#feacd0
palette = 6=#00d3d0
palette = 7=#bfbfbf
palette = 8=#595959
palette = 9=#ef8b50
palette = 10=#70b900
palette = 11=#c0c530
palette = 12=#79a8ff
palette = 13=#b6a0ff
palette = 14=#6ae4b9
palette = 15=#ffffff

Here’s the Nix configuration using home-manager:

programs.ghostty = {
  # ...
  themes = {
    modus-vivendi = {
      background = "#000000";
      foreground = "#ffffff";
      palette = [
        "0=#000000"
        "1=#ff8059"
        "2=#44bc44"
        "3=#d0bc00"
        "4=#2fafff"
        "5=#feacd0"
        "6=#00d3d0"
        "7=#bfbfbf"
        "8=#595959"
        "9=#ef8b50"
        "10=#70b900"
        "11=#c0c530"
        "12=#79a8ff"
        "13=#b6a0ff"
        "14=#6ae4b9"
        "15=#ffffff"
      ];
    };
  };
};

This website

I created the hugo-modus theme for this blog.

Current Zen Browser Tab

Mon, 02 Feb 2026 01:20:00 +0800

The Automation Task block in Alfred workflow doesn’t support Zen (based on Firefox), I asked Gemini to write an AppleScript as a workaround:

tell application "Zen" to activate

tell application "System Events"
    -- Target the Zen process
    tell process "Zen"
        -- 1. Get the Window Title
        if (count of windows) > 0 then
            set theTitle to name of front window
        else
            set theTitle to "No Window Found"
        end if

        -- 2. Get the URL (Simulate Cmd+L to highlight, Cmd+C to copy)
        keystroke "l" using command down
        delay 0.2 -- Short delay to allow focus
        keystroke "c" using command down
        delay 0.2 -- Short delay to allow copy

        -- 3. Deactivate (Hide) Zen
        set visible to false
    end tell
end tell

-- 4. Retrieve URL from clipboard
set theURL to the clipboard

-- 5. Return Title and URL separated by a Tab
return theTitle & tab & theURL

The output is Title\tURL, exactly the same as the Output Format of the “Current Chromium Browser Tab” automation task.

Go module index

Wed, 31 Dec 2025 18:59:00 +0800

I self-hosted Miniflux and want to create new feed through command line, so I vibe coded a Go project.

After pushing to GitHub, go install keeps failing:

$ go install github.com/goofansu/miniflux-cli/cmd/miniflux-cli@latest

go: downloading github.com/goofansu/miniflux-cli v0.0.0-20251231103549-8410b6d43c7b
go: github.com/goofansu/miniflux-cli/cmd/miniflux-cli@latest: github.com/goofansu/[email protected]: verifying module: github.com/goofansu/[email protected]: reading https://sum.golang.org/lookup/github.com/goofansu/[email protected]: 404 Not Found
        server response:
        not found: github.com/goofansu/[email protected]: invalid version: git ls-remote -q https://github.com/goofansu/miniflux-cli in /tmp/gopath/pkg/mod/cache/vcs/abd71c376a041e3c0a394d0d34d9b24cedb4a6426ec6abe8ef063bde71093ddd: exit status 128:
                fatal: could not read Username for 'https://github.com': terminal prompts disabled
        Confirm the import path was entered correctly.
        If this is a private repository, see https://golang.org/doc/faq#git_https for additional information.

The solution is to visit https://proxy.golang.org/github.com/goofansu/miniflux-cli/@latest, and then the URL works: [email protected]">https://sum.golang.org/lookup/github.com/goofansu/[email protected].

Reference: https://proxy.golang.org/

Claude Code thinking mode

Mon, 15 Dec 2025 12:27:00 +0800

In recent versions, Claude Code has changed how thinking mode works compared to the version in Claude Code in Action.

From https://github.com/anthropics/claude-code/issues/9072#issuecomment-3648376741:

Only ultrathink is the special keyword that enables thinking on a per-request basis. Phrases like “think”, “think hard”, “think more” don’t have any impact on the allocated thinking token budget.
If you need fine-grained control over the token budget (vs. just allocating all 31,999 tokens to the thinking budget), you can set the MAX_THINKING_TOKENS environment variable. This setting takes priority over ultrathink, so if you set a lower MAX_THINKING_TOKENS threshold, ultrathink doesn’t override it.

From https://code.claude.com/docs/en/common-workflows#use-extended-thinking-thinking-mode:

Sonnet 4.5 and Opus 4.5 have thinking enabled by default. All other models have thinking disabled by default.
When thinking is enabled (via /config or ultrathink), Claude can use up to 31,999 tokens from your output budget for internal reasoning.
Note that ultrathink both allocates the thinking budget AND semantically signals to Claude to reason more thoroughly, which may result in deeper thinking than necessary for your task.

My 4K monitor setup

Wed, 12 Nov 2025 17:17:00 +0800

I recently purchased an LG 27UP850K monitor with a 4K resolution (3840x2160). At its native resolution, everything is tiny. When scaled to the 1080p resolution (1920x1080), it displays the same content as a 1080p screen but with much sharper clarity. Then I scaled to the 2K resoluition (2560x1440), it warns “Using a scaled resolution may affect performance”. I finally switched back to the native 4K resolution because it displays much more content, which was my main reason for buying this monitor.

I adjusted the settings for the apps I use most often. Here’s a summary:

Google Chrome: Settings -> Appearance -> Set “Page zoom” to 150%.
Slack: Preferences -> Accessibility -> Set “Zoom” to 150%.

Emacs: Create a “large” fontaine preset.

(use-package fontaine
  :custom
  (fontaine-presets
   '((regular
      :default-height 160)
     (large
      :default-height 240)
     (t
      :default-family "Aporetic Sans Mono"
      :default-weight regular
      :default-slant normal
      :default-width normal
      :default-height 100
      :fixed-pitch-family "Aporetic Sans Mono"
      :variable-pitch-family "Aporetic Serif")
     ))
  :config
  (fontaine-set-preset (or (fontaine-restore-latest-preset) 'regular)))

Zed: Create a “large” profile and set up the font sizes.

{
  "profiles": {
    "large": {
      "ui_font_size": 24,
      "buffer_font_size": 24,
      "agent_buffer_font_size": 24
    }
  }
}

Ghostty: By default, the new windows and tabs will inherit the font size of the previously focused window. So I just set font size to 24px using a keybinding in any window, and create new windows and tabs from that.
```
keybind = ctrl+shift+l=set_font_size:24
```

Update on 2025-11-15

I’ve been using the above settings for three days, and the biggest problem is the overall user interface appearing very small. I switched the display resolution to 2K scaling, and everything is readable now. The warning mentioned at the beginning is now a thing of the past, as explained in “4K Scaling” Is Not a Problem on Modern Macs:

The way around this is to have macOS “scale” the display to a more ideal lower resolution, but choosing that option in display preferences presents a warning: “Using a scaled resolution may affect performance.” What the OS does here is to scale up the chosen resolution to double height and double width (4x the pixels displayed) and then scale them back down to the display’s native resolution — 60 times per second. Indeed, this can be too much for certain older systems out there. But, as you will see, modern Macs should be able to handle the task just fine.

Update on 2025-11-19

I found the text on the 4K monitor is really sharp, so that I could easily read 12px font when scaled down to 1080p, whereas I previously needed 16px on a regular 1080p monitor. So I configured editors and the terminal to use 12px font, and set the Google Chrome’s page zoom to 75% to read more content.

Update on 2025-12-14

I use 16px font in editor and 100% page zoom in Google Chrome, it means the same configuration as before, but my eyes are very comfortable so that I could work in front of the monitor for longer periods of time without eye strain.

Kamal

Sat, 18 Oct 2025 12:00:00 +0800

Deploy Rails applications

I recently deployed a Rails application to Hetzner and AWS China¹. Deploying on Hetzner is simple, requiring just two steps: launching a server and deploying. In contrast, deploying on AWS China involves extra steps because Docker Hub is not accessible from servers located in China.

The steps are:

Launch an Amazon EC2 instance
Create Amazon ECR repositories to store Docker Hub images
Create an IAM user and assign only the “AmazonEC2ContainerRegistryFullAccess” permission
Push Docker Hub images to Amazon ECR on local machine
Pull images from Amazon ECR on Amazon EC2
Deploy

Push Docker Hub images to Amazon ECR on local machine

aws configure
aws ecr get-login-password | docker login --username AWS --password-stdin <aws-ecr-domain>

Push basecamp/kamal-proxy image

docker pull basecamp/kamal-proxy:v0.9.0 --platform linux/amd64
docker tag basecamp/kamal-proxy:v0.9.0 <aws-ecr-domain>/basecamp/kamal-proxy:v0.9.0
docker push <aws-ecr-domain>/basecamp/kamal-proxy:v0.9.0

Push pgvector/pgvector image

docker pull pgvector/pgvector:pg17 --platform linux/amd64
docker tag pgvector/pgvector:pg17 <aws-ecr-domain>/pgvector/pgvector:pg17
docker push <aws-ecr-domain>/pgvector/pgvector:pg17

Pull images from Amazon ECR on Amazon EC2

Install Docker

sudo apt update
sudo apt install -y docker.io
sudo usermod -aG docker $USER

Install AWS CLI

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
sudo apt install -y unzip
unzip awscliv2.zip
sudo ./aws/install

aws configure
aws ecr get-login-password | docker login --username AWS --password-stdin <aws-ecr-domain>

Pull basecamp/kamal-proxy image

docker pull <aws-ecr-domain>/basecamp/kamal-proxy:v0.9.0
docker tag <aws-ecr-domain>/basecamp/kamal-proxy:v0.9.0 basecamp/kamal-proxy:v0.9.0

Pull pgvector/pgvector image

docker pull <aws-ecr-domain>/pgvector/pgvector:pg17

Deploy

Run kamal setup the first time to setup everything.
Run kamal deploy for subsequent deployments.

Self-hosting

Since this pr, you can use kamal-proxy to forward requests to accessories, it’s time for self-hosting!

For example, I use Atuin² for shell history, and it supports syncing shell history through a sync server. Thankfully, the sync server can be self-hosted using Docker, and there is a Docker Compose example. The task is to transform the example to a Kamal configuration:

service: atuin
image: atuin
accessories:
  db:
    image: postgres:14
    host: &host hetzner
    env:
      clear:
        POSTGRES_DB: atuin
        POSTGRES_USER: atuin
      secret:
        - POSTGRES_PASSWORD
    directories:
      - ./data:/var/lib/postgresql/data/
  server:
    image: ghcr.io/atuinsh/atuin:v18.10.0
    host: *host
    cmd: server start
    env:
      clear:
        ATUIN_HOST: 0.0.0.0
        ATUIN_OPEN_REGISTRATION: false
        RUST_LOG: info,atuin_server=debug
      secret:
        - ATUIN_DB_URI
    proxy:
      host: atuin.yejun.dev
      app_port: 8888
      ssl: true
      healthcheck:
        interval: 1
        timeout: 1
        path: "/"

The highlights adds the proxy configuration for the server accessory, telling kamal-proxy to forwards the HTTP requests to the server container’s app_port.

Tips

kamal-proxy

You could ssh into the host with a running kamal-proxy, and execute the following command to see the proxied services:

docker exec kamal-proxy kamal-proxy list

For example, let’s see the Atuin service:

$ docker exec kamal-proxy kamal-proxy list
Service          Host             Path  Target             State    TLS
atuin-server     atuin.yejun.dev  /     41fda841ea5c:8888  running  yes

$ docker ps --filter "name=atuin*" --format "table {{.ID}}\t{{.Image}}\t{{.Names}}"
CONTAINER ID   IMAGE                            NAMES
41fda841ea5c   ghcr.io/atuinsh/atuin:v18.10.0   atuin-server
551f7d61d1ac   postgres:14                      atuin-db

The gist is extracted from my application and for your reference. ↩︎
Atuin is a command-line tool to sync, search and backup shell history. ↩︎

Accept per-project flake config

Wed, 08 Oct 2025 23:05:00 +0800

A project using devenv prompts: do you want to allow configuration setting 'extra-substituters' to be set to 'https://devenv.cachix.org' (y/N)?., but I cannot input y in the stdin. It happens in fish shell, and there is an issue: https://github.com/direnv/direnv/issues/1022.

The solution is to set accept-flake-config: true in the global nix setting (via):

{
  nix = {
    settings = {
      experimental-features = "nix-command flakes";
      accept-flake-config = true;
    };
  };
}

Emacs $PATH

Mon, 08 Sep 2025 22:29:00 +0800

The following configuration enables Emacs to inherit the correct $PATH from the shell in all cases:

M-x describe-variable: exec-path
M-x eval-expression: (getenv "PATH")
M-x shell-command: echo $PATH
M-x compile: echo $PATH

My shell is located at /run/current-system/sw/bin/fish, so the configuration is:

(use-package exec-path-from-shell
  :pin nongnu
  :if (memq window-system '(mac ns x))
  :init
  (setq shell-file-name "/run/current-system/sw/bin/fish")
  :config
  (dolist (var '("__fish_nixos_env_preinit_sourced"
                 "__NIX_DARWIN_SET_ENVIRONMENT_DONE"
                 "__HM_SESS_VARS_SOURCED"))
    (add-to-list 'exec-path-from-shell-variables var))
  (exec-path-from-shell-initialize))

(use-package envrc
  :pin melpa
  :hook (after-init . envrc-global-mode))

shell-file-name specifies the shell for commands like shell-command and start-process, it uses your system’s default shell by default.
exec-path-from-shell-shell-name specifies the shell that exec-path-from-shell uses to retrieve the $PATH environment variable, it falls back to shell-file-name.
exec-path-from-shell-variables is recommended to set if you use Direnv + HomeManager + Fish (via).

Install @anthropic-ai/claude-code using Nix npm

Sun, 10 Aug 2025 00:05:00 +0800

I was installing claude-code via Nix, but new releases take 2-3 days to appear in the nixpkgs-unstable branch. I want to use npm directly instead. By default, npm installs global packages to the immutable Nix store, causing npm install -g fails.

Based on this article, the solution is straightforward: configure npm to use a writable prefix directory. The required Nix configuration is (commit):

home.file = {
  ".npmrc".text = "prefix=~/.npm-global";
};

home.sessionPath = [
  "$HOME/.npm-global/bin"
];

Now I can install claude-code using npm:

npm install -g @anthropic-ai/claude-code

The version today is:

$ claude --version
1.0.72 (Claude Code)

Emacs + Hugo Blogging Refactored

Wed, 30 Jul 2025 22:53:00 +0800

Emacs + Hugo Blogging Refactored

I discovered this link in my Vercel Analytics. It refers my post Blogging using Denote and Hugo, which mentions the author’s Blogging using Emacs Org Roam and Hugo.

I switched to Denote for one reason: simplicity. What I actually need is just a file name convention.

[…]

Then why am I even using such a package you might ask. The answer is the tagging mechanism, and the dired goodies it provides. With those, a flat file structure is now more useful to me than any GUI-based note-taking system.

Denote truly is straightforward and allows you to write notes immediately without any additional setup. I’m really grateful to its creator Protesilaos Stavrou (also known as Prot). I learned a lot about Emacs and philosophy from his code, posts and videos. It’s great to know his videos are mirrored on the Internet Archive.

Agentic coding

Sat, 26 Jul 2025 11:05:00 +0800

My workflow is based on devenv and git worktree. In this post, I’ll use a Rails application as an example.

Context engineering

Project context

I maintain project context using git worktree. In this way, it’s easy to develop across multiple branches while preserving context for code agents.

cd my_app
git worktree add ../my_app-feature-xyz -b feature/xyz develop
cd ../my_app-feature-xyz
direnv allow
bin/dev

Tip: A fish-shell alias for quickly switching between git worktree directories:

function gcd --description 'Fuzzy find and cd the selected git worktree'
    git worktree list --porcelain | grep '^worktree ' | sed 's/^worktree //' | fzf | awk '{print $1}' | read -l result; and cd $result
end

Log context

Truncate log

Always truncate the development.log file¹ when starting the server to ensure agents have a clear and relevant log context.

#!/usr/bin/env sh

truncate -s 0 log/development.log
exec bundle exec foreman start -f Procfile.dev "$@"

Browser context

Providing agents with direct browser access would be extremely beneficial, as they can debug web pages by looking into console logs. Install playwright or chrome-devtools and ask agents to use it, your agent would appreciate it.

claude mcp add playwright npx @playwright/mcp@latest
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest # require Node >= 22.12.0

And run in dangerous mode:

claude --dangerously-skip-permissions

Example:

> Use playwright to check http://localhost:3000, I'll sign in the account for you.

⏺ Perfect! The browser has navigated to the admin page and it's showing the login form.

  The page is ready for you to sign in. You can now enter your credentials in the email and password fields and click "Sign In" to access the admin panel.

> I've signed in, debugging the problem.

...omitted...

🎯 Mission Accomplished!

  Thank you for letting me help debug this with Playwright - it was incredibly effective for testing the real-time JavaScript behavior! 🚀

Code review

I use the Zed editor to review the code changed by agents as it supports multibuffers which allows me to edit the git diff results. Additionally, it’s really fast and I enjoy using it in daily work.

Since I use Emacs as my main editor, switching between Zed and Emacs is necessary, it requires a single piece of code:

Solving bugs

Code logic bugs

I often solve code logic bugs in three steps:

Asking AI questions using plan mode with Claude Opus 4.5

Prompt:

<describe the bug with as much as context I know>

It’ll search the code base and generally could find the root cause.

Asking AI to write unit tests to confirm the bug.

Prompt:

Write unit tests to confirm your assumption.

Asking AI to solve the bug

Switch to build mode, and uses Claude Sonnet 4.5 to fix the bug.

Code review

Create an issue

Use gh-issue-sync skill to create an issue, which is used by QA and code reviewer to understand the changes.

Prompt:

Use gh-issue-sync skill to create an issue in the form of:

## Problem
Summarize the problem.

## Solution
Your findings and changes.

## Verify
Minimal steps for QA to verify the solution.

## Claude code prompt digest
Write it using the details disclosure element.

Create a pull request

Prompt:

- Jira section with link to jira ticket
- Staging section (asking user)
- Summary - Brief description of the bug and fix
- Changes - Bullet list of technical changes made
- Technical Details - In-depth explanation with root cause, example, and solution
- QA Verification - Detailed test cases with numbered steps and expected results
- Closes #ISSUE_NUMBER - Link to the related issue if exists (omit if no issue)

Context switching is required

The ability to keep attention and fast context switching is required.

Feedback for verification

Unit tests can help AI changing code more confidently.

Use pi coding agent

Pi coding agent is a coding agent with a tiny core. By using extensions, I can customize to what I need, great for suit my own workflow.

Inspired by Agentic Coding with Claude Code ↩︎

Coding with LLMs in the summer of 2025

Mon, 21 Jul 2025 14:13:00 +0800

Coding with LLMs in the summer of 2025

Always be part of the loop by moving code by hand from your terminal to the LLM web interface: this guarantees that you follow every process. You are still the coder, but augmented.

It reminds me the future of programming in Lex Fridman’s podcast with DHH. While coding with AI can maximize outcomes, expressing yourself through code remains more important.

Claude Code in Action

Sun, 20 Jul 2025 14:06:00 +0800

https://anthropic.skilljar.com/claude-code-in-action

Tips
- #: set memory
- @: mention files
- Ctrl-v: paste image
Context
- Escape: interrupt and redirect the conversation
- Double-tap Escape: rewind the conversation
- /compact: summarize current conversation for things learned and continue a related task
- /clear: dump current conversation and start an unrelated task
Intelligence
- Planning mode for breadth-first tasks
- Thinking mode for depth-first tasks. Use keywords (sorted from less to more tokens):
  - Think: Basic reasoning
  - Think more: Extended reasoning
  - Think a lot: Comprehensive reasoning
  - Think longer: Extended time reasoning
  - Ultrathink: Maximum reasoning capability
Custom commands
- Create a markdown in .claude/commands/<COMMAND>.md.
- In the command, use $ARGUMENTS to receive user prompt. For example,
  - Create .claude/commands/test.md:
```
Your task is to write tests for $ARGUMENTS
```
  - Usage: /test the User model
- I found if you create commands in ~/.claude/commands/, they become global. For example,
  - Create ~/.claude/commands/backup.md:
```
Create a backup for ~/.claude/CLAUDE.md using gist
```
  - Use in any conversation: /backup

MCP servers

Add server

claude mcp add playwright npx @playwright/mcp@latest

Pre-configure permissions: open the .claude/settings.local.json file and add the server to the allow array:
```
{
  "permissions": {
    "allow": ["mcp__playwright"],
    "deny": []
  }
}
```

Avoid setting UV_ENV_FILE globally

Tue, 15 Jul 2025 17:03:00 +0800

I’m using the Atlassian Remote MCP Server in Claude Code to fetch Jira tickets. I installed it per-project using claude mcp add-json <name> <string>. Recently, I noticed it keeps failing in one project, although the config is exactly the same.

I checked the problem by locating the MCP server command and executing it within the project. The error raised: No environment file found at: `.env`. It reminded me that UV_ENV_FILE=.env is set globally, and it’s too convenient to be noticed. After removing the environment variable, the MCP server works.

Debugging Claude's MCP Server with Nix

Tue, 25 Mar 2025 16:35:00 +0800

When using Nix to manage my development environment, Claude’s MCP servers couldn’t find tools installed via Nix. The issue was missing Nix paths in the environment.

I found Debugging Claude’s MCP Server with Nix which describes a method to debug MCP server environments by dumping PATH and environment variables:

{
  "mcpServers": {
    "debug": {
      "command": "/bin/sh",
      "args": [
        "-c",
        "echo $PATH > /tmp/claude_path.txt; env > /tmp/claude_env.txt"
      ]
    }
  }
}

By comparing the output files, I discovered /etc/profiles/per-user/james/bin was missing from PATH. The fix is to explicitly prepend it to PATH:

{
  "mcpServers": {
    "github": {
      "command": "/bin/sh",
      "args": [
        "-c",
        "PATH=/etc/profiles/per-user/james/bin:$PATH exec npx -y @modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "<token>"
      }
    }
  }
}

LLM CLI utility

Mon, 24 Mar 2025 15:46:00 +0800

Install llm:

uv tool install llm

Install plugins:

llm install llm-mlx llm-ollama llm-gemini llm-mistral llm-openrouter llm-sentence-transformers llm-cmd llm-jq

Install llm with its plugins in one line (great to re-install the environment):

uv tool install llm --with llm-mlx --with llm-ollama --with llm-gemini --with llm-mistral --with llm-openrouter --with llm-sentence-transformers --with llm-cmd --with llm-jq

llm-mlx requires Python 3.12 or lower, there are two ways to set Python version.

Environment variable:

export UV_PYTHON=3.12

Command line option:

uv tool install llm --python 3.12

Update tools is as easy as uv tool upgrade --all.

Multilingual export using ox-hugo

Fri, 14 Mar 2025 10:35:00 +0800

Hugo-modus supports multilingual now, it’ll display translation links for multilingual posts. As I’m blogging using Denote and Hugo, I changed the #+export_file_name by appending the locale such as: post-1.zh, expecting it to export post-1.zh.md but failed. The complete configuration is as the following:

#+hugo_base_dir: ~/code/hugo-modus/exampleSite
#+hugo_section: posts
#+export_file_name: post-1.zh

Then I found there is already a solution, which is as easy as appending .md, such as #+export_file_name: post-1.zh.md. The result is on the example site.

Emacs: make ‘save-some-buffers’ show diff on demand

Fri, 14 Mar 2025 09:42:00 +0800

Emacs: make ‘save-some-buffers’ show diff on demand

The command save-some-buffers, which is bound to C-x s by default is helpful when you need to save lots of buffers efficiently. Instead of figuring out which ones are modified and visiting each of them to decide what to do, you invoke save-some-buffers. It prompts for an action, one buffer at a time.

– Prot

I just know from Prot that it is the save-some-buffers command that ask me to save changes when doing operations such as magit-status. It prompts whether each buffer should be saved and provides the corresponding actions. I didn’t notice there is a d action to display the difference between the buffer and its target file, which is very handy as sometimes I don’t remember what I’ve changed so far.

Working with smaller chunks of thoughts

Sat, 08 Mar 2025 22:50:00 +0800

Working with smaller chunks of thoughts; adding anchors to paragraphs in Org Mode HTML export

If the section has a heading, then it’s easy to make that linkable with a custom name. I can use org-set-property to set the CUSTOM_ID property to the anchor name.

[…]

If the part that I want to link to is not a heading, I can add an ID by using the #+ATTR_HTML: :id … directive.

[…]

Text fragments are even more powerful, because I can link to a specific part of a paragraph. I can link to one segment with something like #::text=text+to+highlight. I can specify multiple text fragments to highlight by using #::text=first+text+to+highlight&text=second+text, and the browser will automatically scroll to the first highlighted section. I can specify a longer section by using text=textStart,textEnd.

– Sacha Chua

Sacha Chua explains how to add links to different levels of granularity:

Heading
Paragraph
Text fragments

I’m using ox-hugo, and it’s easy to add links for headings, see Transform ox-hugo anchors to links. Using #+ATTR_HTML: :id to link paragraphs and text fragments to link specific text are really powerful, but I haven’t found an easy way to integrate this into my workflow, as it involves manually coding the links.

Blogging using Denote and Hugo

Tue, 04 Mar 2025 17:17:00 +0800

I’ve been thinking of writing a post about my current blogging workflow for quite some time. After reading Blogging using Emacs Org Roam and Hugo, I noticed we have a similar approach: we both use Nix, Hugo, and ox-hugo. The main difference is that my workflow is based on Denote instead of Org Roam.

Denote

Denote is a simple note-taking tool created by Protesilaos Stavrou (known as Prot), based on the idea that notes should follow a predictable and descriptive file-naming scheme. The default format is DATE==SIGNATURE--TITLE__KEYWORDS.EXTENSION, such as 20231007T104700--static-website-with-hugo-and-nix__hugo_nix.org. This format is both URL-friendly and easy to search.

Attachments

My note-taking system is inspired by Taking Notes With the Emacs Denote Package. I’m impressed by the “Attachments” section:

An attachment in Denote is any file that is not recognised by Denote as a note, but with a compatible filename. Any file stored in the Denote directory that follows the Denote file naming convention will be recognised as an attachment and can be linked from inside a Denote file.

I save all attachments in the attachments directory alongside my notes, and I insert links using [[file:]] syntax rather than denote-link. The benefits are:

Since most attachments are pictures, I can view them directly in an Org file using org-toggle-inline-images. They’re also visible on GitHub.
Attachments in the form of [[file:]] are automatically copied to the <HUGO_WEBSITE>/static/attachments/¹ directory, with no manual work needed.

I use a function to insert attachments from any location on my computer to the current note by inserting a link if the attachment is already in the attachments directory, or renaming and moving the attachment to the attachments directory first, and then inserting a link.

(setq my-notes-attachments-directory (expand-file-name "attachments/" (denote-directory)))

(defun my/denote-org-extras-insert-attachment (file)
    "Process FILE to use as an attachment in the current buffer.

If FILE is already in the attachments directory, simply insert a link to it.
Otherwise, rename it using `denote-rename-file' with a title derived from
the filename, move it to the attachments directory, and insert a link.

The link format used is '[[file:attachments/filename]]', following Org syntax.
This function is ideal for managing referenced files in note-taking workflows."
    (interactive (list (read-file-name "File: " my-notes-attachments-directory)))
    (let* ((orig-buffer (current-buffer))
           (attachments-dir my-notes-attachments-directory))

      ;; Check if the file is already in the attachments directory
      (if (string-prefix-p
           (file-name-as-directory attachments-dir)
           (expand-file-name file))

          ;; If already in attachments, just insert the link
          (with-current-buffer orig-buffer
            (insert (format "[[file:attachments/%s]]" (file-name-nondirectory file))))

        ;; Otherwise, rename and move the file
        (let ((title (denote-sluggify-title (file-name-base file))))
          (when-let* ((renamed-file (denote-rename-file file title))
                      (renamed-name (file-name-nondirectory renamed-file))
                      (final-path (expand-file-name renamed-name attachments-dir)))
            (rename-file renamed-file final-path t)
            (with-current-buffer orig-buffer
              (insert (format "[[file:attachments/%s]]" renamed-name))))))))

Here’s a screencast of inserting an image from the Desktop directory into the current note using this function:

Reference links

I create references to my notes using denote-link. The problem is that after exporting, these references are converted into Markdown links that point to the original Org files, which are inaccessible on the published website:

[Static website with Hugo and Nix](20231007T104700--static-website-with-hugo-and-nix__hugo_nix.org)

I add an denote-link-ol-export advice to solve the problem:

(advice-add 'denote-link-ol-export :around
            (lambda (orig-fun link description format)
              (if (and (eq format 'md)
                       (eq org-export-current-backend 'hugo))
                  (let* ((path (denote-get-path-by-id link))
                         (export-file-name
                          (or
                           ;; Use export_file_name if it exists
                           (when (file-exists-p path)
                             (with-temp-buffer
                               (insert-file-contents path)
                               (goto-char (point-min))
                               (when (re-search-forward "^#\\+export_file_name: \\(.+\\)" nil t)
                                 (match-string 1))))
                           ;; Otherwise, use the original file's base name
                           (file-name-nondirectory path))))
                    (format "[%s]({{< relref \"%s\" >}})"
                            description
                            export-file-name))
                (funcall orig-fun link description format))))

Now the references use the relref shortcode, which is a Hugo feature to create relative links to documents:

[Static website with Hugo and Nix]({{< relref "static-website-with-hugo-and-nix" >}})

You can visit the article here: Static website with Hugo and Nix.

Hugo

Hugo is a fast static site generator that’s easy to install with just an executable binary.

Nix

I use Nix for my development environment because I need go for Hugo Modules:

{
  description = "My personal website";
  inputs = {
    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
    flake-utils.url = "github:numtide/flake-utils";
  };

  outputs =
    {
      self,
      nixpkgs,
      flake-utils,
    }:
    flake-utils.lib.eachDefaultSystem (
      system:
      let
        pkgs = nixpkgs.legacyPackages.${system};
      in
      {
        devShells.default = pkgs.mkShell {
          packages = with pkgs; [
            hugo
            go
          ];
        };
      }
    );
}

Theme

I created hugo-modus theme specifically for this blog. It uses the colour palette of the Modus themes, and supports both light and dark modes.

Since I use hugo-modus for my blog and also work on its development, I need to switch between the local and remote versions. Fortunately, Hugo supports split configuration by environment:

config/
├── _default
│   └── hugo.toml
└── development
    └── hugo.toml

In config/_default/hugo.toml, set the theme to be used in the production environment:

[module]
  [[module.imports]]
    path = "github.com/goofansu/hugo-modus"

In config/development/hugo.toml, override the theme to use the local hugo-modus directory:

[module]
  replacements = "github.com/goofansu/hugo-modus -> ../../hugo-modus"

Check the active modules by running hugo mod graph:

$ hugo mod graph -e development
project ../../hugo-modus

$ hugo mod graph -e production
github.com/goofansu/yejun.dev github.com/goofansu/[email protected]

Denote + Hugo

I use ox-hugo to export Org-mode files to Markdown for Hugo. It offers two options for organizing posts: “One post per Org subtree” and “One post per Org file”. In my blogging workflow, I choose the “One post per Org file” method because notes are just posts.

Using this post as an example, after creating the Org-mode note using the denote command, it contains the following content.

#+title:      Blogging using Denote and Hugo
#+date:       [2025-03-04 Tue 17:17]
#+filetags:   :blogging:denote:hugo:
#+identifier: 20250304T171750

The note is not Hugo-exportable at the moment.

Make note Hugo-exportable

Set #+hugo_base_dir, and that’s the only necessary configuration:

#+hugo_base_dir: ~/code/yejun.dev

By default, M-x org-hugo-export-to-md exports the note to ~/code/yejun.dev/content/posts/20250304T171750--blogging-using-denote-and-hugo__blogging_denote_hugo.md.

Thanks to Denote’s file-naming scheme, which creates URL-friendly names, I can export my TILs and Links using their original file names.

But I prefer a shorter file name

Set #+export_file_name to define the name of the exported file:

#+export_file_name: blogging-using-denote-and-hugo

This time, M-x org-hugo-export-to-md exports the note to ~/code/yejun.dev/content/posts/blogging-using-denote-and-hugo.md.

How does the Markdown file look?

Looking at the Markdown file, it contains a YAML front-matter²:

---
title: "Blogging using Denote and Hugo"
author: ["Yejun Su"]
date: 2025-03-04T17:17:00+08:00
tags: ["blogging", "denote", "hugo"]
---

Where does the front-matter come from?

ox-hugo converts #+title, #+date, and #+filetags into Hugo front-matter and automatically includes the author which reads user-full-name. Org meta-data to Hugo front-matter lists all Hugo front-matter translations for file-based exports.

Interestingly, #filetags isn’t included in that list; instead, there is #+hugo_tags. I found #+filetags wasn’t supported until this pull request, which was made to support Org Roam’s parsing of tags from the #+filetags keyword starting with Org Roam v2.

I want to export a TIL note

By default, ox-hugo exports notes as posts, you can change the behaviour by:

Setting #+hugo_section in the note
```
#+hugo_section: til
```
Setting the org-hugo-default-section-directory variable globally
```
(setq org-hugo-default-section-directory "til")
```

See Transform ox-hugo anchors to links for an example.

Can I automatically export a note every time I save it?

Sure. ox-hugo offers a guide on automatically exporting when saving. Just add the following snippet at the end of the note:

* Footnotes
* COMMENT Local Variables :ARCHIVE:
# Local Variables:
# eval: (org-hugo-auto-export-mode)
# End:

Can I search all Hugo-exportable notes?

Yes. The approach is simple - I just search ripgrep the Org files in my denote-directory for #+hugo_base_dir:

(defun my/org-hugo-denote-files ()
    "Return a list of Hugo-compatible files in `denote-directory'."
    (let ((default-directory (denote-directory)))
      (process-lines "rg" "-l" "^#\\+hugo_base_dir" "--glob" "*.org")))

(defun my/org-hugo-denote-files-find-file ()
    "Search Hugo-compatible files in `denote-directory' and visit the result."
    (interactive)
    (let* ((default-directory (denote-directory))
           (prompt (format "Select FILE in %s: "  default-directory))
           (selected-file (consult--read
                           (my/org-hugo-denote-files)
                           :state (consult--file-preview)
                           :history 'denote-file-history
                           :require-match t
                           :prompt prompt)))
      (find-file selected-file)))

Can I export all Hugo-exportable notes?

Absolutely yes! Just loop my/org-hugo-denote-files and execute org-hugo-export-to-md:

(defun my/org-hugo-export-all-denote-files ()
    "Export all Hugo-compatible files in `denote-directory'."
    (interactive)
    (let ((org-export-use-babel nil))
      (dolist (file (my/org-hugo-denote-files))
        (with-current-buffer (find-file-noselect file)
          (org-hugo-export-to-md)))))

Conclusion

I can publish any note to any Hugo website by setting #+hugo_base_dir.
I can publish any note to any Hugo section by setting #+hugo_base_section.
I can insert any file from my computer into any note using denote-rename-file.

Together, these advantages create an efficient publishing workflow.

PS: Emacs code used in this post can be found here.

ox-hugo by default copies files to static/ox-hugo directory, I changed the behaviour by customizing org-hugo-default-static-subdirectory-for-externals to "attachments". ↩︎
ox-hugo supports exporting the front-matter in TOML (default) or YAML. I prefer YAML and have customized org-hugo-front-matter-format to use "yaml". ↩︎

shot-scraper CLI utility

Fri, 14 Feb 2025 12:15:00 +0800

shot-scraper is the second tool created by Simon Willison that I’ve installed on my machine, the first being llm.

I install Python tools using uv.

uv tool install shot-scraper
shot-scraper install # install browsers

Take a screenshot:

shot-scraper shot https://yejun.dev

Record an HTTP Archive (HAR) file:

shot-scraper har https://yejun.dev

View the file using Chrome HAR Viewer.

Transform ox-hugo anchors to links

Tue, 04 Feb 2025 00:44:00 +0800

This blog is built with Hugo, and the content is exported from Org files to Hugo-compatible Markdown via ox-hugo. Each heading is followed by an anchor after the export:

## Heading {#heading}
### Another heading {#another-heading}

To make the anchors clickable, Kaushal Modi (the author of ox-hugo) recommends replacing anchors with links (source), the steps are as follows:

First, create a partial layouts/partials/headline-hash.html:

{{ . | replaceRE `(<h[2-9] id="([^"]+)".+)(</h[2-9]+>)` `${1}&nbsp;<a class="headline-hash opacity-0" href="#${2}">#</a> ${3}` | safeHTML }}

Next, apply the partial to .Content:

{{ partial "headline-hash.html" .Content }}

The result will look like this:

<h2 id="heading">Heading&nbsp;<a class="headline-hash" href="#heading">#</a> </h2>
<h3 id="another-heading">Another heading&nbsp;<a class="headline-hash" href="#another-heading">#</a> </h3>

Lock and unlock Win/Function keys on Cherry G80-3000

Mon, 25 Nov 2024 22:27:00 +0800

Lock/Unlock Win: Fn + F9
Lock/Unlock Function keys: Ctrl + Fn

Sidekiq

Wed, 20 Nov 2024 08:34:00 +0800

Glossaries

Job: A unit of work in your Ruby application.
Queue: A list of jobs which are ready to execute right now.
Process: A Sidekiq process with one or more threads for executing jobs.

Job lifecycle

Enqueued: Waiting for being processed.
Scheduled: Configured to be run at some point in the future.
Busy: Currently being processed.
Retries: Will be automatically retried in the future.
Dead: Failed all retries. Limited by default to 10,000 jobs or 6 months.

API

Creates a job class using command: rails g sidekiq:job my

class MyJob
  include Sidekiq::Job

  def perform(*args)
    # ...
  end
end

Enqueue a job

MyJob.perform_async(1, 2, 3) # enqueued and perform later
MyJob.perform_in(5.minutes, 1, 2, 3) # scheduled to perform in 5 minutes
MyJob.perform_at(5.minutes.from_now, 1, 2, 3) # scheduled to perform at 5 minutes from now

Push a job using low-level API

Sidekiq::Client.push('class' => MyJob, 'args' => [1, 2, 3])

Pro API

Delete a specific job from queue

queue = Sidekiq::Queue.new('default')
queue.delete_job(jid)

Delete a kind of jobs from queue

queue = Sidekiq::Queue.new('default')
queue.delete_by_class(MyClass)

Pause and resume queue

queue = Sidekiq::Queue.new('default')
queue.pause!
queue.paused? # => true
queue.unpause!

Retry

Default max retries: 25.

Send failed job to the Retries set

class MyJob
  include Sidekiq::Job
  sidekiq_options retry: 1
end

Send failed job straight to the Dead set

class MyJob
  include Sidekiq::Job
  sidekiq_options retry: 0
end

Discard failed job directly

class MyJob
  include Sidekiq::Job
  sidekiq_options retry: false
end

Set failed job to retry in a different queue

class MyJob
  include Sidekiq::Job
  sidekiq_options queue: 'default', retry_queue: 'low'
end

Retry intervals increase based on the number of retries

delay = (count**4) + 15
jitter = rand(10) * (count + 1)
retry_at = Time.now.to_f + delay + jitter

References

Flushing content blocks

Thu, 05 Sep 2024 11:15:00 +0800

By default, multiple calls of the content_for helper using the same identifier will concatenate and output them together.

Set flush: true to flush all previous content_for calls:

<% content_for :example %>
This block is flushed.
<% end %>

<% content_for :example flush: true do %>
This block will display.
<% end %>

Static website with Hugo and Nix

Sat, 07 Oct 2023 10:47:00 +0800

This website is built with Hugo, a static site generator, and built with Nix¹. This approach ensures the build won’t break in the future because the content, generator and builder are all unchanged.

The configuration

Nix flakes is still an experimental feature but has been available for a long time.

A flake is simply a source tree (such as a Git repository) containing a file named flake.nix that provides a standardized interface to Nix artifacts such as packages or NixOS modules. Flakes can have dependencies on other flakes, with a “lock file” pinning those dependencies to exact revisions to ensure reproducible evaluation.

– https://www.tweag.io/blog/2020-05-25-flakes/

Here is the flake.nix of this website:

{
  description = "My personal website";
  inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-23.05";
  inputs.flake-utils.url = "github:numtide/flake-utils";

  outputs = { self, nixpkgs, flake-utils }:
    flake-utils.lib.eachDefaultSystem (system:
      let pkgs = nixpkgs.legacyPackages.${system};
      in {
        packages.website = pkgs.stdenv.mkDerivation {
          name = "blog";
          src = self;
          buildPhase = "${pkgs.hugo}/bin/hugo";
          installPhase = "cp -r public $out";
        };

        defaultPackage = self.packages.${system}.website;
        devShells.default = pkgs.mkShell { packages = [ pkgs.hugo ]; };
      });
}

Everytime I clone the repo, there are two options:

run nix develop to enter a pure environment with the hugo program.
run nix build to get the static website in the ./result directory.

It eliminates the need to worry about the development will be broken in the future.

Auto deployment

I use sourcehut to host my website. When I pushed to the git repository, it will be deployed automatically using the sourcehut build service. In the build, nix build uses flake.nix to create exactly same environment as in development:

image: nixos/latest
oauth: pages.sr.ht/PAGES:RW
packages:
- nixos.hut
environment:
  NIX_CONFIG: experimental-features = nix-command flakes
  site: yejun.dev
tasks:
- package: |
    cd $site
    nix build
    tar -C result -cvz . > ../site.tar.gz
- upload: |
    hut pages publish -d $site site.tar.gz

Nix is a tool focused on reproducible package management and system configuration. ↩︎

Send Nix code from Emacs to Kitty

Tue, 03 Oct 2023 02:38:00 +0800

I’m learning Nix by following this tutorial and taking notes using Org Mode. I organized the notes with my thoughts and some code examples. Doom Emacs provides a function +eval/send-region-to-repl to run code in a language’s REPL buffer. It’s useful until multiple-line input comes, which prints like so:

nix-repl> let
  first_name = "Yejun";
  last_name = "Su";
in
  {
    full_name = "${first_name} ${last_name}";
  }

let
            first_name = "Yejun";
            last_name = "Su";
          in
            {
              full_name = "${first_name} ${last_name}";
            }
{ full_name = "Yejun Su"; }

It appears that the input is also getting printed along with the result, which isn’t expected. However, when I tried with nix repl in Kitty, I didn’t encounter this problem. A viable solution that emerged is to send the Nix code from the org-babel source block directly to the Nix REPL in Kitty.

Thanks to the Kitty’s remote control, it’s easy to advise the +eval/send-region-to-repl function to send the Nix code to Kitty:

(defun kitty--ensure-nix-repl-tab ()
  (unless (zerop (shell-command "kitty @ ls | grep -q '\"title\": \"nix-repl\"'"))
    (shell-command "kitty @ launch --type tab --tab-title nix-repl nix repl")))

(defun kitty--send-region-to-nix-repl-tab ()
  (shell-command-on-region
   (if (use-region-p) (region-beginning) (point-min))
   (if (use-region-p) (region-end) (point-max))
   "kitty @ send-text --match-tab title:nix-repl --stdin"))

(defun org-babel-src-block-language-p (language)
  (let ((block-info (org-element-at-point)))
    (and (eq (car block-info) 'src-block)
         (string= language (org-element-property :language block-info)))))

(defadvice +eval/send-region-to-repl (around my-send-region-to-repl activate)
  (if (and (eq major-mode 'org-mode)
           (org-babel-src-block-language-p "nix"))
      (progn
        (kitty--ensure-nix-repl-tab)
        (kitty--send-region-to-nix-repl-tab))
    ad-do-it))

When calling the +eval/send-region-to-repl function (SPC c s), if current major mode is org-mode and the language of the org-babel source block is nix, it sends the selected code to Kitty’s nix-repl tab, which runs the nix repl so that the code is evaluated in the Nix REPL. The tab will be created if not exist.

Backup GnuPG private key

Mon, 18 Sep 2023 22:12:00 +0800

gpg-toolkit is inspired by this article.

I’m using GNU Privacy Guard (GnuPG or GPG) in various ways, such as encrypting passwords, decrypting emails, signing git commits, and more. So it’s time to find a way to backup the GPG private key.

I asked GPT-4 for a method to keep the private key safe, and it tells me to convert it to QR code and print it on the paper. That’s a good idea! I’ll start from backup to a printable text, and then the QR code.

Preparation

Before backup, you need to know your GPG key ID. Run this command:

gpg --list-keys --keyid-format long

It will list all the public keys in your system. Search your own key according to this format pub rsa2048/{YOUR KEY ID}, the {YOUR KEY ID} part is your GPG key ID.

Then export both the public and private key:

gpg --export-secret-keys {YOUR KEY ID} > private-key.gpg
gpg --export {YOUR KEY ID} > public-key.gpg

Backup to printable text

One of the program to be used is paperkey, it transforms the GPG private key to a printable format. The usage is straightforward:

# backup
paperkey --secret-key private-key.gpg --output printable.txt

Keep in mind that you need both the public key and the printable text to restore the private key:

# restore
paperkey --pubring public-key.gpg --secrets printable.txt --output restored-private-key.gpg

Backup to QR code

The process is similar to the previous method, but it requires two more programs: qrencode to create QR code and zbar to read QR code. Generally speaking, the more programs you rely on, the more friction you run into. But I just tried it for fun:

# backup
paperkey --output-type raw --secret-key private-key.gpg | base64 | qrencode -o qrcode.png

With the public key and QR code in hand, you can restore the private key:

# restore
zbarimg qrcode.png | cut -d':' -f2 | base64 --decode | paperkey --pubring public-key.gpg --output restored-private-key.gpg

Simplify TOTP management in Emacs

Wed, 13 Sep 2023 02:54:00 +0800

Time-based one-time password (TOTP) is a computer algorithm that generates a one-time password (OTP) that uses the current time as a source of uniqueness.

– Wikipedia

password-store-otp is an Emacs package which provides functions to interact with the pass-otp extension for pass. There are two functions that insert or append the OTP key URI to a selected pass entry. But it’s not that easy because websites generally provide QR Code or secret key, which requires me to compose the OTP key URI manually.

To simplify the process, I created two corresponding functions based on those in password-store-otp:

(defun yejun/password-store-otp-append (entry issuer secret)
  "Append to ENTRY the OTP-URI consisting of issuer and secret."
  (interactive (list (password-store-otp-completing-read)
                     (read-string "Issuer: ")
                     (read-passwd "Secret: " t)))
  (let* ((secret (replace-regexp-in-string "\\s-" "" secret))
         (otp-uri (format "otpauth://totp/totp-secret?secret=%s&issuer=%s" secret issuer)))
    (password-store-otp-add-uri 'append entry otp-uri)))

(defun yejun/password-store-otp-insert (entry issuer secret)
  "Insert a new ENTRY containing OTP-URI consisting of issuer and secret."
  (interactive (list (password-store-otp-completing-read)
                     (read-string "Issuer: ")
                     (read-passwd "Secret: " t)))
  (let* ((secret (replace-regexp-in-string "\\s-" "" secret))
         (otp-uri (format "otpauth://totp/totp-secret?secret=%s&issuer=%s" secret issuer)))
    (password-store-otp-add-uri 'insert entry otp-uri)))

When calling either function, it will prompt for the issuer and secret, then compose an OTP key URI with the values in this format: otpauth://totp/totp-secret?secret=<secret>&issuer=<issuer>, which saves manual effort.

To keep it simpler, I extracted a function to create OTP key URI, so it can be applied in more scenarios:

(defun yejun/otp-key-uri (issuer secret)
  "Create and copy the OTP key URI consisting of issuer and secret."
  (interactive (list (read-string "Issuer: ")
                     (read-passwd "Secret: " t)))
  (let* ((secret (replace-regexp-in-string "\\s-" "" secret))
         (otp-uri (format "otpauth://totp/totp-secret?secret=%s&issuer=%s" secret issuer)))
    (kill-new otp-uri)
    (message "OTP key URI created and copied.")))

By calling the function, an OTP key URI is created and copied to the clipboard for later use.

Skip sourcehut build in Emacs

Tue, 05 Sep 2023 10:23:00 +0800

builds.sr.ht is the GitHub Actions counterpart in sourcehut, it can run jobs when you push to a git repository that contains a build.yml file. According to the manual, you can skip submitting a build by using git push -o skip-ci.

In Emacs, you can achieve this by adding an infix argument:

(transient-append-suffix 'magit-push "-n"
  '("-s" "Skip CI" "--push-option=skip-ci"))

This inserts a new infix argument to toggle the --push-option=skip-ci argument after the infix argument that toggles --dry-run in magit-push.

However, it is strange that neither argument -o skip-ci nor -o=skip-ci will take effect:

(transient-append-suffix 'magit-push "-n"
  '("-s" "Skip CI" "-o=skip-ci"))

(transient-append-suffix 'magit-push "-n"
  '("-s" "Skip CI" "-o skip-ci"))