Forem: Du Hoang

Custom terminal with oh-my-zsh and starship

Du Hoang — Tue, 30 Jan 2024 06:12:57 +0000

My setup

OS: macOS Monterey 12.5.1
Editor: Visual Studio Code
Theme: Bearded Theme HC Ebony

oh-my-zsh and nerd-font

Install oh-my-zsh

Your ~/.zshrc file should have these lines

export ZSH="$HOME/.oh-my-zsh"
ZSH_THEME="simple"
source $ZSH/oh-my-zsh.sh

Download and install nerd-font

Starship

Install starship
Edit your ~/.zshrc file using this command

nvim ~/.config/starship.toml

nano ~/.config/starship.toml

Add the following to the end of your ~/.zshrc file

eval "$(starship init zsh)"

The default starship will look like this

Config

To remove runtime, run this command

starship preset no-runtime-versions -o ~/.config/starship.toml

Add these configs to the top of the ~/.zshrc file

"$schema" = 'https://starship.rs/config-schema.json'

add_newline = false

[line_break]
disabled = true

[character] 
success_symbol = '[➜](bold green)'
error_symbol = "[➜](red)"
vicmd_symbol = "[❮](green)"

Final ~/.config/starship.toml file should be like this

Vue 3: Add font-awsome icons

Du Hoang — Mon, 09 May 2022 03:44:55 +0000

Tech detail:

Ubuntu 22.04
VueJS 3
Font-awsome
TypeScript

URLs:
https://www.npmjs.com/package/@fortawesome/vue-fontawesome
https://fontawesome.com/icons

Install

Your package.json should looked like this



"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/vue-fontawesome": "^3.0.0-5",

Run these commands (these might have more than what you need)



npm i --save @fortawesome/fontawesome-svg-core

npm i --save @fortawesome/free-solid-svg-icons

npm i --save @fortawesome/free-brands-svg-icons

npm i --save @fortawesome/free-regular-svg-icons

npm i --save @fortawesome/vue-fontawesome@prerelease

Update main.js

Your src/main.ts should looked like this



import { createApp } from "vue";

import { createPinia } from "pinia";

import App from "./App.vue";

import router from "./router";

import { library } from "@fortawesome/fontawesome-svg-core";

import { faTrashCan } from "@fortawesome/free-solid-svg-icons"; <--- Add any icons you need here

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

const app = createApp(App);

library.add(faTrashCan);

app.component("font-awesome-icon", FontAwesomeIcon);

app.use(createPinia());

app.use(router);

app.mount("#app");

Usage

A file which uses the trash icon will looked like this



<template>

  <div class="delete-item">

    <slot id="id"><font-awesome-icon :icon="['fas', 'trash-can']" /></slot>

  </div>

</template>

<style scoped>

.delete-item {

  margin: 1rem;

  padding: 0.5rem;

}

</style>

Result

Ubuntu 22.04: Create Blitzjs app

Du Hoang — Tue, 26 Apr 2022 13:58:33 +0000

OS: Ubuntu 22.04

There is a bug relevant to openSSL, prisma for this newest version of Ubuntu
There are 2 ways to fix it (Not really sure about this)

Update package, use prisma dev version (I chose this)

Install older openSSL version

Step-by-step to create a Blitzjs app

Create the app

npm install -g blitz --legacy-peer-deps

blitz new myAppName

cd myAppName

Fix the bug

Open the project
Open package.json file
Update packages

dependencies: "@prisma/client": "3.13.0-dev.29"
devDependencies: "prisma": "3.13.0-dev.29"

Migrate

blitz prisma migrate dev

Start the project

blitz dev

Ubuntu: Create Postman shortcut

Du Hoang — Sat, 22 Jan 2022 03:40:14 +0000

Ubuntu 21.10

You just installed postman without using snap and don't know how to add it to your dock? Here is how

Create desktop entry

Open terminal and type



cd /usr/share/applications/

Then



sudo nano postman.desktop

nano can be replaced with gedit

Enter your password, a file will be opened for you, paste these



[Desktop Entry]
Encoding=UTF-8
Version=1.0
Type=Application
Name=Postman
Icon=postman.png <-- *Check this*
Path=/home/[your username]/Postman <-- *Check this*
Exec=/home/[your username]/Postman/Postman <-- *Check this*
StartupNotify=false
StartupWMClass=Postman
OnlyShowIn=Unity;GNOME;
X-UnityGenerated=true

Save

Add to your favorites

Click on Show Applications

Search for Postman

Open it

Right click and choose Add to Favorites

Zsh/Zimfw: Fix bug prompt-pwd

Du Hoang — Fri, 21 Jan 2022 10:19:30 +0000

Ubuntu

1. Open .zimrc in Home

2. Paste these lines



zmodule prompt-pwd
zmodule git-info

3. Save

Fix bug: Zsh/zimfw terminal cannot find modules

Du Hoang — Thu, 20 Jan 2022 14:21:22 +0000

It happens when your git bash have modules like "npm", "yarn" locally NOT globally but your zsh terminal said module not found. This is how to fix it:

Ubuntu

Open .bashrc in Home
Open .zshrc in Home
Copy last 3 lines of the .bashrc and paste to the last line of .zshrc file. Mine is like:
export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
Save

Install powerline for zsh/zimfw

Du Hoang — Thu, 20 Jan 2022 14:12:39 +0000

After installing zsh/zimfw, there can be an annoying problem with terminal font to solve this. I recommend powerline, here is how to do

Ubuntu 21
Windows please comment your results, bugs etc

Clone

git clone https://github.com/powerline/fonts.git --depth=1

Install

cd fonts
./install.sh

Clean-up

cd ..
rm -rf fonts

Set the font wherever you like
For example: VSCode

Install zsh/zimfw on Ubuntu 20+

Du Hoang — Wed, 19 Jan 2022 09:12:47 +0000

Install zsh

Open terminal and run

curl -fsSL https://raw.githubusercontent.com/zimfw/install/master/install.zsh | zsh

Check zsh is installed

Open terminal and run

which zsh

Config zsh

Open terminal and run

zsh

Config whatever you like
I choose 0

Install zimfw

Download this file from

https://github.com/zimfw/install/blob/master/install.zsh

Open terminal, type in zsh, cd to the directory that contains the file you just downloaded, type zsh ${fileName}

Config / Add theme

Go to file .zimrc
Edit zmodule ${themeName}. default is asciiship
Save
Run Zimfw install inside zsh terminal or just restart the terminal

Simple Customization for Windows Terminal

Du Hoang — Thu, 26 Aug 2021 04:36:24 +0000

An easy step-by-step to customize your windows terminal

Install Windows Terminal from windows Store
Install GIT (if you need it) from https://git-scm.com/downloads
Install a nerd font from https://www.nerdfonts.com/font-downloads, I choose UbuntuMono NF
Open PowerShell and paste these:
Install-Module posh-git -Scope CurrentUser Install-Module oh-my-posh -Scope CurrentUser
Confirm any message using Y and A
Update/Create PROFILE: open windows terminal and paste this
notepad $PROFILE
accept to create one if it asked, then paste this:
Import-Module posh-git Import-Module oh-my-posh Set-PoshPrompt -Theme Paradox

Save it

Paradox is the name of the theme
Get all themes' name by using: Get-PoshThemes
Set font UbuntuMono NF of any terminal you would like to use like: Window Terminal, VS Code.
Result

In windows terminal

With GIT