├── .gitattributes ├── .gitignore ├── README.md ├── blog ├── dwm │ └── 01-dwm.md ├── git │ ├── 01-Merging-Upstream-Repo-Fork.md │ └── 02-change-remote-git-repo.md ├── images │ ├── dwm.png │ ├── git.png │ ├── ledger-live.jpg │ ├── ledger-live.png │ ├── m2-macbook-air.jpg │ ├── miniconda.jpg │ ├── neovim.png │ └── sdkman.png ├── java │ └── 01-versioning-java-with-sdkman.md ├── linux │ └── ledger-live.md ├── mac │ └── 01-macos-developer-setup.md ├── neovim │ ├── 00-install-neovim.md │ └── 01-ide-crash-course.md ├── neovim_old │ ├── 01-vim-plug.md │ ├── 02-vim-general-settings.md │ ├── 03-vim-themes.md │ ├── 04-vim-coc.md │ ├── 05-vim-airline.md │ ├── 06-file-explorer.md │ ├── 07-ranger.md │ ├── 08-fzf.md │ ├── 09-vim-commentary.md │ ├── 10-adding-color.md │ ├── 11-startify.md │ ├── 12-git-integration.md │ ├── 13-sneak.md │ ├── 14-quickscope.md │ ├── 15-which-key.md │ ├── 16-floaterm.md │ ├── 17-snippets.md │ ├── 18-codi.md │ ├── 19-coc-marketplace.md │ ├── 20-live-server.md │ ├── 21-coc-emoji.md │ ├── 22-vscodium-neovim.md │ ├── 23-far-find-and-replace.md │ ├── 24-neovim-and-java.md │ ├── 25-vimspector.md │ ├── 26-lsp-symbols.md │ ├── 27-native-lsp.md │ ├── 28-neovim-lua-development.md │ └── 29-setting-up-nvim-jdtls.md └── python │ ├── 01-Install-Miniconda.md │ └── 02-How-to use-miniconda.md ├── cache └── data.js ├── components ├── CategoryLabel.js ├── CategoryList.js ├── Header.js ├── Layout.js ├── Pagination.js ├── Post.js ├── ProjectList.js ├── Search.js ├── SearchResults.js └── SocialList.js ├── config └── index.js ├── jsconfig.json ├── lib └── posts.js ├── package-lock.json ├── package.json ├── pages ├── 404.js ├── _app.js ├── api │ └── search.js ├── blog │ ├── category │ │ └── [category] │ │ │ ├── [slug].js │ │ │ ├── index.js │ │ │ └── page │ │ │ └── [category_page_index].js │ ├── index.js │ └── page │ │ └── [page_index].js ├── contact.js ├── donate.js └── index.js ├── post.sh ├── posts ├── 00-install-neovim.md ├── 01-Install-Miniconda.md ├── 01-Merging-Upstream-Repo-Fork.md ├── 01-dwm.md ├── 01-ide-crash-course.md ├── 01-macos-developer-setup.md ├── 01-versioning-java-with-sdkman.md ├── 01-vim-plug.md ├── 02-How-to use-miniconda.md ├── 02-change-remote-git-repo.md ├── 02-vim-general-settings.md ├── 03-vim-themes.md ├── 04-vim-coc.md ├── 05-vim-airline.md ├── 06-file-explorer.md ├── 07-ranger.md ├── 08-fzf.md ├── 09-vim-commentary.md ├── 10-adding-color.md ├── 11-startify.md ├── 12-git-integration.md ├── 13-sneak.md ├── 14-quickscope.md ├── 15-which-key.md ├── 16-floaterm.md ├── 17-snippets.md ├── 18-codi.md ├── 19-coc-marketplace.md ├── 20-live-server.md ├── 21-coc-emoji.md ├── 22-vscodium-neovim.md ├── 23-far-find-and-replace.md ├── 24-neovim-and-java.md ├── 25-vimspector.md ├── 26-lsp-symbols.md ├── 27-native-lsp.md ├── 28-neovim-lua-development.md ├── 29-setting-up-nvim-jdtls.md └── ledger-live.md ├── public ├── favicon.ico ├── icons │ ├── bitcoin.png │ ├── chrisatmachine.png │ ├── circle-eth.png │ ├── crypto-zombie.png │ ├── lunarvim.png │ ├── machos.png │ ├── neovimN.png │ ├── raspinode-logo.png │ ├── raspinode.png │ └── zap.svg ├── images │ ├── dwm.png │ ├── git.png │ ├── ledger-live.jpg │ ├── ledger-live.png │ ├── m2-macbook-air.jpg │ ├── miniconda.jpg │ ├── neovim.png │ └── sdkman.png ├── site │ └── me.jpg └── vercel.svg ├── scripts └── cache.js ├── styles ├── 404.module.css ├── blog │ ├── category │ │ └── category_name.module.css │ ├── markdown.module.css │ ├── page │ │ └── page_index.module.css │ └── slug.module.css ├── components │ ├── CategoryLabel.module.css │ ├── CategoryList.module.css │ ├── Header.module.css │ ├── Layout.module.css │ ├── Pagination.module.css │ ├── Post.module.css │ ├── ProjectList.module.css │ ├── Search.module.css │ ├── SearchResults.module.css │ └── SocialList.module.css ├── donate.module.css ├── globals.css └── home.module.css └── utils └── index.js /.gitattributes: -------------------------------------------------------------------------------- 1 | styles/* linguist-vendored 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | .husky 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env.local 30 | .env.development.local 31 | .env.test.local 32 | .env.production.local 33 | 34 | # vercel 35 | .vercel 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # chris@machine website 2 | 3 | ## Usage 4 | 5 | ### Install Dependencies 6 | ```bash 7 | npm install 8 | ``` 9 | 10 | ### Run Dev Server (http://localhost:3000) 11 | ```bash 12 | npm run dev 13 | ``` 14 | 15 | ### Caching 16 | 17 | Husky is used to run a cache script on git commit. Caching is used for the search api route/serverless function 18 | 19 | ## TODO: 20 | 21 | *high* 22 | - docs to generate blogs 23 | 24 | *medium* 25 | - add crypto to donation page 26 | - contact page 27 | - fix social link bigger than text container 28 | - fix search styling when deployed 29 | 30 | *low* 31 | - rename variables and files 32 | - cleanup code 33 | - improve code blocks in markdown (syntax highlighting and copy) 34 | - improve meta tags for other platforms 35 | -------------------------------------------------------------------------------- /blog/dwm/01-dwm.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Installing DWM 3 | date: "2019-08-01" 4 | topic: "dwm" 5 | cover: "/images/dwm.png" 6 | excerpt: "DWM is lightweight window manager written in C." 7 | --- 8 | 9 | Make sure you have a user already 10 | 11 | ## Install Xorg 12 | 13 | ``` 14 | pacman -S xorg-server xorg-xinit xorg-xrandr xorg-xsetroot 15 | ``` 16 | 17 | ## Install git 18 | 19 | ``` 20 | pacman -S git 21 | ``` 22 | 23 | ## Install a browser 24 | 25 | ``` 26 | pacman -S firefox 27 | ``` 28 | 29 | ## Create a config directory 30 | 31 | ``` 32 | mkdir ~/.config 33 | ``` 34 | 35 | ## Install DWM 36 | 37 | ``` 38 | git clone git://git.suckless.org/dwm ~/.config/dwm 39 | git clone git://git.suckless.org/st ~/.config/st 40 | git clone git://git.suckless.org/dmenu ~/.config/dmenu 41 | ``` 42 | 43 | ``` 44 | cd ~/.config/dwm && sudo make install 45 | cd ~/.config/st && sudo make install 46 | cd ~/.config/dmenu && sudo make install 47 | ``` 48 | 49 | ## Installing a Display Manager (DM) 50 | 51 | ``` 52 | pacman -S lightdm 53 | 54 | pacman -S lightdm-gtk-greeter 55 | 56 | pacman -S lightdm-gtk-greeter-settings 57 | ``` 58 | 59 | ## Enable lightdm service 60 | 61 | ``` 62 | sudo systemctl enable lightdm 63 | ``` 64 | 65 | ## Adding an entry for DWM in the DM 66 | 67 | Open this file: 68 | 69 | ``` 70 | mkdir /usr/share/xsessions 71 | 72 | vim /usr/share/xsessions/dwm.desktop 73 | ``` 74 | 75 | Add the following: 76 | 77 | ``` 78 | [Desktop Entry] 79 | Encoding=UTF-8 80 | Name=Dwm 81 | Comment=the dynamic window manager 82 | Exec=dwm 83 | Icon=dwm 84 | Type=XSession 85 | ``` 86 | 87 | ## Basic Commands 88 | 89 | - Moving between windows: `[Alt]+[j] or [Alt]+[k]` 90 | 91 | - To move a terminal to another tag: `[Shift]+[Alt]+[]` 92 | 93 | - To focus on another tag: `[Alt]+[tag number]` 94 | 95 | - To change the amount of windows in the master area: `[Alt]+[d] (Decrease) or [Alt]+[i] (Increase)` 96 | 97 | - To toggle a window between the master and stack area: `[Alt]+[Return]` 98 | 99 | - To kill a window: `[Shift]+[Alt]+[c]` 100 | 101 | - Click another tag with the right mouse button to bring those windows into your current focus. 102 | 103 | ## Layouts 104 | 105 | ( **Note** ) By default dwm is in tiled layout mode. 106 | 107 | - Tiled: `[Alt]+[t]` 108 | 109 | - Floating: `[Alt]+[f]` 110 | 111 | - Monocle: `[Alt]+[m]` 112 | 113 | Further layout modes can be included through patches. 114 | 115 | ## Floating 116 | 117 | To resize the floating window: `[Alt]+[right mouse button]` 118 | 119 | To move it around `[Alt]+[left mouse button]` 120 | 121 | **Floating in Tiled Layout** 122 | 123 | - Toggle floating mode on the active window: `[Alt]+[Shift]+[space]` 124 | 125 | - Resize the window: `[Alt]+[right mouse button]` 126 | 127 | - toggle it in being floating `[Alt]+[middle mouse button]` 128 | 129 | If you want to set some type of window to be always floating, look at the config.def.h and the rules array, where the last but one element defines this behaviour. 130 | 131 | ## Quitting 132 | 133 | To quit dwm cleanly: `[Shift]+[Alt]+[q]` 134 | 135 | ## Status 136 | 137 | By default dwm is showing dwm-X.X in its statusbar. This text can be changed by setting the WM_NAME property of the root window. 138 | 139 | Using the tools of X.org, this can be set using: 140 | 141 | ``` 142 | xsetroot -name "Some Text" 143 | ``` 144 | -------------------------------------------------------------------------------- /blog/git/01-Merging-Upstream-Repo-Fork.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Merging an Upstream Repo into your Fork 3 | date: "2019-08-01" 4 | topic: "git" 5 | cover: "/images/git.png" 6 | excerpt: "If you don't have push (write) access to an upstream repository, then you can pull commits from that repository into your own fork." 7 | --- 8 | 9 | This article is from Github's help page [here](https://help.github.com/en/articles/merging-an-upstream-repository-into-your-fork) I am adding it here to quickly reference it when I inevitably forget how to do it. 10 | 11 | If you don't have push (write) access to an upstream repository, then you can pull commits from that repository into your own fork. 12 | 13 | 1. Open Terminal. 14 | 15 | 2. Change the current working directory to your local project. 16 | 17 | 3. Check out the branch you wish to merge to. Usually, you will merge into `master`. 18 | 19 | ``` 20 | git checkout master 21 | ``` 22 | 23 | 4. Pull the desired branch from the upstream repository. This method will retain the commit history without modification. 24 | 25 | ``` 26 | git pull https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git BRANCH_NAME 27 | ``` 28 | 29 | 5. If there are conflicts, resolve them. 30 | 31 | 6. Commit the merge. 32 | 33 | 7. Review the changes and ensure they are satisfactory. 34 | 35 | 8. Push the merge to your GitHub repository. 36 | 37 | ``` 38 | git push origin master 39 | ``` 40 | 41 | -------------------------------------------------------------------------------- /blog/git/02-change-remote-git-repo.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Changing remote Git repo 3 | date: "2020-07-18" 4 | cover: "/images/git.png" 5 | topic: "git" 6 | excerpt: "How to change the remote github url of your repository." 7 | --- 8 | 9 | ## List current remote 10 | 11 | ``` 12 | git remote -v 13 | ``` 14 | 15 | ## Change remote Git repo 16 | 17 | ``` 18 | git remote set-url origin git@:/ 19 | ``` 20 | 21 | (**NOTE**) 22 | 23 | Replace everything inside `<>` with your data and remove the `<>` characters 24 | -------------------------------------------------------------------------------- /blog/images/dwm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/blog/images/dwm.png -------------------------------------------------------------------------------- /blog/images/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/blog/images/git.png -------------------------------------------------------------------------------- /blog/images/ledger-live.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/blog/images/ledger-live.jpg -------------------------------------------------------------------------------- /blog/images/ledger-live.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/blog/images/ledger-live.png -------------------------------------------------------------------------------- /blog/images/m2-macbook-air.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/blog/images/m2-macbook-air.jpg -------------------------------------------------------------------------------- /blog/images/miniconda.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/blog/images/miniconda.jpg -------------------------------------------------------------------------------- /blog/images/neovim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/blog/images/neovim.png -------------------------------------------------------------------------------- /blog/images/sdkman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/blog/images/sdkman.png -------------------------------------------------------------------------------- /blog/java/01-versioning-java-with-sdkman.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Install Multiple Versions of Java with SDKMAN 3 | date: "2021-03-12" 4 | topic: "java" 5 | cover: "/images/sdkman.png" 6 | excerpt: "SDKMAN! is a tool for managing parallel versions of multiple Software Development Kits." 7 | --- 8 | 9 | ## What is SDKMAN? 10 | 11 | SDKMAN! is a tool for managing parallel versions of multiple Software Development Kits. This is very useful for managing Java versions as well as Gradle, Maven etc.. 12 | 13 | ## Installation 14 | 15 | Open up a terminal and enter: 16 | 17 | ``` 18 | curl -s "https://get.sdkman.io" | bash 19 | ``` 20 | 21 | This will add the following to your `.bashrc` or `.zshrc`: 22 | 23 | ``` 24 | #THIS MUST BE AT THE END OF THE FILE FOR SDKMAN TO WORK!!! 25 | export SDKMAN_DIR="/home/chris/.sdkman" 26 | [[ -s "/home/chris/.sdkman/bin/sdkman-init.sh" ]] && source "/home/chris/.sdkman/bin/sdkman-init.sh" 27 | ``` 28 | 29 | Now you can open a new terminal and run the following to confirm installation: 30 | 31 | ``` 32 | sdk version 33 | ``` 34 | 35 | ## Install to a custom location 36 | 37 | You can install to a custom location with the following command: 38 | 39 | ``` 40 | export SDKMAN_DIR="/usr/local/sdkman" && curl -s "https://get.sdkman.io" | bash 41 | ``` 42 | 43 | ## Using SDKMAN 44 | 45 | SDKMAN will allow you to install a lot of different programs. 46 | 47 | ### List all options to install 48 | 49 | ``` 50 | sdk ls 51 | ``` 52 | 53 | ## Installing Java 54 | 55 | Install default version: 56 | 57 | ``` 58 | sdk install java 59 | ``` 60 | 61 | Find a specific version: 62 | 63 | ``` 64 | sdk ls java 65 | ``` 66 | 67 | Install a specific version based on identifier from list: 68 | 69 | ``` 70 | sdk install java 11.0.12-open 71 | ``` 72 | 73 | Using a specific version: 74 | 75 | ``` 76 | sdk use java 11.0.12-open 77 | ``` 78 | 79 | Default a specific version: 80 | 81 | ``` 82 | sdk default java 11.0.12-open 83 | ``` 84 | 85 | To update sdkman: 86 | 87 | ``` 88 | sdk update 89 | ``` 90 | 91 | **NOTE** All of the above commands will work for the other programs available such as: 92 | 93 | - gradle 94 | - maven 95 | - groovy 96 | - kotlin 97 | - spark 98 | - springboot 99 | 100 | ## Getting help 101 | 102 | ``` 103 | sdk help 104 | ``` 105 | 106 | ## Optional Configuration 107 | 108 | In `~/.sdkman/etc/config` 109 | 110 | ``` 111 | sdkman_auto_answer=false 112 | sdkman_auto_complete=true 113 | sdkman_auto_env=false 114 | sdkman_auto_update=true 115 | sdkman_beta_channel=false 116 | sdkman_checksum_enable=true 117 | sdkman_colour_enable=true 118 | sdkman_curl_connect_timeout=7 119 | sdkman_curl_max_time=10 120 | sdkman_debug_mode=false 121 | sdkman_insecure_ssl=false 122 | sdkman_rosetta2_compatible=false 123 | sdkman_selfupdate_feature=true 124 | ``` 125 | 126 | ## References 127 | 128 | [SDKMAN!](https://sdkman.io/) 129 | -------------------------------------------------------------------------------- /blog/linux/ledger-live.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Install Ledger Live for Linux 3 | date: '2022-12-08' 4 | topic: 'linux' 5 | cover: '/images/ledger-live.jpg' 6 | author: 'Chris' 7 | excerpt: 'If you hold Bitcoin you should be keeping it offline in a hardware wallet like a Ledger. In this article I will show you how to install ledger-live for Linux.' 8 | --- 9 | 10 | ## Process 11 | 12 | 1. Navigate to [ledger.com/ledger-live/download](https://www.ledger.com/ledger-live/download) 13 | 14 | 2. Choose desktop and download for Linux 15 | 16 | 3. Download the Ledger Live AppImage. 17 | 18 | 4. Make the file executable in a terminal: 19 | 20 | ``` 21 | chmod +x ledger-live-*.AppImage 22 | ``` 23 | 24 | 5. Enter the following command to automatically add the udev rules and reload udev to allow USB access to your Ledger device: 25 | 26 | ``` 27 | wget -q -O - https://raw.githubusercontent.com/LedgerHQ/udev-rules/master/add_udev_rules.sh | sudo bash 28 | ``` 29 | 30 | 6. Rename the application 31 | 32 | ``` 33 | mv ledger-live-*.AppImage ledger-live 34 | 35 | sudo mv ledger-live /usr/local/bin/ 36 | ``` 37 | 38 | 7. Get the Icon 39 | 40 | ``` 41 | sudo mkdir -p /usr/local/share/icons/ 42 | 43 | wget https://github.com/ChristianChiarulli/website/blob/master/blog/images/ledger-live.png 44 | 45 | sudo mv ledger-live.png /usr/local/share/icons/ 46 | ``` 47 | 48 | 8. Add entry to desktop 49 | 50 | Create the following file `ledger-live.desktop`: 51 | 52 | **NOTE** If you get a sandboxing error, run the app with --no-sandbox 53 | 54 | ``` 55 | [Desktop Entry] 56 | Type=Application 57 | Name=Ledger Live 58 | Comment=Ledger Live 59 | Icon=/usr/local/share/icons/ledger-live.png 60 | Exec=/usr/local/bin/ledger-live 61 | Terminal=false 62 | Categories=crypto;wallet 63 | ``` 64 | 65 | Move the `.desktop` to your applications folder: 66 | 67 | ``` 68 | sudo mkdir -p /usr/local/share/applications/ 69 | 70 | mv ledger-live.desktop /usr/local/share/applications 71 | ``` 72 | 73 | 9. Take ownership of your Bitcoin 74 | 75 | ## References 76 | 77 | [Ledger Support](https://support.ledger.com/hc/en-us/articles/360006395553-Download-and-install-Ledger-Live) 78 | 79 | [creating a desktop entry](https://askubuntu.com/questions/902672/registering-appimage-files-as-a-desktop-app) 80 | -------------------------------------------------------------------------------- /blog/neovim_old/01-vim-plug.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugins with Vim-Plug 3 | date: "2020-04-23" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Installing Neovim 10 | 11 | - On Mac 12 | 13 | ``` 14 | brew install neovim 15 | ``` 16 | 17 | - Ubuntu 18 | 19 | ``` 20 | sudo apt install neovim 21 | ``` 22 | 23 | - Arch 24 | 25 | ``` 26 | sudo pacman -S neovim 27 | ``` 28 | 29 | ## Create config 30 | 31 | Make directory for your Neovim config 32 | 33 | ``` 34 | mkdir ~/.config/nvim 35 | ``` 36 | 37 | Create an `init.vim` file 38 | 39 | ``` 40 | touch ~/.config/nvim/init.vim 41 | ``` 42 | 43 | ## Install vim-plug 44 | 45 | ``` 46 | curl -fLo ~/.config/nvim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim 47 | ``` 48 | 49 | You should now have `plug.vim` in your autoload directory so it will load of on start 50 | 51 | ## Add a new file for plugins 52 | 53 | We will manage our plugins in a separate file for the sake of my own sanity 54 | 55 | ``` 56 | mkdir ~/.config/nvim/vim-plug 57 | 58 | touch ~/.config/nvim/vim-plug/plugins.vim 59 | ``` 60 | 61 | ## Let's add some plugins 62 | 63 | Add the following to `~/.config/nvim/vim-plug/plugins.vim` 64 | 65 | ``` 66 | " auto-install vim-plug 67 | if empty(glob('~/.config/nvim/autoload/plug.vim')) 68 | silent !curl -fLo ~/.config/nvim/autoload/plug.vim --create-dirs 69 | \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim 70 | "autocmd VimEnter * PlugInstall 71 | "autocmd VimEnter * PlugInstall | source $MYVIMRC 72 | endif 73 | 74 | call plug#begin('~/.config/nvim/autoload/plugged') 75 | 76 | " Better Syntax Support 77 | Plug 'sheerun/vim-polyglot' 78 | " File Explorer 79 | Plug 'scrooloose/NERDTree' 80 | " Auto pairs for '(' '[' '{' 81 | Plug 'jiangmiao/auto-pairs' 82 | 83 | call plug#end() 84 | 85 | ``` 86 | 87 | ## Source your plugins 88 | 89 | Add the following line to `init.vim` 90 | 91 | ``` 92 | source $HOME/.config/nvim/vim-plug/plugins.vim 93 | ``` 94 | 95 | ## Vim-plug commands 96 | 97 | Open `nvim` 98 | 99 | ``` 100 | nvim 101 | ``` 102 | 103 | Check the status of your plugins 104 | 105 | ``` 106 | :PlugStatus 107 | ``` 108 | 109 | Install all of your plugins 110 | 111 | ``` 112 | :PlugInstall 113 | ``` 114 | 115 | To update your plugins 116 | 117 | ``` 118 | :PlugUpdate 119 | ``` 120 | 121 | After the update you can press `d` to see the differences or run 122 | 123 | ``` 124 | :PlugDiff 125 | ``` 126 | 127 | To remove plugins that are no longer defined in the `plugins.vim` file 128 | 129 | ``` 130 | :PlugClean 131 | ``` 132 | 133 | Finally if you want to upgrade vim-plug itself run the following 134 | 135 | ``` 136 | :PlugUpgrade 137 | ``` 138 | 139 | ## Where did I learn all this? 140 | 141 | [Check out vim-plug on github](https://github.com/junegunn/vim-plug) 142 | -------------------------------------------------------------------------------- /blog/neovim_old/03-vim-themes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Neovim Themes 3 | date: "2020-04-25" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Plugin your theme 10 | 11 | First open vim plug and add your theme, you can add as many themes as you want here to switch between them at any time 12 | 13 | I'm going to be installing the onedark theme I'll link to a repo with a bunch of others at the bottom of the blog 14 | 15 | Open `vim-plug/plugins.vim` and add the following: 16 | 17 | ``` 18 | Plug 'joshdick/onedark.vim' 19 | ``` 20 | 21 | Make sure to run `:PlugInstall` 22 | 23 | ## Theme config 24 | 25 | First create a directory for themes and then add the name of the theme you want to install 26 | 27 | ``` 28 | mkdir ~/.config/nvim/themes 29 | 30 | touch ~/.config/nvim/themes/onedark.vim 31 | ``` 32 | 33 | Now let's set the colorscheme, open `onedark.vim` and add the following: 34 | 35 | ``` 36 | " onedark.vim override: Don't set a background color when running in a terminal; 37 | if (has("autocmd") && !has("gui_running")) 38 | augroup colorset 39 | autocmd! 40 | let s:white = { "gui": "#ABB2BF", "cterm": "145", "cterm16" : "7" } 41 | autocmd ColorScheme * call onedark#set_highlight("Normal", { "fg": s:white }) " `bg` will not be styled since there is no `bg` setting 42 | augroup END 43 | endif 44 | 45 | hi Comment cterm=italic 46 | let g:onedark_hide_endofbuffer=1 47 | let g:onedark_terminal_italics=1 48 | let g:onedark_termcolors=256 49 | 50 | syntax on 51 | colorscheme onedark 52 | 53 | 54 | " checks if your terminal has 24-bit color support 55 | if (has("termguicolors")) 56 | set termguicolors 57 | hi LineNr ctermbg=NONE guibg=NONE 58 | endif 59 | ``` 60 | 61 | ### Note 62 | 63 | This config is specific to this theme, checkout the readme for whatever theme you install 64 | 65 | Now we can add our theme to `init.vim` 66 | 67 | ``` 68 | source $HOME/.config/nvim/themes/onedark.vim 69 | ``` 70 | 71 | ## Where to find more themes 72 | 73 | [Check out this repo](https://github.com/rafi/awesome-vim-colorschemes) 74 | 75 | Click on any theme in the readme and install it similar to the way I did above 76 | -------------------------------------------------------------------------------- /blog/neovim_old/04-vim-coc.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Neovim Intellisense with coc 3 | date: "2020-04-26" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Conquerer of Completion 10 | 11 | This plugin is too featureful (bloated) to explain in a single blog post 12 | 13 | Good thing the author provided extensive documentation [here](https://github.com/neoclide/coc.nvim/wiki) 14 | 15 | ## Install with vim-plug 16 | 17 | ``` 18 | " Stable version of coc 19 | Plug 'neoclide/coc.nvim', {'branch': 'release'} 20 | 21 | " Keeping up to date with master 22 | Plug 'neoclide/coc.nvim', {'do': 'yarn install --frozen-lockfile'} 23 | ``` 24 | 25 | make sure you have `yarn` installed if you choose the second way 26 | 27 | ``` 28 | npm i -g yarn 29 | ``` 30 | 31 | Create a directory called `plug-config` and an entry for `coc` 32 | 33 | ``` 34 | mkdir ~/.config/nvim/plug-config 35 | 36 | touch ~/.config/nvim/plug-config/coc.vim 37 | ``` 38 | 39 | ## Create basic config file 40 | 41 | Head over to the [readme](https://github.com/neoclide/coc.nvim) and grab his example config 42 | 43 | Add the following to your `init.vim` 44 | 45 | ``` 46 | source $HOME/.config/nvim/plug-config/coc.vim 47 | ``` 48 | 49 | ## Checking coc health 50 | 51 | You can run `:checkhealth` and there should now be an entry for `coc` 52 | 53 | You can use `g:coc_node_path` to point to your node executable 54 | 55 | You can also run `:CocInfo` to get some useful info 56 | 57 | ## Install extensions 58 | 59 | You can install extensions for languages like this: 60 | 61 | ``` 62 | :CocInstall coc-json coc-python coc-snippets coc-vimlsp 63 | ``` 64 | 65 | There are many more extensions to choose from here: 66 | 67 | [coc-extensions](https://github.com/neoclide/coc.nvim/wiki/Using-coc-extensions) 68 | 69 | You can list all of the extension commands with: 70 | 71 | ``` 72 | :CocList commands 73 | ``` 74 | 75 | You can uninstall an extension with: 76 | 77 | ``` 78 | :CocUninstall coc-html 79 | ``` 80 | 81 | You can manage your extensions with: 82 | 83 | ``` 84 | :CocList extensions 85 | ``` 86 | 87 | Hit to see a list of options for each extension 88 | 89 | ## Configuration 90 | 91 | Run `:CocConfig` this will open the file `~/.config/nvim/coc-settings.json` 92 | 93 | here you can add [language servers](https://github.com/neoclide/coc.nvim/wiki/Language-servers) 94 | 95 | and other configuration like autoformat and adding a location for snippets (I'll go over snippets later) 96 | 97 | ``` 98 | { 99 | "coc.preferences.formatOnSaveFiletypes": ["css", "markdown", "javascript", "graphql", "html", "yaml", "json", "python"], 100 | 101 | // python config 102 | "python.linting.enabled": true, 103 | "python.linting.pylintEnabled": true, 104 | 105 | "snippets.ultisnips.directories": 106 | [ 107 | "UltiSnips", 108 | "~/.config/nvim/utils/snips" 109 | ] 110 | 111 | } 112 | ``` 113 | 114 | for more info on configuring your settings checkout [this page](https://github.com/neoclide/coc.nvim/wiki/Using-the-configuration-file) 115 | 116 | ## Optional install watchman 117 | 118 | For watchman supprt install watchman 119 | 120 | - Mac 121 | 122 | ``` 123 | brew install watchman 124 | ``` 125 | 126 | - Ubuntu 127 | 128 | ``` 129 | sudo apt install watchman 130 | ``` 131 | 132 | - Arch 133 | 134 | ``` 135 | yay -S watchman 136 | ``` 137 | 138 | ### Note 139 | 140 | watchman can be a memory hog, to stop all watchman processes and free up some memory run 141 | 142 | ``` 143 | watchman watch-del-all 144 | ``` 145 | 146 | ## Automatically reinstall the extensions you use 147 | 148 | If you use `neovim` and already have `node` installed, you can use the following script to reinstall your favorite extensions 149 | 150 | ``` 151 | #!/usr/bin/bash 152 | 153 | set -o nounset # error when referencing undefined variable 154 | set -o errexit # exit when command fails 155 | 156 | # Install extensions 157 | mkdir -p ~/.config/coc/extensions 158 | cd ~/.config/coc/extensions 159 | if [ ! -f package.json ] 160 | then 161 | echo '{"dependencies":{}}'> package.json 162 | fi 163 | # Change extension names to the extensions you need 164 | npm install coc-snippets coc-python coc-tsserver coc-html coc-css coc-json coc-yaml --global-style --ignore-scripts --no-bin-links --no-package-lock --only=prod 165 | ``` 166 | -------------------------------------------------------------------------------- /blog/neovim_old/05-vim-airline.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Airline 3 | date: "2020-04-27" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Plugin Airline and Airline themes 10 | 11 | Add the following to `~/.config/nvim/vim-plug/plugins.vim` 12 | 13 | ``` 14 | Plug 'vim-airline/vim-airline' 15 | Plug 'vim-airline/vim-airline-themes' 16 | ``` 17 | 18 | ## Create config 19 | 20 | Create theme file for airline 21 | 22 | ``` 23 | touch ~/.config/nvim/themes/airline.vim 24 | ``` 25 | 26 | Add the following configuration 27 | 28 | ``` 29 | " enable tabline 30 | let g:airline#extensions#tabline#enabled = 1 31 | let g:airline#extensions#tabline#left_sep = '' 32 | let g:airline#extensions#tabline#left_alt_sep = '' 33 | let g:airline#extensions#tabline#right_sep = '' 34 | let g:airline#extensions#tabline#right_alt_sep = '' 35 | 36 | " enable powerline fonts 37 | let g:airline_powerline_fonts = 1 38 | let g:airline_left_sep = '' 39 | let g:airline_right_sep = '' 40 | 41 | " Switch to your current theme 42 | let g:airline_theme = 'onedark' 43 | 44 | " Always show tabs 45 | set showtabline=2 46 | 47 | " We don't need to see things like -- INSERT -- anymore 48 | set noshowmode 49 | ``` 50 | 51 | Don't forget to source this file 52 | 53 | ``` 54 | source $HOME/.config/nvim/themes/airline.vim 55 | ``` 56 | 57 | ## Install fonts 58 | 59 | You may want to install these fonts if you want the little arrows and stuff 60 | 61 | ``` 62 | # clone 63 | git clone https://github.com/powerline/fonts.git --depth=1 64 | # install 65 | cd fonts 66 | ./install.sh 67 | # clean-up a bit 68 | cd .. 69 | rm -rf fonts 70 | ``` 71 | 72 | ## Further documentation and repo 73 | 74 | [vim airline](https://github.com/vim-airline/vim-airline) 75 | [vim airline themes](https://github.com/vim-airline/vim-airline-themes) 76 | -------------------------------------------------------------------------------- /blog/neovim_old/06-file-explorer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Exploring coc-explorer 3 | date: "2020-04-28" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install coc-explorer 10 | 11 | This install will be a little different and if you've been following along you probably know we are using coc 12 | 13 | coc-explorer is just and extension to that 14 | 15 | ``` 16 | :CocInstall coc-explorer 17 | ``` 18 | 19 | ## Config 20 | 21 | We can add some simple settings in the `coc-settings.json` file 22 | 23 | ``` 24 | // explorer 25 | "explorer.width": 30, 26 | "explorer.icon.enableNerdfont": true, 27 | "explorer.previewAction.onHover": false, 28 | "explorer.keyMappings.global": { 29 | "": ["expandable?", "expand", "open"], 30 | "v": "open:vsplit" 31 | } 32 | ``` 33 | 34 | We'll also add some settings in `~/.config/nvim/plug-config/coc.vim` 35 | 36 | Append these lines to the end 37 | 38 | ``` 39 | " Explorer 40 | let g:coc_explorer_global_presets = { 41 | \ '.vim': { 42 | \ 'root-uri': '~/.vim', 43 | \ }, 44 | \ 'tab': { 45 | \ 'position': 'tab', 46 | \ 'quit-on-open': v:true, 47 | \ }, 48 | \ 'floating': { 49 | \ 'position': 'floating', 50 | \ 'open-action-strategy': 'sourceWindow', 51 | \ }, 52 | \ 'floatingTop': { 53 | \ 'position': 'floating', 54 | \ 'floating-position': 'center-top', 55 | \ 'open-action-strategy': 'sourceWindow', 56 | \ }, 57 | \ 'floatingLeftside': { 58 | \ 'position': 'floating', 59 | \ 'floating-position': 'left-center', 60 | \ 'floating-width': 50, 61 | \ 'open-action-strategy': 'sourceWindow', 62 | \ }, 63 | \ 'floatingRightside': { 64 | \ 'position': 'floating', 65 | \ 'floating-position': 'right-center', 66 | \ 'floating-width': 50, 67 | \ 'open-action-strategy': 'sourceWindow', 68 | \ }, 69 | \ 'simplify': { 70 | \ 'file-child-template': '[selection | clip | 1] [indent][icon | 1] [filename omitCenter 1]' 71 | \ } 72 | \ } 73 | 74 | nmap e :CocCommand explorer 75 | nmap f :CocCommand explorer --preset floating 76 | autocmd BufEnter * if (winnr("$") == 1 && &filetype == 'coc-explorer') | q | endif 77 | ``` 78 | -------------------------------------------------------------------------------- /blog/neovim_old/07-ranger.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Integrate Neovim with Ranger 3 | date: "2020-04-29" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install Ranger 10 | 11 | - Mac 12 | 13 | ``` 14 | brew install ranger 15 | ``` 16 | 17 | - Ubuntu 18 | 19 | ``` 20 | sudo apt install ranger 21 | ``` 22 | 23 | - Arch 24 | 25 | ``` 26 | sudo pacman -S ranger 27 | ``` 28 | 29 | ## Install Ranger devicons 30 | 31 | ``` 32 | git clone https://github.com/alexanderjeurissen/ranger_devicons ~/.config/ranger/plugins/ranger_devicons 33 | ``` 34 | 35 | You can now add `default_linemode devicons` to your `rc.conf` 36 | 37 | ## Install Ueberzug (Linux only) 38 | 39 | Unfortunately Ueberzug only supports linux at the moment as far as I know 40 | 41 | - Ubuntu (Note you may experience your images being badly placed this is because pip doesn't have the newest version of ueberzug, if you find this issue please install from source) 42 | 43 | ``` 44 | pip install ueberzug 45 | ``` 46 | 47 | - Arch 48 | 49 | ``` 50 | yay -S python-ueberzug-git 51 | ``` 52 | 53 | ## Ranger config file 54 | 55 | make sure you create a ranger config file and at least add the following lines 56 | 57 | Add the following file: 58 | 59 | ``` 60 | mkdir ~/.config/ranger 61 | 62 | touch ~/.config/ranger/rc.conf 63 | ``` 64 | 65 | Add this configuration to `rc.conf` 66 | 67 | ``` 68 | set preview_images_method ueberzug 69 | 70 | default_linemode devicons 71 | 72 | set show_hidden true 73 | ``` 74 | 75 | ## Add the Ranger plugin 76 | 77 | ``` 78 | Plug 'kevinhwang91/rnvimr', {'do': 'make sync'} 79 | ``` 80 | 81 | Add some config to `~/.config/nvim/plug-config/rnvimr.vim` 82 | 83 | ``` 84 | touch ~/.config/nvim/plug-config/rnvimr.vim 85 | ``` 86 | 87 | Add the following: 88 | 89 | ``` 90 | " Make Ranger replace netrw and be the file explorer 91 | let g:rnvimr_ex_enable = 1 92 | 93 | nmap r :RnvimrToggle 94 | ``` 95 | 96 | Make sure to source the config 97 | 98 | ``` 99 | source $HOME/.config/nvim/plug-config/rnvimr.vim 100 | ``` 101 | 102 | ## Sync your ranger config 103 | 104 | You may need to run this 105 | 106 | ``` 107 | :RnvimrSync 108 | ``` 109 | 110 | ## Alternative Ranger plugin 111 | 112 | [Alternative](https://github.com/francoiscabrol/ranger.vim) 113 | -------------------------------------------------------------------------------- /blog/neovim_old/09-vim-commentary.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vim-commentary 3 | date: "2020-04-30" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install commentary 10 | 11 | ``` 12 | Plug 'tpope/vim-commentary' 13 | ``` 14 | 15 | ## Configuration 16 | 17 | This is my preferred way to use this tool 18 | 19 | ``` 20 | nnoremap / :Commentary 21 | vnoremap / :Commentary 22 | ``` 23 | 24 | Just press / and it will comment out the line 25 | 26 | In visual mode select the text you want to comment out and press / 27 | 28 | ## Link to repo 29 | 30 | [commentary](https://github.com/tpope/vim-commentary) 31 | -------------------------------------------------------------------------------- /blog/neovim_old/10-adding-color.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adding color with colorizer & rainbow 3 | date: "2020-04-30" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install colorizer 10 | 11 | ``` 12 | Plug 'norcalli/nvim-colorizer.lua' 13 | ``` 14 | 15 | ## Configuration 16 | 17 | Create a place for lua plugins 18 | 19 | ``` 20 | mkdir ~/.config/nvim/lua 21 | 22 | touch ~/.config/nvim/lua/plug-colorizer.lua 23 | ``` 24 | 25 | Add the following: 26 | 27 | ``` 28 | require'colorizer'.setup( 29 | {'*';}, 30 | { 31 | RGB = true; -- #RGB hex codes 32 | RRGGBB = true; -- #RRGGBB hex codes 33 | names = true; -- "Name" codes like Blue 34 | RRGGBBAA = true; -- #RRGGBBAA hex codes 35 | rgb_fn = true; -- CSS rgb() and rgba() functions 36 | hsl_fn = true; -- CSS hsl() and hsla() functions 37 | css = true; -- Enable all CSS features: rgb_fn, hsl_fn, names, RGB, RRGGBB 38 | css_fn = true; -- Enable all CSS *functions*: rgb_fn, hsl_fn 39 | }) 40 | 41 | ``` 42 | 43 | Remember to source in `init.vim`, but a little differently this time 44 | 45 | ``` 46 | lua require'plug-colorizer' 47 | ``` 48 | 49 | ### Note 50 | 51 | This will not work if the file doesn't have and extension i.e. .txt .py. js .css 52 | 53 | If you want to enable it you can do so like this: 54 | 55 | ``` 56 | :ColorizerAttachToBuffer 57 | ``` 58 | 59 | ## Cool Note 60 | 61 | You can increment and decrement in vim with `c-a` and `c-x` 62 | 63 | just hover over a number in normal mode 64 | 65 | `r` also work great 66 | 67 | ## Lua Note 68 | 69 | Install `luarocks` if you want to use with `coc-lua` 70 | 71 | ## Examples 72 | 73 | Enter the following to see what happens 74 | 75 | ``` 76 | #8F6fEa 77 | rgb(113, 146, 230) 78 | rgb(7%, 77%, 46%) 79 | ``` 80 | 81 | ## Checkout the repo 82 | 83 | [colorizer](https://github.com/norcalli/nvim-colorizer.lua) 84 | 85 | ## Install Rainbow 86 | 87 | ``` 88 | Plug 'junegunn/rainbow_parentheses.vim' 89 | ``` 90 | 91 | ## Configuration 92 | 93 | ``` 94 | let g:rainbow#max_level = 16 95 | let g:rainbow#pairs = [['(', ')'], ['[', ']'], ['{', '}']] 96 | 97 | autocmd FileType * RainbowParentheses 98 | ``` 99 | -------------------------------------------------------------------------------- /blog/neovim_old/11-startify.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Project Management with Startify 3 | date: "2020-05-01" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Plug in Startify 10 | 11 | ``` 12 | Plug 'mhinz/vim-startify' 13 | ``` 14 | 15 | ## Create a config file 16 | 17 | ``` 18 | touch ~/.config/nvim/plug-config/start-screen.vim 19 | ``` 20 | 21 | ## Sessions 22 | 23 | This plugin will let us manage our sessions very easily 24 | 25 | ``` 26 | :SLoad load a session 27 | :SSave[!] save a session 28 | :SDelete[!] delete a session 29 | :SClose close a session 30 | ``` 31 | 32 | Add ! to skip the prompt 33 | 34 | We should specify where we want Startify to keep our sessions 35 | 36 | ``` 37 | let g:startify_session_dir = '~/.config/nvim/session' 38 | ``` 39 | 40 | ## Startify Lists 41 | 42 | We can specify what shows up in our menu like this: 43 | 44 | ``` 45 | let g:startify_lists = [ 46 | \ { 'type': 'files', 'header': [' Files'] }, 47 | \ { 'type': 'dir', 'header': [' Current Directory '. getcwd()] }, 48 | \ { 'type': 'sessions', 'header': [' Sessions'] }, 49 | \ { 'type': 'bookmarks', 'header': [' Bookmarks'] }, 50 | \ ] 51 | ``` 52 | 53 | ## Bookmarks 54 | 55 | ``` 56 | let g:startify_bookmarks = [ 57 | \ { 'c': '~/.config/i3/config' }, 58 | \ { 'i': '~/.config/nvim/init.vim' }, 59 | \ { 'z': '~/.zshrc' }, 60 | \ '~/Blog', 61 | \ '~/Code', 62 | \ '~/Pics', 63 | \ ] 64 | ``` 65 | 66 | ## Configuration options 67 | 68 | You can automatically restart a session like this 69 | 70 | ``` 71 | let g:startify_session_autoload = 1 72 | ``` 73 | 74 | From the docs: 75 | 76 | "If this option is enabled and you start Vim in a directory that contains a 77 | `Session.vim`, that session will be loaded automatically. Otherwise it will be 78 | shown as the top entry in the Startify buffer." 79 | 80 | Let Startify take care of buffers 81 | 82 | ``` 83 | let g:startify_session_delete_buffers = 1 84 | ``` 85 | 86 | Similar to Vim-rooter 87 | 88 | ``` 89 | let g:startify_change_to_vcs_root = 1 90 | ``` 91 | 92 | If you want Unicode 93 | 94 | ``` 95 | let g:startify_fortune_use_unicode = 1 96 | ``` 97 | 98 | Automatically Update Sessions 99 | 100 | ``` 101 | let g:startify_session_persistence = 1 102 | ``` 103 | 104 | Get rid of empy buffer and quit 105 | 106 | ``` 107 | let g:startify_enable_special = 0 108 | ``` 109 | 110 | ## Add a custom header 111 | 112 | ``` 113 | let g:startify_custom_header = [ 114 | \ ' _ __ _ __ ___ __ ___ ', 115 | \ ' / |/ / __(_)_ _ / |/ /__ _____/ / |_ |', 116 | \ ' / / |/ / / ` \ / /|_/ / _ `/ __/ _ \ / __/ ', 117 | \ '/_/|_/|___/_/_/_/_/ /_/ /_/\_,_/\__/_//_/ /____/ ', 118 | \] 119 | ``` 120 | -------------------------------------------------------------------------------- /blog/neovim_old/12-git-integration.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Git integration 3 | date: "2020-05-02" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Plugins 10 | 11 | We're going to be looking at 4 plugins that bring a good integrate git experience to Neovim 12 | 13 | ``` 14 | Plug 'mhinz/vim-signify' 15 | Plug 'tpope/vim-fugitive' 16 | Plug 'tpope/vim-rhubarb' 17 | Plug 'junegunn/gv.vim' 18 | ``` 19 | 20 | ## Create config files 21 | 22 | ``` 23 | touch ~/.config/nvim/plug-config/signify.vim 24 | ``` 25 | 26 | Make sure to source this file in `init.vim` 27 | 28 | ### Configure Signify 29 | 30 | Signify will show **added**, **modified**, or **removed** lines 31 | 32 | From the documentation: 33 | 34 | ``` 35 | SIGNS *signify-signs* 36 | 37 | `+` This line was added. 38 | 39 | `!` This line was modified. 40 | 41 | `_1` The number of deleted lines below this sign. If the number is larger 42 | `99` than 9, the `_` will be omitted. For numbers larger than 99, `_>` 43 | `_>` will be shown instead. 44 | 45 | `!1` This line was modified and the lines below were deleted. 46 | `!>` It is a combination of `!` and `_`. If the number is larger than 9, 47 | `!>` will be shown instead. 48 | 49 | `‾` The first line was removed. It's a special case of the `_` sign. 50 | 51 | See |g:signify_sign_add| on how to use different signs. 52 | ``` 53 | 54 | You can also stage and unstage hunks 55 | 56 | Here's some config for changing the buffer signs 57 | 58 | ``` 59 | " Change these if you want 60 | let g:signify_sign_add = '+' 61 | let g:signify_sign_delete = '_' 62 | let g:signify_sign_delete_first_line = '‾' 63 | let g:signify_sign_change = '~' 64 | 65 | " I find the numbers disctracting 66 | let g:signify_sign_show_count = 0 67 | let g:signify_sign_show_text = 1 68 | 69 | 70 | " Jump though hunks 71 | nmap gj (signify-next-hunk) 72 | nmap gk (signify-prev-hunk) 73 | nmap gJ 9999gJ 74 | nmap gK 9999gk 75 | 76 | 77 | " If you like colors instead 78 | " highlight SignifySignAdd ctermbg=green guibg=#00ff00 79 | " highlight SignifySignDelete ctermfg=black ctermbg=red guifg=#ffffff guibg=#ff0000 80 | " highlight SignifySignChange ctermfg=black ctermbg=yellow guifg=#000000 guibg=#ffff00 81 | ``` 82 | 83 | ### Commands 84 | 85 | Here are the commands I use: 86 | 87 | ``` 88 | :SignifyToggle 89 | :SignifyToggleHighlight 90 | ``` 91 | 92 | There are more commands but I prefer the options fugitive and gv provide 93 | 94 | ## Fugitive / Rhubarb 95 | 96 | This plugin is what we'll use for interacting with git 97 | 98 | **Note** GBrowse only works when Rhubarb is installed 99 | 100 | **Note** Make sure you are using git through ssh not http 101 | 102 | ### Commands 103 | 104 | ``` 105 | :Git add 106 | 107 | :Git commit 108 | 109 | :Git push 110 | 111 | :Git pull 112 | 113 | :Git diff 114 | 115 | :Git log 116 | 117 | :Git blame 118 | 119 | Gdiffsplit 120 | 121 | GRemove 122 | 123 | GBrowse 124 | ``` 125 | 126 | ## GV 127 | 128 | ### Commands 129 | 130 | From the readme: "A git commit browser." 131 | 132 | To open commit browser: 133 | 134 | ``` 135 | :GV 136 | ``` 137 | 138 | You can pass git log options to the command, e.g. :GV -S foobar. 139 | 140 | ### Other options 141 | 142 | ``` 143 | :GV! # will only list commits that affected the current file 144 | :GV? # fills the location list with the revisions of the current file 145 | :GV # or :GV? can be used in visual mode to track the changes in the selected lines. 146 | ``` 147 | 148 | ### Mappings 149 | 150 | - o or on a commit to display the content of it 151 | 152 | - o or on commits to display the diff in the range 153 | 154 | - O opens a new tab instead 155 | 156 | - gb for :Gbrowse 157 | 158 | - ]] and [[ to move between commits 159 | 160 | - . to start command-line with :Git [CURSOR] SHA à la fugitive 161 | 162 | - q or gq to close 163 | 164 | ## Check out the repos here 165 | 166 | [signify](https://github.com/mhinz/vim-signify) 167 | 168 | [fugitive](https://github.com/tpope/vim-fugitive) 169 | 170 | [rhubarb](https://github.com/tpope/vim-rhubarb) 171 | 172 | [gv](https://github.com/junegunn/gv.vim) 173 | -------------------------------------------------------------------------------- /blog/neovim_old/13-sneak.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sneak 3 | date: "2020-05-03" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install 10 | 11 | ``` 12 | Plug 'justinmk/vim-sneak' 13 | ``` 14 | 15 | ## Create config file 16 | 17 | ``` 18 | touch ~/.config/nvim/plug-config/sneak.vim 19 | ``` 20 | 21 | Make sure to source this file in `init.vim` 22 | 23 | ## Sneak 24 | 25 | Sneak is a motion plugin for vim that remaps the `s` and `S` keys 26 | 27 | The authors rationale for remapping these keys is this: cl is equivalent to s, and cc is equivalent to S. 28 | 29 | ### Configure Sneak 30 | 31 | ``` 32 | let g:sneak#label = 1 33 | 34 | " case insensitive sneak 35 | let g:sneak#use_ic_scs = 1 36 | 37 | " immediately move to the next instance of search, if you move the cursor sneak is back to default behavior 38 | let g:sneak#s_next = 1 39 | 40 | " remap so I can use , and ; with f and t 41 | map gS Sneak_, 42 | map gs Sneak_; 43 | 44 | " Change the colors 45 | highlight Sneak guifg=black guibg=#00C7DF ctermfg=black ctermbg=cyan 46 | highlight SneakScope guifg=red guibg=yellow ctermfg=red ctermbg=yellow 47 | 48 | " Cool prompts 49 | " let g:sneak#prompt = '🕵' 50 | " let g:sneak#prompt = '🔎' 51 | 52 | " I like quickscope better for this since it keeps me in the scope of a single line 53 | " map f Sneak_f 54 | " map F Sneak_F 55 | " map t Sneak_t 56 | " map T Sneak_T 57 | ``` 58 | 59 | ### Sneak Commands 60 | 61 | ``` 62 | s{char}{char} 63 | S{char}{char} 64 | 65 | f{char} 66 | F{char} 67 | 68 | 69 | t{char} 70 | T{char} 71 | ``` 72 | 73 | ## Link to Sneak repo 74 | 75 | [Sneak](https://github.com/justinmk/vim-sneak) 76 | -------------------------------------------------------------------------------- /blog/neovim_old/14-quickscope.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Quickscope 3 | date: "2020-05-03" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install 10 | 11 | ``` 12 | Plug 'unblevable/quick-scope' 13 | ``` 14 | 15 | ## Create config file 16 | 17 | ``` 18 | touch ~/.config/nvim/plug-config/quickscope.vim 19 | ``` 20 | 21 | Make sure to source this file in `init.vim` 22 | 23 | ``` 24 | source $HOME/.config/nvim/plug-config/quickscope.vim 25 | ``` 26 | 27 | ## Quickscope 28 | 29 | Form the github repo: 30 | 31 | "An always-on highlight for a unique character in every word on a line to help you use f, F and family." 32 | 33 | ### Configure Quickscope 34 | 35 | ``` 36 | " Trigger a highlight in the appropriate direction when pressing these keys: 37 | let g:qs_highlight_on_keys = ['f', 'F', 't', 'T'] 38 | 39 | highlight QuickScopePrimary guifg='#00C7DF' gui=underline ctermfg=155 cterm=underline 40 | highlight QuickScopeSecondary guifg='#afff5f' gui=underline ctermfg=81 cterm=underline 41 | 42 | let g:qs_max_chars=150 43 | ``` 44 | 45 | ### Quickscope Commands 46 | 47 | ``` 48 | f{char} 49 | F{char} 50 | 51 | 52 | t{char} 53 | T{char} 54 | ``` 55 | 56 | ## Link to Quickscope repo 57 | 58 | [Quickscope](https://github.com/unblevable/quick-scope) 59 | -------------------------------------------------------------------------------- /blog/neovim_old/15-which-key.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Which Key 3 | date: "2020-05-03" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install 10 | 11 | ``` 12 | Plug 'liuchengxu/vim-which-key' 13 | ``` 14 | 15 | ## Create config file 16 | 17 | ``` 18 | touch ~/.config/nvim/keys/which-key.vim 19 | ``` 20 | 21 | Make sure to source this file in `init.vim` 22 | 23 | ``` 24 | source $HOME/.config/nvim/keys/which-key.vim 25 | ``` 26 | 27 | ## Which Key 28 | 29 | From the github repo: 30 | 31 | "vim-which-key is vim port of emacs-which-key that displays available keybindings in popup." 32 | 33 | ### Configure Which Key 34 | 35 | ``` 36 | " Map leader to which_key 37 | nnoremap :silent WhichKey '' 38 | vnoremap :silent :silent WhichKeyVisual '' 39 | 40 | " Create map to add keys to 41 | let g:which_key_map = {} 42 | " Define a separator 43 | let g:which_key_sep = '→' 44 | " set timeoutlen=100 45 | 46 | 47 | " Not a fan of floating windows for this 48 | let g:which_key_use_floating_win = 0 49 | 50 | " Change the colors if you want 51 | highlight default link WhichKey Operator 52 | highlight default link WhichKeySeperator DiffAdded 53 | highlight default link WhichKeyGroup Identifier 54 | highlight default link WhichKeyDesc Function 55 | 56 | " Hide status line 57 | autocmd! FileType which_key 58 | autocmd FileType which_key set laststatus=0 noshowmode noruler 59 | \| autocmd BufLeave set laststatus=2 noshowmode ruler 60 | 61 | " Single mappings 62 | let g:which_key_map['/'] = [ 'NERDCommenterToggle' , 'comment' ] 63 | let g:which_key_map['e'] = [ ':CocCommand explorer' , 'explorer' ] 64 | let g:which_key_map['f'] = [ ':Files' , 'search files' ] 65 | let g:which_key_map['h'] = [ 's' , 'split below'] 66 | let g:which_key_map['r'] = [ ':Ranger' , 'ranger' ] 67 | let g:which_key_map['S'] = [ ':Startify' , 'start screen' ] 68 | let g:which_key_map['T'] = [ ':Rg' , 'search text' ] 69 | let g:which_key_map['v'] = [ 'v' , 'split right'] 70 | let g:which_key_map['z'] = [ 'Goyo' , 'zen' ] 71 | 72 | " s is for search 73 | let g:which_key_map.s = { 74 | \ 'name' : '+search' , 75 | \ '/' : [':History/' , 'history'], 76 | \ ';' : [':Commands' , 'commands'], 77 | \ 'a' : [':Ag' , 'text Ag'], 78 | \ 'b' : [':BLines' , 'current buffer'], 79 | \ 'B' : [':Buffers' , 'open buffers'], 80 | \ 'c' : [':Commits' , 'commits'], 81 | \ 'C' : [':BCommits' , 'buffer commits'], 82 | \ 'f' : [':Files' , 'files'], 83 | \ 'g' : [':GFiles' , 'git files'], 84 | \ 'G' : [':GFiles?' , 'modified git files'], 85 | \ 'h' : [':History' , 'file history'], 86 | \ 'H' : [':History:' , 'command history'], 87 | \ 'l' : [':Lines' , 'lines'] , 88 | \ 'm' : [':Marks' , 'marks'] , 89 | \ 'M' : [':Maps' , 'normal maps'] , 90 | \ 'p' : [':Helptags' , 'help tags'] , 91 | \ 'P' : [':Tags' , 'project tags'], 92 | \ 's' : [':Snippets' , 'snippets'], 93 | \ 'S' : [':Colors' , 'color schemes'], 94 | \ 't' : [':Rg' , 'text Rg'], 95 | \ 'T' : [':BTags' , 'buffer tags'], 96 | \ 'w' : [':Windows' , 'search windows'], 97 | \ 'y' : [':Filetypes' , 'file types'], 98 | \ 'z' : [':FZF' , 'FZF'], 99 | \ } 100 | 101 | " Register which key map 102 | call which_key#register('', "g:which_key_map") 103 | ``` 104 | 105 | ### WhichKey Commands 106 | 107 | ``` 108 | {char} 109 | ``` 110 | 111 | ## Link to WhichKey repo 112 | 113 | [WhichKey](https://github.com/liuchengxu/vim-which-key) 114 | -------------------------------------------------------------------------------- /blog/neovim_old/16-floaterm.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Floaterm 3 | date: "2020-05-15" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install 10 | 11 | ``` 12 | Plug 'voldikss/vim-floaterm' 13 | ``` 14 | 15 | ## Create config file 16 | 17 | ``` 18 | touch ~/.config/nvim/plug-config/floaterm.vim 19 | ``` 20 | 21 | Make sure to source this file in `init.vim` 22 | 23 | ``` 24 | source $HOME/.config/nvim/plug-config/floaterm.vim 25 | ``` 26 | 27 | ## Floaterm 28 | 29 | Floaterm is a floating terminal for Neovim 30 | 31 | ### Configure Floaterm 32 | 33 | ``` 34 | let g:floaterm_keymap_toggle = '' 35 | let g:floaterm_keymap_next = '' 36 | let g:floaterm_keymap_prev = '' 37 | let g:floaterm_keymap_new = '' 38 | 39 | " Floaterm 40 | let g:floaterm_gitcommit='floaterm' 41 | let g:floaterm_autoinsert=1 42 | let g:floaterm_width=0.8 43 | let g:floaterm_height=0.8 44 | let g:floaterm_wintitle=0 45 | let g:floaterm_autoclose=1 46 | ``` 47 | 48 | ### Floaterm Commands 49 | 50 | Here is my which key configuration: 51 | 52 | ``` 53 | let g:which_key_map.t = { 54 | \ 'name' : '+terminal' , 55 | \ ';' : [':FloatermNew --wintype=popup --height=6' , 'terminal'], 56 | \ 'f' : [':FloatermNew fzf' , 'fzf'], 57 | \ 'g' : [':FloatermNew lazygit' , 'git'], 58 | \ 'd' : [':FloatermNew lazydocker' , 'docker'], 59 | \ 'n' : [':FloatermNew node' , 'node'], 60 | \ 'N' : [':FloatermNew nnn' , 'nnn'], 61 | \ 'p' : [':FloatermNew python' , 'python'], 62 | \ 'r' : [':FloatermNew ranger' , 'ranger'], 63 | \ 't' : [':FloatermToggle' , 'toggle'], 64 | \ 'y' : [':FloatermNew ytop' , 'ytop'], 65 | \ 's' : [':FloatermNew ncdu' , 'ncdu'], 66 | \ } 67 | ``` 68 | 69 | ## Link to Floaterm repo 70 | 71 | [Floaterm](https://github.com/voldikss/vim-floaterm) 72 | -------------------------------------------------------------------------------- /blog/neovim_old/17-snippets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Snippets with CoC 3 | date: "2020-05-22" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install 10 | 11 | ``` 12 | Plug 'honza/vim-snippets' 13 | ``` 14 | 15 | Make sure you install CoC, I have a video for that [here](https://www.youtube.com/watch?v=OXEVhnY621M) 16 | 17 | After setting up CoC you can install with: 18 | 19 | ``` 20 | :CocInstall coc-snippets 21 | ``` 22 | 23 | ## Config 24 | 25 | You can create a config file and add the following: 26 | 27 | ``` 28 | " Use for trigger snippet expand. 29 | imap (coc-snippets-expand) 30 | 31 | " Use for select text for visual placeholder of snippet. 32 | vmap (coc-snippets-select) 33 | 34 | " Use for jump to next placeholder, it's default of coc.nvim 35 | let g:coc_snippet_next = '' 36 | 37 | " Use for jump to previous placeholder, it's default of coc.nvim 38 | let g:coc_snippet_prev = '' 39 | 40 | " Use for both expand and jump (make expand higher priority.) 41 | imap (coc-snippets-expand-jump) 42 | ``` 43 | 44 | ## Add your own snippets 45 | 46 | Edit coc-settings.json and add the following: 47 | 48 | ``` 49 | "snippets.userSnippetsDirectory": "~/.config/nvim/snips", 50 | ``` 51 | 52 | After that you can add a file like this: 53 | 54 | ``` 55 | mkdir ~/.config/nvim/snips 56 | 57 | touch ~/.config/nvim/snips/markdown.snippets # <- doesn't have to be called markdown 58 | ``` 59 | 60 | ## Commands 61 | 62 | You'll be able to notice it's a snippet from the `~` character 63 | 64 | Auto complete should feel very familiar, refer to the earlier bindings you set. 65 | 66 | To list all snippets for a current file: 67 | 68 | ``` 69 | :CocList snippets 70 | 71 | :CocCommand snippets.editSnippets 72 | 73 | :CocCommand snippets.openSnippetFiles 74 | ``` 75 | 76 | ## Repo Links 77 | 78 | [coc-snippets](https://github.com/neoclide/coc-snippets) 79 | 80 | [honza/vim-snippets](https://github.com/honza/vim-snippets) 81 | -------------------------------------------------------------------------------- /blog/neovim_old/18-codi.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Codi - An Interactive Scratchpad for Hackers 3 | date: "2020-05-26" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## What is Codi? 10 | 11 | Codi is an interactive scratchpad for hackers. It opens virtual text which displays the results of evaluating each line as you type with NeoVim asynchronously. It's extensible to nearly any language that provides a REPL (interactive interpreter)! 12 | 13 | REPL = (Read-eval-print loop) 14 | 15 | Languages with built-in support: Python, JavaScript, CoffeeScript, Haskell, PureScript, Ruby, OCaml, R, Clojure/ClojureScript, PHP, Lua, C++, Julia, Elm, Elixir, TypeScript, Mathjs 16 | 17 | ## Install 18 | 19 | - Updated Version with Virtual text 20 | 21 | ``` 22 | Plug 'ChristianChiarulli/codi.vim' 23 | ``` 24 | 25 | - Original 26 | 27 | ``` 28 | Plug 'metakirby5/codi.vim' 29 | ``` 30 | 31 | - Version with Virtual Text 32 | 33 | The code for this can be found [here](https://github.com/Pablo1107/codi.vim/tree/nvim-virtual-text) 34 | 35 | ## Config 36 | 37 | Here is some simple config to get you started 38 | 39 | ``` 40 | " Change the color 41 | highlight CodiVirtualText guifg=cyan 42 | 43 | let g:codi#virtual_text_prefix = "❯ " 44 | 45 | 46 | " 47 | let g:codi#aliases = { 48 | \ 'javascript.jsx': 'javascript', 49 | \ } 50 | ``` 51 | 52 | ## Commands 53 | 54 | ``` 55 | :Codi {filetype} # Open codi for a specific filetype 56 | 57 | :Codi! # Closes Codi Apparently doesn't work 58 | 59 | :Codi!! # Toggle Codi Apparently doesn't work 60 | ``` 61 | 62 | ## Shell Wrapper 63 | 64 | Add this to your `bashrc` or `zshrc` 65 | 66 | ``` 67 | codi() { 68 | local syntax="${1:-python}" 69 | shift 70 | nvim -c \ 71 | "let g:startify_disable_at_vimenter = 1 |\ 72 | set bt=nofile ls=0 noru nonu nornu |\ 73 | hi CodiVirtualText guifg=red 74 | hi ColorColumn ctermbg=NONE |\ 75 | hi VertSplit ctermbg=NONE |\ 76 | hi NonText ctermfg=0 |\ 77 | Codi $syntax" "$@" 78 | } 79 | ``` 80 | 81 | ## Notes 82 | 83 | This plugin has been a little buggy but I still find it very useful. 84 | 85 | The maintainer and the guy who forked it and added virtual text don't seem to be very active. 86 | 87 | I have a fork on my Github for now with the updates from both. 88 | 89 | I don't plan on maintaining it or adding features. 90 | 91 | Hopefully they update it soon. 92 | 93 | ## Repo Links 94 | 95 | [Original](https://github.com/Pablo1107/codi.vim/tree/nvim-virtual-text) 96 | 97 | [Virtual text fork](https://github.com/Pablo1107/codi.vim/tree/nvim-virtual-text) 98 | 99 | [YouTube video where I found this](https://www.youtube.com/watch?v=iGrUvcQyfhc) 100 | 101 | [My fork](https://github.com/ChristianChiarulli/codi.vim) 102 | -------------------------------------------------------------------------------- /blog/neovim_old/19-coc-marketplace.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Discovering extensions with coc-marketplace 3 | date: "2020-06-11" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## What is coc-marketplace? 10 | 11 | This extension is a marketplace for all other coc-extensions 12 | 13 | ### Note 14 | 15 | You will need to have CoC installed I have a blog post and video for installing CoC here: 16 | 17 | [YouTube Video](https://www.youtube.com/watch?v=OXEVhnY621M) 18 | 19 | [Blog Post](https://www.chrisatmachine.com/Neovim/04-vim-coc/) 20 | 21 | ## Install 22 | 23 | ``` 24 | :CocInstall coc-marketplace 25 | ``` 26 | 27 | ## Commands 28 | 29 | ``` 30 | :CocList marketplace 31 | ``` 32 | 33 | ## Repo Links 34 | 35 | [coc-marketplace](https://github.com/fannheyward/coc-marketplace) 36 | -------------------------------------------------------------------------------- /blog/neovim_old/20-live-server.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Using Live Server with Neovim 3 | date: "2020-07-30" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## What is Live Server? 10 | 11 | Live-server is an `npm` package that will allow you to see real time changes for `.html` files in your browser. 12 | 13 | ### Note 14 | 15 | You will need to have `node` & `npm` installed I have a blog post about installing node using `fnm` [here](https://www.chrisatmachine.com/Nodejs/02-Install-FNM/) 16 | 17 | ## Install 18 | 19 | ``` 20 | npm i -g live-server 21 | ``` 22 | 23 | ## Commands 24 | 25 | You can have live server monitor and html file like this: 26 | 27 | ``` 28 | live-server some-file.html 29 | ``` 30 | 31 | Or watch a directory like this: 32 | 33 | ``` 34 | live-server some-directory/ 35 | ``` 36 | -------------------------------------------------------------------------------- /blog/neovim_old/21-coc-emoji.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Emojis in Neovim 💯👍😜 3 | date: "2020-07-31" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## Supporting emoji ✌ 10 | 11 | Make sure your terminal supports emojis 12 | 13 | You will also need a font that will support emojis such as: 14 | 15 | On Arch Linux you will need to: 16 | 17 | ``` 18 | sudo pacman -S noto-fonts-emoji 19 | ``` 20 | 21 | ### Note 📓 22 | 23 | You will need to have CoC installed I have a blog post and video for installing CoC here: 24 | 25 | [YouTube Video](https://www.youtube.com/watch?v=OXEVhnY621M) 26 | 27 | [Blog Post](https://www.chrisatmachine.com/Neovim/04-vim-coc/) 28 | 29 | ## Install 📥 30 | 31 | ``` 32 | :CocInstall coc-emoji 33 | ``` 34 | 35 | ## Commands ⌨ 36 | 37 | Emojis, are enabled for markdown files only by default. 38 | 39 | You can add filetypes with the following to you `coc-settings.json`: 40 | 41 | ``` 42 | "coc.source.emoji.filetypes": ["markdown"] 43 | ``` 44 | 45 | To see a list of emoji completion candidates, `:` is the trigger character. 46 | 47 | It is also possible to change the emoji trigger character by putting the following in your coc-settings.json: 48 | 49 | ``` 50 | "coc.source.emoji.triggerCharacters": ["TRIGGERCHAR"] 51 | ``` 52 | -------------------------------------------------------------------------------- /blog/neovim_old/22-vscodium-neovim.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: VSCodium & Neovim 3 | date: "2020-09-01" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## What is VSCodium? 10 | 11 | From `vscodium.com`: 12 | 13 | Microsoft’s vscode source code is open source (MIT-licensed), but the product available for download (Visual Studio Code) is licensed under this not-FLOSS license and contains telemetry/tracking. 14 | 15 | ### Installing VSCodium 16 | 17 | - On Mac 18 | 19 | ``` 20 | brew install --cask vscodium 21 | ``` 22 | 23 | - Arch Linux 24 | 25 | ``` 26 | yay -S vscodium 27 | ``` 28 | 29 | - Ubuntu 30 | 31 | ``` 32 | sudo apt install vscodium 33 | ``` 34 | 35 | ### Configuring Plugins 36 | 37 | By default you will be able to use all of the extensions available on [open-vsx.org](https://open-vsx.org/). 38 | 39 | If you want all of the extensions available in vanilla VS Code then you will need to edit `product.json` and add the following: 40 | 41 | ```json 42 | "extensionsGallery": { 43 | "serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery", 44 | "itemUrl": "https://marketplace.visualstudio.com/items" 45 | } 46 | ``` 47 | 48 | #### Finding product.json on Mac 49 | 50 | Open `Finder` then `Applications` 51 | 52 | Then right click `VSCodium` and select `Show Package Contents` 53 | 54 | From here the path is `Contents/Resources/app/product.json` 55 | 56 | #### Finding product.json on Linux 57 | 58 | Here is the path to `product.json` on Linux: 59 | 60 | ``` 61 | /usr/share/vscodium-bin/resources/app/product.json 62 | ``` 63 | 64 | ## The Neovim Extension 65 | 66 | From the repo description: 67 | 68 | The extension is using full embedded neovim instance as backend (with the exception of the insert mode and window/buffer/file management), no more half-complete VIM emulation 69 | 70 | ### Install Neovim Extension 71 | 72 | Search for the Neo Vim extension 73 | 74 | ## Integrating your config 75 | 76 | To integrate your config you will just need to point the extension to your `nvim` binary and `init.vim` 77 | 78 | ## The Which-key Extension 79 | 80 | Search for the Which-key extension 81 | 82 | ## Configuration 83 | 84 | You can find sample configurations in my `nvim` repo 85 | 86 | - General/which-key settings: [settings.json](https://github.com/ChristianChiarulli/nvim/blob/master/utils/vscode_config/settings.json) 87 | 88 | - Keybindings: [keybindings.json](https://github.com/ChristianChiarulli/nvim/blob/master/utils/vscode_config/keybindings.json) 89 | 90 | - Neovim settings [settings.vim](https://github.com/ChristianChiarulli/nvim/blob/master/vscode/settings.vim) 91 | 92 | ## Links to repos 93 | 94 | [VSCodium](https://github.com/VSCodium/vscodium) 95 | 96 | [Neo Vim](https://github.com/asvetliakov/vscode-neovim) 97 | 98 | [vscode-which-key](https://github.com/VSpaceCode/vscode-which-key) 99 | -------------------------------------------------------------------------------- /blog/neovim_old/23-far-find-and-replace.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Project Wide Find & Replace w/ FAR 3 | date: "2020-09-14" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## Installing the FAR Plugin 10 | 11 | FAR is a Vim/Neovim plugin that will allow you to perform project wide find & replace 12 | 13 | - Install with Vim-plug: 14 | 15 | ``` 16 | Plug 'ChristianChiarulli/far.vim' 17 | ``` 18 | 19 | ( **NOTE** ) 20 | 21 | - You may also need to run: 22 | 23 | ``` 24 | :UpdateRemotePlugins 25 | ``` 26 | 27 | Currently I'm using a fork that improves the experience in my opinion, it's based on this [issue](https://github.com/brooth/far.vim/issues/94) 28 | 29 | ## Configuration 30 | 31 | Add this to your `init.vim` 32 | 33 | ``` 34 | let g:far#source='rgnvim' 35 | " let g:far#source='rg' 36 | " let g:far#source='vimgrep' 37 | " let g:far#source='ag' 38 | 39 | set lazyredraw " improve scrolling performance when navigating through large results 40 | 41 | let g:far#window_width=60 42 | " Use %:p with buffer option only 43 | let g:far#file_mask_favorites=['%:p', '**/*.*', '**/*.js', '**/*.py', '**/*.java', '**/*.css', '**/*.html', '**/*.vim', '**/*.cpp', '**/*.c', '**/*.h', ] 44 | let g:far#window_min_content_width=30 45 | let g:far#enable_undo=1 46 | ``` 47 | 48 | ## Commands 49 | 50 | - Find & Replace in buffer (current file): 51 | 52 | ``` 53 | :Farr --source=vimgrep 54 | ``` 55 | 56 | - Find & Replace project: 57 | 58 | ``` 59 | :Farr --source=rgnvim 60 | ``` 61 | 62 | 63 | - If you're using the `which-key plugin`: 64 | 65 | ``` 66 | let g:which_key_map.f = { 67 | \ 'name' : '+find & replace' , 68 | \ 'b' : [':Farr --source=vimgrep' , 'buffer'], 69 | \ 'p' : [':Farr --source=rgnvim' , 'project'], 70 | \ } 71 | ``` 72 | 73 | ### Inside FAR Buffer Commands 74 | 75 | ``` 76 | " Below are the default mappings and corresponding variable names in 77 | 78 | " x v_x - Exclude item under the cursor. 79 | 80 | " i v_i - Include item under the cursor. 81 | 82 | " t v_t - Toggle item exclusion under the cursor. 83 | 84 | " f v_f - Smartly toggle item exclusion under the cursor: exclude all items when all are excluded, otherwise exclude all items. 85 | 86 | " X - Exclude all items. 87 | 88 | " I - Include all items. 89 | 90 | " T - Toggle exclusion for all items. 91 | 92 | " F - Smartly toggle exclusion for all items: include all items when all are excluded, otherwise exclude all items. 93 | 94 | " - Jump to the source code of the item under the cursor. See |far-jump| 95 | 96 | " p - Open preview window (if not) and scroll to the item under the cursor. See |far-preview| 97 | 98 | " P - Close preview window. See |far-preview| 99 | 100 | " CTRL-K - Scroll preview window up (if open). See |far-preview|, |g:far#preview_window_scroll_step| 101 | 102 | " CTRL-J - Scroll preview window down (if open). See |far-preview|, |g:far#preview_window_scroll_step| 103 | 104 | " zo - Expand node under the cursor. 105 | 106 | " zc - Collapse node under the cursor. 107 | 108 | " za - Toggle node expanding under the cursor. 109 | 110 | " zs - Smartly toggle exclusion for all nodes: expand all nodes when all are collapsed, otherwise collapse all nodes. 111 | 112 | " zr v_zr - Expand all nodes. 113 | 114 | " zm v_zm - Collapse all nodes. 115 | 116 | " zA v_zA - Toggle exclusion for all nodes. 117 | 118 | " zS v_zS - Smartly toggle exclusion for all nodes: expand all nodes when all are collapsed, otherwise collapse all nodes. 119 | 120 | " s v_s - Execute |:Fardo|, to replace all included items. 121 | 122 | " u v_s - Execute |:Farundo|, to undo the last replacement by |:Fardo|. 123 | 124 | " U v_U - Execute |:Farundo| --all=1, to undo all replacements by |:Fardo|. For param '--all=' see |farundo-params|. 125 | 126 | " q v_q - Close searching result buffer and its preview buffer (if exists) 127 | ``` 128 | 129 | ## Links & Repos 130 | 131 | [FAR](https://github.com/brooth/far.vim) 132 | 133 | [Glob Issue](https://github.com/brooth/far.vim/issues/94) 134 | -------------------------------------------------------------------------------- /blog/neovim_old/24-neovim-and-java.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Java in Neovim 3 | date: "2020-11-04" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## Current State of Java + Neovim 10 | 11 | **Available:** 12 | 13 | - [Treesitter highlighting](https://github.com/nvim-treesitter/nvim-treesitter) 14 | - Goto definition 15 | - Goto references 16 | - Formatting 17 | - Diagnostics 18 | - Hover 19 | - Refactor/Rename 20 | - Search files (FZF) 21 | - Search text (FZF) 22 | - Quickfix 23 | - Lombok 24 | - Configuration in `coc-settings.json` 25 | 26 | **Difficult to Implement:** 27 | 28 | - Debugging 29 | 30 | \* This can be done but in my opinion it's difficult to get setup, if you'd like to look further into it checkout the following: 31 | 32 | - [nvim-dap](https://github.com/mfussenegger/nvim-dap) 33 | - [vimspector](https://github.com/puremourning/vimspector) 34 | 35 | ### Note 36 | 37 | You will need to have CoC installed I have a blog post and video for installing CoC here: 38 | 39 | [YouTube Video](https://www.youtube.com/watch?v=OXEVhnY621M) 40 | 41 | [Blog Post](https://www.chrisatmachine.com/Neovim/04-vim-coc/) 42 | 43 | ## Install 44 | 45 | **Treesitter** 46 | 47 | _You will need Neovim>=0.5_ 48 | 49 | - Install with VimPlug 50 | 51 | ``` 52 | Plug 'nvim-treesitter/nvim-treesitter' 53 | ``` 54 | 55 | Add this to your `init.vim` 56 | 57 | ``` 58 | require'nvim-treesitter.configs'.setup { 59 | ensure_installed = "maintained", -- one of "all", "maintained" (parsers with maintainers), or a list of languages 60 | highlight = { 61 | enable = true, -- false will disable the whole extension 62 | }, 63 | } 64 | ``` 65 | 66 | **coc-java** 67 | 68 | ``` 69 | :CocInstall coc-java 70 | ``` 71 | 72 | **Lombok** 73 | 74 | ``` 75 | sudo mkdir /usr/local/share/lombok 76 | 77 | sudo wget https://projectlombok.org/downloads/lombok.jar -O /usr/local/share/lombok/lombok.jar 78 | ``` 79 | 80 | ## Commands 81 | 82 | Here are a bunch of commands to get the behavior of this video: 83 | 84 | ``` 85 | (coc-codeaction) " line action 86 | (coc-definition) " definition 87 | (coc-references) " references 88 | (coc-type-definition) " type definition 89 | (coc-rename) " rename 90 | (coc-declaration) " declaration 91 | (coc-implementation) " implementation 92 | (coc-format) " format 93 | (coc-fix-current) " quickfix 94 | (coc-codelens-action) " code lens 95 | (coc-diagnostic-next) " next diagnostic 96 | (coc-diagnostic-next-error) " next error 97 | :CocList diagnostics " diagnostics 98 | :CocList outline " search outline 99 | :CocList -I symbols " references 100 | :CocUpdate " update CoC 101 | :CocDisable " disable CoC 102 | :CocEnable " enable CoC 103 | ``` 104 | 105 | ## Configuration 106 | 107 | - `coc-settings.json` 108 | 109 | ``` 110 | // codelens 111 | "codeLens.enable": true, 112 | "java.referencesCodeLens.enabled": true, 113 | "java.jdt.ls.vmargs": "-javaagent:/usr/local/share/lombok/lombok.jar", 114 | // "java.jdt.ls.vmargs": "-javaagent:/usr/local/share/lombok/lombok.jar -Xbootclasspath/a:/usr/local/share/lombok/lombok.jar", // for older versions of Java 115 | ``` 116 | 117 | ## Repo Links 118 | 119 | [coc-java](https://github.com/neoclide/coc-java) 120 | [treesitter](https://github.com/nvim-treesitter/nvim-treesitter) 121 | -------------------------------------------------------------------------------- /blog/neovim_old/25-vimspector.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vimspector (for Java) 3 | date: "2020-11-05" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## What is Vimspector? 10 | 11 | It is a debugger plugin for Vim and Neovim 12 | 13 | I am going to be using Java as an example in this article but I'll probably do ones for Python and JavaScript as well. 14 | 15 | ## Install 16 | 17 | ### Note 18 | 19 | You will need to have CoC installed I have a blog post and video for installing CoC here: 20 | 21 | [YouTube Video](https://www.youtube.com/watch?v=OXEVhnY621M) 22 | 23 | [Blog Post](https://www.chrisatmachine.com/Neovim/04-vim-coc/) 24 | 25 | - Install `coc-java` 26 | 27 | ## Commands 28 | 29 | ## Configuration 30 | 31 | ## Repo Links 32 | 33 | [coc-java](https://github.com/neoclide/coc-java) 34 | -------------------------------------------------------------------------------- /blog/neovim_old/26-lsp-symbols.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: LSP Completion Symbols in CoC 3 | date: "2021-02-15" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## LSP Completion Symbols 10 | 11 | If you are familiar with VS Code then you have probably noticed all of the symbols you see in the completion menu. You can find an example of all of the symbols provided here: [VSCode Intellisense Overview](https://code.visualstudio.com/docs/editor/intellisense) 12 | 13 | ## Adding to CoC 14 | 15 | To add them to the CoC completion menu add the following to your `coc-settings.json`: 16 | 17 | ``` 18 | "suggest.completionItemKindLabels": { 19 | "method": "  ", 20 | "function": "  ", 21 | "variable": "[]", 22 | "field": "  ", 23 | "typeParameter": "<>", 24 | "constant": "  ", 25 | "class": " פּ ", 26 | "interface": " 蘒", 27 | "struct": "  ", 28 | "event": "  ", 29 | "operator": "  ", 30 | "module": "  ", 31 | "property": "  ", 32 | "enum": " 練", 33 | "reference": "  ", 34 | "keyword": "  ", 35 | "file": "  ", 36 | "folder": " ﱮ ", 37 | "color": "  ", 38 | "unit": " 塞 ", 39 | "snippet": "  ", 40 | "text": "  ", 41 | "constructor": "  ", 42 | "value": "  ", 43 | "enumMember": "  " 44 | }, 45 | ``` 46 | 47 | This was as close as I could get with the symbols provided by [Nerdfont Icons](https://www.nerdfonts.com/cheat-sheet). 48 | 49 | Feel free to explore the above link and change the symbols to whatever you like. 50 | -------------------------------------------------------------------------------- /blog/neovim_old/29-setting-up-nvim-jdtls.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Setup Neovim for Lua Development 3 | date: "2021-03-11" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## What is nvim-jdtls? 10 | 11 | This is a plugin that will provide LSP support for Neovim and other cool features. 12 | 13 | Check out the Github Repo [here](https://github.com/mfussenegger/nvim-jdtls) 14 | 15 | ## Install 16 | 17 | ``` 18 | Plug 'mfussenegger/nvim-jdtls' 19 | ``` 20 | 21 | ## Install Language Server 22 | 23 | ``` 24 | cd ~/.config/nvim 25 | git clone https://github.com/eclipse/eclipse.jdt.ls.git 26 | cd eclipse.jdt.ls 27 | ./mvnw clean verify 28 | ``` 29 | 30 | ## Configure Language Server 31 | 32 | ```lua heading=java-ls.lua 33 | require'lspconfig'.jdtls.setup {cmd = {'java-linux-ls'}} 34 | ``` 35 | -------------------------------------------------------------------------------- /blog/python/01-Install-Miniconda.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: How to install Miniconda 3 | date: "2019-06-25" 4 | topic: "python" 5 | cover: "/images/miniconda.jpg" 6 | excerpt: "This guide will show you how to install the latest version of Miniconda. Miniconda is a lightweight version of Anaconda: a virtual environment manager for Python" 7 | --- 8 | 9 | This guide will show you how to install the latest version of Miniconda. Miniconda is a lightweight version of Anaconda: a virtual environment manager for Python. 10 | 11 | ## Download Install Script 12 | 13 | ### Linux 14 | 15 | ``` 16 | wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh -O ~/miniconda.sh 17 | ``` 18 | 19 | ### Mac 20 | 21 | ``` 22 | wget https://repo.anaconda.com/miniconda/Miniconda3-latest-MacOSX-x86_64.sh -O ~/miniconda.sh 23 | ``` 24 | 25 | ## Install Minconda 26 | 27 | ``` 28 | sh ~/miniconda.sh -b -f -p $HOME/.miniconda 29 | 30 | rm ~/miniconda.sh 31 | ``` 32 | 33 | ## Setting up your shell 34 | 35 | If you don't want the conda base environment (you may not want this because as of now there are conflicts with later versions of Python and npm) 36 | 37 | ``` 38 | conda config --set auto_activate_base false 39 | ``` 40 | 41 | **NOTE:** If you don't have the `conda` command available then enter the following in your `.bashrc` or `.zshrc` file: 42 | 43 | ``` 44 | # >>> conda initialize >>> 45 | # !! Contents within this block are managed by 'conda init' !! 46 | __conda_setup="$("$HOME/.miniconda/bin/conda" 'shell.zsh' 'hook' 2> /dev/null)" 47 | if [ $? -eq 0 ]; then 48 | eval "$__conda_setup" 49 | else 50 | if [ -f "$HOME/.miniconda/etc/profile.d/conda.sh" ]; then 51 | . "$HOME/.miniconda/etc/profile.d/conda.sh" 52 | else 53 | export PATH="$HOME/.miniconda/bin:$PATH" 54 | fi 55 | fi 56 | unset __conda_setup 57 | # <<< conda initialize <<< 58 | ``` 59 | 60 | The first time you run it, it'll create a ./condarc in your home directory with that setting to override the default. 61 | 62 | Now you can initialize your shell with the following command: 63 | 64 | ``` 65 | conda init 66 | ``` 67 | 68 | Currently available shells are: 69 | - bash 70 | - fish 71 | - powershell 72 | - tcsh 73 | - xonsh 74 | - zsh 75 | 76 | 77 | Now close your terminal and open a new one and your conda environment should be fully configured. 78 | -------------------------------------------------------------------------------- /blog/python/02-How-to use-miniconda.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Managing Environments with Miniconda 3 | date: "2019-06-25" 4 | topic: "python" 5 | cover: "/images/miniconda.jpg" 6 | excerpt: "The previous article explains how to properly install and configure Miniconda. This article will explain how to manage your environments" 7 | --- 8 | 9 | The previous article explains how to properly install and configure Miniconda. This article will explain how to manage your environments. 10 | 11 | ## Creating a Virtual Environment 12 | 13 | ``` 14 | conda create -n python=<3.7> pip -y 15 | ``` 16 | 17 | This command will create a virtual environment with the following properties: 18 | 19 | - -n myenv You can choose any name you want here 20 | - python=3.7 you can set the version to be whatever you want such as 2.7 (if you don't specify a version it will choose the latest) 21 | - -y this just preemptively answers yes to creating the environment 22 | 23 | ## Activating a Virtual Environment 24 | 25 | ``` 26 | conda activate 27 | ``` 28 | 29 | ## Deactivating a Virtual Environment 30 | 31 | ``` 32 | conda deactivate 33 | ``` 34 | 35 | ## Listing Available Environments 36 | 37 | ``` 38 | conda env list 39 | ``` 40 | 41 | ## Removing an Environment 42 | 43 | ``` 44 | conda remove --name --all 45 | ``` 46 | 47 | ## Cloning an Environment 48 | 49 | ``` 50 | conda create --name --clone 51 | ``` 52 | 53 | ## Removing PS1 Prompt 54 | 55 | ``` 56 | conda config --set changeps1 false 57 | ``` 58 | 59 | To re-enable: 60 | 61 | ``` 62 | conda config --set changeps1 true 63 | ``` 64 | 65 | ## Searching for packages 66 | 67 | ``` 68 | conda search 69 | ``` 70 | 71 | ## Sharing an environment 72 | 73 | - First export the environment 74 | 75 | ``` 76 | conda env export > environment.yml 77 | ``` 78 | 79 | - Now install in another Anaconda Environment Manager 80 | 81 | ``` 82 | conda env create -f environment.yml 83 | ``` 84 | 85 | ## Installing Packages & Pinning Versions 86 | 87 | - With conda (=) 88 | 89 | ``` 90 | conda install = 91 | ``` 92 | 93 | - With pip (==) 94 | 95 | ``` 96 | pip install == 97 | ``` 98 | -------------------------------------------------------------------------------- /components/CategoryLabel.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import { COLOR_KEY } from '@/config/index' 3 | import styles from '@/styles/components/CategoryLabel.module.css' 4 | 5 | export default function CategoryLabel({ children }) { 6 | // TODO: refactor to use colors without tailwind 7 | 8 | let colorKey = 'gray' 9 | 10 | if (COLOR_KEY[children] !== undefined) { 11 | colorKey = COLOR_KEY[children] 12 | } 13 | 14 | if (children === undefined) { 15 | children = 'no topic' 16 | } 17 | 18 | return ( 19 |
20 | {children} 21 |
22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /components/CategoryList.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import styles from '@/styles/components/CategoryList.module.css' 3 | 4 | export default function CategoryList({ title, categories }) { 5 | return ( 6 |
7 |

{title}

8 |
9 | {categories.map((category, index) => ( 10 | 11 |
{category}
12 | 13 | ))} 14 |
15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /components/Header.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import Search from './Search' 3 | import styles from '@/styles/components/Header.module.css' 4 | import { AiOutlineClose, AiOutlineMenu } from 'react-icons/ai' 5 | import { useState } from 'react' 6 | import SocialList from './SocialList' 7 | 8 | // TODO: responsive hamburger menu 9 | 10 | export default function Header() { 11 | const [showMenu, setShowMenu] = useState(false) 12 | 13 | let menu 14 | 15 | if (showMenu) { 16 | menu = ( 17 |
18 |
19 | setShowMenu(!showMenu)} /> 20 |
21 | 43 | 44 |
45 | ) 46 | } 47 | 48 | return ( 49 |
50 | 51 | 52 | [ 53 | chris 54 | @ 55 | machine 56 | ] 57 | 58 | 59 | 60 | setShowMenu(!showMenu)} 64 | /> 65 | {menu} 66 | 67 | {/*TODO: only show nav when bigger than 768px*/} 68 | 69 | {/*
*/} 70 | 83 |
84 | 85 |
86 | {/*
*/} 87 |
88 | ) 89 | } 90 | -------------------------------------------------------------------------------- /components/Layout.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import Header from './Header' 3 | import styles from '@/styles/components/Layout.module.css' 4 | 5 | export default function Layout({ title, keywords, description, children }) { 6 | return ( 7 |
8 | 9 | {title} 10 | 11 | 12 | 13 | 14 | {/* */} 15 | 16 |
17 |
{children}
18 |
19 | ) 20 | } 21 | 22 | Layout.defaultProps = { 23 | title: 'chris@machine', 24 | keywords: 25 | 'development, coding, programming, bitcoin, neovim, linux, ethereum', 26 | description: "Christian Chiarulli's website", 27 | } 28 | -------------------------------------------------------------------------------- /components/Pagination.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import styles from '@/styles/components/Pagination.module.css' 3 | 4 | export default function Pagination({ categoryName, currentPage, numPages }) { 5 | let isFirst 6 | let isLast 7 | let prevPage 8 | let nextPage 9 | 10 | if (categoryName === undefined) { 11 | isFirst = currentPage === 1 12 | isLast = currentPage === numPages 13 | prevPage = `/blog/page/${currentPage - 1}` 14 | nextPage = `/blog/page/${currentPage + 1}` 15 | } else { 16 | isFirst = currentPage === 1 17 | isLast = currentPage === numPages 18 | prevPage = `/blog/category/${categoryName}/page/${currentPage - 1}` 19 | nextPage = `/blog/category/${categoryName}/page/${currentPage + 1}` 20 | } 21 | 22 | if (numPages === 1) return <> 23 | 24 | return ( 25 |
    26 | {!isFirst && ( 27 | 28 |
  • Prev
    • 29 | 30 | )} 31 | {/* TODO: cut middle pagination and put ... in middle after unreasonable amount of numbers */} 32 | {/* {Array.from({ length: numPages }, (_, i) => ( */} 33 | {/* */} 34 | {/*
  • */} 35 | {/* {i + 1} */} 36 | {/*
    • */} 37 | {/* */} 38 | {/* ))} */} 39 | 40 | {!isLast && ( 41 | 42 |
  • Next
    • 43 | 44 | )} 45 |
46 | ) 47 | } 48 | -------------------------------------------------------------------------------- /components/Post.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import CategoryLabel from './CategoryLabel' 3 | import styles from '@/styles/components/Post.module.css' 4 | 5 | export default function Post({ dropdown, post, compact }) { 6 | let padding = '0rem' 7 | 8 | if (dropdown) { 9 | padding = '1.2rem' 10 | } 11 | 12 | return ( 13 |
14 | 15 |
19 |
20 | {post.frontmatter.date} 21 | {post.frontmatter.topic} 22 |
23 | 26 | {!compact && ( 27 |
28 |
29 |

{post.frontmatter.excerpt}

30 |
31 |
32 | 33 | Read More 34 | 35 |
36 |
37 | )} 38 |
39 | 40 |
41 | ) 42 | } 43 | -------------------------------------------------------------------------------- /components/ProjectList.js: -------------------------------------------------------------------------------- 1 | import styles from '@/styles/components/ProjectList.module.css' 2 | 3 | const PROJECTS = [ 4 | { 5 | title: "LunarVim", 6 | href: "https://www.lunarvim.org/", 7 | src: "/icons/lunarvim.png", 8 | }, 9 | { 10 | title: "Zap", 11 | href: "https://www.zapzsh.org/", 12 | src: "/icons/zap.svg", 13 | }, 14 | { 15 | title: "RaspiNode", 16 | href: "https://www.raspinode.org/", 17 | src: "/icons/raspinode.png", 18 | }, 19 | { 20 | title: "Neovim FS", 21 | href: 'https://www.youtube.com/watch?v=ctH-a-1eUME&list=PLhoH5vyxr6Qq41NFL4GvhFp-WLd5xzIzZ', 22 | src: "/icons/neovimN.png", 23 | }, 24 | { 25 | title: "Full Node Setup", 26 | href: "https://github.com/ChristianChiarulli/Bitcoin-FullNode-Setup", 27 | src: "/icons/bitcoin.png", 28 | }, 29 | // { 30 | // title: "Crypto Zombies", 31 | // href: 'https://www.youtube.com/watch?v=ZZ5C2CILYhQ&list=PLhoH5vyxr6QoyW97O28uheczR07q9-OSl', 32 | // src: "/icons/crypto-zombie.png", 33 | // }, 34 | // { 35 | // title: "FullStack ETH", 36 | // href: 'https://github.com/ChristianChiarulli/intro-fullstack-ethereum', 37 | // src: "/icons/circle-eth.png", 38 | // }, 39 | // { 40 | // title: "MachOS", 41 | // href: 'https://github.com/Mach-OS', 42 | // src: "/icons/machos.png", 43 | // }, 44 | // { 45 | // title: "Website", 46 | // href: "https://github.com/ChristianChiarulli/website", 47 | // src: "/icons/chrisatmachine.png", 48 | // } 49 | ] 50 | 51 | export default function ProjectList() { 52 | return ( 53 |
54 |

PROJECTS

55 | 74 |
75 | ) 76 | } 77 | -------------------------------------------------------------------------------- /components/Search.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, useRef } from 'react' 2 | import { FaSearch } from 'react-icons/fa' 3 | import SearchResults from './SearchResults' 4 | import styles from '@/styles/components/Search.module.css' 5 | 6 | export default function Search() { 7 | const [searchTerm, setSearchTerm] = useState('') 8 | const [searchResults, setSearchResults] = useState([]) 9 | const [isSearchResultsOpen, setIsSearchResultsOpen] = useState(false) 10 | 11 | useEffect(() => { 12 | const getResults = async () => { 13 | if (searchTerm === '') { 14 | setSearchResults([]) 15 | } else { 16 | const res = await fetch(`/api/search?q=${searchTerm}`) 17 | const { results } = await res.json() 18 | setSearchResults(results) 19 | } 20 | } 21 | 22 | getResults() 23 | }, [searchTerm]) 24 | 25 | const ref = useRef() 26 | 27 | useEffect(() => { 28 | const checkIfClickedOutside = (e) => { 29 | // If the menu is open and the clicked target is not within the menu, 30 | // then close the menu 31 | if ( 32 | isSearchResultsOpen && 33 | ref.current && 34 | !ref.current.contains(e.target) 35 | ) { 36 | setIsSearchResultsOpen(false) 37 | } 38 | } 39 | 40 | document.addEventListener('mousedown', checkIfClickedOutside) 41 | 42 | return () => { 43 | // Cleanup the event listener 44 | document.removeEventListener('mousedown', checkIfClickedOutside) 45 | } 46 | }, [isSearchResultsOpen]) 47 | 48 | return ( 49 |
50 |
51 |
52 |
53 | setIsSearchResultsOpen(true)} 56 | name='' 57 | id='' 58 | className={styles.search__form} 59 | value={searchTerm} 60 | onChange={(e) => setSearchTerm(e.target.value)} 61 | placeholder='Search Posts...' 62 | /> 63 | 64 | 65 | 66 | 67 | {isSearchResultsOpen && } 68 |
69 |
70 |
71 | ) 72 | } 73 | -------------------------------------------------------------------------------- /components/SearchResults.js: -------------------------------------------------------------------------------- 1 | import Post from './Post' 2 | import styles from '@/styles/components/SearchResults.module.css' 3 | 4 | export default function SearchResults({ results }) { 5 | if (results.length === 0) return <> 6 | 7 | return ( 8 |
9 |

{results.length} Results

10 |
11 |
12 | {results.map((result, index) => ( 13 | 14 | ))} 15 |
16 |
17 |
18 | ) 19 | } 20 | // {results.slice(0, 6).map((result, index) => ( 21 | -------------------------------------------------------------------------------- /components/SocialList.js: -------------------------------------------------------------------------------- 1 | import { 2 | FaGithub, 3 | FaYoutube, 4 | FaDiscord, 5 | FaPatreon, 6 | FaTwitter, 7 | FaHeart, 8 | FaTwitch, 9 | FaMedium, 10 | } from "react-icons/fa"; 11 | import styles from "@/styles/components/SocialList.module.css"; 12 | 13 | // TODO: maybe add rss 14 | 15 | const SOCIALS = [ 16 | { 17 | title: "Github", 18 | href: "https://github.com/ChristianChiarulli", 19 | Icon: FaGithub, 20 | clr: "#FFFFFF", 21 | }, 22 | { 23 | title: "Youtube", 24 | href: "https://www.youtube.com/@chrisatmachine", 25 | Icon: FaYoutube, 26 | clr: "#FE0000", 27 | }, 28 | { 29 | title: "Twitch", 30 | href: "https://www.twitch.tv/chrisatmachine", 31 | Icon: FaTwitch, 32 | clr: "#6441A4", 33 | }, 34 | { 35 | title: "Twitter", 36 | href: "https://twitter.com/chrisatmachine", 37 | Icon: FaTwitter, 38 | clr: "#1c9bf0", 39 | }, 40 | { 41 | title: "Discord", 42 | href: "https://discord.gg/machine-701530051140780102", 43 | Icon: FaDiscord, 44 | clr: "#7289dc", 45 | }, 46 | { 47 | title: "Patreon", 48 | href: "https://www.patreon.com/chrisatmachine", 49 | Icon: FaPatreon, 50 | clr: "#E8715C", 51 | }, 52 | { 53 | title: "Sponsor", 54 | href: "https://github.com/sponsors/ChristianChiarulli", 55 | Icon: FaHeart, 56 | clr: "#EB48AB", 57 | }, 58 | { 59 | title: "Medium", 60 | href: "https://medium.com/@chris.machine", 61 | Icon: FaMedium, 62 | clr: "#FFFFFF", 63 | }, 64 | ]; 65 | 66 | export default function SocialList({ iconsOnly = false }) { 67 | return ( 68 |
71 |

SOCIAL

72 | 91 |
92 | ); 93 | } 94 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | export const POSTS_PER_PAGE = 6 2 | 3 | export const COLOR_KEY = { 4 | JavaScript: '#d97705', 5 | bitcoin: '#d97705', 6 | linux: '#1693d2', 7 | CSS: '#3929eb', 8 | python: '#386996', 9 | ethereum: '#049669', 10 | PHP: '#7730db', 11 | Ruby: '#a70b34', 12 | git: '#F05033', 13 | dwm: '#6a6a6a', 14 | neovim: '#54A23D', 15 | java: '#EA2C31', 16 | macOS: '#67686d' 17 | } 18 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "@/components/*": ["components/*"], 6 | "@/config/*": ["config/*"], 7 | "@/utils/*": ["utils/*"], 8 | "@/lib/*": ["lib/*"], 9 | "@/styles/*": ["styles/*"] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /lib/posts.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs' 2 | import path from 'path' 3 | import matter from 'gray-matter' 4 | import { sortByDate } from '@/utils/index' 5 | 6 | const files = fs.readdirSync(path.join('posts')) 7 | 8 | export function getPosts() { 9 | const posts = files.map((filename) => { 10 | const slug = filename.replace('.md', '') 11 | 12 | const markdownWithMeta = fs.readFileSync( 13 | path.join('posts', filename), 14 | 'utf-8' 15 | ) 16 | 17 | const { data: frontmatter } = matter(markdownWithMeta) 18 | 19 | return { 20 | slug, 21 | frontmatter, 22 | } 23 | }) 24 | 25 | return posts.sort(sortByDate) 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chrisatmachine_website", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "cache-posts": "node scripts/cache.js", 10 | "prepare": "husky install" 11 | }, 12 | "dependencies": { 13 | "gray-matter": "^4.0.3", 14 | "marked": "^2.0.4", 15 | "next": "10.2.0", 16 | "react": "17.0.2", 17 | "react-dom": "17.0.2", 18 | "react-icons": "^4.2.0" 19 | }, 20 | "devDependencies": { 21 | "husky": "^6.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /pages/404.js: -------------------------------------------------------------------------------- 1 | import Image from 'next/image' 2 | import Layout from '@/components/Layout' 3 | import styles from '@/styles/404.module.css' 4 | 5 | export default function NotFoundPage() { 6 | return ( 7 | 8 |
9 | 15 |

