Georgi Matev 926ee7c6cd
Corso Terminal demo (#1466)
## Description

Adds Corso CLI demo to website. Includes instructions on how to use Terminalizer to generate the demo. 

Can and should investigate a better maintained project in the future. 

## Type of change

<!--- Please check the type of change your PR introduces: --->
- [x] 🌻 Feature
- [ ] 🐛 Bugfix
- [ ] 🗺️ Documentation
- [ ] 🤖 Test
- [ ] 💻 CI/Deployment
- [ ] 🐹 Trivial/Minor

## Issue(s)

## Test Plan

<!-- How will this be tested prior to merging.-->
- [x] 💪 Manual
- [ ]  Unit test
- [ ] 💚 E2E
2022-11-06 01:16:42 +00:00
..
2022-11-06 01:16:42 +00:00
2022-11-06 01:16:42 +00:00

Creating Corso CLI demo gif

Currently, the GIF image on the website is generated by capturing a Corso session using Terminalizer. See the project for instructions on how to record a session.

The capture generates a session file corso.yml whcih can be edited and adjusted before rendering. The current version of the file adjusts colors and style for rendering.

Terminalized and Node versions

Terminalizer does not appear to be a currently active project and it has not kept up with more recent node versions. It is recommended that you install Node Version Manager to be able to switch to an older node verison.

Current demo was generated with Terminalizer 0.9.0 and Node v12.22.12.

Overcoming rendering issues

The rendering command is terminalizer render corso.yml -o corso_demo.gif.

The default installation of Terminalized appears to have an issue on MacOS (unclear if it works on other platforms) with the bundled version of electron and just hangs. To get past through it, you will need to tweak the rendering module of Terminalizer not to use a hidden Electron window.

To discover where your Terminalized module is run which ternimalizer. If you used nvm you will get something like $HOME/.nvm/versions/node/v12.22.12/bin/terminalizer.

Go to $HOME/.nvm/versions/node/v12.22.12/lib/node_modules/terminalizer/render/index.js and find createWindow and make a change so that the Electron window is visible. After the change you should have the following:

function createWindow() {
  // Create a browser window
  mainWindow = new BrowserWindow({
    show: true,
    width: 8000,
    height: 8000,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

After this you should be able to trigger rendering successfully.

Adjusting the GIF

Terminalizer will generetate a GIF that is not properly sized to the size of the recorded session. You would want to use a GIF cropping tool to get rid of the white space.

Additionally, the GIF image is likely to be quite large even at lowest quality (does not make a difference). Before using the image on the Corso website, you want to run it through GIF compression software.

Ther are a number of online GIF compression services you can use, but it is possible that your initial GIF is larger than the upload restrictions they have in place. An alternative is to use locally installed sftware ImageOptim worked well with the most aggressive compression settings (including lossy compression).