Screenshots

This page says how the screenshots of tt are made, how to make them again and how to add one. They are never drawn by hand: a script drives the real program and turns each screen into an SVG in docs/images/.

What you need

• The .NET 10 SDK, to build tt.
• tmux.
• The Node version of website/.nvmrc.

Make them again

Run this from the root of the repository:

scripts/screenshots.sh

It builds src/Tilde.Ui.Tui and runs scripts/screenshots/run.mjs, which:

1. Makes a temporary HOME with an empty .config/tilde/config.toml, and removes it at the end. A shot that shows a script, a theme or an account runs in a HOME of its own with those files in it, so the others never show them.
2. Starts tt --demo in a terminal of 100 columns and 30 rows. --demo shows made-up accounts and messages, so no real mail ever ends up in a picture. Two shots differ: narrow-bar.svg uses 56 columns and 12 rows, and compose.svg runs without --demo, over an empty Maildir that is made in the temporary HOME.
3. Types the default keys of keybind.lua, waits for the text each screen must show, and writes docs/images/<name>.svg.
4. Quits with ZZ.

The program runs in a tmux server of its own, on the socket tilde-shots-<pid>. Your own tmux sessions are never touched, and the server is killed at the end even when a step fails. A step that waits for a text which never appears stops the run and names that text.

To read what each screen held, set TILDE_SHOTS_TEXT_DIR to a folder: the script writes <name>.txt and <name>.ansi there next to each SVG.

The pictures use the sixteen colours of the site, not those of your terminal (ANSI16 in scripts/screenshots/svg.mjs), so cyan and green are both drawn in the mint green of the site.

Look at every SVG in a browser before you commit it.

The shots

File	What it shows
screen.svg	The main screen: the tree, the list and the last line
sidebar-tree.svg	The tree with the focus, as in step 2 of the tutorial: Personal closed and Work open
search.svg	The list after /liskov and Enter, with the match on the last line
command-line.svg	The command line opened with :
command-message.svg	The bottom bar after :nosuch and Enter: Unknown command 'nosuch'.
help.svg	The key help window opened with ?, with its bar of keys
reader.svg	The reader opened with Enter on the first message, with its bar of keys
top-bar.svg	The main screen with the clock of Bars in the top bar, from an init.lua in the temporary HOME. The time is the time of the run
help-description.svg	The key help with two keys bound with a description, from an init.lua in the temporary HOME (see Keys)
narrow-bar.svg	The main screen in a terminal of 56 columns, where the status line drops hints (see Bar items)
theme.svg	The main screen with the theme dusk of Themes, from a themes/dusk.toml and [ui] theme in the temporary HOME
compose.svg	The window Send this mail? after c, from a Maildir account over an empty folder and an editor that is a script ($VISUAL), so that nothing is sent; tt opens the transport at start, so it points at a port that nothing listens on

Add a shot

1. In demoShots of scripts/screenshots/run.mjs, add the keys with tmux.keys(...) or tmux.type(...), then await tmux.waitFor('<text>') with a text that only the new screen shows.
2. Call await shot('<name>', '<title>'). The title is the text alternative of the picture: say what the screen shows.
3. Leave tt as the next step expects it, usually on the list with no window open.
4. Run the script and look at the new SVG.

Use a shot in a page

A page embeds an image only when the file exists in docs/images/. Never link a picture that the script does not make yet. Use a Markdown image with a relative path, and a text that says what the picture shows (a test refuses a short one):

![The main screen of tt: the tree of accounts on the left, the list of messages on the right](../images/screen.svg)

When a screen of tt changes, run the script again and check the pages that embed its picture. The release check covers this: see Releases and CI.