Solarized is a sixteen color palette (eight monotones, eight accent colors) designed by Ethan Schoonover.

Selenized is a redesign on Solarized by Jan Warchoł. It improves on Solarized by providing better contrast and more distinguishable accent colors.

Note: Color values here are canonical in CIE L*a*b* colorspace. The included sRGB values were computed with base16cs Rust tool that I developed. It uses palettte for colorspace computation.

Solarized (dark & light)

Selenized (dark & light)

Solarized and Selenized (dark)

Solarized and Selenized (light)

Credits

• Solarized - Ethan Schoonover
• Selenized - Jan Warchol

(In Solarized dark this time)

I installed hop.nvim and registers its keybindings with LazyVim’s keybinding config and which-key for the group. In ~/.config/nvim/lua/plugins/hop.lua:

return {
  -- `hop` is an EasyMotion-like plugin allowing you to jump anywhere in a
  -- document with as few keystrokes as possible.
  {
    "smoka7/hop.nvim",
    version = "*",
    main = "hop",
    opts = {
      keys = "hklyuiopnm,qwertzxcvbasdgjf;",
    },
    keys = {
      { "<leader>hw", "<cmd>HopWord<cr>", mode = "", desc = "Hop to all words in the visible buffer; most useful!" },
      { "<leader>hl", "<cmd>HopLine<cr>", mode = "", desc = "Hop to the first column of each visible line" },
      {
        "<leader>hs",
        "<cmd>HopLineStart<cr>",
        mode = "",
        desc = "Hop to the first non-whitespace character of each line",
      },
      {
        "<leader>hv",
        "<cmd>HopVertical<cr>",
        mode = "",
        desc = "Hop to each line, keeping cursor column position the same",
      },
      { "<leader>h/", "<cmd>HopPattern<cr>", desc = "Validate search (`/`) with hints" },
      { "<leader>ha", "<cmd>HopAnywhere<cr>", mode = "", desc = "Hop anywhere" },
    },
  },

  -- Register the `<leader>h` prefix as with a group name in which-key.
  {
    "folke/which-key.nvim",
    opts = {
      defaults = {
        ["<leader>h"] = { name = "+hop" },
      },
    },
  },
}

But then I found this example config to make them rainbow colored. I thought that was pretty neat. I landed on the following Lua script to achieve this.

In ~/.config/nvim/lua/plugins/indent-blankline.lua:

LazyVim is a NeoVim plugin manager. It comes with a bundle of plugins that the author/community has vetted to be working quite well together.

It makes managing nvim plugins and configuring them to your tastes quite easy and pleasant to do. I’ve been having a blast with it.

Solarized ☯

The first thing that I did was to install and configure Solarized colorscheme.

In LazyVim, I simply created a solarized.lua file in ~/.config/nvim/lua/plugins directory.

return {
  -- add Lua-scriptable solarized color scheme
  {
    "maxmx03/solarized.nvim",
    lazy = false,
    name = "solarized",
    main = "solarized",
    priority = 1000,
    -- See: https://www.lazyvim.org/configuration/plugins#%EF%B8%8F-customizing-plugin-specs
    opts = {
      -- See: https://github.com/maxmx03/solarized.nvim?tab=readme-ov-file#default-config
      styles = {
        -- Turn off the bolding of keywords syntax that this particular scheme does
        keywords = { bold = false },
      },
    },
    config = function(plugin, opts)
      vim.o.background = "light"
      require(plugin.main).setup(opts)
      vim.cmd.colorscheme = "solarized"
    end,
  },

  -- configure LazyVim to load solarized
  {
    "LazyVim/LazyVim",
    opts = {
      colorscheme = "solarized",
    },
  },
}

I quite enjoyed how much more structured that process was, especially NeoVim’s scriptability with Lua.

In NeoVide, this looks 🔥

👆🏼 Neovide with notable settings and plugins:

• NERDTree
• gutters shown
• vim-airline, with
  • devicons
  • Monaspace Neon Nerd Font for glyphs
• Solarized color scheme

I’d been zipping around NeoVim, in both terminal and NeoVide, especially with a newfound power in mini.jump2d and vim-easymotion (I would eventually replace these two with hop.nvim).

I discovered Alacritty on my search for an alternative—preferably cross-platform—terminal emulator, as I kept bumping against Mac OS’ default Terminal.app’s limitations and rough edges.

