Skip to content

[#2092] Fixed terminal line height in the installer CLI video. #2093

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AlexSkrypnyk merged 1 commit into from
Nov 13, 2025
Merged

[#2092] Fixed terminal line height in the installer CLI video. #2093

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions .github/workflows/vortex-release-docs.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,9 +138,10 @@ jobs:
run: |
sudo apt-get update
sudo apt install asciinema expect
npm i -g svg-term-cli sharp-cli
./update-installer-video.sh
working-directory: .vortex/docs/.utils
npm i -g sharp-cli
yarn install --frozen-lockfile
./.utils/update-installer-video.sh
working-directory: .vortex/docs

- name: Upload documentation site
uses: actions/upload-pages-artifact@7b1f4a764d45c48632c6b24a0339c27f5614fb0b # v4
Expand Down
7 changes: 4 additions & 3 deletions .github/workflows/vortex-test-installer.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,10 @@ jobs:
run: |
sudo apt-get update
sudo apt install asciinema expect
npm i -g svg-term-cli sharp-cli
./update-installer-video.sh
working-directory: .vortex/docs/.utils
npm i -g sharp-cli
yarn install --frozen-lockfile
./.utils/update-installer-video.sh
working-directory: .vortex/docs

- name: Upload coverage reports as an artifact
uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5
Expand Down
108 changes: 108 additions & 0 deletions .vortex/docs/.utils/svg-term-render.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
#!/usr/bin/env node
/**
* Custom svg-term renderer with configurable lineHeight.
*
* This script uses svg-term as a library to have full control over the theme,
* specifically setting lineHeight to fix box-drawing character rendering.
*
* Usage:
* node svg-term-render.js <input.json> <output.svg> [options]
*
* Options:
* --at <ms> Timestamp of frame to render
* --line-height <n> Line height multiplier (default: 1.0)
* --font-family <s> Font family (default: Consolas, monospace)
*/

const fs = require('fs');
const {render} = require('svg-term');

// Parse command line arguments.
const args = process.argv.slice(2);

if (args.length < 2 || args.includes('--help')) {
console.log('Usage: node svg-term-render.js <input.json> <output.svg> [options]');
console.log('');
console.log('Options:');
console.log(' --at <ms> Timestamp of frame to render');
console.log(' --line-height <n> Line height multiplier (default: 1.0)');
console.log(' --font-family <s> Font family (default: Consolas, monospace)');
process.exit(args.includes('--help') ? 0 : 1);
}

const inputFile = args[0];
const outputFile = args[1];

// Parse options.
let at = null;
let lineHeight = 1.0;
let fontFamily = 'Consolas, "Courier New", Courier, "Liberation Mono", monospace';

for (let i = 2; i < args.length; i++) {
if (args[i] === '--at' && i + 1 < args.length) {
at = parseInt(args[i + 1], 10);
i++;
} else if (args[i] === '--line-height' && i + 1 < args.length) {
lineHeight = parseFloat(args[i + 1]);
i++;
} else if (args[i] === '--font-family' && i + 1 < args.length) {
fontFamily = args[i + 1];
i++;
}
}

// Read input cast file.
const input = fs.readFileSync(inputFile, 'utf8');

// Define custom theme with lineHeight set to 1.0.
// Based on Atom One Dark theme colors.
// Note: svg-term 1.3.1 expects RGB arrays, not hex strings.
const theme = {
background: [40, 44, 52], // #282c34
text: [171, 178, 191], // #abb2bf
cursor: [82, 139, 255], // #528bff
black: [40, 44, 52], // #282c34
red: [224, 108, 117], // #e06c75
green: [152, 195, 121], // #98c379
yellow: [209, 154, 102], // #d19a66
blue: [97, 175, 239], // #61afef
magenta: [198, 120, 221], // #c678dd
cyan: [86, 182, 194], // #56b6c2
white: [171, 178, 191], // #abb2bf
brightBlack: [92, 99, 112], // #5c6370
brightRed: [224, 108, 117], // #e06c75
brightGreen: [152, 195, 121], // #98c379
brightYellow: [209, 154, 102], // #d19a66
brightBlue: [97, 175, 239], // #61afef
brightMagenta: [198, 120, 221], // #c678dd
brightCyan: [86, 182, 194], // #56b6c2
brightWhite: [255, 255, 255], // #ffffff
bold: [171, 178, 191], // #abb2bf
fontSize: 1.67,
lineHeight: lineHeight,
fontFamily: fontFamily,
};

// Render options.
const options = {
theme: theme,
};

if (at !== null) {
options.at = at;
}

// Render SVG.
try {
const svg = render(input, options);
fs.writeFileSync(outputFile, svg, 'utf8');
console.log(`SVG rendered successfully: ${outputFile}`);
console.log(` lineHeight: ${lineHeight}`);
console.log(` fontFamily: ${fontFamily}`);
if (at !== null) {
console.log(` at: ${at}ms`);
}
} catch (error) {
console.error('Error rendering SVG:', error.message);
process.exit(1);
}
8 changes: 6 additions & 2 deletions .vortex/docs/.utils/update-installer-video.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,11 +312,13 @@ record_installer() {
local output_svg="${output_cast%.*}.svg"
note "Cast file: $output_cast"
note "SVG file: $output_svg"

if [ ! -f "$output_cast" ]; then
fail "Cast file not found for SVG conversion"
return 1
fi
if ! npx svg-term --out="$output_svg" <"$output_cast"; then

if ! node "${SCRIPT_DIR}/svg-term-render.js" "$output_cast" "$output_svg" --line-height 1.1; then
fail "Failed to convert cast to SVG"
return 1
fi
Expand All @@ -326,10 +328,12 @@ record_installer() {
local output_png="${output_cast%.*}.png"
note "PNG file: $output_png"
note "Extracting frame SVG"
if ! npx svg-term --at=1000 --out="$output_png.svg" <"$output_cast"; then

if ! node "${SCRIPT_DIR}/svg-term-render.js" "$output_cast" "$output_png.svg" --line-height 1.1 --at 1000; then
fail "Failed to extract frame at timestamp"
return 1
fi

note "Converting frame SVG to PNG"
if ! npx sharp-cli -i "$output_png.svg" -o "$output_png" -f png resize 1280; then
fail "Failed to convert frame SVG to PNG"
Expand Down
1 change: 1 addition & 0 deletions .vortex/docs/content/getting-started/installation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ for each service (see relevant sections in the documentation).
preload={true}
controls={true}
theme="asciinema"
terminalLineHeight={1.0}
/>

3. Run the following command to commit the initial project structure.
Expand Down
3 changes: 2 additions & 1 deletion .vortex/docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@
"prism-react-renderer": "^2.3.0",
"raw-loader": "^4.0.2",
"react": "^18.0.0",
"react-dom": "^18.0.0"
"react-dom": "^18.0.0",
"svg-term-cli": "^2.1.1"
Comment on lines +40 to +41
Copy link

@coderabbitai coderabbitai bot Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

🧩 Analysis chain

Verify that svg-term-cli provides the required 'svg-term' module.

The new utility script at .vortex/docs/.utils/svg-term-render.js (line 18) imports svg-term using require('svg-term'). Please confirm that the svg-term-cli package provides this module, or if a separate svg-term dependency is needed.

🏁 Script executed:

#!/bin/bash
# Check if svg-term-cli provides the svg-term module
npm view svg-term-cli

Length of output: 890

Add svg-term as an explicit dependency.

The [email protected] package includes svg-term: ^1.1.3 as a dependency, so the require('svg-term') call in .vortex/docs/.utils/svg-term-render.js will work. However, since the code directly requires svg-term (rather than svg-term-cli), it should be explicitly listed in package.json as a direct dependency rather than relying on a transitive dependency. Add "svg-term": "^1.1.3" to the dependencies in .vortex/docs/package.json.

🤖 Prompt for AI Agents 
.vortex/docs/package.json around lines 40-41: the project requires svg-term
directly in .vortex/docs/.utils/svg-term-render.js but only depends on
svg-term-cli (which pulls svg-term transitively); add "svg-term": "^1.1.3" to
the dependencies object in .vortex/docs/package.json so svg-term is an explicit
direct dependency and will be installed reliably.

},
"devDependencies": {
"@babel/core": "^7.0.0",
Expand Down
19 changes: 18 additions & 1 deletion .vortex/docs/src/components/AsciinemaPlayer/AsciinemaPlayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ const AsciinemaPlayer = ({
preload = true,
controls = true,
theme = 'asciinema',
terminalLineHeight = 1.0,
terminalFontFamily = 'Consolas, "Courier New", Courier, "Liberation Mono", monospace',
...props
}) => {
const containerRef = useRef(null);
Expand Down Expand Up @@ -40,6 +42,8 @@ const AsciinemaPlayer = ({
preload,
controls,
theme,
terminalLineHeight,
terminalFontFamily,
};

if (poster) {
Expand All @@ -62,6 +66,8 @@ const AsciinemaPlayer = ({
preload,
controls,
theme,
terminalLineHeight,
terminalFontFamily,
};

if (poster) {
Expand All @@ -81,7 +87,18 @@ const AsciinemaPlayer = ({
};

loadAsciinemaPlayer();
}, [src, poster, startAt, autoPlay, loop, preload, controls, theme]);
}, [
src,
poster,
startAt,
autoPlay,
loop,
preload,
controls,
theme,
terminalLineHeight,
terminalFontFamily,
]);

return <div ref={containerRef} {...props} />;
};
Expand Down
Loading