From 44e710a464a7ff75317df995d3d7bb27c26c83ee Mon Sep 17 00:00:00 2001 From: Jonathan Hodgson Date: Sat, 4 Apr 2020 14:16:37 +0100 Subject: [PATCH] Website updates --- build.sh | 10 +- .../001-fuzzy-search-hashcat-modes.md | 0 content/{ => blog}/002-the-switch-to-zsh.md | 0 content/{ => blog}/003-exchange-mutt.md | 0 .../004-tools-that-make-my-life-easier.md | 1 + content/blog/005-keyboard-driven-firefox.md | 120 ++++++++++++++++++ content/blog/006-building-a-zsh-prompt.md | 105 +++++++++++++++ content/help-me-out.md | 20 +++ templates/blog.html | 2 +- 9 files changed, 252 insertions(+), 6 deletions(-) rename content/{ => blog}/001-fuzzy-search-hashcat-modes.md (100%) rename content/{ => blog}/002-the-switch-to-zsh.md (100%) rename content/{ => blog}/003-exchange-mutt.md (100%) rename content/{ => blog}/004-tools-that-make-my-life-easier.md (99%) create mode 100644 content/blog/005-keyboard-driven-firefox.md create mode 100644 content/blog/006-building-a-zsh-prompt.md create mode 100644 content/help-me-out.md diff --git a/build.sh b/build.sh index 32ef21e..7c055f7 100755 --- a/build.sh +++ b/build.sh @@ -1,7 +1,7 @@ #!/usr/bin/env bash getBlogSlug(){ - echo "$1" | sed 's/^content\///' | sed 's/.md$/.html/' | sed -E 's/[0-9]+-/\/blog\//' + echo "$1" | sed 's/^content\//\//' | sed 's/.md$/.html/' | sed -E 's/[0-9]+-//' } blog(){ @@ -54,7 +54,7 @@ index(){ local template="$(echo "" | pandoc --template=templates/blog.html -f markdown -t html5 -M frontpage 2> /dev/null )" # First loop makes all the intros needed and stores them in tmp/intros - find content/ -type f -name '*.md' | sort -r | head -n 10 | while read file; do + find content/blog/ -type f -name '*.md' | sort -r | head -n 10 | while read file; do makeIntro "$file" & done wait @@ -62,8 +62,8 @@ index(){ # Once they are created, we will put them in, in order ( echo "$template" | sed -n '1,/#CONTENT#/p' | head -n -1 - find content/ -type f -name '*.md' | sort -r | head -n 10 | while read file; do - getIntro "$file" + find content/blog/ -type f -name '*.md' | sort -r | head -n 10 | while read file; do + grep -Eq '^draft: true' "$file" || getIntro "$file" done echo "$template" | sed -n '/#CONTENT#/,$p' | sed '1d' ) > public_html/index.html @@ -110,7 +110,7 @@ tags(){ # Loops through each blog and puts it in tag lists, although only blogs that have changed local newer="" [ -f tmp/lastTagUpdate ] && newer="-newer tmp/lastTagUpdate" - find content/ -type f -name '*.md' $newer | while read file; do + find content/blog/ -type f -name '*.md' $newer | while read file; do sed -n '/---/,/---/p' "$file" | sed '/^---$/d' | sed '/^$/,$d' | yq -r 'if ( .tags | type ) == "array" then .tags else [ .tags ] end | join("\n")' | while read tag; do # Adds the file to the tags list if it's not already in there grep -q "$file" tmp/tag/"$tag" 2> /dev/null || echo "$file" >> tmp/tag/"$tag" diff --git a/content/001-fuzzy-search-hashcat-modes.md b/content/blog/001-fuzzy-search-hashcat-modes.md similarity index 100% rename from content/001-fuzzy-search-hashcat-modes.md rename to content/blog/001-fuzzy-search-hashcat-modes.md diff --git a/content/002-the-switch-to-zsh.md b/content/blog/002-the-switch-to-zsh.md similarity index 100% rename from content/002-the-switch-to-zsh.md rename to content/blog/002-the-switch-to-zsh.md diff --git a/content/003-exchange-mutt.md b/content/blog/003-exchange-mutt.md similarity index 100% rename from content/003-exchange-mutt.md rename to content/blog/003-exchange-mutt.md diff --git a/content/004-tools-that-make-my-life-easier.md b/content/blog/004-tools-that-make-my-life-easier.md similarity index 99% rename from content/004-tools-that-make-my-life-easier.md rename to content/blog/004-tools-that-make-my-life-easier.md index cdce8db..4d22c51 100644 --- a/content/004-tools-that-make-my-life-easier.md +++ b/content/blog/004-tools-that-make-my-life-easier.md @@ -149,6 +149,7 @@ Anyone who has used the terminal a couple of times knows about the `cat` command If you are not piping the output to another file, Bat will syntax highlight your code, it will add line numbers and, if you're in a git repo, it will show you which lines have changed since your last commit. + --- This is by no means an extensive list. There are many tools I use that I have not listed here, but these are the ones that have made the biggest difference to my workflow. diff --git a/content/blog/005-keyboard-driven-firefox.md b/content/blog/005-keyboard-driven-firefox.md new file mode 100644 index 0000000..8715a79 --- /dev/null +++ b/content/blog/005-keyboard-driven-firefox.md @@ -0,0 +1,120 @@ +--- +title: Making Firefox the browser to rule them all +date: 2020-04-04 +description: So much of what we do these days is in a browser, so I thought it would be worth while taking some time to optimize / customize by browser +tags: + - Firefox +--- + +We spend a lot of time these days in a browser. Given that , I thought it might be worth sharing some of the changes I have made to my browser. I use Firefox with a very select few extensions. As a general rule, I don't like extensions, although there are a couple of open source ones that I run, as well as a few I have made myself. + +## Vim Navigation + +Since using Qutebrowser, I have loved having the ability to browse the web from my keyboard. There are times that I use the mouse, but they are rare now. Until recently, I was using [a fork of Vim Vixen](https://git.jonathanh.co.uk/jab2870/Vim-Vixen). This fork didn't do much more than change the colour scheme and I added the ability to set a proxy server using it. However, I have recently been experimenting with [Tridactyl](https://github.com/tridactyl/tridactyl). I plan to write a blog post about it in the near future but if you are looking for a browser plugin to give you Vim-like navigation, both Vim-Vixen and Tridactyl are excellent choices. + +I think it is fair to say that Tridactyl does more, that isn't always a benefit though. A tool with fewer features is far more likely to contain serious bugs. However, for me, the ability to easily call external scripts was enough to make the switch. + +## Custom Stylesheets + +Almost all websites are dark text on a light background. I like a dark background with light text. There are a lot of plugins that add dark mode, and a lot that allow you to use custom stylesheets. However, none of the ones I looked at allowed me to easily keep a repository of stylesheets locally. + +I decided I would write a [very simple extension](https://git.jonathanh.co.uk/jab2870/browser-overides) that adds stylesheets to web pages. I then just use the extension manifest file to specify which stylesheets should be loaded and when: + +```json + "content_scripts": [ + { + "matches": ["*://*.archlinux.org/*"], + "css": [ "css/archwiki.css" ], + "run_at": "document_start" + }, + { + "matches": ["*://*.amazon.com/*","*://*.amazon.co.uk/*"], + "css": [ "css/amazon.css" ], + "run_at": "document_start" + }, + { + "matches": ["*://*.bbc.com/*","*://*.bbc.co.uk/*"], + "css": [ "css/bbc.css" ], + "run_at": "document_start" + }, + "...":"..." + ] +``` + +This makes it very easy to version control and maintain, and means I am not putting my trust in a plugin maintainer. + +I also have a default stylesheet that I load on web pages that don't have custom stylesheet applied to them. It is not perfect but it is simple and works well enough 90% of the time. + +```css +@import "./gruvbox-colours.less"; + +html{ + background: #fff - @gb-dm-bg0; + filter: invert(100%); +} + +body{ + background: #fff - @gb-dm-bg0; +} + +img,svg,video{ + filter: invert(100%); +} + +#vimvixen-console-frame{ + filter: invert(100%); +} + +#cmdline_iframe{ + filter: invert(100%); +} +``` + + +It is quite simple. I set the background of the html and body elements to the inverse of the colour I like ( in this case a gruvbox dark colour ), then inverse everything. This works well for most things. I then invert again images and videos which makes them the colour they should be. + +This is not a perfect solution, a notable problem is that background images appear inverted. For me though, it is good enough. If a website really doesn't work well with this applied, I can simply disable the extension. + +## Full screen + +Since using Qutebrowser and Surf, I have liked having minimal browser interfaces. Since Tridactyl or VimVixen mean that I very rarely need to touch the top bar, I would prefer not to have it (or at least not see it). Fortunately, if you enable the `toolkit.legacyUserProfileCustomizations.stylesheet` flag, you can customize the look of the browser using CSS. + +To enable the flag: + +1. Open about:config +1. Set `toolkit.legacyUserProfileCustomizations.stylesheets` to True +1. Restart Firefox + +You can then create a file called `userChrome.css` + +1. Open about:support +1. Click on `Profile Folder` -> `Open Folder` +1. Create a sub-folder named `chrome` +1. Change into the new folder +1. Create a file named `userChrome.css` + +Now, you can add styles to the `userChrome.css` file to alter how Firefox looks. + +The following will hide the url bar and the tabs, until you move your mouse to the top of the screen. + +```css +/* hides the url bar unless I hover over it */ +#navigator-toolbox { + margin-top: -72px; + transition: 0.2s margin-top ease-out; + border-bottom-width: 0; +} +#navigator-toolbox:hover { + margin-top: 0; +} +``` + + +## Other extensions + +I only use 2 other extensions, those are [HTTPS Everywhere](https://www.eff.org/https-everywhere) and [Privacy Badger](https://privacybadger.org/), both are built by the [EFF](https://www.eff.org/) and I think are essential in my ongoing effort to be tracked as little as possible. + + + + + diff --git a/content/blog/006-building-a-zsh-prompt.md b/content/blog/006-building-a-zsh-prompt.md new file mode 100644 index 0000000..326571d --- /dev/null +++ b/content/blog/006-building-a-zsh-prompt.md @@ -0,0 +1,105 @@ +--- +title: Building a ZSH prompt +tags: + - Linux + - ZSH +description: There are many frameworks out there to help you build a prompt, I thought I'd see how far I could get without one. +date: 2020-03-24 +draft: true +--- + +Until recently, I was using [oh-my-zsh](https://github.com/ohmyzsh/ohmyzsh) with the [Power Level 9k](https://github.com/Powerlevel9k/powerlevel9k) prompt. + +In part of my effort to understand how different parts of my system works, and to reduce my reliance on some libraries, I decided to see if I could get what I needed without them. In this blog post, I am going to focus on my prompt configuration. + +If you want to follow along, my configuration can be found in [my dotfiles](https://github.com/Jab2870/dotfiles/blob/master/shells/zsh/includes/promptconfig.zsh). + +My prompt currently looks something like this: + +![My Prompt](/assets/prompt/prompt.png) + +## Basics + +Zsh simply prints the variables `PROMPT` and `RPROMPT` when drawing the left and right prompts respectively. `PROMPT` is roughly equivalent to the `PS1` variable in bash. + +By setting the variable, you can change how the prompt works. E.g. + +``` +oldPrompt $ PROMPT="new prompt > " +new prompt > ls +Documents Downloads GitRepos +new prompt > █ +``` + +## ZSH Hooks + +Zsh has a concept called hooks. These allow you to run a function (or functions) automatically at certain times. + +For the purposes of setting my prompt, I want to run a function to set `PROMPT` and `RPROMPT` before the prompt is drawn. This can be done with the `precmd` hook. + +```zsh +set_prompts(){ + PROMPT="$ " + RPROMPT="" +} +zle -N set_prompts +autoload -U add-zsh-hook +add-zsh-hook precmd set_prompts +``` + +This defines a function `set_prompts` and it will be run just before the prompt is drawn, every time. We can therefore use it to build the prompt. + +## Drawing segments + +I like the arrow style that was made popular by [Powerline](https://github.com/powerline/powerline). To achieve this, you will need a font that contains the powewline glyphs. If you don't have one, I highly recommend the [Nerd Fonts](https://www.nerdfonts.com/) project that aggregates a lot of icons as well as the powerline symbols. It even includes a script that allows you to add them to your favourite font. + + + +## Exit Code + +In ZSH (and most other shells), the exit code of the previous command is available in the special `$?` variable. If we want the exit code of the last command run, we need to assign this to a variable first. + +```bash +# Get the return status of the previous command +local RETVAL=$? +``` + +## Git + +I use Git a lot. It is useful to tell, at a glance, which branch I'm on, which tag I'm on and what the state of repository is. The function is quite simple: + +```bash +prompt_git(){ + local repoTopLevel="$(command git rev-parse --show-toplevel 2> /dev/null)" + if [ -n "$repoTopLevel" ]; then + local branch="$(git branch --show-current 2> /dev/null)" + local tag="$(git describe --tags --exact-match HEAD 2> /dev/null)" + local color="green" + local ret="" + [ -n "$branch" ] && ret="$branch " + [ -n "$tag" ] && ret+="$tag " + [ -n "$ret" ] || ret="$(git rev-parse --short HEAD 2> /dev/null)" + local repoTopLevel="$(command git rev-parse --show-toplevel 2> /dev/null)" + local untrackedFiles=$(command git ls-files --others --exclude-standard "${repoTopLevel}" 2> /dev/null) + local modified=$(command git diff --name-only 2> /dev/null) + local staged=$(command git diff --staged --name-only 2> /dev/null) + + if [ -n "$untrackedFiles" ]; then + ret+=" " + color="orange1" + fi + if [ -n "$modified" ]; then + ret+=" " + color="orange1" + fi + if [ -n "$staged" ]; then + ret+=" " + color="orange1" + fi + fi + ret="$(echo "$ret" | sed -e 's/ *$//')" + echo "$ret" + echo "$color" +} +``` + diff --git a/content/help-me-out.md b/content/help-me-out.md new file mode 100644 index 0000000..4e21332 --- /dev/null +++ b/content/help-me-out.md @@ -0,0 +1,20 @@ +--- +title: Help Me Out +--- + +I hate websites tracking me so I won't be tracking you if you visit my website. This makes monetizing the website almost impossible. If you like what I do, and want to support the content I put on this website, there are a few ways you can do it. + + +## Directly + +* Bitcoin Wallet: 132AM5imvDiWXJQGfMiGBmvnfaChaUTaQ6 +* PayPal Me: + +## Indirectly + +If you can't afford (or don't want) to support me, that's fine. The content I put out will always be freely available and without any form of tracking. There are some affiliate links you can use that I will get a kick back from. Be warned though, some of these services might track you - unfortunately that is out of my control. If you don't want them to, don't click the links. + +* Lbry: - Lbry is a decentralised video sharing platform. By signing up with this link, they give me some of the crypto currency the platform is built around. +* Digital Ocean: - Digital ocean is a hosting platform. By using this link, you will get $100 to spend (it expires after 60 days). I will also get $25 if you use it. +* Smarty: - (UK Only) If you sign up for Smarty sim card, we both get a free month. +* Curve: - All your cards in one. If you sign up, we each get £5 diff --git a/templates/blog.html b/templates/blog.html index e8a5f10..8f3a597 100644 --- a/templates/blog.html +++ b/templates/blog.html @@ -67,7 +67,7 @@ $body$