mirror of
https://github.com/jesseduffield/lazygit.git
synced 2026-10-06 05:57:38 -04:00
Stefan HallerandClaude Opus 5.5
ff8d74971f
The terminal that vhs records is xterm.js running in a browser, and the xterm.js that ttyd bundles doesn't draw the branch drawing symbols itself. So they have to come from a font, and SauceCodePro NF doesn't have them, nor does any font that macOS comes with. The detailed commit graph shows up as garbage. Newer versions of xterm.js do draw the symbols, but only in the WebGL renderer. vhs forces the canvas renderer, and xterm.js has removed that since, so moving to a newer xterm.js would mean patching both ttyd and vhs. The Flog Symbols font has the symbols, but it draws its lines for a smaller cell than the one xterm.js uses at our font settings. As a fallback font, it leaves a gap at the edges of every cell, and each line of the graph comes out dashed. Add a copy of the font that fits the cells of the recordings. xterm.js clips each character to its row, so the vertical strokes reach well past the top and bottom of the cell and end exactly at the row's edges. It doesn't clip a character to its cell horizontally, so the horizontal strokes reach only a little way into the neighbouring cells. Any further, and they would show past the start of a bend in the next cell. Give the font a bold face with the same outlines. lazygit draws the lines of the selected commit in bold, and without a bold face the browser makes the symbols bold itself by thickening them. That leaves gaps where they meet. Add the script that made the font, and list the font after SauceCodePro NF in demo/settings.tape so that the browser takes the symbols from it. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
49 lines
1.6 KiB
VHS
49 lines
1.6 KiB
VHS
# Terminal settings shared by all demo recordings. The tape that
|
|
# demo/record_demo.sh generates for a demo sources this file.
|
|
|
|
# Use the non-Mono Nerd Font variant; the Mono variant renders the icons too
|
|
# small. The terminal that vhs records doesn't draw the branch drawing symbols
|
|
# of the commit graph itself, so they come from the second font, which is in
|
|
# demo/fonts.
|
|
Set FontFamily "SauceCodePro NF,Flog Symbols Demo"
|
|
Set FontSize 24
|
|
Set LineHeight 1.0
|
|
Set Padding 20
|
|
|
|
# vhs sizes the terminal in pixels rather than in cells, so these two numbers
|
|
# are what produce a 120x35 grid at the font settings above. If you change the
|
|
# font, the font size or the padding, record a tape that runs `stty size` and
|
|
# adjust them until the grid is 120x35 again.
|
|
Set Width 1866
|
|
Set Height 1140
|
|
|
|
# There is no frame rate setting here because vhs ignores `Set Framerate` when
|
|
# it writes a video; it captures at 25 fps either way.
|
|
|
|
# The frame around the focused view is bold green, and xterm.js draws bold text
|
|
# in the bright variant of a colour, so brightGreen is the one those frames end
|
|
# up using.
|
|
|
|
Set Theme {
|
|
"background": "#1d1d1d",
|
|
"foreground": "#dddad6",
|
|
"cursor": "#c7c7c7",
|
|
"selection": "#44475a",
|
|
"black": "#7a7a7a",
|
|
"red": "#fc4384",
|
|
"green": "#3fb950",
|
|
"yellow": "#ffa727",
|
|
"blue": "#102895",
|
|
"magenta": "#c930c7",
|
|
"cyan": "#00c5c7",
|
|
"white": "#c7c7c7",
|
|
"brightBlack": "#676767",
|
|
"brightRed": "#ff7fac",
|
|
"brightGreen": "#56d364",
|
|
"brightYellow": "#ebdf86",
|
|
"brightBlue": "#6871ff",
|
|
"brightMagenta": "#ff76ff",
|
|
"brightCyan": "#5ffdff",
|
|
"brightWhite": "#fffefe"
|
|
}
|