What drew me the most to Alacritty is its configurability and customization options, especially as they can be expressed in developer-friendly .toml file format.

Here’s what my Alacritty terminal currently looks like (Solarized, of course).

With my alacritty.toml settings:

[shell]
program = "/bin/zsh"
args = ["-l"]

[window]
dimensions = { columns = 240, lines = 80 }
padding = { x = 5, y = 5 }
dynamic_padding = true
opacity = 0.8
blur = true # Only works on MacOS

[font]
normal.family = "MonaspiceNe Nerd Font"
size = 12

# Colors: Solarized Light
[colors.primary]
foreground  = '0x586e75'
background  = '0xfdf6e3'
[colors.normal]
black       = '0x073642'
red         = '0xdc322f'
green       = '0x859900'
yellow      = '0xb58900'
blue        = '0x268bd2'
magenta     = '0xd33682'
cyan        = '0x2aa198'
white       = '0xeee8d5'
[colors.bright]
black       = '0x002b36'
red         = '0xcb4b16'
green       = '0x586e75'
yellow      = '0x657b83'
blue        = '0x839496'
magenta     = '0x6c71c4'
cyan        = '0x93a1a1'
white       = '0xfdf6e3'

[os.symbols]
Macos     = ""
Ubuntu    = "󰕈"
Windows   = "󰍲"
Alpine    = ""
Amazon    = ""
Android   = ""
Arch      = "󰣇"
Artix     = "󰣇"
CentOS    = ""
Debian    = "󰣚"
Fedora    = "󰣛"
Gentoo    = "󰣨"
Linux     = "󰌽"
Raspbian  = "󰐿"
Redhat    = "󱄛"
SUSE      = ""
Mint      = "󰣭"
Manjaro   = ""

NF-patched fonts aren’t usually freely available on CDN or other like distribution packages on the web. For this project, I need to download the patched .ttf, compress it into .woff2, include it in this site, and define a CSS font family out of it.

Install Monaspace Nerd Fonts

TIP: Monaspace (by GitHub) looks gorgeous! The whole set is pleasant to behold and I appreciate the coding-specific and contextual ligatures that they’ve done. I’m using it in my IDEs and terminals, too, wherever I can.

First, we install the NF-patched fonts set (along with the original).

brew install --cask font-monaspace-nerd-font font-monaspace

We can then convert the downloaded OTF (OpenType Fonts) files into WOFF (Web Fonts) files.

Define a new web font family

In our SCSS file:

