Browse Source

Website updates

master
Jonathan Hodgson 1 year ago
parent
commit
b356af32a4
  1. 10
      build.sh
  2. 0
      content/blog/001-fuzzy-search-hashcat-modes.md
  3. 0
      content/blog/002-the-switch-to-zsh.md
  4. 0
      content/blog/003-exchange-mutt.md
  5. 1
      content/blog/004-tools-that-make-my-life-easier.md
  6. 120
      content/blog/005-keyboard-driven-firefox.md
  7. 105
      content/blog/006-building-a-zsh-prompt.md
  8. 20
      content/help-me-out.md
  9. 2
      templates/blog.html

10
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"

content/001-fuzzy-search-hashcat-modes.md → content/blog/001-fuzzy-search-hashcat-modes.md

content/002-the-switch-to-zsh.md → content/blog/002-the-switch-to-zsh.md

content/003-exchange-mutt.md → content/blog/003-exchange-mutt.md

content/004-tools-that-make-my-life-easier.md → 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.

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

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

20
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

2
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>

Loading…
Cancel
Save