# Terminalizer
[![npm](https://img.shields.io/npm/v/terminalizer.svg)](https://www.npmjs.com/package/terminalizer)
[![npm](https://img.shields.io/npm/l/terminalizer.svg)](https://github.com/faressoft/terminalizer/blob/master/LICENSE)
[![Gitter](https://badges.gitter.im/join_chat.svg)](https://gitter.im/terminalizer/Lobby)
[![Unicorn](https://img.shields.io/badge/nyancat-approved-ff69b4.svg)](https://www.youtube.com/watch?v=QH2-TGUlwu4)
[![Tweet](https://img.shields.io/badge/twitter-share-76abec.svg)](https://goo.gl/QJzJu1)
> Record your terminal and generate animated gif images or share a web player link [www.terminalizer.com](https://www.terminalizer.com)
Built to be jusT cOol 👌🦄 !
> If you think so, support me with a `star` and a `follow` 😘
---
---
# Table of Contents
- [Terminalizer](#terminalizer)
- [Table of Contents](#table-of-contents)
- [Features](#features)
- [What's Next](#whats-next)
- [Installation](#installation)
- [Getting Started](#getting-started)
- [Compression](#compression)
- [Usage](#usage)
- [Init](#init)
- [Config](#config)
- [Record](#record)
- [Play](#play)
- [Render](#render)
- [Share](#share)
- [Generate](#generate)
- [Configurations](#configurations)
- [Recording](#recording)
- [Delays](#delays)
- [GIF](#gif)
- [Terminal](#terminal)
- [Theme](#theme)
- [Watermark](#watermark)
- [Frame Box](#frame-box)
- [Null Frame](#null-frame)
- [Window Frame](#window-frame)
- [Floating Frame](#floating-frame)
- [Solid Frame](#solid-frame)
- [Solid Frame Without Title](#solid-frame-without-title)
- [Styling Hint](#styling-hint)
- [FAQ](#faq)
- [How to support ZSH](#how-to-support-zsh)
- [Issues](#issues)
- [License](#license)
# Features
- Highly customizable.
- Cross platform (Linux, Windows, MacOS).
- Custom `window frames`.
- Custom `font`.
- Custom `colors`.
- Custom `styles` with `CSS`.
- Watermark.
- Edit frames and adjust delays before rendering.
- Skipping frames by a step value to reduce the number of rendered frames.
- Render images with texts on them instead of capturing your screen for better quality.
- The ability to configure:
- The command to capture (bash, powershell.exe, yourOwnCommand, etc)
- The current working directory.
- Explicit values for the number of cols and rows.
- GIF quality and repeating.
- Frames delays.
- The max idle time between frames.
- Cursor style.
- Font.
- Font size.
- Line height.
- Letter spacing.
- Theme.
# What's Next
- The `Generate` command to generate a web player for a recording file.
- Support `apt-get`, `yum`, `brew` installation.
# Installation
You need to install [Node.js](https://nodejs.org/en/download/) first, then install the tool globally using this command:
```bash
npm install -g terminalizer
```
> Still facing an issue? Check the [Issues](#issues) section or open a new issue.
The installation should be very smooth with Node.js v4-v16. For newer versions, if the installation is failed, you may need to install the development tools to build the `C++` add-ons. Check [node-gyp](https://github.com/nodejs/node-gyp#installation).
# Getting Started
Start recording your terminal using the `record` command.
```bash
terminalizer record demo
```
A file called `demo.yml` will be created in the current directory. You can open it using any editor to edit the configurations and the recorded frames. You can replay your recording using the `play` command.
```bash
terminalizer play demo
```
Now let's render our recording as an animated gif.
```bash
terminalizer render demo
```
## Compression
GIF compression is not implemented yet. For now we recommend [https://gifcompressor.com](https://gifcompressor.com).
# Usage
> You can use the `--help` option to get more details about the commands and their options
```bash
terminalizer [options]
```
## Init
> Create a global config directory
```bash
terminalizer init
```
## Config
> Generate a config file in the current directory
```bash
terminalizer config
```
## Record
> Record your terminal and create a recording file
```bash
terminalizer record
```
Options
```
-c, --config Overwrite the default configurations [string]
-d, --command The command to be executed [string] [default: null]
-k, --skip-sharing Skip sharing and showing the sharing prompt message [boolean] [default: false]
```
Examples
```
terminalizer record foo Start recording and create a recording file called foo.yml
terminalizer record foo --config config.yml Start recording with your own configurations
```
## Play
> Play a recording file on your terminal
```bash
terminalizer play
```
Options
```
-r, --real-timing Use the actual delays between frames as recorded [boolean] [default: false]
-s, --speed-factor Speed factor, multiply the frames delays by this factor [number] [default: 1]
```
## Render
> Render a recording file as an animated gif image
```bash
terminalizer render
```
Options
```
-o, --output A name for the output file [string]
-q, --quality The quality of the rendered image (1 - 100) [number]
-s, --step To reduce the number of rendered frames (step > 1) [number] [default: 1]
```
## Share
> Upload a recording file and get a link for an online player
```bash
terminalizer share
```
## Generate
> Generate a web player for a recording file
```bash
terminalizer generate
```
# Configurations
The default `config.yml` file is stored under the root directory of the project. Execute the below command to copy it to your current directory.
> Use any editor to edit the copied `config.yml`, then use the `-c` option to override the default one.
```bash
terminalizer config
```
> RECOMMENDED, use the `init` command to create a global config file to be used instead of the default one.
```bash
terminalizer init
```
For Linux and MacOS, the created directory is located under the home directory `~/config/terminalizer`. For Windows, it is located under the `AppData`.
## Recording
- `command`: Specify a command to be executed like `/bin/bash -l`, `ls`, or any other command. The default is `bash` for `Linux` or `powershell.exe` for `Windows`.
- `cwd`: Specify the current working directory path. The default is the current working directory path.
- `env`: Export additional ENV variables, to be read by your scripts when starting the recording.
- `cols`: Explicitly set the number of columns or use `auto` to take the current number of columns of your shell.
- `rows`: Explicitly set the number of rows or use `auto` to take the current number of rows of your shell.
## Delays
- `frameDelay`: The delay between frames in ms. If the value is `auto` use the actual recording delays.
- `maxIdleTime`: Maximum delay between frames in ms. Ignored if the `frameDelay` isn't set to `auto`. Set to `auto` to prevent limiting the max idle time.
## GIF
- `quality`: The quality of the generated GIF image (1 - 100).
- `repeat`: Amount of times to repeat GIF:
- If value is `-1`, play once.
- If value is `0`, loop indefinitely.
- If value is a positive number, loop `n` times.
## Terminal
- `cursorStyle`: Cursor style can be one of `block`, `underline`, or `bar`.
- `fontFamily`: You can use any font that is installed on your machine like `Monaco` or `Lucida Console` (CSS-like list).
- `fontSize`: The size of the font in pixels.
- `lineHeight`: The height of lines in pixels.
- `letterSpacing`: The spacing between letters in pixels.
## Theme
You can set the colors of your terminal using one of the CSS formats:
- Hex: `#FFFFFF`.
- RGB: `rgb(255, 255, 255)`.
- HSL: `hsl(0, 0%, 100%)`.
- Name: `white`, `red`, `blue`.
> You can use the value `transparent` too.
The default colors that are assigned to the terminal colors are:
- background: ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `transparent`
- foreground: ![#afafaf](https://placehold.it/15/afafaf/000000?text=+) `#afafaf`
- cursor: ![#c7c7c7](https://placehold.it/15/c7c7c7/000000?text=+) `#c7c7c7`
- black: ![#232628](https://placehold.it/15/232628/000000?text=+) `#232628`
- red: ![#fc4384](https://placehold.it/15/fc4384/000000?text=+) `#fc4384`
- green: ![#b3e33b](https://placehold.it/15/b3e33b/000000?text=+) `#b3e33b`
- yellow: ![#ffa727](https://placehold.it/15/ffa727/000000?text=+) `#ffa727`
- blue: ![#75dff2](https://placehold.it/15/75dff2/000000?text=+) `#75dff2`
- magenta: ![#ae89fe](https://placehold.it/15/ae89fe/000000?text=+) `#ae89fe`
- cyan: ![#708387](https://placehold.it/15/708387/000000?text=+) `#708387`
- white: ![#d5d5d0](https://placehold.it/15/d5d5d0/000000?text=+) `#d5d5d0`
- brightBlack: ![#626566](https://placehold.it/15/626566/000000?text=+) `#626566`
- brightRed: ![#ff7fac](https://placehold.it/15/ff7fac/000000?text=+) `#ff7fac`
- brightGreen: ![#c8ed71](https://placehold.it/15/c8ed71/000000?text=+) `#c8ed71`
- brightYellow: ![#ebdf86](https://placehold.it/15/ebdf86/000000?text=+) `#ebdf86`
- brightBlue: ![#75dff2](https://placehold.it/15/75dff2/000000?text=+) `#75dff2`
- brightMagenta: ![#ae89fe](https://placehold.it/15/ae89fe/000000?text=+) `#ae89fe`
- brightCyan: ![#b1c6ca](https://placehold.it/15/b1c6ca/000000?text=+) `#b1c6ca`
- brightWhite: ![#f9f9f4](https://placehold.it/15/f9f9f4/000000?text=+) `#f9f9f4`
## Watermark
You can add a watermark logo to your generated GIF images.
```
watermark:
imagePath: AbsolutePathOrURL
style:
position: absolute
right: 15px
bottom: 15px
width: 100px
opacity: 0.9
```
- `watermark.imagePath`: An absolute path for the image on your machine or a URL.
- `watermark.style`: Apply CSS styles (camelCase) to the watermark image, like resizing it.
## Frame Box
Terminalizer comes with predefined frames that you can use to make your GIF images look cool.
- `frameBox.type`: Can be `null`, `window`, `floating`, or `solid`.
- `frameBox.title`: To display a title for the frame or `null`.
- `frameBox.style`: To apply custom CSS styles or to override the current ones.
### Null Frame
No frame, just your recording.
> Don't forget to add a `backgroundColor` under `style`.
```
frameBox:
type: null
title: null
style:
backgroundColor: black
```
### Window Frame
```
frameBox:
type: window
title: Terminalizer
style: []
```
### Floating Frame
```
frameBox:
type: floating
title: Terminalizer
style: []
```
### Solid Frame
```
frameBox:
type: solid
title: Terminalizer
style: []
```
### Solid Frame Without Title
```
frameBox:
type: solid
title: null
style: []
```
### Styling Hint
You can disable the default shadows and margins.
```
frameBox:
type: solid
title: null
style:
boxShadow: none
margin: 0px
```
# FAQ
### How to support ZSH
The default command that gets recorded for Linux is `bash -l`. You need to change the default command to `zsh`.
- Generate a config file in the current directory
```bash
terminalizer config
```
- Open the generated config file in your preferred editor.
- Change the `command` to `zsh`:
```
command: zsh
```
- You may need to change the font, check the font that is used in your terminal:
```
fontFamily: "Meslo for Powerline, Meslo LG M for Powerline"
```
- Use the `-c` option to override the config file:
```bash
terminalizer record demo -c config.yml
```
# Issues
> error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory
Solution:
```bash
sudo yum install libXScrnSaver
```
> error while loading shared libraries: libgconf-2.so.4: cannot open shared object file: No such file or directory
Solution:
```bash
sudo apt-get install libgconf-2-4
```
> Error: EACCES: permission denied, access '/usr/local/lib'
Solution:
```bash
sudo mkdir -p /usr/local/lib/node_modules && sudo chown -R $(whoami):$(whoami) /usr/local/lib/node_modules
# then use the install command in the "Installation" section above
npm install -g terminalizer
```
# License
This project is under the MIT license.