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

Author: AlexSkrypnyk

.github/workflows/vortex-release-docs.yml

@@ -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

.github/workflows/vortex-test-installer.yml

@@ -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

.vortex/docs/.utils/svg-term-render.js

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

.vortex/docs/.utils/update-installer-video.sh

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

.vortex/docs/content/getting-started/installation.mdx

@@ -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.

.vortex/docs/package.json

@@ -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"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

.vortex/docs/src/components/AsciinemaPlayer/AsciinemaPlayer.js

@@ -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);
@@ -40,6 +42,8 @@ const AsciinemaPlayer = ({
                 preload,
                 controls,
                 theme,
+                terminalLineHeight,
+                terminalFontFamily,
               };
 
               if (poster) {
@@ -62,6 +66,8 @@ const AsciinemaPlayer = ({
               preload,
               controls,
               theme,
+              terminalLineHeight,
+              terminalFontFamily,
             };
 
             if (poster) {
@@ -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} />;
 };