/* Define a font family for Nerd Fonts patched variant of Monaspace Neon. */
@font-face {
  font-family: 'MonaspiceNe Nerd Font';
  src: url('/assets/fonts/MonaspiceNeNerdFont-Regular.woff2') format('woff2'),
       url('/assets/fonts/MonaspiceNeNerdFont-Regular.woff') format('woff'),
       url('/assets/fonts/MonaspiceNeNerdFont-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* system typefaces */
$monospace: 'MonaspiceNe Nerd Font', monospace;

tt,
code,
kbd,
samp,
pre {
  font-family: $monospace;
  // Render all ligature and contextual healing features in Monaspace.
  // See: https://github.com/githubnext/monaspace?tab=readme-ov-file#coding-ligatures
  font-feature-settings: 'calt', 'liga', 'dlig', 'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'ss07', 'ss08';
}

Using NF with CSS classes

We can also render NF glyphs using CSS class names. See: Nerd Fonts Cheat Sheet

@import "https://www.nerdfonts.com/assets/css/webfont.css"

I really <i class="nf nf-fa-heart"></i>
         <i class="nf nf-custom-vim">im</i> &
         <i class="nf nf-custom-neovim">vim</i>

I really im & vim

I just discovered Starship, a Rusty terminal cross-shell prompt with tons of customization options.

Installation

Installation is easy with Homebrew.

brew install starship

Installing Nerd Fonts

The prompt heavily utilizes extended unicode glyphs that are available in the Nerd Fonts patched fonts set. Installing an NF-patched Meslo font, for instance, can be done easily on a Mac OS with Homebrew.

brew tap homebrew/cask-fonts
brew install --cask font-meslo-lg-nerd-font

Then, we need to use that font in our Terminal or VSCode apps. For Terminal.app, I find that “MesloLGS Nerd Font” works best. For VSCode, I am trying out “MonaspiceNe Nerd Font” (based on GitHub’s latest Monaspace font family) at the moment.

TODO: I need to also use this font for this site. Using the system font default, these glyphs will not be able to render properly.

Configuring Starship

I really like the Gruvbox Rainbow preset as a base.

starship preset gruvbox-rainbow -o ~/.config/starship.toml

But I want to Solarize it. So I tweaked its palette, and ended up with this starship.toml file.

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

format = """
[](sol_orange)\
$os\
$username\
[](bg:sol_yellow fg:sol_orange)\
$directory\
[](fg:sol_yellow bg:sol_cyan)\
$git_branch\
$git_status\
[](fg:sol_cyan bg:sol_blue)\
$c\
$rust\
$golang\
$nodejs\
$php\
$java\
$kotlin\
$haskell\
$python\
[](fg:sol_blue bg:base2)\
$docker_context\
[](fg:base2 bg:base2)\
$time\
[ ](fg:base2)\
$line_break$character"""

palette = 'solarized_light'

[palettes.solarized_light]
# background and content tones:
#                           # DARK MODE             | LIGHT MODE
base03        = '#002b36'   # background            | -
base02        = '#073642'   # background highlights | -
base01        = '#586e75'   # comments              | opt. emph. content
base00        = '#657b83'   # -                     | primary content
base0         = '#839496'   # primary content       | -
base1         = '#93a1a1'   # opt. emph. content    | comments
base2         = '#eee8d5'   # -                     | background highlights
base3         = '#fdf6e3'   # -                     | background
# accent colors:
sol_yellow    = '#b58900'
sol_orange    = '#cb4b16'
sol_red       = '#dc322f'
sol_magenta   = '#d33682'
sol_violet    = '#6c71c4'
sol_blue      = '#268bd2'
sol_cyan      = '#2aa198'
sol_green     = '#859900'
# Note that for tones, the normal relationship for background and body text
# is `base03:base0` for dark mode and `base3:base00` for light mode.
# Notice the "flipping" of leading 0?

[os]
disabled = false
style = "bg:sol_orange fg:base3"

[os.symbols]
Macos = ""
Ubuntu = "󰕈"
Windows = "󰍲"
SUSE = ""
Raspbian = "󰐿"
Mint = "󰣭"
Manjaro = ""
Linux = "󰌽"
Gentoo = "󰣨"
Fedora = "󰣛"
Alpine = ""
Amazon = ""
Android = ""
Arch = "󰣇"
Artix = "󰣇"
CentOS = ""
Debian = "󰣚"
Redhat = "󱄛"
RedHatEnterprise = "󱄛"

[username]
show_always = true
style_user = "bg:sol_orange fg:base3"
style_root = "bg:sol_orange fg:base3"
format = '[ $user ]($style)'

[directory]
style = "bg:sol_yellow fg:base3"
format = "[ $path ]($style)"
truncation_length = 3
truncation_symbol = "…/"

[directory.substitutions]
"Documents" = "󰈙 "
"Downloads" = " "
"Music" = "󰝚 "
"Pictures" = " "
"Code" = "󰲋 "
"workspace" = "󰲋 "

[git_branch]
symbol = ""
style = "bg:sol_cyan"
format = '[[ $symbol $branch ](fg:base3 bg:sol_cyan)]($style)'

[git_status]
style = "bg:sol_cyan"
format = '[[($all_status$ahead_behind )](fg:base3 bg:sol_cyan)]($style)'

[nodejs]
symbol = ""
style = "bg:sol_blue"
format = '[[ $symbol( $version) ](fg:base3 bg:sol_blue)]($style)'

[c]
symbol = " "
style = "bg:sol_blue"
format = '[[ $symbol( $version) ](fg:base3 bg:sol_blue)]($style)'

[rust]
symbol = ""
style = "bg:sol_blue"
format = '[[ $symbol( $version) ](fg:base3 bg:sol_blue)]($style)'

[golang]
symbol = ""
style = "bg:sol_blue"
format = '[[ $symbol( $version) ](fg:base3 bg:sol_blue)]($style)'

[php]
symbol = ""
style = "bg:sol_blue"
format = '[[ $symbol( $version) ](fg:base3 bg:sol_blue)]($style)'

[java]
symbol = " "
style = "bg:sol_blue"
format = '[[ $symbol( $version) ](fg:base3 bg:sol_blue)]($style)'

[kotlin]
symbol = ""
style = "bg:sol_blue"
format = '[[ $symbol( $version) ](fg:base3 bg:sol_blue)]($style)'

[haskell]
symbol = ""
style = "bg:sol_blue"
format = '[[ $symbol( $version) ](fg:base3 bg:sol_blue)]($style)'

[python]
symbol = ""
style = "bg:sol_blue"
format = '[[ $symbol( $version) ](fg:base3 bg:sol_blue)]($style)'

[docker_context]
symbol = ""
style = "bg:base2"
format = '[[ $symbol( $context) ](fg:#83a598 bg:base2)]($style)'

[time]
disabled = false
time_format = "%R"
style = "bg:base3"
format = '[[  $time ](fg:base00 bg:base2)]($style)'

[line_break]
disabled = false

[character]
disabled = false
success_symbol = '[>](bold fg:sol_green)'
error_symbol = '[>](bold fg:sol_red)'
vimcmd_symbol = '[<](bold fg:sol_green)'
vimcmd_replace_one_symbol = '[<](bold fg:sol_violet)'
vimcmd_replace_symbol = '[<](bold fg:sol_violet)'
vimcmd_visual_symbol = '[<](bold fg:sol_yellow)'

Neat!

Buttons

<md-outlined-button>Back</md-outlined-button>
<md-filled-button>Next</md-filled-button>

Integrating Material Web components into Pensieve

Self-hosting: install @material/web

I want to try using Material Web 3 components on this site. First, let’s install it with NPM.

I created a package.json manifest file.

{
  "engines": {
    "node": "^18.17.1"
  },
  "dependencies": {
    "@material/web": "^1.2.0"
  }
}

Now, executing npm install will pull Material Web components sources into our working directory.

TIP: To install version-specific Node and NPM with the Node version manager n:

apt install npm
node --version
npm install -g n
n 18.17.1 && node --version

JavaScript: import components

Next, we create _material.js script to import the components that we need.

import '@material/web/button/filled-button.js';
import '@material/web/button/outlined-button.js';

These import statements still need to be rolled up (expanded with the content of these imported files) before we can use them in the rest of our site, so we have to add the following in our package.json file.

{
  "devDependencies": {
    "@rollup/plugin-node-resolve": "^15.2.3",
    "rollup": "^4.12.0"
  },
  "scripts": {
    "rollup": "rollup -p @rollup/plugin-node-resolve assets/js/_material.js -o assets/js/material.rollup.js",
    "build:js": "npm run rollup"
  }
}

Running npm run build:js would create the output material.rollup.js file. This is what we need to actually use in our <head> script tag.

There are different routes to make this happen. The Minimal Mistakes theme that I am using defines a config for this. In our _config.yml file:

head_scripts:
  - /assets/js/material.rollup.js # Generated by `npm run build:js`

Styling M3 components

M3 uses design tokens as an API for styling and customizing their components.

For instance, to change the typography of M3 components that I will use, I just need to add the following in this site’s main.scss file.

/*--- material web customizations ---*/
:root {
  --md-ref-typeface-brand: Roboto;
  --md-ref-typeface-plain: system-ui;
}
/*--- end material web customizations ---*/

Note: To make Roboto available, I also need to add the fonts in <head>.

head_scripts:
- https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap

hjkl is home.

I have been using vim and various IDEs with vim-like bindings for a good long while now, ever since college.

Lately, I have been curious to try NeoVim and its more powerful features. I am hoping to power up my homekey usage.

Installing NeoVim

On Mac OS, with Homebrew, that’s trivial.

brew install neovim

My muscle memory compels me to type vim and view when opening text files. To give NeoVim a fair shake at making it into my core personal toolkit, I created aliases.

In my ~/.zshrc file:

if which nvim >/dev/null; then
  function use-nvim  {
    alias vim="nvim"
    alias vi="nvim"
    alias view="nvim -R"
  }
  use-nvim
fi

User Config

Vim reads from ~/.vimrc and its plugin, etc lives in ~/.vim/, while NeoVim canonically reads its vimrc file from ~/.config/nvim/init.vim (or .lua) and ~/.config/nvim/, respectively.

I want to keep things as compatible between the two, for now. In case I decide later to return to Vim–or if I find myself in a system without the facilities for NeoVim–I want most of what I use to customize NeoVim to also apply to Vim.

More to the point: I want my Vim and NeoVim installations to share the same config file.

mkdir ~/.vim/
ln -s ../.vim ~/.config/nvim  # this redirects nvim's config dir to vim's
ln -s $HOME/.vimrc ~/.vim/init.vim    # redirects init.vim to ~/.vimrc

The vimrc file ~/.vimrc now becomes our master vimrc file. It should work for both NeoVim and Vim.

Its content, at the moment (I’m currently in the middle of trying out three new plugins: vim-commentary, vim-easymotion, and vim-sneak):

" Installing vim-plug:
" curl -fLo ~/.vim/autoload/plug.vim --create-dirs \
"    https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
call plug#begin()
" The default plugin directory will be as follows:
"   - Neovim (Linux/macOS/Windows): stdpath('data') . '/plugged'

Plug 'tpope/vim-sensible'
Plug 'tpope/vim-commentary'     " Binds 'gc' to toggle comments in visual mode
Plug 'tpope/vim-liquid'         " Syntax highlighting for Liquid templates
" Binds some nifty, flighty navigation modes across a file
Plug 'easymotion/vim-easymotion'
" Binds 's{char}{char}' as a quicker 'f' search
Plug 'justinmk/vim-sneak'
Plug 'rust-lang/rust.vim'       " Official Rust plugin
Plug 'preservim/nerdtree'       " A file system explorer in Vim
Plug 'vim-airline/vim-airline'  " Lean & mean status/tabline
Plug 'vim-airline/vim-airline-themes'
Plug 'google/vim-maktaba'
Plug 'google/vim-codefmt'       " Adds :FormatCode and :FormatLines commands
" Also add Glaive, which is used to configure codefmt's maktaba flags.
Plug 'google/vim-glaive'

" Initialize plugin system
" - Automatically executes `filetype plugin indent on` and `syntax enable`.
call plug#end()

" the glaive#Install() should go after the "call plug#end()"
call glaive#Install()
Glaive codefmt plugin[mappings]

" I was also already using pathogen for Vim to set up Solarized colorscheme.

" First, install pathogen in your system with:
" mkdir -p ~/.vim/autoload ~/.vim/bundle && \
"     curl -LSso ~/.vim/autoload/pathogen.vim https://tpo.pe/pathogen.vim
execute pathogen#infect()

" Airline customizations; experiment at runtime with `:AirlineTheme` command.
let g:airline_theme='solarized'

" NERDTree keybindings
nnoremap <C-t> :NERDTreeToggle<CR>
" Start NERDTree when Vim is started without file arguments.
autocmd StdinReadPre * let s:std_in=1
autocmd VimEnter * if argc() == 0 && !exists('s:std_in') | NERDTree | endif
" Start NERDTree when Vim starts with a directory argument, and open a fresh
" buffer.
autocmd StdinReadPre * let s:std_in=1
autocmd VimEnter * if argc() == 1 && isdirectory(argv()[0]) && !exists('s:std_in') | execute 'NERDTree' argv()[0] | wincmd p | enew | execute 'cd '.argv()[0] | endif


set nocompatible
syntax on
filetype plugin indent on

set background=dark
colorscheme solarized

set hlsearch
set ruler
set colorcolumn=80,120

set number
" toggle line numbers and fold column for easy copying:
nnoremap <F2> :set nonumber!<CR>:set foldcolumn=0<CR>

set backup                      " Be safe.
set history=1000                " Remember a lot.
set showcmd                     " Show the last command.
set showmatch                   " When a bracket is typed show its match.
set smarttab                    " Only respect shiftwidth for code indents.
set expandtab
set tabstop=2
set shiftwidth=2
set autoindent
set smartindent

" Do not clutter the current directory with swap, backup, undo files.
set swapfile
set directory=.swp/,~/.swp/,/tmp//
set backupdir=.backup/,~/.backup/,/tmp//
set undodir=.undo/,~/.undo/,/tmp//

Next: Mastering LSPs

For quick edits and one-offs, Vim is great. It lets me live and stay in the Terminal without too much context switching. For more extensive coding, though, I still rely on language features and the bells and whistles delivered by an IDE like VSCode.

Next up, I want to explore LSP servers and understand how NeoVim, as a client, interacts with them. My goal is to set one up that lets me work comfortably in some programming languages of choice, wholly in NeoVim.