# Instructions

## Hyper.js

### Installation

```
brew cask install hyper
```

Or, if you do not have homebrew (you should ;)): [Download](https://releases.hyper.is/download/mac) and install Hyper.js

### Basic Configuration

Hyper’s config is defined in the `~/.hyper.js` file (located in your home directory).

```javascript
// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.

module.exports = {
  config: {
    // choose either `'stable'` for receiving highly polished,
    // or `'canary'` for less polished but more frequent updates
    updateChannel: "stable",

    // default font size in pixels for all tabs
    fontSize: 12,

    // font family with optional fallbacks
    fontFamily:
      'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

    // default font weight: 'normal' or 'bold'
    fontWeight: "normal"

    // rest of the config
  }
  // rest of the file
};
```

Here we have complete control over our settings. Let's get it on!

#### Font

1. `fontSize` - I changed my fontSize to 13, but you can use the fontSize you prefer.
2. `fontFamily` - Let's use a really nice font with ligatures - [FiraCode](https://github.com/tonsky/FiraCode). Since the brew installation of this font might install an outdated version, we are going to install this one manually:

   1. Download the latest version of the font from the [Github Releases tab](https://github.com/tonsky/FiraCode/releases)
   2. Extract the archive and open the ttf directory.
   3. Select all `.ttf` files > right click > Open > Install Font
   4. Configure the font in the `~/.hyper.js` file (with double quotes around Fira Code):

   ```javascript
   module.exports = {
     config: {
       fontFamily:
         '"Fira Code", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace'
       // rest of the config
     }
     // rest of the file
   };
   ```

   5. To enable font ligatures, we have to install a Hyper.js plugin named `hyper-font-ligatures`. Write this in your Hyper.js terminal:

   ```
   hyper i hyper-font-ligatures
   ```

   6. The plugin should automatically appear in your `~/.hyper.js` file in the plugins sections. To enable ligatures we need to add one more line to the config (look [here](https://github.com/tolbertam/hyper-font-ligatures/issues/8) and [here](https://github.com/zeit/hyper/issues/3607) for more information):

   ```javascript
   module.exports = {
     config: {
       // rest of the config
       webGLRenderer: false
     }
     // rest of the file
   };
   ```

   7. Everything should work as expected now and we should have the new font with ligatures in the terminal.

#### Theme

Hyper.js has [themes available from their own website](https://hyper.is/themes?newest).I'm going to install the [hyper-one-dark](https://hyper.is/plugins/hyper-one-dark) theme:

```
hyper i hyper-one-dark
```

#### Search Plugin

To be able to perform search operation in Hyper.js, we need to install a plugin named [hyper-search](https://hyper.is/plugins/hyper-search).

```
hyper i hyper-search
```

After installation, we need to restart Hyper.js for the changes to take effect.

#### Pane Navigation Plugin

Hyper.js has a cool plugin named [hyper-pane](https://hyper.is/plugins/hyper-pane) to be able to jump between different panes.

```
hyper i hyper-pane
```

#### Open New Tabs in the Same Directory

When opening new tabs, I often want to be in the same directory. To be able to do it, let’s add [hypercwd](https://hyper.is/plugins/hypercwd).

```
hyper i hypercwd
```

#### Mark Active Tab with a Symbol

When using multiple tabs, it might be hard to find the current active one. With [hyper-active-tab](https://hyper.is/plugins/hyper-active-tab) we can add an icon to the active tab.

```
hyper i hyper-active-tab
```

You can configure a custom icon like this:

```javascript
module.exports = {
  config: {
    // rest of the config
    activeTab: "🚀"
  }
  // rest of the file
};
```

#### Showing CPU, RAM, Battery stats

If we want to track our CPU, Memory, Battery resources we can add [hyperline](https://github.com/hyperline/hyperline).

```
hyper i hyperline
```

After installation, we need to restart Hyper.js for the changes to take effect.

## ZSH

### Installation

```
brew install zsh
```

After `zsh` installation, we need to specify that we want to use it in the `~/.hyper.js` config:

```javascript
module.exports = {
  config: {
    // rest of the config
    shell: "/usr/local/bin/zsh"
  }
  // rest of the file
};
```

Right now, Hyper.js should use `zsh` as the default shell.

## Starship

### Installation

```
brew install starship
```

To use the Starship prompt, we need to add it to our `~/.zshrc` configuration file.

```
echo 'eval "$(starship init zsh)"' >> ~/.zshrc
```

We need to restart Hyper.js for the changes to take effect.

### Syntax Highlighting

```
# Create a `.zsh` directory to store our plugins in one place
mkdir ~/.zsh

# Clone repo to `~/.zsh/` directory
cd ~/.zsh && git clone https://github.com/zdharma/fast-syntax-highlighting.git

# Enable 'fast-syntax-highlighting' plugin in ZSH
echo "source $HOME/.zsh/fast-syntax-highlighting/fast-syntax-highlighting.plugin.zsh" >> ~/.zshrc

# Reload ZSH
source ~/.zshrc
```

### Completion Plugin

We are going to use ```wget``` here. If you don't have ```wget``` on your Mac, you can install it like this.

```
brew install wget
```

```
# Download completion config
cd ~/.zsh && wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/lib/completion.zsh

# Enable 'completion' plugin in ZSH
echo "source $HOME/.zsh/completion.zsh" >> ~/.zshrc
```

For this to work, we need to add a few more lines to our `~/.zshrc` file.

```
# rest of the `~/.zshrc` file

# Load completion config
source $HOME/.zsh/completion.zsh

# Initialize the completion system
autoload -Uz compinit

# Cache completion if nothing changed - faster startup time
typeset -i updated_at=$(date +'%j' -r ~/.zcompdump 2>/dev/null || stat -f '%Sm' -t '%j' ~/.zcompdump 2>/dev/null)
if [ $(date +'%j') != $updated_at ]; then
  compinit -i
else
  compinit -C -i
fi

# Enhanced form of menu completion called `menu selection'
zmodload -i zsh/complist
```

We need to restart Hyper.js for the changes to take effect.

### Autosuggestions Plugin

```
# Download 'zsh-autosuggestions' plugin
cd ~/.zsh && git clone https://github.com/zsh-users/zsh-autosuggestions.git

# Enable 'zsh-autosuggestions' plugin in ZSH
echo "source $HOME/.zsh/zsh-autosuggestions/zsh-autosuggestions.zsh" >> ~/.zshrc

# Reload ZSH
source ~/.zshrc
```

### History Plugin

```
# Download history config
cd ~/.zsh && wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/lib/history.zsh

# Enable 'history' config in ZSH
echo "source $HOME/.zsh/history.zsh" >> ~/.zshrc

# Reload ZSH
source ~/.zshrc
```

Now, by using the Up Arrow we can go back to our previous commands.

### Colorized `ls` Output

```
# Enable colorized output for `ls` command.
echo "alias ls='ls -G'" >> ~/.zshrc

# Reload ZSH
source ~/.zshrc
```

### Key Bindings

When working in the terminal on daily basis, it’s good to have shortcuts enabled. Going back to the beginning of the line `(CMD + LEFT ARROW)`, or to the end `(CMD + RIGHT ARROW)`?

```
# Download key bindings config
cd ~/.zsh && wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/lib/key-bindings.zsh

# Enable 'key-bindings' config in ZSH
echo "source $HOME/.zsh/key-bindings.zsh" >> ~/.zshrc

# Reload ZSH
source ~/.zshrc
```

### Aliases

Aliases play a huge part in productivity when using a command line.

```
cd ~/.zsh/
touch aliases.zsh
echo "source $HOME/.zsh/aliases.zsh" >> ~/.zshrc
```

A few useful aliases that I often use are listed below:

```
alias ls='ls -G' # colorize `ls` output
alias zshreload='source ~/.zshrc' # reload ZSH
alias shtop='sudo htop' # run `htop` with root rights
alias grep='grep --color=auto' # colorize `grep` output
alias ..='cd ..'
alias ...='cd ../..'
alias ....='cd ../../..'
alias less='less -R'
alias g='git'

alias rm='rm -i' # confirm removal
alias cp='cp -i' # confirm copy
alias mv='mv -i' # confirm move
alias weather='curl v2.wttr.in' # print weather for current location (https://github.com/chubin/wttr.in)
```

## Credits
Credits to [Thomas Jaskiewicz](https://dev.to/netguru/howto-my-terminal-shell-setup-hyper-js-zsh-starship-2j2k) for setting this up. 

Fixed some issues with github url's for the Hyper.js plugins. I will try my best to update this gist when new (useful) Hyper.js plugins are available.