404 Not Found

16 |

This page does not exist

17 |
18 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /pages/api/search.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs' 2 | import path from 'path' 3 | import matter from 'gray-matter' 4 | 5 | export default (req, res) => { 6 | let posts 7 | 8 | if (process.env.NODE_ENV === 'production') { 9 | // Fetch from cache 10 | posts = require('../../cache/data').posts 11 | } else { 12 | const files = fs.readdirSync(path.join('posts')) 13 | 14 | posts = files.map((filename) => { 15 | const slug = filename.replace('.md', '') 16 | 17 | const markdownWithMeta = fs.readFileSync( 18 | path.join('posts', filename), 19 | 'utf-8' 20 | ) 21 | 22 | console.log(markdownWithMeta) 23 | 24 | const { data: frontmatter } = matter(markdownWithMeta) 25 | 26 | return { 27 | slug, 28 | frontmatter, 29 | } 30 | }) 31 | } 32 | 33 | const results = posts.filter( 34 | ({ frontmatter: { title, excerpt, topic } }) => 35 | title.toLowerCase().indexOf(req.query.q) != -1 || 36 | // excerpt.toLowerCase().indexOf(req.query.q) != -1 || 37 | topic.toLowerCase().indexOf(req.query.q) != -1 38 | ) 39 | 40 | res.status(200).json(JSON.stringify({ results })) 41 | } 42 | -------------------------------------------------------------------------------- /pages/blog/category/[category]/index.js: -------------------------------------------------------------------------------- 1 | import { getStaticProps } from './page/[category_page_index]' 2 | import { getStaticPaths } from './page/[category_page_index]' 3 | import CategoryBlogPage from './page/[category_page_index]' 4 | 5 | export { getStaticProps } 6 | export { getStaticPaths } 7 | export default CategoryBlogPage 8 | -------------------------------------------------------------------------------- /pages/blog/category/[category]/page/[category_page_index].js: -------------------------------------------------------------------------------- 1 | import fs from 'fs' 2 | import path from 'path' 3 | import Layout from '@/components/Layout' 4 | import Post from '@/components/Post' 5 | import CategoryList from '@/components/CategoryList' 6 | import matter from 'gray-matter' 7 | import { getPosts } from '@/lib/posts' 8 | import { POSTS_PER_PAGE } from '@/config/index' 9 | import styles from '@/styles/blog/category/category_name.module.css' 10 | import Pagination from '@/components/Pagination' 11 | 12 | export default function CategoryBlogPage({ 13 | posts, 14 | categoryName, 15 | numPages, 16 | currentPage, 17 | categories, 18 | }) { 19 | return ( 20 | 21 |
22 |
23 |

