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
This commit is contained in:
Georgi Matev
GitHub
parent
ecde9cc242
commit
926ee7c6cd
BIN
website/src/assets/images/corso_demo.mp4
Executable file
BIN
website/src/assets/images/corso_demo.mp4
Executable file
Binary file not shown.
29
website/src/assets/images/powershell.svg
Normal file
29
website/src/assets/images/powershell.svg
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="PowerShell" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="204.691px" height="154.521px" viewBox="0 0 204.691 154.521" style="enable-background:new 0 0 204.691 154.521;"
|
||||||
|
xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path style="display:none;fill-rule:evenodd;clip-rule:evenodd;fill:#2671BE;" d="M-47.547,226.872
|
||||||
|
c0-97.129,0.094-194.259-0.195-291.387c-0.021-6.982,1.404-8.411,8.388-8.389c94.397,0.292,188.798,0.292,283.195,0
|
||||||
|
c6.984-0.022,8.41,1.407,8.389,8.389c-0.289,97.128-0.195,194.258-0.195,291.387c-3.238,2.008-6.837,1.129-10.268,1.131
|
||||||
|
c-93.015,0.049-186.031,0.049-279.047,0C-40.711,228.001-44.31,228.88-47.547,226.872z"/>
|
||||||
|
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#E0EAF5;" d="M120.14,0.032c23.011-0.008,46.023-0.078,69.034,0.019
|
||||||
|
c13.68,0.056,17.537,4.627,14.588,18.137c-8.636,39.566-17.466,79.092-26.415,118.589c-2.83,12.484-9.332,17.598-22.465,17.637
|
||||||
|
c-46.023,0.137-92.046,0.152-138.068-0.006c-15.043-0.053-19-5.148-15.759-19.404C9.849,96.287,18.69,57.582,27.602,18.892
|
||||||
|
C30.997,4.148,36.099,0.1,51.104,0.057C74.116-0.008,97.128,0.04,120.14,0.032z"/>
|
||||||
|
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#2671BE;" d="M85.365,149.813c-23.014-0.008-46.029,0.098-69.042-0.053
|
||||||
|
c-11.67-0.076-13.792-2.83-11.165-14.244c8.906-38.71,18.099-77.355,26.807-116.109C34.3,9.013,39.337,4.419,50.473,4.522
|
||||||
|
c46.024,0.427,92.056,0.137,138.083,0.184c11.543,0.011,13.481,2.48,10.89,14.187c-8.413,38.007-16.879,76.003-25.494,113.965
|
||||||
|
c-3.224,14.207-6.938,16.918-21.885,16.951C129.833,149.856,107.598,149.821,85.365,149.813z"/>
|
||||||
|
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FDFDFE;" d="M104.948,73.951c-1.543-1.81-3.237-3.894-5.031-5.886
|
||||||
|
c-10.173-11.3-20.256-22.684-30.61-33.815c-4.738-5.094-6.248-10.041-0.558-15.069c5.623-4.97,11.148-4.53,16.306,1.188
|
||||||
|
c14.365,15.919,28.713,31.856,43.316,47.556c5.452,5.864,4.182,9.851-1.823,14.196c-23.049,16.683-45.968,33.547-68.862,50.443
|
||||||
|
c-5.146,3.799-10.052,4.75-14.209-0.861c-4.586-6.189-0.343-9.871,4.414-13.335c17.013-12.392,33.993-24.83,50.9-37.366
|
||||||
|
C101.146,79.256,104.527,78.238,104.948,73.951z"/>
|
||||||
|
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#FCFDFD;" d="M112.235,133.819c-6.196,0-12.401,0.213-18.583-0.068
|
||||||
|
c-4.932-0.223-7.9-2.979-7.838-8.174c0.06-4.912,2.536-8.605,7.463-8.738c13.542-0.363,27.104-0.285,40.651-0.02
|
||||||
|
c4.305,0.084,7.483,2.889,7.457,7.375c-0.031,5.146-2.739,9.133-8.25,9.465c-6.944,0.42-13.931,0.104-20.899,0.104
|
||||||
|
C112.235,133.78,112.235,133.8,112.235,133.819z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
57
website/src/demo/README.md
Normal file
57
website/src/demo/README.md
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
# Creating Corso CLI demo gif
|
||||||
|
|
||||||
|
Currently, the GIF image on the website is generated by capturing a Corso session using
|
||||||
|
[Terminalizer](https://github.com/faressoft/terminalizer). See the project for instructions on how to
|
||||||
|
record a session.
|
||||||
|
|
||||||
|
The capture generates a session file [corso.yml](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](https://github.com/nvm-sh/nvm)
|
||||||
|
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:
|
||||||
|
|
||||||
|
```js
|
||||||
|
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](https://imageoptim.com/mac)
|
||||||
|
worked well with the most aggressive compression settings (including lossy compression).
|
||||||
1334
website/src/demo/corso.yml
Normal file
1334
website/src/demo/corso.yml
Normal file
File diff suppressed because it is too large
Load Diff
@ -59,7 +59,15 @@
|
|||||||
</div><!--end container-->
|
</div><!--end container-->
|
||||||
</section><!--end section-->
|
</section><!--end section-->
|
||||||
<!-- End Hero -->
|
<!-- End Hero -->
|
||||||
|
<section class="relative items-center overflow-hidden">
|
||||||
|
<div class="container">
|
||||||
|
<div class="grid content-center md:mt-24 mt-16 text-center">
|
||||||
|
<div class="wow animate__animated animate__fadeIn">
|
||||||
|
@@include("partials/terminal.html")
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<!-- Start Section-->
|
<!-- Start Section-->
|
||||||
<section class="relative md:py-24 py-16 overflow-hidden">
|
<section class="relative md:py-24 py-16 overflow-hidden">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|||||||
13
website/src/partials/terminal.html
Normal file
13
website/src/partials/terminal.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
|
||||||
|
<!-- Terminal header-->
|
||||||
|
<div class="flex items-center bg-gray-200 rounded-t-lg h-6">
|
||||||
|
<div class="align-middle">
|
||||||
|
<img class="h-4 px-2" src="assets/images/powershell.svg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Terminal body-->
|
||||||
|
<div class="p-2 border-x-2 border-b-2 rounded-b-lg border-gray-200 overflow-clip">
|
||||||
|
<video muted autoplay playsinline loop>
|
||||||
|
<source src="assets/images/corso_demo.mp4" type="video/mp4">
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
Loading…
x
Reference in New Issue
Block a user