Website updates

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
+		find content/blog/ -type f -name '*.md' | sort -r | head -n 10 | while read file; do
-			getIntro "$file"
+			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"

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.

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%);
+}
+```
+<https://git.jonathanh.co.uk/jab2870/browser-overides/src/branch/master/less/global.less>
+
+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;
+}
+```
+<https://git.jonathanh.co.uk/jab2870/Dotfiles/src/branch/master/NOSTOW/firefox/userChrome.css#L18-L25>
+
+## 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.
+
+
+
+
+

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"
+}
+```
+

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: <https://paypal.me/jab2870>
+
+## 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: <https://lbry.tv/$/invite/@jonathanh:7> - 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: <https://m.do.co/c/e6f44c36362f> - 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: <http://referme.to/KZ6bPZx> - (UK Only) If you sign up for Smarty sim card, we both get a free month.
+* Curve: <http://www.curve.app/join#DWGGW26E> - All your cards in one. If you sign up, we each get £5

templates/blog.html

@@ -67,7 +67,7 @@ $body$
 			</aside>
 		</div>
 		<footer>
-			<a href="https://paypal.me/jab2870">Buy me a coffee?</a>
+			<a href="/help-me-out.html">Help me out</a>
 			<a href="https://git.jonathanh.co.uk/jab2870/Website">Website Source</a>
 		</footer>
 	</body>