24 | Posts in {categoryName} 25 |

26 | 27 |
28 | {posts.map((post, index) => ( 29 | 30 | ))} 31 |
32 | 33 | 38 |
39 |
40 | 41 |
42 |
43 | 44 | ) 45 | } 46 | 47 | export async function getStaticPaths() { 48 | const files = fs.readdirSync(path.join('posts')) 49 | 50 | const categories = files.map((filename) => { 51 | const markdownWithMeta = fs.readFileSync( 52 | path.join('posts', filename), 53 | 'utf-8' 54 | ) 55 | 56 | const { data: frontmatter } = matter(markdownWithMeta) 57 | 58 | return frontmatter.topic.toLowerCase() 59 | }) 60 | 61 | console.log(categories) 62 | 63 | // const paths = categories.map((category) => ({ 64 | // params: { category_name: category }, 65 | // })) 66 | 67 | const uniqueCategories = [...new Set(categories)] 68 | 69 | console.log(uniqueCategories) 70 | 71 | let paths = [] 72 | uniqueCategories.forEach((category) => { 73 | let posts_per_category = categories.filter( 74 | (per_category) => per_category === category 75 | ).length 76 | console.log(posts_per_category) 77 | const numPages = Math.ceil(posts_per_category / POSTS_PER_PAGE) 78 | for (let i = 1; i <= numPages; i++) { 79 | paths.push({ 80 | params: { category: category, category_page_index: i.toString() }, 81 | }) 82 | } 83 | }) 84 | 85 | console.log('paths', paths) 86 | 87 | return { 88 | paths, 89 | fallback: false, 90 | } 91 | } 92 | 93 | export async function getStaticProps({ params }) { 94 | const page = parseInt((params && params.category_page_index) || 1) 95 | 96 | console.log(page) 97 | 98 | const posts = getPosts() 99 | 100 | const files = fs.readdirSync(path.join('posts')) 101 | 102 | // Get categories for sidebar 103 | const categories = posts.map((post) => post.frontmatter.topic) 104 | const uniqueCategories = [...new Set(categories)] 105 | 106 | const categoryName = params.category 107 | console.log(categoryName) 108 | // Filter posts by category 109 | const categoryPosts = posts.filter( 110 | (post) => post.frontmatter.topic.toLowerCase() === params.category 111 | ) 112 | 113 | const numPages = Math.ceil(categoryPosts.length / POSTS_PER_PAGE) 114 | const pageIndex = page - 1 115 | const orderedPosts = categoryPosts.slice( 116 | pageIndex * POSTS_PER_PAGE, 117 | (pageIndex + 1) * POSTS_PER_PAGE 118 | ) 119 | 120 | return { 121 | props: { 122 | posts: orderedPosts, 123 | numPages, 124 | currentPage: page, 125 | categoryName, 126 | categories: uniqueCategories, 127 | }, 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /pages/blog/index.js: -------------------------------------------------------------------------------- 1 | import { getStaticProps } from './page/[page_index]' 2 | import BlogPage from './page/[page_index]' 3 | 4 | export { getStaticProps } 5 | export default BlogPage 6 | -------------------------------------------------------------------------------- /pages/contact.js: -------------------------------------------------------------------------------- 1 | import Layout from '@/components/Layout' 2 | 3 | export default function ContactPage() { 4 | return ( 5 | 6 |

Coming Soon!

7 | 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /pages/donate.js: -------------------------------------------------------------------------------- 1 | import Layout from '@/components/Layout' 2 | import styles from '@/styles/donate.module.css' 3 | import { FaHeart, FaPatreon } from 'react-icons/fa' 4 | import { ImPaypal } from 'react-icons/im' 5 | import { IoLogoVenmo } from 'react-icons/io5' 6 | import { SiCashapp } from 'react-icons/si' 7 | 8 | export default function DonatePage() { 9 | return ( 10 | 11 |
12 |

Donate

13 |
14 |
15 |

16 | 22 | Sponsor me on 23 | 24 | Github 25 | 26 |

27 |
28 |
29 |

30 | 35 | Send Money via 36 | 41 | Paypal 42 | 43 |

44 |
45 |
46 |

47 | 52 | Send Money via 53 | 58 | Venmo 59 | 60 |

61 |
62 |
63 |

64 | 69 | Send Money via 70 | 75 | Cash App 76 | 77 |

78 |
79 |
80 |

81 | 87 | Subscribe to my 88 | 93 | Patreon 94 | 95 |

96 |
97 |
98 | {/*
*/} 99 | {/*

*/} 100 | {/* */} 106 | {/* Bitcoin: bc1quk8yyegvgcc5m9gqwhqsc4e4wnrqwxxsck2zk4 */} 107 | {/*

*/} 108 | {/*

Monero

*/} 109 | {/*

Ethereum: c763a82f81A0C5D525b1Af74A23E996751735307

*/} 110 | {/*
*/} 111 |
112 | 113 | ) 114 | } 115 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link' 2 | import Layout from '@/components/Layout' 3 | import Post from '@/components/Post' 4 | import { getPosts } from '@/lib/posts' 5 | import CategoryList from '@/components/CategoryList' 6 | import SocialList from '@/components/SocialList' 7 | import ProjectList from '@/components/ProjectList' 8 | import styles from '@/styles/home.module.css' 9 | import Search from '@/components/Search' 10 | 11 | export default function HomePage({ posts }) { 12 | return ( 13 | 14 |
15 |
16 | {/*
*/} 17 | {/* LunarVim */} 22 | {/*

*/} 23 | {/* I'm Chris, this is where I keep all of my thoughts and links to */} 24 | {/* everything I do on the internet. */} 25 | {/*

*/} 26 | {/*
*/} 27 |
28 | 29 |
30 |
31 |

RECENTLY PUBLISHED

32 |
33 | {posts.map((post, index) => ( 34 | 35 | ))} 36 |
37 | 38 | All Posts 39 | 40 |
41 |
42 |
43 | 47 | 48 | 49 |
50 |
51 |
52 | 53 |
54 | 55 | ) 56 | } 57 | 58 | export async function getStaticProps() { 59 | return { 60 | props: { 61 | posts: getPosts().slice(0, 3), 62 | }, 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /post.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | rm -rf posts/* 4 | rsync -a --exclude 'Notes' blog/ tmp/ 5 | cp -r tmp/**/*.md posts/ 6 | rm -rf tmp/ 7 | 8 | # rm public/images/* 9 | cp blog/images/* public/images/ 10 | 11 | npm run cache-posts 12 | 13 | git add . 14 | git commit -m "blog post" 15 | git push 16 | -------------------------------------------------------------------------------- /posts/01-Install-Miniconda.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: How to install Miniconda 3 | date: "2019-06-25" 4 | topic: "python" 5 | cover: "/images/miniconda.jpg" 6 | excerpt: "This guide will show you how to install the latest version of Miniconda. Miniconda is a lightweight version of Anaconda: a virtual environment manager for Python" 7 | --- 8 | 9 | This guide will show you how to install the latest version of Miniconda. Miniconda is a lightweight version of Anaconda: a virtual environment manager for Python. 10 | 11 | ## Download Install Script 12 | 13 | ### Linux 14 | 15 | ``` 16 | wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh -O ~/miniconda.sh 17 | ``` 18 | 19 | ### Mac 20 | 21 | ``` 22 | wget https://repo.anaconda.com/miniconda/Miniconda3-latest-MacOSX-x86_64.sh -O ~/miniconda.sh 23 | ``` 24 | 25 | ## Install Minconda 26 | 27 | ``` 28 | sh ~/miniconda.sh -b -f -p $HOME/.miniconda 29 | 30 | rm ~/miniconda.sh 31 | ``` 32 | 33 | ## Setting up your shell 34 | 35 | If you don't want the conda base environment (you may not want this because as of now there are conflicts with later versions of Python and npm) 36 | 37 | ``` 38 | conda config --set auto_activate_base false 39 | ``` 40 | 41 | **NOTE:** If you don't have the `conda` command available then enter the following in your `.bashrc` or `.zshrc` file: 42 | 43 | ``` 44 | # >>> conda initialize >>> 45 | # !! Contents within this block are managed by 'conda init' !! 46 | __conda_setup="$("$HOME/.miniconda/bin/conda" 'shell.zsh' 'hook' 2> /dev/null)" 47 | if [ $? -eq 0 ]; then 48 | eval "$__conda_setup" 49 | else 50 | if [ -f "$HOME/.miniconda/etc/profile.d/conda.sh" ]; then 51 | . "$HOME/.miniconda/etc/profile.d/conda.sh" 52 | else 53 | export PATH="$HOME/.miniconda/bin:$PATH" 54 | fi 55 | fi 56 | unset __conda_setup 57 | # <<< conda initialize <<< 58 | ``` 59 | 60 | The first time you run it, it'll create a ./condarc in your home directory with that setting to override the default. 61 | 62 | Now you can initialize your shell with the following command: 63 | 64 | ``` 65 | conda init 66 | ``` 67 | 68 | Currently available shells are: 69 | - bash 70 | - fish 71 | - powershell 72 | - tcsh 73 | - xonsh 74 | - zsh 75 | 76 | 77 | Now close your terminal and open a new one and your conda environment should be fully configured. 78 | -------------------------------------------------------------------------------- /posts/01-Merging-Upstream-Repo-Fork.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Merging an Upstream Repo into your Fork 3 | date: "2019-08-01" 4 | topic: "git" 5 | cover: "/images/git.png" 6 | excerpt: "If you don't have push (write) access to an upstream repository, then you can pull commits from that repository into your own fork." 7 | --- 8 | 9 | This article is from Github's help page [here](https://help.github.com/en/articles/merging-an-upstream-repository-into-your-fork) I am adding it here to quickly reference it when I inevitably forget how to do it. 10 | 11 | If you don't have push (write) access to an upstream repository, then you can pull commits from that repository into your own fork. 12 | 13 | 1. Open Terminal. 14 | 15 | 2. Change the current working directory to your local project. 16 | 17 | 3. Check out the branch you wish to merge to. Usually, you will merge into `master`. 18 | 19 | ``` 20 | git checkout master 21 | ``` 22 | 23 | 4. Pull the desired branch from the upstream repository. This method will retain the commit history without modification. 24 | 25 | ``` 26 | git pull https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git BRANCH_NAME 27 | ``` 28 | 29 | 5. If there are conflicts, resolve them. 30 | 31 | 6. Commit the merge. 32 | 33 | 7. Review the changes and ensure they are satisfactory. 34 | 35 | 8. Push the merge to your GitHub repository. 36 | 37 | ``` 38 | git push origin master 39 | ``` 40 | 41 | -------------------------------------------------------------------------------- /posts/01-dwm.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Installing DWM 3 | date: "2019-08-01" 4 | topic: "dwm" 5 | cover: "/images/dwm.png" 6 | excerpt: "DWM is lightweight window manager written in C." 7 | --- 8 | 9 | Make sure you have a user already 10 | 11 | ## Install Xorg 12 | 13 | ``` 14 | pacman -S xorg-server xorg-xinit xorg-xrandr xorg-xsetroot 15 | ``` 16 | 17 | ## Install git 18 | 19 | ``` 20 | pacman -S git 21 | ``` 22 | 23 | ## Install a browser 24 | 25 | ``` 26 | pacman -S firefox 27 | ``` 28 | 29 | ## Create a config directory 30 | 31 | ``` 32 | mkdir ~/.config 33 | ``` 34 | 35 | ## Install DWM 36 | 37 | ``` 38 | git clone git://git.suckless.org/dwm ~/.config/dwm 39 | git clone git://git.suckless.org/st ~/.config/st 40 | git clone git://git.suckless.org/dmenu ~/.config/dmenu 41 | ``` 42 | 43 | ``` 44 | cd ~/.config/dwm && sudo make install 45 | cd ~/.config/st && sudo make install 46 | cd ~/.config/dmenu && sudo make install 47 | ``` 48 | 49 | ## Installing a Display Manager (DM) 50 | 51 | ``` 52 | pacman -S lightdm 53 | 54 | pacman -S lightdm-gtk-greeter 55 | 56 | pacman -S lightdm-gtk-greeter-settings 57 | ``` 58 | 59 | ## Enable lightdm service 60 | 61 | ``` 62 | sudo systemctl enable lightdm 63 | ``` 64 | 65 | ## Adding an entry for DWM in the DM 66 | 67 | Open this file: 68 | 69 | ``` 70 | mkdir /usr/share/xsessions 71 | 72 | vim /usr/share/xsessions/dwm.desktop 73 | ``` 74 | 75 | Add the following: 76 | 77 | ``` 78 | [Desktop Entry] 79 | Encoding=UTF-8 80 | Name=Dwm 81 | Comment=the dynamic window manager 82 | Exec=dwm 83 | Icon=dwm 84 | Type=XSession 85 | ``` 86 | 87 | ## Basic Commands 88 | 89 | - Moving between windows: `[Alt]+[j] or [Alt]+[k]` 90 | 91 | - To move a terminal to another tag: `[Shift]+[Alt]+[]` 92 | 93 | - To focus on another tag: `[Alt]+[tag number]` 94 | 95 | - To change the amount of windows in the master area: `[Alt]+[d] (Decrease) or [Alt]+[i] (Increase)` 96 | 97 | - To toggle a window between the master and stack area: `[Alt]+[Return]` 98 | 99 | - To kill a window: `[Shift]+[Alt]+[c]` 100 | 101 | - Click another tag with the right mouse button to bring those windows into your current focus. 102 | 103 | ## Layouts 104 | 105 | ( **Note** ) By default dwm is in tiled layout mode. 106 | 107 | - Tiled: `[Alt]+[t]` 108 | 109 | - Floating: `[Alt]+[f]` 110 | 111 | - Monocle: `[Alt]+[m]` 112 | 113 | Further layout modes can be included through patches. 114 | 115 | ## Floating 116 | 117 | To resize the floating window: `[Alt]+[right mouse button]` 118 | 119 | To move it around `[Alt]+[left mouse button]` 120 | 121 | **Floating in Tiled Layout** 122 | 123 | - Toggle floating mode on the active window: `[Alt]+[Shift]+[space]` 124 | 125 | - Resize the window: `[Alt]+[right mouse button]` 126 | 127 | - toggle it in being floating `[Alt]+[middle mouse button]` 128 | 129 | If you want to set some type of window to be always floating, look at the config.def.h and the rules array, where the last but one element defines this behaviour. 130 | 131 | ## Quitting 132 | 133 | To quit dwm cleanly: `[Shift]+[Alt]+[q]` 134 | 135 | ## Status 136 | 137 | By default dwm is showing dwm-X.X in its statusbar. This text can be changed by setting the WM_NAME property of the root window. 138 | 139 | Using the tools of X.org, this can be set using: 140 | 141 | ``` 142 | xsetroot -name "Some Text" 143 | ``` 144 | -------------------------------------------------------------------------------- /posts/01-versioning-java-with-sdkman.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Install Multiple Versions of Java with SDKMAN 3 | date: "2021-03-12" 4 | topic: "java" 5 | cover: "/images/sdkman.png" 6 | excerpt: "SDKMAN! is a tool for managing parallel versions of multiple Software Development Kits." 7 | --- 8 | 9 | ## What is SDKMAN? 10 | 11 | SDKMAN! is a tool for managing parallel versions of multiple Software Development Kits. This is very useful for managing Java versions as well as Gradle, Maven etc.. 12 | 13 | ## Installation 14 | 15 | Open up a terminal and enter: 16 | 17 | ``` 18 | curl -s "https://get.sdkman.io" | bash 19 | ``` 20 | 21 | This will add the following to your `.bashrc` or `.zshrc`: 22 | 23 | ``` 24 | #THIS MUST BE AT THE END OF THE FILE FOR SDKMAN TO WORK!!! 25 | export SDKMAN_DIR="/home/chris/.sdkman" 26 | [[ -s "/home/chris/.sdkman/bin/sdkman-init.sh" ]] && source "/home/chris/.sdkman/bin/sdkman-init.sh" 27 | ``` 28 | 29 | Now you can open a new terminal and run the following to confirm installation: 30 | 31 | ``` 32 | sdk version 33 | ``` 34 | 35 | ## Install to a custom location 36 | 37 | You can install to a custom location with the following command: 38 | 39 | ``` 40 | export SDKMAN_DIR="/usr/local/sdkman" && curl -s "https://get.sdkman.io" | bash 41 | ``` 42 | 43 | ## Using SDKMAN 44 | 45 | SDKMAN will allow you to install a lot of different programs. 46 | 47 | ### List all options to install 48 | 49 | ``` 50 | sdk ls 51 | ``` 52 | 53 | ## Installing Java 54 | 55 | Install default version: 56 | 57 | ``` 58 | sdk install java 59 | ``` 60 | 61 | Find a specific version: 62 | 63 | ``` 64 | sdk ls java 65 | ``` 66 | 67 | Install a specific version based on identifier from list: 68 | 69 | ``` 70 | sdk install java 11.0.12-open 71 | ``` 72 | 73 | Using a specific version: 74 | 75 | ``` 76 | sdk use java 11.0.12-open 77 | ``` 78 | 79 | Default a specific version: 80 | 81 | ``` 82 | sdk default java 11.0.12-open 83 | ``` 84 | 85 | To update sdkman: 86 | 87 | ``` 88 | sdk update 89 | ``` 90 | 91 | **NOTE** All of the above commands will work for the other programs available such as: 92 | 93 | - gradle 94 | - maven 95 | - groovy 96 | - kotlin 97 | - spark 98 | - springboot 99 | 100 | ## Getting help 101 | 102 | ``` 103 | sdk help 104 | ``` 105 | 106 | ## Optional Configuration 107 | 108 | In `~/.sdkman/etc/config` 109 | 110 | ``` 111 | sdkman_auto_answer=false 112 | sdkman_auto_complete=true 113 | sdkman_auto_env=false 114 | sdkman_auto_update=true 115 | sdkman_beta_channel=false 116 | sdkman_checksum_enable=true 117 | sdkman_colour_enable=true 118 | sdkman_curl_connect_timeout=7 119 | sdkman_curl_max_time=10 120 | sdkman_debug_mode=false 121 | sdkman_insecure_ssl=false 122 | sdkman_rosetta2_compatible=false 123 | sdkman_selfupdate_feature=true 124 | ``` 125 | 126 | ## References 127 | 128 | [SDKMAN!](https://sdkman.io/) 129 | -------------------------------------------------------------------------------- /posts/01-vim-plug.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugins with Vim-Plug 3 | date: "2020-04-23" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Installing Neovim 10 | 11 | - On Mac 12 | 13 | ``` 14 | brew install neovim 15 | ``` 16 | 17 | - Ubuntu 18 | 19 | ``` 20 | sudo apt install neovim 21 | ``` 22 | 23 | - Arch 24 | 25 | ``` 26 | sudo pacman -S neovim 27 | ``` 28 | 29 | ## Create config 30 | 31 | Make directory for your Neovim config 32 | 33 | ``` 34 | mkdir ~/.config/nvim 35 | ``` 36 | 37 | Create an `init.vim` file 38 | 39 | ``` 40 | touch ~/.config/nvim/init.vim 41 | ``` 42 | 43 | ## Install vim-plug 44 | 45 | ``` 46 | curl -fLo ~/.config/nvim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim 47 | ``` 48 | 49 | You should now have `plug.vim` in your autoload directory so it will load of on start 50 | 51 | ## Add a new file for plugins 52 | 53 | We will manage our plugins in a separate file for the sake of my own sanity 54 | 55 | ``` 56 | mkdir ~/.config/nvim/vim-plug 57 | 58 | touch ~/.config/nvim/vim-plug/plugins.vim 59 | ``` 60 | 61 | ## Let's add some plugins 62 | 63 | Add the following to `~/.config/nvim/vim-plug/plugins.vim` 64 | 65 | ``` 66 | " auto-install vim-plug 67 | if empty(glob('~/.config/nvim/autoload/plug.vim')) 68 | silent !curl -fLo ~/.config/nvim/autoload/plug.vim --create-dirs 69 | \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim 70 | "autocmd VimEnter * PlugInstall 71 | "autocmd VimEnter * PlugInstall | source $MYVIMRC 72 | endif 73 | 74 | call plug#begin('~/.config/nvim/autoload/plugged') 75 | 76 | " Better Syntax Support 77 | Plug 'sheerun/vim-polyglot' 78 | " File Explorer 79 | Plug 'scrooloose/NERDTree' 80 | " Auto pairs for '(' '[' '{' 81 | Plug 'jiangmiao/auto-pairs' 82 | 83 | call plug#end() 84 | 85 | ``` 86 | 87 | ## Source your plugins 88 | 89 | Add the following line to `init.vim` 90 | 91 | ``` 92 | source $HOME/.config/nvim/vim-plug/plugins.vim 93 | ``` 94 | 95 | ## Vim-plug commands 96 | 97 | Open `nvim` 98 | 99 | ``` 100 | nvim 101 | ``` 102 | 103 | Check the status of your plugins 104 | 105 | ``` 106 | :PlugStatus 107 | ``` 108 | 109 | Install all of your plugins 110 | 111 | ``` 112 | :PlugInstall 113 | ``` 114 | 115 | To update your plugins 116 | 117 | ``` 118 | :PlugUpdate 119 | ``` 120 | 121 | After the update you can press `d` to see the differences or run 122 | 123 | ``` 124 | :PlugDiff 125 | ``` 126 | 127 | To remove plugins that are no longer defined in the `plugins.vim` file 128 | 129 | ``` 130 | :PlugClean 131 | ``` 132 | 133 | Finally if you want to upgrade vim-plug itself run the following 134 | 135 | ``` 136 | :PlugUpgrade 137 | ``` 138 | 139 | ## Where did I learn all this? 140 | 141 | [Check out vim-plug on github](https://github.com/junegunn/vim-plug) 142 | -------------------------------------------------------------------------------- /posts/02-How-to use-miniconda.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Managing Environments with Miniconda 3 | date: "2019-06-25" 4 | topic: "python" 5 | cover: "/images/miniconda.jpg" 6 | excerpt: "The previous article explains how to properly install and configure Miniconda. This article will explain how to manage your environments" 7 | --- 8 | 9 | The previous article explains how to properly install and configure Miniconda. This article will explain how to manage your environments. 10 | 11 | ## Creating a Virtual Environment 12 | 13 | ``` 14 | conda create -n python=<3.7> pip -y 15 | ``` 16 | 17 | This command will create a virtual environment with the following properties: 18 | 19 | - -n myenv You can choose any name you want here 20 | - python=3.7 you can set the version to be whatever you want such as 2.7 (if you don't specify a version it will choose the latest) 21 | - -y this just preemptively answers yes to creating the environment 22 | 23 | ## Activating a Virtual Environment 24 | 25 | ``` 26 | conda activate 27 | ``` 28 | 29 | ## Deactivating a Virtual Environment 30 | 31 | ``` 32 | conda deactivate 33 | ``` 34 | 35 | ## Listing Available Environments 36 | 37 | ``` 38 | conda env list 39 | ``` 40 | 41 | ## Removing an Environment 42 | 43 | ``` 44 | conda remove --name --all 45 | ``` 46 | 47 | ## Cloning an Environment 48 | 49 | ``` 50 | conda create --name --clone 51 | ``` 52 | 53 | ## Removing PS1 Prompt 54 | 55 | ``` 56 | conda config --set changeps1 false 57 | ``` 58 | 59 | To re-enable: 60 | 61 | ``` 62 | conda config --set changeps1 true 63 | ``` 64 | 65 | ## Searching for packages 66 | 67 | ``` 68 | conda search 69 | ``` 70 | 71 | ## Sharing an environment 72 | 73 | - First export the environment 74 | 75 | ``` 76 | conda env export > environment.yml 77 | ``` 78 | 79 | - Now install in another Anaconda Environment Manager 80 | 81 | ``` 82 | conda env create -f environment.yml 83 | ``` 84 | 85 | ## Installing Packages & Pinning Versions 86 | 87 | - With conda (=) 88 | 89 | ``` 90 | conda install = 91 | ``` 92 | 93 | - With pip (==) 94 | 95 | ``` 96 | pip install == 97 | ``` 98 | -------------------------------------------------------------------------------- /posts/02-change-remote-git-repo.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Changing remote Git repo 3 | date: "2020-07-18" 4 | cover: "/images/git.png" 5 | topic: "git" 6 | excerpt: "How to change the remote github url of your repository." 7 | --- 8 | 9 | ## List current remote 10 | 11 | ``` 12 | git remote -v 13 | ``` 14 | 15 | ## Change remote Git repo 16 | 17 | ``` 18 | git remote set-url origin git@:/ 19 | ``` 20 | 21 | (**NOTE**) 22 | 23 | Replace everything inside `<>` with your data and remove the `<>` characters 24 | -------------------------------------------------------------------------------- /posts/03-vim-themes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Neovim Themes 3 | date: "2020-04-25" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Plugin your theme 10 | 11 | First open vim plug and add your theme, you can add as many themes as you want here to switch between them at any time 12 | 13 | I'm going to be installing the onedark theme I'll link to a repo with a bunch of others at the bottom of the blog 14 | 15 | Open `vim-plug/plugins.vim` and add the following: 16 | 17 | ``` 18 | Plug 'joshdick/onedark.vim' 19 | ``` 20 | 21 | Make sure to run `:PlugInstall` 22 | 23 | ## Theme config 24 | 25 | First create a directory for themes and then add the name of the theme you want to install 26 | 27 | ``` 28 | mkdir ~/.config/nvim/themes 29 | 30 | touch ~/.config/nvim/themes/onedark.vim 31 | ``` 32 | 33 | Now let's set the colorscheme, open `onedark.vim` and add the following: 34 | 35 | ``` 36 | " onedark.vim override: Don't set a background color when running in a terminal; 37 | if (has("autocmd") && !has("gui_running")) 38 | augroup colorset 39 | autocmd! 40 | let s:white = { "gui": "#ABB2BF", "cterm": "145", "cterm16" : "7" } 41 | autocmd ColorScheme * call onedark#set_highlight("Normal", { "fg": s:white }) " `bg` will not be styled since there is no `bg` setting 42 | augroup END 43 | endif 44 | 45 | hi Comment cterm=italic 46 | let g:onedark_hide_endofbuffer=1 47 | let g:onedark_terminal_italics=1 48 | let g:onedark_termcolors=256 49 | 50 | syntax on 51 | colorscheme onedark 52 | 53 | 54 | " checks if your terminal has 24-bit color support 55 | if (has("termguicolors")) 56 | set termguicolors 57 | hi LineNr ctermbg=NONE guibg=NONE 58 | endif 59 | ``` 60 | 61 | ### Note 62 | 63 | This config is specific to this theme, checkout the readme for whatever theme you install 64 | 65 | Now we can add our theme to `init.vim` 66 | 67 | ``` 68 | source $HOME/.config/nvim/themes/onedark.vim 69 | ``` 70 | 71 | ## Where to find more themes 72 | 73 | [Check out this repo](https://github.com/rafi/awesome-vim-colorschemes) 74 | 75 | Click on any theme in the readme and install it similar to the way I did above 76 | -------------------------------------------------------------------------------- /posts/04-vim-coc.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Neovim Intellisense with coc 3 | date: "2020-04-26" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Conquerer of Completion 10 | 11 | This plugin is too featureful (bloated) to explain in a single blog post 12 | 13 | Good thing the author provided extensive documentation [here](https://github.com/neoclide/coc.nvim/wiki) 14 | 15 | ## Install with vim-plug 16 | 17 | ``` 18 | " Stable version of coc 19 | Plug 'neoclide/coc.nvim', {'branch': 'release'} 20 | 21 | " Keeping up to date with master 22 | Plug 'neoclide/coc.nvim', {'do': 'yarn install --frozen-lockfile'} 23 | ``` 24 | 25 | make sure you have `yarn` installed if you choose the second way 26 | 27 | ``` 28 | npm i -g yarn 29 | ``` 30 | 31 | Create a directory called `plug-config` and an entry for `coc` 32 | 33 | ``` 34 | mkdir ~/.config/nvim/plug-config 35 | 36 | touch ~/.config/nvim/plug-config/coc.vim 37 | ``` 38 | 39 | ## Create basic config file 40 | 41 | Head over to the [readme](https://github.com/neoclide/coc.nvim) and grab his example config 42 | 43 | Add the following to your `init.vim` 44 | 45 | ``` 46 | source $HOME/.config/nvim/plug-config/coc.vim 47 | ``` 48 | 49 | ## Checking coc health 50 | 51 | You can run `:checkhealth` and there should now be an entry for `coc` 52 | 53 | You can use `g:coc_node_path` to point to your node executable 54 | 55 | You can also run `:CocInfo` to get some useful info 56 | 57 | ## Install extensions 58 | 59 | You can install extensions for languages like this: 60 | 61 | ``` 62 | :CocInstall coc-json coc-python coc-snippets coc-vimlsp 63 | ``` 64 | 65 | There are many more extensions to choose from here: 66 | 67 | [coc-extensions](https://github.com/neoclide/coc.nvim/wiki/Using-coc-extensions) 68 | 69 | You can list all of the extension commands with: 70 | 71 | ``` 72 | :CocList commands 73 | ``` 74 | 75 | You can uninstall an extension with: 76 | 77 | ``` 78 | :CocUninstall coc-html 79 | ``` 80 | 81 | You can manage your extensions with: 82 | 83 | ``` 84 | :CocList extensions 85 | ``` 86 | 87 | Hit to see a list of options for each extension 88 | 89 | ## Configuration 90 | 91 | Run `:CocConfig` this will open the file `~/.config/nvim/coc-settings.json` 92 | 93 | here you can add [language servers](https://github.com/neoclide/coc.nvim/wiki/Language-servers) 94 | 95 | and other configuration like autoformat and adding a location for snippets (I'll go over snippets later) 96 | 97 | ``` 98 | { 99 | "coc.preferences.formatOnSaveFiletypes": ["css", "markdown", "javascript", "graphql", "html", "yaml", "json", "python"], 100 | 101 | // python config 102 | "python.linting.enabled": true, 103 | "python.linting.pylintEnabled": true, 104 | 105 | "snippets.ultisnips.directories": 106 | [ 107 | "UltiSnips", 108 | "~/.config/nvim/utils/snips" 109 | ] 110 | 111 | } 112 | ``` 113 | 114 | for more info on configuring your settings checkout [this page](https://github.com/neoclide/coc.nvim/wiki/Using-the-configuration-file) 115 | 116 | ## Optional install watchman 117 | 118 | For watchman supprt install watchman 119 | 120 | - Mac 121 | 122 | ``` 123 | brew install watchman 124 | ``` 125 | 126 | - Ubuntu 127 | 128 | ``` 129 | sudo apt install watchman 130 | ``` 131 | 132 | - Arch 133 | 134 | ``` 135 | yay -S watchman 136 | ``` 137 | 138 | ### Note 139 | 140 | watchman can be a memory hog, to stop all watchman processes and free up some memory run 141 | 142 | ``` 143 | watchman watch-del-all 144 | ``` 145 | 146 | ## Automatically reinstall the extensions you use 147 | 148 | If you use `neovim` and already have `node` installed, you can use the following script to reinstall your favorite extensions 149 | 150 | ``` 151 | #!/usr/bin/bash 152 | 153 | set -o nounset # error when referencing undefined variable 154 | set -o errexit # exit when command fails 155 | 156 | # Install extensions 157 | mkdir -p ~/.config/coc/extensions 158 | cd ~/.config/coc/extensions 159 | if [ ! -f package.json ] 160 | then 161 | echo '{"dependencies":{}}'> package.json 162 | fi 163 | # Change extension names to the extensions you need 164 | npm install coc-snippets coc-python coc-tsserver coc-html coc-css coc-json coc-yaml --global-style --ignore-scripts --no-bin-links --no-package-lock --only=prod 165 | ``` 166 | -------------------------------------------------------------------------------- /posts/05-vim-airline.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Airline 3 | date: "2020-04-27" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Plugin Airline and Airline themes 10 | 11 | Add the following to `~/.config/nvim/vim-plug/plugins.vim` 12 | 13 | ``` 14 | Plug 'vim-airline/vim-airline' 15 | Plug 'vim-airline/vim-airline-themes' 16 | ``` 17 | 18 | ## Create config 19 | 20 | Create theme file for airline 21 | 22 | ``` 23 | touch ~/.config/nvim/themes/airline.vim 24 | ``` 25 | 26 | Add the following configuration 27 | 28 | ``` 29 | " enable tabline 30 | let g:airline#extensions#tabline#enabled = 1 31 | let g:airline#extensions#tabline#left_sep = '' 32 | let g:airline#extensions#tabline#left_alt_sep = '' 33 | let g:airline#extensions#tabline#right_sep = '' 34 | let g:airline#extensions#tabline#right_alt_sep = '' 35 | 36 | " enable powerline fonts 37 | let g:airline_powerline_fonts = 1 38 | let g:airline_left_sep = '' 39 | let g:airline_right_sep = '' 40 | 41 | " Switch to your current theme 42 | let g:airline_theme = 'onedark' 43 | 44 | " Always show tabs 45 | set showtabline=2 46 | 47 | " We don't need to see things like -- INSERT -- anymore 48 | set noshowmode 49 | ``` 50 | 51 | Don't forget to source this file 52 | 53 | ``` 54 | source $HOME/.config/nvim/themes/airline.vim 55 | ``` 56 | 57 | ## Install fonts 58 | 59 | You may want to install these fonts if you want the little arrows and stuff 60 | 61 | ``` 62 | # clone 63 | git clone https://github.com/powerline/fonts.git --depth=1 64 | # install 65 | cd fonts 66 | ./install.sh 67 | # clean-up a bit 68 | cd .. 69 | rm -rf fonts 70 | ``` 71 | 72 | ## Further documentation and repo 73 | 74 | [vim airline](https://github.com/vim-airline/vim-airline) 75 | [vim airline themes](https://github.com/vim-airline/vim-airline-themes) 76 | -------------------------------------------------------------------------------- /posts/06-file-explorer.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Exploring coc-explorer 3 | date: "2020-04-28" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install coc-explorer 10 | 11 | This install will be a little different and if you've been following along you probably know we are using coc 12 | 13 | coc-explorer is just and extension to that 14 | 15 | ``` 16 | :CocInstall coc-explorer 17 | ``` 18 | 19 | ## Config 20 | 21 | We can add some simple settings in the `coc-settings.json` file 22 | 23 | ``` 24 | // explorer 25 | "explorer.width": 30, 26 | "explorer.icon.enableNerdfont": true, 27 | "explorer.previewAction.onHover": false, 28 | "explorer.keyMappings.global": { 29 | "": ["expandable?", "expand", "open"], 30 | "v": "open:vsplit" 31 | } 32 | ``` 33 | 34 | We'll also add some settings in `~/.config/nvim/plug-config/coc.vim` 35 | 36 | Append these lines to the end 37 | 38 | ``` 39 | " Explorer 40 | let g:coc_explorer_global_presets = { 41 | \ '.vim': { 42 | \ 'root-uri': '~/.vim', 43 | \ }, 44 | \ 'tab': { 45 | \ 'position': 'tab', 46 | \ 'quit-on-open': v:true, 47 | \ }, 48 | \ 'floating': { 49 | \ 'position': 'floating', 50 | \ 'open-action-strategy': 'sourceWindow', 51 | \ }, 52 | \ 'floatingTop': { 53 | \ 'position': 'floating', 54 | \ 'floating-position': 'center-top', 55 | \ 'open-action-strategy': 'sourceWindow', 56 | \ }, 57 | \ 'floatingLeftside': { 58 | \ 'position': 'floating', 59 | \ 'floating-position': 'left-center', 60 | \ 'floating-width': 50, 61 | \ 'open-action-strategy': 'sourceWindow', 62 | \ }, 63 | \ 'floatingRightside': { 64 | \ 'position': 'floating', 65 | \ 'floating-position': 'right-center', 66 | \ 'floating-width': 50, 67 | \ 'open-action-strategy': 'sourceWindow', 68 | \ }, 69 | \ 'simplify': { 70 | \ 'file-child-template': '[selection | clip | 1] [indent][icon | 1] [filename omitCenter 1]' 71 | \ } 72 | \ } 73 | 74 | nmap e :CocCommand explorer 75 | nmap f :CocCommand explorer --preset floating 76 | autocmd BufEnter * if (winnr("$") == 1 && &filetype == 'coc-explorer') | q | endif 77 | ``` 78 | -------------------------------------------------------------------------------- /posts/07-ranger.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Integrate Neovim with Ranger 3 | date: "2020-04-29" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install Ranger 10 | 11 | - Mac 12 | 13 | ``` 14 | brew install ranger 15 | ``` 16 | 17 | - Ubuntu 18 | 19 | ``` 20 | sudo apt install ranger 21 | ``` 22 | 23 | - Arch 24 | 25 | ``` 26 | sudo pacman -S ranger 27 | ``` 28 | 29 | ## Install Ranger devicons 30 | 31 | ``` 32 | git clone https://github.com/alexanderjeurissen/ranger_devicons ~/.config/ranger/plugins/ranger_devicons 33 | ``` 34 | 35 | You can now add `default_linemode devicons` to your `rc.conf` 36 | 37 | ## Install Ueberzug (Linux only) 38 | 39 | Unfortunately Ueberzug only supports linux at the moment as far as I know 40 | 41 | - Ubuntu (Note you may experience your images being badly placed this is because pip doesn't have the newest version of ueberzug, if you find this issue please install from source) 42 | 43 | ``` 44 | pip install ueberzug 45 | ``` 46 | 47 | - Arch 48 | 49 | ``` 50 | yay -S python-ueberzug-git 51 | ``` 52 | 53 | ## Ranger config file 54 | 55 | make sure you create a ranger config file and at least add the following lines 56 | 57 | Add the following file: 58 | 59 | ``` 60 | mkdir ~/.config/ranger 61 | 62 | touch ~/.config/ranger/rc.conf 63 | ``` 64 | 65 | Add this configuration to `rc.conf` 66 | 67 | ``` 68 | set preview_images_method ueberzug 69 | 70 | default_linemode devicons 71 | 72 | set show_hidden true 73 | ``` 74 | 75 | ## Add the Ranger plugin 76 | 77 | ``` 78 | Plug 'kevinhwang91/rnvimr', {'do': 'make sync'} 79 | ``` 80 | 81 | Add some config to `~/.config/nvim/plug-config/rnvimr.vim` 82 | 83 | ``` 84 | touch ~/.config/nvim/plug-config/rnvimr.vim 85 | ``` 86 | 87 | Add the following: 88 | 89 | ``` 90 | " Make Ranger replace netrw and be the file explorer 91 | let g:rnvimr_ex_enable = 1 92 | 93 | nmap r :RnvimrToggle 94 | ``` 95 | 96 | Make sure to source the config 97 | 98 | ``` 99 | source $HOME/.config/nvim/plug-config/rnvimr.vim 100 | ``` 101 | 102 | ## Sync your ranger config 103 | 104 | You may need to run this 105 | 106 | ``` 107 | :RnvimrSync 108 | ``` 109 | 110 | ## Alternative Ranger plugin 111 | 112 | [Alternative](https://github.com/francoiscabrol/ranger.vim) 113 | -------------------------------------------------------------------------------- /posts/09-vim-commentary.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vim-commentary 3 | date: "2020-04-30" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install commentary 10 | 11 | ``` 12 | Plug 'tpope/vim-commentary' 13 | ``` 14 | 15 | ## Configuration 16 | 17 | This is my preferred way to use this tool 18 | 19 | ``` 20 | nnoremap / :Commentary 21 | vnoremap / :Commentary 22 | ``` 23 | 24 | Just press / and it will comment out the line 25 | 26 | In visual mode select the text you want to comment out and press / 27 | 28 | ## Link to repo 29 | 30 | [commentary](https://github.com/tpope/vim-commentary) 31 | -------------------------------------------------------------------------------- /posts/10-adding-color.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adding color with colorizer & rainbow 3 | date: "2020-04-30" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install colorizer 10 | 11 | ``` 12 | Plug 'norcalli/nvim-colorizer.lua' 13 | ``` 14 | 15 | ## Configuration 16 | 17 | Create a place for lua plugins 18 | 19 | ``` 20 | mkdir ~/.config/nvim/lua 21 | 22 | touch ~/.config/nvim/lua/plug-colorizer.lua 23 | ``` 24 | 25 | Add the following: 26 | 27 | ``` 28 | require'colorizer'.setup( 29 | {'*';}, 30 | { 31 | RGB = true; -- #RGB hex codes 32 | RRGGBB = true; -- #RRGGBB hex codes 33 | names = true; -- "Name" codes like Blue 34 | RRGGBBAA = true; -- #RRGGBBAA hex codes 35 | rgb_fn = true; -- CSS rgb() and rgba() functions 36 | hsl_fn = true; -- CSS hsl() and hsla() functions 37 | css = true; -- Enable all CSS features: rgb_fn, hsl_fn, names, RGB, RRGGBB 38 | css_fn = true; -- Enable all CSS *functions*: rgb_fn, hsl_fn 39 | }) 40 | 41 | ``` 42 | 43 | Remember to source in `init.vim`, but a little differently this time 44 | 45 | ``` 46 | lua require'plug-colorizer' 47 | ``` 48 | 49 | ### Note 50 | 51 | This will not work if the file doesn't have and extension i.e. .txt .py. js .css 52 | 53 | If you want to enable it you can do so like this: 54 | 55 | ``` 56 | :ColorizerAttachToBuffer 57 | ``` 58 | 59 | ## Cool Note 60 | 61 | You can increment and decrement in vim with `c-a` and `c-x` 62 | 63 | just hover over a number in normal mode 64 | 65 | `r` also work great 66 | 67 | ## Lua Note 68 | 69 | Install `luarocks` if you want to use with `coc-lua` 70 | 71 | ## Examples 72 | 73 | Enter the following to see what happens 74 | 75 | ``` 76 | #8F6fEa 77 | rgb(113, 146, 230) 78 | rgb(7%, 77%, 46%) 79 | ``` 80 | 81 | ## Checkout the repo 82 | 83 | [colorizer](https://github.com/norcalli/nvim-colorizer.lua) 84 | 85 | ## Install Rainbow 86 | 87 | ``` 88 | Plug 'junegunn/rainbow_parentheses.vim' 89 | ``` 90 | 91 | ## Configuration 92 | 93 | ``` 94 | let g:rainbow#max_level = 16 95 | let g:rainbow#pairs = [['(', ')'], ['[', ']'], ['{', '}']] 96 | 97 | autocmd FileType * RainbowParentheses 98 | ``` 99 | -------------------------------------------------------------------------------- /posts/11-startify.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Project Management with Startify 3 | date: "2020-05-01" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Plug in Startify 10 | 11 | ``` 12 | Plug 'mhinz/vim-startify' 13 | ``` 14 | 15 | ## Create a config file 16 | 17 | ``` 18 | touch ~/.config/nvim/plug-config/start-screen.vim 19 | ``` 20 | 21 | ## Sessions 22 | 23 | This plugin will let us manage our sessions very easily 24 | 25 | ``` 26 | :SLoad load a session 27 | :SSave[!] save a session 28 | :SDelete[!] delete a session 29 | :SClose close a session 30 | ``` 31 | 32 | Add ! to skip the prompt 33 | 34 | We should specify where we want Startify to keep our sessions 35 | 36 | ``` 37 | let g:startify_session_dir = '~/.config/nvim/session' 38 | ``` 39 | 40 | ## Startify Lists 41 | 42 | We can specify what shows up in our menu like this: 43 | 44 | ``` 45 | let g:startify_lists = [ 46 | \ { 'type': 'files', 'header': [' Files'] }, 47 | \ { 'type': 'dir', 'header': [' Current Directory '. getcwd()] }, 48 | \ { 'type': 'sessions', 'header': [' Sessions'] }, 49 | \ { 'type': 'bookmarks', 'header': [' Bookmarks'] }, 50 | \ ] 51 | ``` 52 | 53 | ## Bookmarks 54 | 55 | ``` 56 | let g:startify_bookmarks = [ 57 | \ { 'c': '~/.config/i3/config' }, 58 | \ { 'i': '~/.config/nvim/init.vim' }, 59 | \ { 'z': '~/.zshrc' }, 60 | \ '~/Blog', 61 | \ '~/Code', 62 | \ '~/Pics', 63 | \ ] 64 | ``` 65 | 66 | ## Configuration options 67 | 68 | You can automatically restart a session like this 69 | 70 | ``` 71 | let g:startify_session_autoload = 1 72 | ``` 73 | 74 | From the docs: 75 | 76 | "If this option is enabled and you start Vim in a directory that contains a 77 | `Session.vim`, that session will be loaded automatically. Otherwise it will be 78 | shown as the top entry in the Startify buffer." 79 | 80 | Let Startify take care of buffers 81 | 82 | ``` 83 | let g:startify_session_delete_buffers = 1 84 | ``` 85 | 86 | Similar to Vim-rooter 87 | 88 | ``` 89 | let g:startify_change_to_vcs_root = 1 90 | ``` 91 | 92 | If you want Unicode 93 | 94 | ``` 95 | let g:startify_fortune_use_unicode = 1 96 | ``` 97 | 98 | Automatically Update Sessions 99 | 100 | ``` 101 | let g:startify_session_persistence = 1 102 | ``` 103 | 104 | Get rid of empy buffer and quit 105 | 106 | ``` 107 | let g:startify_enable_special = 0 108 | ``` 109 | 110 | ## Add a custom header 111 | 112 | ``` 113 | let g:startify_custom_header = [ 114 | \ ' _ __ _ __ ___ __ ___ ', 115 | \ ' / |/ / __(_)_ _ / |/ /__ _____/ / |_ |', 116 | \ ' / / |/ / / ` \ / /|_/ / _ `/ __/ _ \ / __/ ', 117 | \ '/_/|_/|___/_/_/_/_/ /_/ /_/\_,_/\__/_//_/ /____/ ', 118 | \] 119 | ``` 120 | -------------------------------------------------------------------------------- /posts/12-git-integration.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Git integration 3 | date: "2020-05-02" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Plugins 10 | 11 | We're going to be looking at 4 plugins that bring a good integrate git experience to Neovim 12 | 13 | ``` 14 | Plug 'mhinz/vim-signify' 15 | Plug 'tpope/vim-fugitive' 16 | Plug 'tpope/vim-rhubarb' 17 | Plug 'junegunn/gv.vim' 18 | ``` 19 | 20 | ## Create config files 21 | 22 | ``` 23 | touch ~/.config/nvim/plug-config/signify.vim 24 | ``` 25 | 26 | Make sure to source this file in `init.vim` 27 | 28 | ### Configure Signify 29 | 30 | Signify will show **added**, **modified**, or **removed** lines 31 | 32 | From the documentation: 33 | 34 | ``` 35 | SIGNS *signify-signs* 36 | 37 | `+` This line was added. 38 | 39 | `!` This line was modified. 40 | 41 | `_1` The number of deleted lines below this sign. If the number is larger 42 | `99` than 9, the `_` will be omitted. For numbers larger than 99, `_>` 43 | `_>` will be shown instead. 44 | 45 | `!1` This line was modified and the lines below were deleted. 46 | `!>` It is a combination of `!` and `_`. If the number is larger than 9, 47 | `!>` will be shown instead. 48 | 49 | `‾` The first line was removed. It's a special case of the `_` sign. 50 | 51 | See |g:signify_sign_add| on how to use different signs. 52 | ``` 53 | 54 | You can also stage and unstage hunks 55 | 56 | Here's some config for changing the buffer signs 57 | 58 | ``` 59 | " Change these if you want 60 | let g:signify_sign_add = '+' 61 | let g:signify_sign_delete = '_' 62 | let g:signify_sign_delete_first_line = '‾' 63 | let g:signify_sign_change = '~' 64 | 65 | " I find the numbers disctracting 66 | let g:signify_sign_show_count = 0 67 | let g:signify_sign_show_text = 1 68 | 69 | 70 | " Jump though hunks 71 | nmap gj (signify-next-hunk) 72 | nmap gk (signify-prev-hunk) 73 | nmap gJ 9999gJ 74 | nmap gK 9999gk 75 | 76 | 77 | " If you like colors instead 78 | " highlight SignifySignAdd ctermbg=green guibg=#00ff00 79 | " highlight SignifySignDelete ctermfg=black ctermbg=red guifg=#ffffff guibg=#ff0000 80 | " highlight SignifySignChange ctermfg=black ctermbg=yellow guifg=#000000 guibg=#ffff00 81 | ``` 82 | 83 | ### Commands 84 | 85 | Here are the commands I use: 86 | 87 | ``` 88 | :SignifyToggle 89 | :SignifyToggleHighlight 90 | ``` 91 | 92 | There are more commands but I prefer the options fugitive and gv provide 93 | 94 | ## Fugitive / Rhubarb 95 | 96 | This plugin is what we'll use for interacting with git 97 | 98 | **Note** GBrowse only works when Rhubarb is installed 99 | 100 | **Note** Make sure you are using git through ssh not http 101 | 102 | ### Commands 103 | 104 | ``` 105 | :Git add 106 | 107 | :Git commit 108 | 109 | :Git push 110 | 111 | :Git pull 112 | 113 | :Git diff 114 | 115 | :Git log 116 | 117 | :Git blame 118 | 119 | Gdiffsplit 120 | 121 | GRemove 122 | 123 | GBrowse 124 | ``` 125 | 126 | ## GV 127 | 128 | ### Commands 129 | 130 | From the readme: "A git commit browser." 131 | 132 | To open commit browser: 133 | 134 | ``` 135 | :GV 136 | ``` 137 | 138 | You can pass git log options to the command, e.g. :GV -S foobar. 139 | 140 | ### Other options 141 | 142 | ``` 143 | :GV! # will only list commits that affected the current file 144 | :GV? # fills the location list with the revisions of the current file 145 | :GV # or :GV? can be used in visual mode to track the changes in the selected lines. 146 | ``` 147 | 148 | ### Mappings 149 | 150 | - o or on a commit to display the content of it 151 | 152 | - o or on commits to display the diff in the range 153 | 154 | - O opens a new tab instead 155 | 156 | - gb for :Gbrowse 157 | 158 | - ]] and [[ to move between commits 159 | 160 | - . to start command-line with :Git [CURSOR] SHA à la fugitive 161 | 162 | - q or gq to close 163 | 164 | ## Check out the repos here 165 | 166 | [signify](https://github.com/mhinz/vim-signify) 167 | 168 | [fugitive](https://github.com/tpope/vim-fugitive) 169 | 170 | [rhubarb](https://github.com/tpope/vim-rhubarb) 171 | 172 | [gv](https://github.com/junegunn/gv.vim) 173 | -------------------------------------------------------------------------------- /posts/13-sneak.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Sneak 3 | date: "2020-05-03" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install 10 | 11 | ``` 12 | Plug 'justinmk/vim-sneak' 13 | ``` 14 | 15 | ## Create config file 16 | 17 | ``` 18 | touch ~/.config/nvim/plug-config/sneak.vim 19 | ``` 20 | 21 | Make sure to source this file in `init.vim` 22 | 23 | ## Sneak 24 | 25 | Sneak is a motion plugin for vim that remaps the `s` and `S` keys 26 | 27 | The authors rationale for remapping these keys is this: cl is equivalent to s, and cc is equivalent to S. 28 | 29 | ### Configure Sneak 30 | 31 | ``` 32 | let g:sneak#label = 1 33 | 34 | " case insensitive sneak 35 | let g:sneak#use_ic_scs = 1 36 | 37 | " immediately move to the next instance of search, if you move the cursor sneak is back to default behavior 38 | let g:sneak#s_next = 1 39 | 40 | " remap so I can use , and ; with f and t 41 | map gS Sneak_, 42 | map gs Sneak_; 43 | 44 | " Change the colors 45 | highlight Sneak guifg=black guibg=#00C7DF ctermfg=black ctermbg=cyan 46 | highlight SneakScope guifg=red guibg=yellow ctermfg=red ctermbg=yellow 47 | 48 | " Cool prompts 49 | " let g:sneak#prompt = '🕵' 50 | " let g:sneak#prompt = '🔎' 51 | 52 | " I like quickscope better for this since it keeps me in the scope of a single line 53 | " map f Sneak_f 54 | " map F Sneak_F 55 | " map t Sneak_t 56 | " map T Sneak_T 57 | ``` 58 | 59 | ### Sneak Commands 60 | 61 | ``` 62 | s{char}{char} 63 | S{char}{char} 64 | 65 | f{char} 66 | F{char} 67 | 68 | 69 | t{char} 70 | T{char} 71 | ``` 72 | 73 | ## Link to Sneak repo 74 | 75 | [Sneak](https://github.com/justinmk/vim-sneak) 76 | -------------------------------------------------------------------------------- /posts/14-quickscope.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Quickscope 3 | date: "2020-05-03" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install 10 | 11 | ``` 12 | Plug 'unblevable/quick-scope' 13 | ``` 14 | 15 | ## Create config file 16 | 17 | ``` 18 | touch ~/.config/nvim/plug-config/quickscope.vim 19 | ``` 20 | 21 | Make sure to source this file in `init.vim` 22 | 23 | ``` 24 | source $HOME/.config/nvim/plug-config/quickscope.vim 25 | ``` 26 | 27 | ## Quickscope 28 | 29 | Form the github repo: 30 | 31 | "An always-on highlight for a unique character in every word on a line to help you use f, F and family." 32 | 33 | ### Configure Quickscope 34 | 35 | ``` 36 | " Trigger a highlight in the appropriate direction when pressing these keys: 37 | let g:qs_highlight_on_keys = ['f', 'F', 't', 'T'] 38 | 39 | highlight QuickScopePrimary guifg='#00C7DF' gui=underline ctermfg=155 cterm=underline 40 | highlight QuickScopeSecondary guifg='#afff5f' gui=underline ctermfg=81 cterm=underline 41 | 42 | let g:qs_max_chars=150 43 | ``` 44 | 45 | ### Quickscope Commands 46 | 47 | ``` 48 | f{char} 49 | F{char} 50 | 51 | 52 | t{char} 53 | T{char} 54 | ``` 55 | 56 | ## Link to Quickscope repo 57 | 58 | [Quickscope](https://github.com/unblevable/quick-scope) 59 | -------------------------------------------------------------------------------- /posts/15-which-key.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Which Key 3 | date: "2020-05-03" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install 10 | 11 | ``` 12 | Plug 'liuchengxu/vim-which-key' 13 | ``` 14 | 15 | ## Create config file 16 | 17 | ``` 18 | touch ~/.config/nvim/keys/which-key.vim 19 | ``` 20 | 21 | Make sure to source this file in `init.vim` 22 | 23 | ``` 24 | source $HOME/.config/nvim/keys/which-key.vim 25 | ``` 26 | 27 | ## Which Key 28 | 29 | From the github repo: 30 | 31 | "vim-which-key is vim port of emacs-which-key that displays available keybindings in popup." 32 | 33 | ### Configure Which Key 34 | 35 | ``` 36 | " Map leader to which_key 37 | nnoremap :silent WhichKey '' 38 | vnoremap :silent :silent WhichKeyVisual '' 39 | 40 | " Create map to add keys to 41 | let g:which_key_map = {} 42 | " Define a separator 43 | let g:which_key_sep = '→' 44 | " set timeoutlen=100 45 | 46 | 47 | " Not a fan of floating windows for this 48 | let g:which_key_use_floating_win = 0 49 | 50 | " Change the colors if you want 51 | highlight default link WhichKey Operator 52 | highlight default link WhichKeySeperator DiffAdded 53 | highlight default link WhichKeyGroup Identifier 54 | highlight default link WhichKeyDesc Function 55 | 56 | " Hide status line 57 | autocmd! FileType which_key 58 | autocmd FileType which_key set laststatus=0 noshowmode noruler 59 | \| autocmd BufLeave set laststatus=2 noshowmode ruler 60 | 61 | " Single mappings 62 | let g:which_key_map['/'] = [ 'NERDCommenterToggle' , 'comment' ] 63 | let g:which_key_map['e'] = [ ':CocCommand explorer' , 'explorer' ] 64 | let g:which_key_map['f'] = [ ':Files' , 'search files' ] 65 | let g:which_key_map['h'] = [ 's' , 'split below'] 66 | let g:which_key_map['r'] = [ ':Ranger' , 'ranger' ] 67 | let g:which_key_map['S'] = [ ':Startify' , 'start screen' ] 68 | let g:which_key_map['T'] = [ ':Rg' , 'search text' ] 69 | let g:which_key_map['v'] = [ 'v' , 'split right'] 70 | let g:which_key_map['z'] = [ 'Goyo' , 'zen' ] 71 | 72 | " s is for search 73 | let g:which_key_map.s = { 74 | \ 'name' : '+search' , 75 | \ '/' : [':History/' , 'history'], 76 | \ ';' : [':Commands' , 'commands'], 77 | \ 'a' : [':Ag' , 'text Ag'], 78 | \ 'b' : [':BLines' , 'current buffer'], 79 | \ 'B' : [':Buffers' , 'open buffers'], 80 | \ 'c' : [':Commits' , 'commits'], 81 | \ 'C' : [':BCommits' , 'buffer commits'], 82 | \ 'f' : [':Files' , 'files'], 83 | \ 'g' : [':GFiles' , 'git files'], 84 | \ 'G' : [':GFiles?' , 'modified git files'], 85 | \ 'h' : [':History' , 'file history'], 86 | \ 'H' : [':History:' , 'command history'], 87 | \ 'l' : [':Lines' , 'lines'] , 88 | \ 'm' : [':Marks' , 'marks'] , 89 | \ 'M' : [':Maps' , 'normal maps'] , 90 | \ 'p' : [':Helptags' , 'help tags'] , 91 | \ 'P' : [':Tags' , 'project tags'], 92 | \ 's' : [':Snippets' , 'snippets'], 93 | \ 'S' : [':Colors' , 'color schemes'], 94 | \ 't' : [':Rg' , 'text Rg'], 95 | \ 'T' : [':BTags' , 'buffer tags'], 96 | \ 'w' : [':Windows' , 'search windows'], 97 | \ 'y' : [':Filetypes' , 'file types'], 98 | \ 'z' : [':FZF' , 'FZF'], 99 | \ } 100 | 101 | " Register which key map 102 | call which_key#register('', "g:which_key_map") 103 | ``` 104 | 105 | ### WhichKey Commands 106 | 107 | ``` 108 | {char} 109 | ``` 110 | 111 | ## Link to WhichKey repo 112 | 113 | [WhichKey](https://github.com/liuchengxu/vim-which-key) 114 | -------------------------------------------------------------------------------- /posts/16-floaterm.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Floaterm 3 | date: "2020-05-15" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install 10 | 11 | ``` 12 | Plug 'voldikss/vim-floaterm' 13 | ``` 14 | 15 | ## Create config file 16 | 17 | ``` 18 | touch ~/.config/nvim/plug-config/floaterm.vim 19 | ``` 20 | 21 | Make sure to source this file in `init.vim` 22 | 23 | ``` 24 | source $HOME/.config/nvim/plug-config/floaterm.vim 25 | ``` 26 | 27 | ## Floaterm 28 | 29 | Floaterm is a floating terminal for Neovim 30 | 31 | ### Configure Floaterm 32 | 33 | ``` 34 | let g:floaterm_keymap_toggle = '' 35 | let g:floaterm_keymap_next = '' 36 | let g:floaterm_keymap_prev = '' 37 | let g:floaterm_keymap_new = '' 38 | 39 | " Floaterm 40 | let g:floaterm_gitcommit='floaterm' 41 | let g:floaterm_autoinsert=1 42 | let g:floaterm_width=0.8 43 | let g:floaterm_height=0.8 44 | let g:floaterm_wintitle=0 45 | let g:floaterm_autoclose=1 46 | ``` 47 | 48 | ### Floaterm Commands 49 | 50 | Here is my which key configuration: 51 | 52 | ``` 53 | let g:which_key_map.t = { 54 | \ 'name' : '+terminal' , 55 | \ ';' : [':FloatermNew --wintype=popup --height=6' , 'terminal'], 56 | \ 'f' : [':FloatermNew fzf' , 'fzf'], 57 | \ 'g' : [':FloatermNew lazygit' , 'git'], 58 | \ 'd' : [':FloatermNew lazydocker' , 'docker'], 59 | \ 'n' : [':FloatermNew node' , 'node'], 60 | \ 'N' : [':FloatermNew nnn' , 'nnn'], 61 | \ 'p' : [':FloatermNew python' , 'python'], 62 | \ 'r' : [':FloatermNew ranger' , 'ranger'], 63 | \ 't' : [':FloatermToggle' , 'toggle'], 64 | \ 'y' : [':FloatermNew ytop' , 'ytop'], 65 | \ 's' : [':FloatermNew ncdu' , 'ncdu'], 66 | \ } 67 | ``` 68 | 69 | ## Link to Floaterm repo 70 | 71 | [Floaterm](https://github.com/voldikss/vim-floaterm) 72 | -------------------------------------------------------------------------------- /posts/17-snippets.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Snippets with CoC 3 | date: "2020-05-22" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO Describe this article" 7 | --- 8 | 9 | ## Install 10 | 11 | ``` 12 | Plug 'honza/vim-snippets' 13 | ``` 14 | 15 | Make sure you install CoC, I have a video for that [here](https://www.youtube.com/watch?v=OXEVhnY621M) 16 | 17 | After setting up CoC you can install with: 18 | 19 | ``` 20 | :CocInstall coc-snippets 21 | ``` 22 | 23 | ## Config 24 | 25 | You can create a config file and add the following: 26 | 27 | ``` 28 | " Use for trigger snippet expand. 29 | imap (coc-snippets-expand) 30 | 31 | " Use for select text for visual placeholder of snippet. 32 | vmap (coc-snippets-select) 33 | 34 | " Use for jump to next placeholder, it's default of coc.nvim 35 | let g:coc_snippet_next = '' 36 | 37 | " Use for jump to previous placeholder, it's default of coc.nvim 38 | let g:coc_snippet_prev = '' 39 | 40 | " Use for both expand and jump (make expand higher priority.) 41 | imap (coc-snippets-expand-jump) 42 | ``` 43 | 44 | ## Add your own snippets 45 | 46 | Edit coc-settings.json and add the following: 47 | 48 | ``` 49 | "snippets.userSnippetsDirectory": "~/.config/nvim/snips", 50 | ``` 51 | 52 | After that you can add a file like this: 53 | 54 | ``` 55 | mkdir ~/.config/nvim/snips 56 | 57 | touch ~/.config/nvim/snips/markdown.snippets # <- doesn't have to be called markdown 58 | ``` 59 | 60 | ## Commands 61 | 62 | You'll be able to notice it's a snippet from the `~` character 63 | 64 | Auto complete should feel very familiar, refer to the earlier bindings you set. 65 | 66 | To list all snippets for a current file: 67 | 68 | ``` 69 | :CocList snippets 70 | 71 | :CocCommand snippets.editSnippets 72 | 73 | :CocCommand snippets.openSnippetFiles 74 | ``` 75 | 76 | ## Repo Links 77 | 78 | [coc-snippets](https://github.com/neoclide/coc-snippets) 79 | 80 | [honza/vim-snippets](https://github.com/honza/vim-snippets) 81 | -------------------------------------------------------------------------------- /posts/18-codi.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Codi - An Interactive Scratchpad for Hackers 3 | date: "2020-05-26" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## What is Codi? 10 | 11 | Codi is an interactive scratchpad for hackers. It opens virtual text which displays the results of evaluating each line as you type with NeoVim asynchronously. It's extensible to nearly any language that provides a REPL (interactive interpreter)! 12 | 13 | REPL = (Read-eval-print loop) 14 | 15 | Languages with built-in support: Python, JavaScript, CoffeeScript, Haskell, PureScript, Ruby, OCaml, R, Clojure/ClojureScript, PHP, Lua, C++, Julia, Elm, Elixir, TypeScript, Mathjs 16 | 17 | ## Install 18 | 19 | - Updated Version with Virtual text 20 | 21 | ``` 22 | Plug 'ChristianChiarulli/codi.vim' 23 | ``` 24 | 25 | - Original 26 | 27 | ``` 28 | Plug 'metakirby5/codi.vim' 29 | ``` 30 | 31 | - Version with Virtual Text 32 | 33 | The code for this can be found [here](https://github.com/Pablo1107/codi.vim/tree/nvim-virtual-text) 34 | 35 | ## Config 36 | 37 | Here is some simple config to get you started 38 | 39 | ``` 40 | " Change the color 41 | highlight CodiVirtualText guifg=cyan 42 | 43 | let g:codi#virtual_text_prefix = "❯ " 44 | 45 | 46 | " 47 | let g:codi#aliases = { 48 | \ 'javascript.jsx': 'javascript', 49 | \ } 50 | ``` 51 | 52 | ## Commands 53 | 54 | ``` 55 | :Codi {filetype} # Open codi for a specific filetype 56 | 57 | :Codi! # Closes Codi Apparently doesn't work 58 | 59 | :Codi!! # Toggle Codi Apparently doesn't work 60 | ``` 61 | 62 | ## Shell Wrapper 63 | 64 | Add this to your `bashrc` or `zshrc` 65 | 66 | ``` 67 | codi() { 68 | local syntax="${1:-python}" 69 | shift 70 | nvim -c \ 71 | "let g:startify_disable_at_vimenter = 1 |\ 72 | set bt=nofile ls=0 noru nonu nornu |\ 73 | hi CodiVirtualText guifg=red 74 | hi ColorColumn ctermbg=NONE |\ 75 | hi VertSplit ctermbg=NONE |\ 76 | hi NonText ctermfg=0 |\ 77 | Codi $syntax" "$@" 78 | } 79 | ``` 80 | 81 | ## Notes 82 | 83 | This plugin has been a little buggy but I still find it very useful. 84 | 85 | The maintainer and the guy who forked it and added virtual text don't seem to be very active. 86 | 87 | I have a fork on my Github for now with the updates from both. 88 | 89 | I don't plan on maintaining it or adding features. 90 | 91 | Hopefully they update it soon. 92 | 93 | ## Repo Links 94 | 95 | [Original](https://github.com/Pablo1107/codi.vim/tree/nvim-virtual-text) 96 | 97 | [Virtual text fork](https://github.com/Pablo1107/codi.vim/tree/nvim-virtual-text) 98 | 99 | [YouTube video where I found this](https://www.youtube.com/watch?v=iGrUvcQyfhc) 100 | 101 | [My fork](https://github.com/ChristianChiarulli/codi.vim) 102 | -------------------------------------------------------------------------------- /posts/19-coc-marketplace.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Discovering extensions with coc-marketplace 3 | date: "2020-06-11" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## What is coc-marketplace? 10 | 11 | This extension is a marketplace for all other coc-extensions 12 | 13 | ### Note 14 | 15 | You will need to have CoC installed I have a blog post and video for installing CoC here: 16 | 17 | [YouTube Video](https://www.youtube.com/watch?v=OXEVhnY621M) 18 | 19 | [Blog Post](https://www.chrisatmachine.com/Neovim/04-vim-coc/) 20 | 21 | ## Install 22 | 23 | ``` 24 | :CocInstall coc-marketplace 25 | ``` 26 | 27 | ## Commands 28 | 29 | ``` 30 | :CocList marketplace 31 | ``` 32 | 33 | ## Repo Links 34 | 35 | [coc-marketplace](https://github.com/fannheyward/coc-marketplace) 36 | -------------------------------------------------------------------------------- /posts/20-live-server.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Using Live Server with Neovim 3 | date: "2020-07-30" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## What is Live Server? 10 | 11 | Live-server is an `npm` package that will allow you to see real time changes for `.html` files in your browser. 12 | 13 | ### Note 14 | 15 | You will need to have `node` & `npm` installed I have a blog post about installing node using `fnm` [here](https://www.chrisatmachine.com/Nodejs/02-Install-FNM/) 16 | 17 | ## Install 18 | 19 | ``` 20 | npm i -g live-server 21 | ``` 22 | 23 | ## Commands 24 | 25 | You can have live server monitor and html file like this: 26 | 27 | ``` 28 | live-server some-file.html 29 | ``` 30 | 31 | Or watch a directory like this: 32 | 33 | ``` 34 | live-server some-directory/ 35 | ``` 36 | -------------------------------------------------------------------------------- /posts/21-coc-emoji.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Emojis in Neovim 💯👍😜 3 | date: "2020-07-31" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## Supporting emoji ✌ 10 | 11 | Make sure your terminal supports emojis 12 | 13 | You will also need a font that will support emojis such as: 14 | 15 | On Arch Linux you will need to: 16 | 17 | ``` 18 | sudo pacman -S noto-fonts-emoji 19 | ``` 20 | 21 | ### Note 📓 22 | 23 | You will need to have CoC installed I have a blog post and video for installing CoC here: 24 | 25 | [YouTube Video](https://www.youtube.com/watch?v=OXEVhnY621M) 26 | 27 | [Blog Post](https://www.chrisatmachine.com/Neovim/04-vim-coc/) 28 | 29 | ## Install 📥 30 | 31 | ``` 32 | :CocInstall coc-emoji 33 | ``` 34 | 35 | ## Commands ⌨ 36 | 37 | Emojis, are enabled for markdown files only by default. 38 | 39 | You can add filetypes with the following to you `coc-settings.json`: 40 | 41 | ``` 42 | "coc.source.emoji.filetypes": ["markdown"] 43 | ``` 44 | 45 | To see a list of emoji completion candidates, `:` is the trigger character. 46 | 47 | It is also possible to change the emoji trigger character by putting the following in your coc-settings.json: 48 | 49 | ``` 50 | "coc.source.emoji.triggerCharacters": ["TRIGGERCHAR"] 51 | ``` 52 | -------------------------------------------------------------------------------- /posts/22-vscodium-neovim.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: VSCodium & Neovim 3 | date: "2020-09-01" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## What is VSCodium? 10 | 11 | From `vscodium.com`: 12 | 13 | Microsoft’s vscode source code is open source (MIT-licensed), but the product available for download (Visual Studio Code) is licensed under this not-FLOSS license and contains telemetry/tracking. 14 | 15 | ### Installing VSCodium 16 | 17 | - On Mac 18 | 19 | ``` 20 | brew install --cask vscodium 21 | ``` 22 | 23 | - Arch Linux 24 | 25 | ``` 26 | yay -S vscodium 27 | ``` 28 | 29 | - Ubuntu 30 | 31 | ``` 32 | sudo apt install vscodium 33 | ``` 34 | 35 | ### Configuring Plugins 36 | 37 | By default you will be able to use all of the extensions available on [open-vsx.org](https://open-vsx.org/). 38 | 39 | If you want all of the extensions available in vanilla VS Code then you will need to edit `product.json` and add the following: 40 | 41 | ```json 42 | "extensionsGallery": { 43 | "serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery", 44 | "itemUrl": "https://marketplace.visualstudio.com/items" 45 | } 46 | ``` 47 | 48 | #### Finding product.json on Mac 49 | 50 | Open `Finder` then `Applications` 51 | 52 | Then right click `VSCodium` and select `Show Package Contents` 53 | 54 | From here the path is `Contents/Resources/app/product.json` 55 | 56 | #### Finding product.json on Linux 57 | 58 | Here is the path to `product.json` on Linux: 59 | 60 | ``` 61 | /usr/share/vscodium-bin/resources/app/product.json 62 | ``` 63 | 64 | ## The Neovim Extension 65 | 66 | From the repo description: 67 | 68 | The extension is using full embedded neovim instance as backend (with the exception of the insert mode and window/buffer/file management), no more half-complete VIM emulation 69 | 70 | ### Install Neovim Extension 71 | 72 | Search for the Neo Vim extension 73 | 74 | ## Integrating your config 75 | 76 | To integrate your config you will just need to point the extension to your `nvim` binary and `init.vim` 77 | 78 | ## The Which-key Extension 79 | 80 | Search for the Which-key extension 81 | 82 | ## Configuration 83 | 84 | You can find sample configurations in my `nvim` repo 85 | 86 | - General/which-key settings: [settings.json](https://github.com/ChristianChiarulli/nvim/blob/master/utils/vscode_config/settings.json) 87 | 88 | - Keybindings: [keybindings.json](https://github.com/ChristianChiarulli/nvim/blob/master/utils/vscode_config/keybindings.json) 89 | 90 | - Neovim settings [settings.vim](https://github.com/ChristianChiarulli/nvim/blob/master/vscode/settings.vim) 91 | 92 | ## Links to repos 93 | 94 | [VSCodium](https://github.com/VSCodium/vscodium) 95 | 96 | [Neo Vim](https://github.com/asvetliakov/vscode-neovim) 97 | 98 | [vscode-which-key](https://github.com/VSpaceCode/vscode-which-key) 99 | -------------------------------------------------------------------------------- /posts/23-far-find-and-replace.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Project Wide Find & Replace w/ FAR 3 | date: "2020-09-14" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## Installing the FAR Plugin 10 | 11 | FAR is a Vim/Neovim plugin that will allow you to perform project wide find & replace 12 | 13 | - Install with Vim-plug: 14 | 15 | ``` 16 | Plug 'ChristianChiarulli/far.vim' 17 | ``` 18 | 19 | ( **NOTE** ) 20 | 21 | - You may also need to run: 22 | 23 | ``` 24 | :UpdateRemotePlugins 25 | ``` 26 | 27 | Currently I'm using a fork that improves the experience in my opinion, it's based on this [issue](https://github.com/brooth/far.vim/issues/94) 28 | 29 | ## Configuration 30 | 31 | Add this to your `init.vim` 32 | 33 | ``` 34 | let g:far#source='rgnvim' 35 | " let g:far#source='rg' 36 | " let g:far#source='vimgrep' 37 | " let g:far#source='ag' 38 | 39 | set lazyredraw " improve scrolling performance when navigating through large results 40 | 41 | let g:far#window_width=60 42 | " Use %:p with buffer option only 43 | let g:far#file_mask_favorites=['%:p', '**/*.*', '**/*.js', '**/*.py', '**/*.java', '**/*.css', '**/*.html', '**/*.vim', '**/*.cpp', '**/*.c', '**/*.h', ] 44 | let g:far#window_min_content_width=30 45 | let g:far#enable_undo=1 46 | ``` 47 | 48 | ## Commands 49 | 50 | - Find & Replace in buffer (current file): 51 | 52 | ``` 53 | :Farr --source=vimgrep 54 | ``` 55 | 56 | - Find & Replace project: 57 | 58 | ``` 59 | :Farr --source=rgnvim 60 | ``` 61 | 62 | 63 | - If you're using the `which-key plugin`: 64 | 65 | ``` 66 | let g:which_key_map.f = { 67 | \ 'name' : '+find & replace' , 68 | \ 'b' : [':Farr --source=vimgrep' , 'buffer'], 69 | \ 'p' : [':Farr --source=rgnvim' , 'project'], 70 | \ } 71 | ``` 72 | 73 | ### Inside FAR Buffer Commands 74 | 75 | ``` 76 | " Below are the default mappings and corresponding variable names in 77 | 78 | " x v_x - Exclude item under the cursor. 79 | 80 | " i v_i - Include item under the cursor. 81 | 82 | " t v_t - Toggle item exclusion under the cursor. 83 | 84 | " f v_f - Smartly toggle item exclusion under the cursor: exclude all items when all are excluded, otherwise exclude all items. 85 | 86 | " X - Exclude all items. 87 | 88 | " I - Include all items. 89 | 90 | " T - Toggle exclusion for all items. 91 | 92 | " F - Smartly toggle exclusion for all items: include all items when all are excluded, otherwise exclude all items. 93 | 94 | " - Jump to the source code of the item under the cursor. See |far-jump| 95 | 96 | " p - Open preview window (if not) and scroll to the item under the cursor. See |far-preview| 97 | 98 | " P - Close preview window. See |far-preview| 99 | 100 | " CTRL-K - Scroll preview window up (if open). See |far-preview|, |g:far#preview_window_scroll_step| 101 | 102 | " CTRL-J - Scroll preview window down (if open). See |far-preview|, |g:far#preview_window_scroll_step| 103 | 104 | " zo - Expand node under the cursor. 105 | 106 | " zc - Collapse node under the cursor. 107 | 108 | " za - Toggle node expanding under the cursor. 109 | 110 | " zs - Smartly toggle exclusion for all nodes: expand all nodes when all are collapsed, otherwise collapse all nodes. 111 | 112 | " zr v_zr - Expand all nodes. 113 | 114 | " zm v_zm - Collapse all nodes. 115 | 116 | " zA v_zA - Toggle exclusion for all nodes. 117 | 118 | " zS v_zS - Smartly toggle exclusion for all nodes: expand all nodes when all are collapsed, otherwise collapse all nodes. 119 | 120 | " s v_s - Execute |:Fardo|, to replace all included items. 121 | 122 | " u v_s - Execute |:Farundo|, to undo the last replacement by |:Fardo|. 123 | 124 | " U v_U - Execute |:Farundo| --all=1, to undo all replacements by |:Fardo|. For param '--all=' see |farundo-params|. 125 | 126 | " q v_q - Close searching result buffer and its preview buffer (if exists) 127 | ``` 128 | 129 | ## Links & Repos 130 | 131 | [FAR](https://github.com/brooth/far.vim) 132 | 133 | [Glob Issue](https://github.com/brooth/far.vim/issues/94) 134 | -------------------------------------------------------------------------------- /posts/24-neovim-and-java.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Java in Neovim 3 | date: "2020-11-04" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## Current State of Java + Neovim 10 | 11 | **Available:** 12 | 13 | - [Treesitter highlighting](https://github.com/nvim-treesitter/nvim-treesitter) 14 | - Goto definition 15 | - Goto references 16 | - Formatting 17 | - Diagnostics 18 | - Hover 19 | - Refactor/Rename 20 | - Search files (FZF) 21 | - Search text (FZF) 22 | - Quickfix 23 | - Lombok 24 | - Configuration in `coc-settings.json` 25 | 26 | **Difficult to Implement:** 27 | 28 | - Debugging 29 | 30 | \* This can be done but in my opinion it's difficult to get setup, if you'd like to look further into it checkout the following: 31 | 32 | - [nvim-dap](https://github.com/mfussenegger/nvim-dap) 33 | - [vimspector](https://github.com/puremourning/vimspector) 34 | 35 | ### Note 36 | 37 | You will need to have CoC installed I have a blog post and video for installing CoC here: 38 | 39 | [YouTube Video](https://www.youtube.com/watch?v=OXEVhnY621M) 40 | 41 | [Blog Post](https://www.chrisatmachine.com/Neovim/04-vim-coc/) 42 | 43 | ## Install 44 | 45 | **Treesitter** 46 | 47 | _You will need Neovim>=0.5_ 48 | 49 | - Install with VimPlug 50 | 51 | ``` 52 | Plug 'nvim-treesitter/nvim-treesitter' 53 | ``` 54 | 55 | Add this to your `init.vim` 56 | 57 | ``` 58 | require'nvim-treesitter.configs'.setup { 59 | ensure_installed = "maintained", -- one of "all", "maintained" (parsers with maintainers), or a list of languages 60 | highlight = { 61 | enable = true, -- false will disable the whole extension 62 | }, 63 | } 64 | ``` 65 | 66 | **coc-java** 67 | 68 | ``` 69 | :CocInstall coc-java 70 | ``` 71 | 72 | **Lombok** 73 | 74 | ``` 75 | sudo mkdir /usr/local/share/lombok 76 | 77 | sudo wget https://projectlombok.org/downloads/lombok.jar -O /usr/local/share/lombok/lombok.jar 78 | ``` 79 | 80 | ## Commands 81 | 82 | Here are a bunch of commands to get the behavior of this video: 83 | 84 | ``` 85 | (coc-codeaction) " line action 86 | (coc-definition) " definition 87 | (coc-references) " references 88 | (coc-type-definition) " type definition 89 | (coc-rename) " rename 90 | (coc-declaration) " declaration 91 | (coc-implementation) " implementation 92 | (coc-format) " format 93 | (coc-fix-current) " quickfix 94 | (coc-codelens-action) " code lens 95 | (coc-diagnostic-next) " next diagnostic 96 | (coc-diagnostic-next-error) " next error 97 | :CocList diagnostics " diagnostics 98 | :CocList outline " search outline 99 | :CocList -I symbols " references 100 | :CocUpdate " update CoC 101 | :CocDisable " disable CoC 102 | :CocEnable " enable CoC 103 | ``` 104 | 105 | ## Configuration 106 | 107 | - `coc-settings.json` 108 | 109 | ``` 110 | // codelens 111 | "codeLens.enable": true, 112 | "java.referencesCodeLens.enabled": true, 113 | "java.jdt.ls.vmargs": "-javaagent:/usr/local/share/lombok/lombok.jar", 114 | // "java.jdt.ls.vmargs": "-javaagent:/usr/local/share/lombok/lombok.jar -Xbootclasspath/a:/usr/local/share/lombok/lombok.jar", // for older versions of Java 115 | ``` 116 | 117 | ## Repo Links 118 | 119 | [coc-java](https://github.com/neoclide/coc-java) 120 | [treesitter](https://github.com/nvim-treesitter/nvim-treesitter) 121 | -------------------------------------------------------------------------------- /posts/25-vimspector.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vimspector (for Java) 3 | date: "2020-11-05" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## What is Vimspector? 10 | 11 | It is a debugger plugin for Vim and Neovim 12 | 13 | I am going to be using Java as an example in this article but I'll probably do ones for Python and JavaScript as well. 14 | 15 | ## Install 16 | 17 | ### Note 18 | 19 | You will need to have CoC installed I have a blog post and video for installing CoC here: 20 | 21 | [YouTube Video](https://www.youtube.com/watch?v=OXEVhnY621M) 22 | 23 | [Blog Post](https://www.chrisatmachine.com/Neovim/04-vim-coc/) 24 | 25 | - Install `coc-java` 26 | 27 | ## Commands 28 | 29 | ## Configuration 30 | 31 | ## Repo Links 32 | 33 | [coc-java](https://github.com/neoclide/coc-java) 34 | -------------------------------------------------------------------------------- /posts/26-lsp-symbols.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: LSP Completion Symbols in CoC 3 | date: "2021-02-15" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## LSP Completion Symbols 10 | 11 | If you are familiar with VS Code then you have probably noticed all of the symbols you see in the completion menu. You can find an example of all of the symbols provided here: [VSCode Intellisense Overview](https://code.visualstudio.com/docs/editor/intellisense) 12 | 13 | ## Adding to CoC 14 | 15 | To add them to the CoC completion menu add the following to your `coc-settings.json`: 16 | 17 | ``` 18 | "suggest.completionItemKindLabels": { 19 | "method": "  ", 20 | "function": "  ", 21 | "variable": "[]", 22 | "field": "  ", 23 | "typeParameter": "<>", 24 | "constant": "  ", 25 | "class": " פּ ", 26 | "interface": " 蘒", 27 | "struct": "  ", 28 | "event": "  ", 29 | "operator": "  ", 30 | "module": "  ", 31 | "property": "  ", 32 | "enum": " 練", 33 | "reference": "  ", 34 | "keyword": "  ", 35 | "file": "  ", 36 | "folder": " ﱮ ", 37 | "color": "  ", 38 | "unit": " 塞 ", 39 | "snippet": "  ", 40 | "text": "  ", 41 | "constructor": "  ", 42 | "value": "  ", 43 | "enumMember": "  " 44 | }, 45 | ``` 46 | 47 | This was as close as I could get with the symbols provided by [Nerdfont Icons](https://www.nerdfonts.com/cheat-sheet). 48 | 49 | Feel free to explore the above link and change the symbols to whatever you like. 50 | -------------------------------------------------------------------------------- /posts/29-setting-up-nvim-jdtls.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Setup Neovim for Lua Development 3 | date: "2021-03-11" 4 | topic: "neovim" 5 | cover: "/images/neovim.png" 6 | excerpt: "TODO write description" 7 | --- 8 | 9 | ## What is nvim-jdtls? 10 | 11 | This is a plugin that will provide LSP support for Neovim and other cool features. 12 | 13 | Check out the Github Repo [here](https://github.com/mfussenegger/nvim-jdtls) 14 | 15 | ## Install 16 | 17 | ``` 18 | Plug 'mfussenegger/nvim-jdtls' 19 | ``` 20 | 21 | ## Install Language Server 22 | 23 | ``` 24 | cd ~/.config/nvim 25 | git clone https://github.com/eclipse/eclipse.jdt.ls.git 26 | cd eclipse.jdt.ls 27 | ./mvnw clean verify 28 | ``` 29 | 30 | ## Configure Language Server 31 | 32 | ```lua heading=java-ls.lua 33 | require'lspconfig'.jdtls.setup {cmd = {'java-linux-ls'}} 34 | ``` 35 | -------------------------------------------------------------------------------- /posts/ledger-live.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Install Ledger Live for Linux 3 | date: '2022-12-08' 4 | topic: 'linux' 5 | cover: '/images/ledger-live.jpg' 6 | author: 'Chris' 7 | excerpt: 'If you hold Bitcoin you should be keeping it offline in a hardware wallet like a Ledger. In this article I will show you how to install ledger-live for Linux.' 8 | --- 9 | 10 | ## Process 11 | 12 | 1. Navigate to [ledger.com/ledger-live/download](https://www.ledger.com/ledger-live/download) 13 | 14 | 2. Choose desktop and download for Linux 15 | 16 | 3. Download the Ledger Live AppImage. 17 | 18 | 4. Make the file executable in a terminal: 19 | 20 | ``` 21 | chmod +x ledger-live-*.AppImage 22 | ``` 23 | 24 | 5. Enter the following command to automatically add the udev rules and reload udev to allow USB access to your Ledger device: 25 | 26 | ``` 27 | wget -q -O - https://raw.githubusercontent.com/LedgerHQ/udev-rules/master/add_udev_rules.sh | sudo bash 28 | ``` 29 | 30 | 6. Rename the application 31 | 32 | ``` 33 | mv ledger-live-*.AppImage ledger-live 34 | 35 | sudo mv ledger-live /usr/local/bin/ 36 | ``` 37 | 38 | 7. Get the Icon 39 | 40 | ``` 41 | sudo mkdir -p /usr/local/share/icons/ 42 | 43 | wget https://github.com/ChristianChiarulli/website/blob/master/blog/images/ledger-live.png 44 | 45 | sudo mv ledger-live.png /usr/local/share/icons/ 46 | ``` 47 | 48 | 8. Add entry to desktop 49 | 50 | Create the following file `ledger-live.desktop`: 51 | 52 | **NOTE** If you get a sandboxing error, run the app with --no-sandbox 53 | 54 | ``` 55 | [Desktop Entry] 56 | Type=Application 57 | Name=Ledger Live 58 | Comment=Ledger Live 59 | Icon=/usr/local/share/icons/ledger-live.png 60 | Exec=/usr/local/bin/ledger-live 61 | Terminal=false 62 | Categories=crypto;wallet 63 | ``` 64 | 65 | Move the `.desktop` to your applications folder: 66 | 67 | ``` 68 | sudo mkdir -p /usr/local/share/applications/ 69 | 70 | mv ledger-live.desktop /usr/local/share/applications 71 | ``` 72 | 73 | 9. Take ownership of your Bitcoin 74 | 75 | ## References 76 | 77 | [Ledger Support](https://support.ledger.com/hc/en-us/articles/360006395553-Download-and-install-Ledger-Live) 78 | 79 | [creating a desktop entry](https://askubuntu.com/questions/902672/registering-appimage-files-as-a-desktop-app) 80 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/favicon.ico -------------------------------------------------------------------------------- /public/icons/bitcoin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/icons/bitcoin.png -------------------------------------------------------------------------------- /public/icons/chrisatmachine.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/icons/chrisatmachine.png -------------------------------------------------------------------------------- /public/icons/circle-eth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/icons/circle-eth.png -------------------------------------------------------------------------------- /public/icons/crypto-zombie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/icons/crypto-zombie.png -------------------------------------------------------------------------------- /public/icons/lunarvim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/icons/lunarvim.png -------------------------------------------------------------------------------- /public/icons/machos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/icons/machos.png -------------------------------------------------------------------------------- /public/icons/neovimN.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/icons/neovimN.png -------------------------------------------------------------------------------- /public/icons/raspinode-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/icons/raspinode-logo.png -------------------------------------------------------------------------------- /public/icons/raspinode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/icons/raspinode.png -------------------------------------------------------------------------------- /public/icons/zap.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 18 | 38 | 42 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /public/images/dwm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/images/dwm.png -------------------------------------------------------------------------------- /public/images/git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/images/git.png -------------------------------------------------------------------------------- /public/images/ledger-live.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/images/ledger-live.jpg -------------------------------------------------------------------------------- /public/images/ledger-live.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/images/ledger-live.png -------------------------------------------------------------------------------- /public/images/m2-macbook-air.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/images/m2-macbook-air.jpg -------------------------------------------------------------------------------- /public/images/miniconda.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/images/miniconda.jpg -------------------------------------------------------------------------------- /public/images/neovim.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/images/neovim.png -------------------------------------------------------------------------------- /public/images/sdkman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/images/sdkman.png -------------------------------------------------------------------------------- /public/site/me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianChiarulli/old_website/2d8d0856e94218138c879c73bfb946b618801d53/public/site/me.jpg -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /scripts/cache.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const path = require('path') 3 | const matter = require('gray-matter') 4 | 5 | function postData() { 6 | const files = fs.readdirSync(path.join('posts')) 7 | 8 | const posts = files.map((filename) => { 9 | const slug = filename.replace('.md', '') 10 | 11 | const markdownWithMeta = fs.readFileSync( 12 | path.join('posts', filename), 13 | 'utf-8' 14 | ) 15 | 16 | const { data: frontmatter } = matter(markdownWithMeta) 17 | 18 | return { 19 | slug, 20 | frontmatter, 21 | } 22 | }) 23 | 24 | return `export const posts = ${JSON.stringify(posts)}` 25 | } 26 | 27 | try { 28 | fs.readdirSync('cache') 29 | } catch (error) { 30 | fs.mkdirSync('cache') 31 | } 32 | 33 | fs.writeFile('cache/data.js', postData(), function (err) { 34 | if (err) return console.log(err) 35 | console.log('Posts Cached...') 36 | }) 37 | -------------------------------------------------------------------------------- /styles/404.module.css: -------------------------------------------------------------------------------- 1 | .notfound__container { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | margin-top: 5rem/* 80px */; 6 | } 7 | 8 | .notfound__image { 9 | --tw-bg-opacity: 1; 10 | background-color: rgba(31, 41, 55, var(--tw-bg-opacity)); 11 | border-radius: 1rem/* 16px */; 12 | } 13 | 14 | .notfound__title { 15 | color: #d19a66; 16 | font-size: 3.75rem/* 60px */; 17 | line-height: 1; 18 | margin-top: 1.25rem/* 20px */; 19 | margin-bottom: 1.25rem/* 20px */; 20 | } 21 | 22 | .notfound__message { 23 | font-size: 2.25rem/* 36px */; 24 | line-height: 2.5rem/* 40px */; 25 | --tw-text-opacity: 1; 26 | color: rgba(156, 163, 175, var(--tw-text-opacity)); 27 | margin-bottom: 1.25rem/* 20px */; 28 | } 29 | -------------------------------------------------------------------------------- /styles/blog/category/category_name.module.css: -------------------------------------------------------------------------------- 1 | .categorypage { 2 | display: flex; 3 | justify-content: space-between; 4 | width: 100%; 5 | } 6 | 7 | .categorypage__container { 8 | width: 100%; 9 | display: flex; 10 | flex-direction: column; 11 | } 12 | 13 | .categorypage__title { 14 | font-size: 1.25rem; 15 | font-weight: 700; 16 | line-height: 1.75rem; 17 | text-transform: uppercase; 18 | } 19 | 20 | .categorypage__posts { 21 | display: grid; 22 | } 23 | 24 | .sidebar__container { 25 | display: none; 26 | } 27 | /* Custom, iPhone Retina */ 28 | @media only screen and (min-width: 320px) { 29 | } 30 | 31 | /* Extra Small Devices, Phones */ 32 | @media only screen and (min-width: 480px) { 33 | } 34 | 35 | /* Small Devices, Tablets */ 36 | @media only screen and (min-width: 768px) { 37 | .categorypage__posts { 38 | grid-template-columns: repeat(1, minmax(0, 1fr)); 39 | } 40 | } 41 | 42 | /* Medium Devices, Desktops */ 43 | @media only screen and (min-width: 992px) { 44 | .categorypage__posts { 45 | grid-template-columns: repeat(2, minmax(0, 1fr)); 46 | column-gap: 5rem; 47 | row-gap: 2rem; 48 | } 49 | .search { 50 | display: none; 51 | } 52 | .categorypage { 53 | flex-direction: row; 54 | justify-content: space-between; 55 | } 56 | .sidebar__container { 57 | display: flex; 58 | flex-shrink: 0; 59 | align-items: center; 60 | margin-left: 0.25rem /* 4px */; 61 | margin-right: 0.25rem /* 4px */; 62 | flex-direction: column; 63 | padding-left: 3rem; 64 | } 65 | } 66 | 67 | /* Large Devices, Wide Screens */ 68 | @media only screen and (min-width: 1200px) { 69 | } 70 | 71 | -------------------------------------------------------------------------------- /styles/blog/page/page_index.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | width: 100%; 5 | } 6 | 7 | .pageindex__title { 8 | font-size: 1.25rem; 9 | font-weight: 700; 10 | line-height: 1.75rem; 11 | text-transform: uppercase; 12 | } 13 | 14 | .pageindex__posts { 15 | display: grid; 16 | } 17 | 18 | .pageindex__container { 19 | width: 100%; 20 | display: flex; 21 | flex-direction: column; 22 | } 23 | 24 | .sidebar__container { 25 | display: flex; 26 | flex-direction: column; 27 | flex-shrink: 0; 28 | align-items: center; 29 | } 30 | 31 | .footer { 32 | display: flex; 33 | justify-content: space-between; 34 | align-items: center; 35 | padding-top: 2rem; 36 | padding-bottom: 3rem; 37 | } 38 | 39 | .socials { 40 | display: flex; 41 | justify-content: center; 42 | } 43 | 44 | .social__item { 45 | margin: 2.8rem; 46 | } 47 | 48 | /* Custom, iPhone Retina */ 49 | @media only screen and (min-width: 320px) { 50 | } 51 | 52 | /* Extra Small Devices, Phones */ 53 | @media only screen and (min-width: 480px) { 54 | } 55 | 56 | /* Small Devices, Tablets */ 57 | @media only screen and (min-width: 768px) { 58 | .pageindex__posts { 59 | grid-template-columns: repeat(1, minmax(0, 1fr)); 60 | } 61 | } 62 | 63 | /* Medium Devices, Desktops */ 64 | @media only screen and (min-width: 992px) { 65 | .pageindex__posts { 66 | grid-template-columns: repeat(2, minmax(0, 1fr)); 67 | column-gap: 5rem; 68 | row-gap: 2rem; 69 | } 70 | .search { 71 | display: none; 72 | } 73 | .container { 74 | flex-direction: row; 75 | justify-content: space-between; 76 | } 77 | .sidebar__container { 78 | display: flex; 79 | flex-shrink: 0; 80 | align-items: center; 81 | margin-left: 0.25rem /* 4px */; 82 | margin-right: 0.25rem /* 4px */; 83 | flex-direction: column; 84 | padding-left: 3rem; 85 | } 86 | .footer { 87 | display: none; 88 | } 89 | } 90 | 91 | /* Large Devices, Wide Screens */ 92 | @media only screen and (min-width: 1200px) { 93 | } 94 | -------------------------------------------------------------------------------- /styles/blog/slug.module.css: -------------------------------------------------------------------------------- 1 | .article { 2 | width: 100%; 3 | /* padding-bottom: 2rem; */ 4 | } 5 | 6 | .cover__image { 7 | padding-top: 3rem; 8 | width: 100%; 9 | /* border-radius: 1rem; */ 10 | margin: auto; 11 | 12 | } 13 | 14 | .article__container { 15 | display: flex; 16 | justify-content: space-between; 17 | align-items: center; 18 | } 19 | 20 | .article__title { 21 | font-size: 2.5rem /* 48px */; 22 | line-height: 1; 23 | margin-bottom: 1rem /* 28px */; 24 | } 25 | 26 | /* begin markdown content*/ 27 | 28 | .footer { 29 | display: flex; 30 | justify-content: space-between; 31 | align-items: center; 32 | padding-top: 3rem; 33 | padding-bottom: 3rem; 34 | } 35 | 36 | .socials { 37 | display: flex; 38 | justify-content: center; 39 | } 40 | 41 | .social__item { 42 | margin: 2.8rem; 43 | } 44 | -------------------------------------------------------------------------------- /styles/components/CategoryLabel.module.css: -------------------------------------------------------------------------------- 1 | 2 | .label { 3 | font-size: 0.75rem/* 12px */; 4 | line-height: 1rem/* 16px */; 5 | padding-left: 0.5rem/* 8px */; 6 | padding-right: 0.5rem/* 8px */; 7 | padding-top: 0.25rem/* 4px */; 8 | padding-bottom: 0.25rem/* 4px */; 9 | --tw-text-opacity: 1; 10 | color: rgba(243, 244, 246, var(--tw-text-opacity)); 11 | font-weight: 700; 12 | border-radius: 0.25rem/* 4px */; 13 | } 14 | -------------------------------------------------------------------------------- /styles/components/CategoryList.module.css: -------------------------------------------------------------------------------- 1 | .list { 2 | width: 16rem; 3 | } 4 | 5 | .list__title { 6 | display: none; 7 | } 8 | 9 | .list__container { 10 | display: flex; 11 | justify-content: center; 12 | } 13 | 14 | .list__element { 15 | --tw-text-opacity: 1; 16 | color: rgba(255, 255, 255, var(--tw-text-opacity)); 17 | font-size: 0.875rem; 18 | line-height: 1.25rem; 19 | padding-left: 0.5rem; 20 | padding-right: 0.5rem; 21 | padding-top: 0.5rem; 22 | padding-bottom: 0.5rem; 23 | margin-left: 0.25rem; 24 | margin-right: 0.25rem; 25 | margin-top: 0.5rem; 26 | margin-bottom: 0.5rem; 27 | --tw-bg-opacity: 1; 28 | background-color: rgba(55, 65, 81, var(--tw-bg-opacity)); 29 | border-radius: 0.5rem; 30 | cursor: pointer; 31 | } 32 | 33 | .list__element:hover { 34 | --tw-bg-opacity: 1; 35 | background-color: rgba(107, 114, 128, var(--tw-bg-opacity)); 36 | } 37 | 38 | /* Custom, iPhone Retina */ 39 | @media only screen and (min-width: 320px) { 40 | } 41 | 42 | /* Extra Small Devices, Phones */ 43 | @media only screen and (min-width: 480px) { 44 | } 45 | 46 | /* Small Devices, Tablets */ 47 | @media only screen and (min-width: 768px) { 48 | } 49 | 50 | /* Medium Devices, Desktops */ 51 | @media only screen and (min-width: 992px) { 52 | .list__title { 53 | font-size: 1.25rem; 54 | line-height: 1.75rem; 55 | margin-left: 0.25rem; 56 | margin-right: 0.25rem; 57 | /* padding-top: 1.25rem; */ 58 | padding-bottom: 0.5rem; 59 | font-weight: 700; 60 | display: block; 61 | } 62 | .list__container { 63 | display: flex; 64 | flex-wrap: wrap; 65 | justify-content: flex-start; 66 | } 67 | 68 | .list__element { 69 | --tw-text-opacity: 1; 70 | color: rgba(255, 255, 255, var(--tw-text-opacity)); 71 | font-size: 0.875rem; 72 | line-height: 1.25rem; 73 | padding-left: 0.5rem; 74 | padding-right: 0.5rem; 75 | padding-top: 0.5rem; 76 | padding-bottom: 0.5rem; 77 | margin-left: 0.25rem; 78 | margin-right: 0.25rem; 79 | margin-top: 0.5rem; 80 | margin-bottom: 0.5rem; 81 | --tw-bg-opacity: 1; 82 | background-color: rgba(55, 65, 81, var(--tw-bg-opacity)); 83 | border-radius: 0.5rem; 84 | cursor: pointer; 85 | } 86 | } 87 | 88 | /* Large Devices, Wide Screens */ 89 | @media only screen and (min-width: 1200px) { 90 | } 91 | -------------------------------------------------------------------------------- /styles/components/Header.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | --tw-text-opacity: 1; 4 | color: rgba(243, 244, 246, var(--tw-text-opacity)); 5 | width: 100%; 6 | padding-left: 1rem; 7 | padding-right: 1rem; 8 | margin-left: auto; 9 | margin-right: auto; 10 | justify-content: space-between; 11 | align-items: center; 12 | /* flex-wrap: wrap; */ 13 | /* padding: 1.25rem; */ 14 | padding-top: 2rem; 15 | /* align-items: center; */ 16 | max-width: 1260px; 17 | } 18 | 19 | .logo { 20 | font-weight: 500; 21 | padding-right: 1.5rem; 22 | margin-bottom: 1rem; 23 | } 24 | 25 | .logo__title { 26 | font-size: 1.5rem; 27 | line-height: 2.25rem; 28 | } 29 | 30 | .logo__title__blue { 31 | font-size: 1.5rem; 32 | line-height: 2.25rem; 33 | --tw-text-opacity: 1; 34 | color: rgba(37, 99, 235, var(--tw-text-opacity)); 35 | } 36 | 37 | .logo__title__red { 38 | font-size: 1.5rem; 39 | line-height: 2.25rem; 40 | --tw-text-opacity: 1; 41 | color: rgba(220, 38, 38, var(--tw-text-opacity)); 42 | } 43 | 44 | .open_menu__icon { 45 | cursor: pointer; 46 | user-select: none; 47 | } 48 | 49 | .close_menu__icon { 50 | display: flex; 51 | width: 100%; 52 | cursor: pointer; 53 | align-items: flex-end; 54 | flex-direction: column; 55 | user-select: none; 56 | } 57 | 58 | .menu { 59 | position: fixed; 60 | display: flex; 61 | flex-direction: column; 62 | background: #1e2127; 63 | top: 0; 64 | left: 0; 65 | height: 100%; 66 | overflow-y: hidden; 67 | width: 100%; 68 | padding-left: 1rem; 69 | padding-right: 1rem; 70 | margin-left: auto; 71 | margin-right: auto; 72 | padding-top: 2rem; 73 | z-index: 100; 74 | } 75 | 76 | .menu__items { 77 | padding-top: 3rem; 78 | display: flex; 79 | flex-direction: column; 80 | justify-content: center; 81 | align-items: center; 82 | } 83 | 84 | .menu__item { 85 | /* margin-left: 1rem; */ 86 | line-height: 4rem; 87 | cursor: pointer; 88 | font-size: 1.7rem; 89 | display: block; 90 | /* width: 100%; */ 91 | /* text-align: center; */ 92 | /* text-decoration: underline; */ 93 | } 94 | 95 | .menu__social__item { 96 | margin: 2.8rem; 97 | } 98 | 99 | .nav { 100 | display: none; 101 | /* display: flex; */ 102 | /* flex-wrap: wrap; */ 103 | /* justify-content: space-between; */ 104 | /* font-size: 1rem; */ 105 | /* line-height: 1.5rem; */ 106 | } 107 | 108 | .nav__items { 109 | display: flex-col; 110 | align-items: center; 111 | justify-content: flex-start; 112 | } 113 | 114 | .nav__item { 115 | margin-left: 1.25rem; 116 | margin-right: 1.25rem; 117 | cursor: pointer; 118 | font-size: 1.3rem; 119 | /* text-transform: uppercase; */ 120 | } 121 | 122 | .nav__search { 123 | display: none; 124 | } 125 | 126 | .nav__item:hover { 127 | --tw-text-opacity: 1; 128 | color: rgba(165, 180, 252, var(--tw-text-opacity)); 129 | } 130 | 131 | /* Custom, iPhone Retina */ 132 | @media only screen and (min-width: 320px) { 133 | } 134 | 135 | /* Extra Small Devices, Phones */ 136 | @media only screen and (min-width: 480px) { 137 | } 138 | 139 | /* Small Devices, Tablets */ 140 | @media only screen and (min-width: 768px) { 141 | .container { 142 | padding-left: 6rem; 143 | padding-right: 6rem; 144 | } 145 | .menu { 146 | padding-left: 6rem; 147 | padding-right: 6rem; 148 | } 149 | } 150 | 151 | /* Medium Devices, Desktops */ 152 | @media only screen and (min-width: 992px) { 153 | .open_menu__icon { 154 | display: none; 155 | } 156 | .nav { 157 | display: flex; 158 | flex-direction: column; 159 | align-items: flex-start; 160 | justify-content: flex-start; 161 | } 162 | .container { 163 | justify-content: flex-start; 164 | } 165 | .nav__item { 166 | font-size: 1.1rem; 167 | } 168 | .nav__search { 169 | display: block; 170 | margin-left: auto; 171 | } 172 | .nav__wrapper { 173 | display: flex; 174 | flex-direction: column; 175 | justify-content: space-between; 176 | } 177 | /* .container { */ 178 | /* padding-left: 10rem; */ 179 | /* padding-right: 10rem; */ 180 | /* } */ 181 | } 182 | 183 | /* Large Devices, Wide Screens */ 184 | @media only screen and (min-width: 1200px) { 185 | /* .container { */ 186 | /* padding-left: 15rem; */ 187 | /* padding-right: 15rem; */ 188 | /* } */ 189 | } 190 | 191 | @media only screen and (min-height: 1200px) { 192 | .container { 193 | padding-top: 4rem; 194 | } 195 | } 196 | -------------------------------------------------------------------------------- /styles/components/Layout.module.css: -------------------------------------------------------------------------------- 1 | .main { 2 | display: flex; 3 | flex: 1; 4 | width: 100%; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | margin-left: auto; 9 | margin-right: auto; 10 | margin-top: 4rem; 11 | margin-bottom: 1.75rem; 12 | padding-left: 1rem; 13 | padding-right: 1rem; 14 | max-width: 1260px; 15 | } 16 | 17 | /* Custom, iPhone Retina */ 18 | @media only screen and (min-width: 320px) { 19 | } 20 | 21 | /* Extra Small Devices, Phones */ 22 | @media only screen and (min-width: 480px) { 23 | } 24 | 25 | /* Small Devices, Tablets */ 26 | @media only screen and (min-width: 768px) { 27 | .main { 28 | padding-left: 6rem; 29 | padding-right: 6rem; 30 | } 31 | } 32 | 33 | /* Medium Devices, Desktops */ 34 | @media only screen and (min-width: 992px) { 35 | /* .main { */ 36 | /* padding-left: 10rem; */ 37 | /* padding-right: 10rem; */ 38 | /* } */ 39 | } 40 | 41 | /* Large Devices, Wide Screens */ 42 | @media only screen and (min-width: 1200px) { 43 | /* .main { */ 44 | /* padding-left: 15rem; */ 45 | /* padding-right: 15rem; */ 46 | /* } */ 47 | } 48 | 49 | @media only screen and (min-height: 1200px) { 50 | .main { 51 | padding-top: 6rem; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /styles/components/Pagination.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | margin-top: 2rem /* 24px */; 3 | display: flex; 4 | justify-content: flex-start; 5 | padding-left: 0px; 6 | list-style-type: none; 7 | margin-bottom: 2rem /* 8px */; 8 | } 9 | 10 | .page__prev { 11 | position: relative; 12 | display: block; 13 | padding-top: 0.5rem /* 8px */; 14 | padding-bottom: 0.5rem /* 8px */; 15 | padding-left: 0.75rem /* 12px */; 16 | padding-right: 0.75rem /* 12px */; 17 | line-height: 1.25; 18 | border-radius: 0.75rem /* 12px */; 19 | --tw-bg-opacity: 1; 20 | background-color: rgba(79, 70, 229, var(--tw-bg-opacity)); 21 | border-width: 1px; 22 | --tw-border-opacity: 1; 23 | border-color: rgba(31, 41, 55, var(--tw-border-opacity)); 24 | --tw-text-opacity: 1; 25 | color: rgba(229, 231, 235, var(--tw-text-opacity)); 26 | margin-right: 0.25rem /* 4px */; 27 | } 28 | 29 | .page__prev:hover { 30 | --tw-bg-opacity: 1; 31 | background-color: rgba(99, 102, 241, var(--tw-bg-opacity)); 32 | cursor: pointer; 33 | } 34 | 35 | .page__number { 36 | position: relative; 37 | display: block; 38 | padding-top: 0.5rem /* 8px */; 39 | padding-bottom: 0.5rem /* 8px */; 40 | padding-left: 0.75rem /* 12px */; 41 | padding-right: 0.75rem /* 12px */; 42 | line-height: 1.25; 43 | border-radius: 0.75rem /* 12px */; 44 | --tw-bg-opacity: 1; 45 | background-color: rgba(79, 70, 229, var(--tw-bg-opacity)); 46 | border-width: 1px; 47 | --tw-border-opacity: 1; 48 | border-color: rgba(31, 41, 55, var(--tw-border-opacity)); 49 | --tw-text-opacity: 1; 50 | color: rgba(229, 231, 235, var(--tw-text-opacity)); 51 | margin-right: 0.25rem /* 4px */; 52 | } 53 | 54 | .page__number:hover { 55 | --tw-bg-opacity: 1; 56 | background-color: rgba(99, 102, 241, var(--tw-bg-opacity)); 57 | cursor: pointer; 58 | } 59 | 60 | .page__next { 61 | margin-left: auto; 62 | position: relative; 63 | display: block; 64 | padding-top: 0.5rem /* 8px */; 65 | padding-bottom: 0.5rem /* 8px */; 66 | padding-left: 0.75rem /* 12px */; 67 | padding-right: 0.75rem /* 12px */; 68 | line-height: 1.25; 69 | border-radius: 0.75rem /* 12px */; 70 | --tw-bg-opacity: 1; 71 | background-color: rgba(79, 70, 229, var(--tw-bg-opacity)); 72 | border-width: 1px; 73 | --tw-border-opacity: 1; 74 | border-color: rgba(31, 41, 55, var(--tw-border-opacity)); 75 | --tw-text-opacity: 1; 76 | color: rgba(229, 231, 235, var(--tw-text-opacity)); 77 | margin-right: 0.25rem /* 4px */; 78 | } 79 | 80 | .page__next:hover { 81 | --tw-bg-opacity: 1; 82 | background-color: rgba(99, 102, 241, var(--tw-bg-opacity)); 83 | cursor: pointer; 84 | } 85 | -------------------------------------------------------------------------------- /styles/components/Post.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | 4 | width: 100%; 5 | /* justify-content: center; */ 6 | /* align-items: center; */ 7 | padding-top: 1rem; 8 | padding-bottom: 1.5rem; 9 | background-color: #1e2127; 10 | border-radius: 0.5rem; 11 | margin-top: 1rem; 12 | cursor: pointer; 13 | /* --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), */ 14 | /* 0 2px 4px -1px rgba(0, 0, 0, 0.06); */ 15 | /* box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), */ 16 | /* var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); */ 17 | } 18 | 19 | .item { 20 | width: 100%; 21 | display: flex; 22 | flex-direction: column; 23 | } 24 | 25 | .header { 26 | display: flex; 27 | justify-content: space-between; 28 | align-items: center; 29 | } 30 | 31 | .title { 32 | padding-top: 1rem; 33 | font-size: 1.5rem /* 24px */; 34 | line-height: 2rem /* 32px */; 35 | --tw-text-opacity: 1; 36 | color: rgba(209, 213, 219, var(--tw-text-opacity)); 37 | font-weight: 700; 38 | } 39 | 40 | .body { 41 | margin-top: 0.5rem; 42 | } 43 | 44 | .body a { 45 | font-size: 1.5rem; 46 | line-height: 2rem; 47 | --tw-text-opacity: 1; 48 | color: rgba(209, 213, 219, var(--tw-text-opacity)); 49 | font-weight: 700; 50 | } 51 | 52 | .body p { 53 | --tw-text-opacity: 1; 54 | color: rgba(156, 163, 175, var(--tw-text-opacity)); 55 | /* margin-top: 0.5rem; */ 56 | } 57 | 58 | .readmore { 59 | display: flex; 60 | justify-content: space-between; 61 | align-items: center; 62 | font-weight: bold; 63 | } 64 | 65 | .readmore a { 66 | --tw-text-opacity: 1; 67 | color: rgba(209, 213, 219, var(--tw-text-opacity)); 68 | } 69 | 70 | .item:hover .title a { 71 | --tw-bg-opacity: 1; 72 | color: rgba(99, 102, 241, var(--tw-bg-opacity)); 73 | } 74 | 75 | .item:hover .readmore a:after { 76 | /* content: ' »'; */ 77 | content: ' ➜'; 78 | --tw-bg-opacity: 1; 79 | color: rgba(99, 102, 241, var(--tw-bg-opacity)); 80 | transition: 1s; 81 | } 82 | -------------------------------------------------------------------------------- /styles/components/ProjectList.module.css: -------------------------------------------------------------------------------- 1 | .projectlist { 2 | width: 16rem /* 288px */; 3 | } 4 | 5 | .projectlist__title { 6 | font-size: 1.25rem /* 20px */; 7 | line-height: 1.75rem /* 28px */; 8 | margin-left: 0.25rem/* 4px */; 9 | margin-right: 0.25rem/* 4px */; 10 | padding-top: 1.25rem/* 20px */; 11 | padding-bottom: 0.5rem/* 8px */; 12 | font-weight: 700; 13 | } 14 | 15 | .projectlist__item { 16 | margin-left: 0.25rem/* 4px */; 17 | display: flex; 18 | vertical-align: middle; 19 | justify-content: flex-start; 20 | align-items: center; 21 | } 22 | 23 | .projectlist__icon { 24 | width: 2rem; 25 | max-height: 2.8rem; 26 | margin-right: .4rem; 27 | } 28 | 29 | .projectlist__name { 30 | font-size: 1.125rem/* 18px */; 31 | line-height: 1.75rem/* 28px */; 32 | --tw-text-opacity: 1; 33 | color: rgba(209, 213, 219, var(--tw-text-opacity)); 34 | padding: 0.5rem/* 8px */; 35 | cursor: pointer; 36 | } 37 | 38 | .projectlist__name:hover { 39 | --tw-text-opacity: 1; 40 | color: rgba(165, 180, 252, var(--tw-text-opacity)); 41 | } 42 | 43 | 44 | -------------------------------------------------------------------------------- /styles/components/Search.module.css: -------------------------------------------------------------------------------- 1 | .search__wrapper { 2 | padding-bottom: 2rem; 3 | } 4 | 5 | .search__container { 6 | /* display: flex; */ 7 | /* position: relative; */ 8 | /* justify-content: center; */ 9 | } 10 | 11 | .search__input { 12 | position: relative; 13 | --tw-text-opacity: 1; 14 | color: rgba(229, 231, 235, var(--tw-text-opacity)); 15 | width: 100%; 16 | } 17 | 18 | .search__form { 19 | --tw-bg-opacity: 1; 20 | background-color: rgba(55, 65, 81, var(--tw-bg-opacity)); 21 | height: 2.5rem; 22 | padding-left: 1.25rem; 23 | padding-right: 1.25rem; 24 | padding-top: 2rem; 25 | padding-bottom: 2rem; 26 | border-radius: 9999px; 27 | font-size: 1.5rem; 28 | line-height: 1.25rem; 29 | width: 100%; 30 | } 31 | 32 | .search__icon { 33 | position: absolute; 34 | top: 0px; 35 | right: 0px; 36 | --tw-text-opacity: 1; 37 | color: rgba(209, 213, 219, var(--tw-text-opacity)); 38 | margin-top: 1.5rem; 39 | margin-right: 1.5rem; 40 | } 41 | 42 | /* Custom, iPhone Retina */ 43 | @media only screen and (min-width: 320px) { 44 | } 45 | 46 | /* Extra Small Devices, Phones */ 47 | @media only screen and (min-width: 480px) { 48 | } 49 | 50 | /* Small Devices, Tablets */ 51 | @media only screen and (min-width: 768px) { 52 | .main { 53 | padding-left: 6rem; 54 | padding-right: 6rem; 55 | } 56 | } 57 | 58 | /* Medium Devices, Desktops */ 59 | @media only screen and (min-width: 992px) { 60 | .search__wrapper { 61 | position: relative; 62 | padding-bottom: 0rem; 63 | } 64 | 65 | .search__container { 66 | display: flex; 67 | position: relative; 68 | margin-left: auto; 69 | margin-right: auto; 70 | align-items: center; 71 | justify-content: center; 72 | } 73 | 74 | .search__input { 75 | position: relative; 76 | --tw-text-opacity: 1; 77 | color: rgba(229, 231, 235, var(--tw-text-opacity)); 78 | width: 18rem /* 288px */; 79 | } 80 | 81 | .search__form { 82 | --tw-bg-opacity: 1; 83 | background-color: rgba(55, 65, 81, var(--tw-bg-opacity)); 84 | height: 2.5rem /* 40px */; 85 | margin-top: 0rem; 86 | padding-top: 0rem; 87 | padding-bottom: 0rem; 88 | padding-left: 1.25rem /* 20px */; 89 | padding-right: 1.25rem /* 20px */; 90 | padding-right: 2.5rem /* 40px */; 91 | border-radius: 9999px; 92 | font-size: 0.875rem /* 14px */; 93 | line-height: 1.25rem /* 20px */; 94 | width: 18rem /* 288px */; 95 | } 96 | 97 | .search__form:focus { 98 | outline: 1px solid transparent; 99 | /* outline-offset: 2px; */ 100 | --tw-bg-opacity: 1; 101 | outline-color: rgba(55, 65, 81, var(--tw-bg-opacity)); 102 | } 103 | 104 | .search__form:hover { 105 | outline: 1px solid transparent; 106 | /* outline-offset: 2px; */ 107 | --tw-bg-opacity: 1; 108 | outline-color: rgba(165, 180, 252, var(--tw-text-opacity)); 109 | } 110 | 111 | .search__icon { 112 | position: absolute; 113 | top: 0px; 114 | right: 0px; 115 | --tw-text-opacity: 1; 116 | color: rgba(209, 213, 219, var(--tw-text-opacity)); 117 | margin-top: 0.75rem /* 12px */; 118 | margin-right: 1rem /* 16px */; 119 | } 120 | } 121 | 122 | /* Large Devices, Wide Screens */ 123 | @media only screen and (min-width: 1200px) { 124 | } 125 | -------------------------------------------------------------------------------- /styles/components/SearchResults.module.css: -------------------------------------------------------------------------------- 1 | .searchresults { 2 | position: absolute; 3 | /* top: 10rem; */ 4 | margin-top: 2rem; 5 | z-index: 10; 6 | --tw-border-opacity: 1; 7 | border-color: rgba(55, 65, 81, var(--tw-border-opacity)); 8 | --tw-bg-opacity: 1; 9 | background-color: rgba(55, 65, 81, var(--tw-bg-opacity)); 10 | --tw-text-opacity: 1; 11 | color: rgba(229, 231, 235, var(--tw-text-opacity)); 12 | width: 100%; 13 | border-radius: 1rem; 14 | } 15 | 16 | .searchresults__count { 17 | padding-left: 1rem; 18 | padding-top: 1rem; 19 | font-size: 1.5rem; 20 | line-height: 2rem; 21 | /* margin-bottom: 0.75rem; */ 22 | } 23 | 24 | .searchresults__container { 25 | padding: 0.75rem; 26 | } 27 | 28 | .posts { 29 | overflow-y: auto; 30 | max-height: 70vh; 31 | } 32 | 33 | 34 | /* Custom, iPhone Retina */ 35 | @media only screen and (min-width: 320px) { 36 | } 37 | 38 | /* Extra Small Devices, Phones */ 39 | @media only screen and (min-width: 480px) { 40 | } 41 | 42 | /* Small Devices, Tablets */ 43 | @media only screen and (min-width: 768px) { 44 | } 45 | 46 | /* Medium Devices, Desktops */ 47 | @media only screen and (min-width: 992px) { 48 | .searchresults { 49 | position: absolute; 50 | top: 2rem /* 80px */; 51 | z-index: 10; 52 | --tw-border-opacity: 1; 53 | border-color: rgba(55, 65, 81, var(--tw-border-opacity)); 54 | --tw-bg-opacity: 1; 55 | background-color: rgba(55, 65, 81, var(--tw-bg-opacity)); 56 | --tw-text-opacity: 1; 57 | color: rgba(229, 231, 235, var(--tw-text-opacity)); 58 | width: 100%; 59 | border-radius: 1rem /* 16px */; 60 | } 61 | 62 | .searchresults__container { 63 | /* padding: 0.75rem; */ 64 | } 65 | 66 | .searchresults__count { 67 | font-size: 1.5rem /* 24px */; 68 | line-height: 2rem /* 32px */; 69 | /* margin-bottom: 0.75rem; */ 70 | } 71 | } 72 | 73 | /* Large Devices, Wide Screens */ 74 | @media only screen and (min-width: 1200px) { 75 | } 76 | -------------------------------------------------------------------------------- /styles/components/SocialList.module.css: -------------------------------------------------------------------------------- 1 | .sociallist { 2 | width: 16rem /* 288px */; 3 | margin-inline: auto; 4 | } 5 | 6 | .sociallist__title { 7 | font-size: 1.25rem; 8 | line-height: 1.75rem; 9 | margin-left: 0.25rem; 10 | margin-right: 0.25rem; 11 | padding-top: 1.25rem; 12 | padding-bottom: 0.5rem; 13 | font-weight: 700; 14 | } 15 | 16 | .sociallist__item { 17 | display: flex; 18 | margin-left: 0.25rem; 19 | vertical-align: middle; 20 | justify-content: flex-start; 21 | align-items: center; 22 | } 23 | 24 | .sociallist__name { 25 | font-size: 1.125rem /* 18px */; 26 | line-height: 1.75rem /* 28px */; 27 | --tw-text-opacity: 1; 28 | color: rgba(209, 213, 219, var(--tw-text-opacity)); 29 | padding: 0.5rem; 30 | cursor: pointer; 31 | } 32 | 33 | .sociallist__name:hover { 34 | --tw-text-opacity: 1; 35 | color: rgba(165, 180, 252, var(--tw-text-opacity)); 36 | } 37 | 38 | /* Icons Only ( in Header ) */ 39 | .sociallist.iconsOnly { 40 | margin-top: 1rem; 41 | width: 100%; 42 | } 43 | .sociallist.iconsOnly ul { 44 | display: flex; 45 | align-items: center; 46 | justify-content: center; 47 | flex-wrap: wrap; 48 | width: 100%; 49 | gap: 1.75rem; 50 | } 51 | .iconsOnly .sociallist__title, 52 | .iconsOnly .sociallist__name { 53 | display: none; 54 | } 55 | -------------------------------------------------------------------------------- /styles/donate.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | width: 100%; 5 | align-items: center; 6 | } 7 | 8 | .title { 9 | font-size: 1.25rem; 10 | font-weight: 700; 11 | line-height: 1.75rem; 12 | text-transform: uppercase; 13 | margin-bottom: 2rem; 14 | align-items: center; 15 | } 16 | 17 | .card { 18 | display: flex; 19 | flex-direction: column; 20 | padding-top: 0.5rem; 21 | padding-bottom: 0.5rem; 22 | --tw-bg-opacity: 1; 23 | background-color: rgba(45, 55, 71, var(--tw-bg-opacity)); 24 | border-radius: 1.5rem; 25 | margin-bottom: 1.5rem; 26 | width: 50%; 27 | } 28 | 29 | .card p { 30 | --tw-text-opacity: 1; 31 | color: rgba(209, 213, 219, var(--tw-text-opacity)); 32 | margin-left: 2rem; 33 | font-size: 1.5rem; 34 | display: flex; 35 | align-items: center; 36 | } 37 | 38 | .card span { 39 | --tw-text-opacity: 1; 40 | color: rgba(2, 213, 219, var(--tw-text-opacity)); 41 | } 42 | 43 | .card span:hover { 44 | --tw-text-opacity: 1; 45 | color: rgba(165, 180, 252, var(--tw-text-opacity)); 46 | } 47 | 48 | .card a span { 49 | margin-left: 0.5rem; 50 | } 51 | 52 | .img_icon { 53 | width: 2rem; 54 | max-height: 2.8rem; 55 | margin-right: 0.4rem; 56 | } 57 | 58 | .img_icon_paypal { 59 | max-height: 2.8rem; 60 | margin-right: 0.4rem; 61 | } 62 | -------------------------------------------------------------------------------- /utils/index.js: -------------------------------------------------------------------------------- 1 | export const sortByDate = (a, b) => { 2 | return new Date(b.frontmatter.date) - new Date(a.frontmatter.date) 3 | } 4 | --------------------------------------------------------------------------------