Website updates

Jonathan Hodgson 4 years ago
parent 41fe56cf13
commit 44e710a464
  1. 10
  2. 0
  3. 0
  4. 0
  5. 1
  6. 120
  7. 105
  8. 20
  9. 2

@ -1,7 +1,7 @@
#!/usr/bin/env bash
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]+-//'
@ -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" &
@ -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"
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"

@ -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.

@ -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
- 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]( 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]( 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]( that adds stylesheets to web pages. I then just use the extension manifest file to specify which stylesheets should be loaded and when:
"content_scripts": [
"matches": ["*://**"],
"css": [ "css/archwiki.css" ],
"run_at": "document_start"
"matches": ["*://**","*://**"],
"css": [ "css/amazon.css" ],
"run_at": "document_start"
"matches": ["*://**","*://**"],
"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.
@import "./gruvbox-colours.less";
background: #fff - @gb-dm-bg0;
filter: invert(100%);
background: #fff - @gb-dm-bg0;
filter: invert(100%);
filter: invert(100%);
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.
/* 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]( and [Privacy Badger](, both are built by the [EFF]( and I think are essential in my ongoing effort to be tracked as little as possible.

@ -0,0 +1,105 @@
title: Building a ZSH prompt
- Linux
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]( with the [Power Level 9k]( 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](
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.
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]( 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]( 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.
# 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:
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+=" "
if [ -n "$modified" ]; then
ret+=" "
if [ -n "$staged" ]; then
ret+=" "
ret="$(echo "$ret" | sed -e 's/ *$//')"
echo "$ret"
echo "$color"

@ -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: <$/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: <> - 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

@ -67,7 +67,7 @@ $body$
<a href="">Buy me a coffee?</a>
<a href="/help-me-out.html">Help me out</a>
<a href="">Website Source</a>