Dear Future Self,
After being unhappy with the look of this site for a while, I have finally decided to learn Jekyll from scratch and create my own theme. Initially I followed this step by step tutorial from the Jekyll docs to get a grasp of how Jekyll works.
Most of the themes that I found were not that appealing, and somewhat inspired by bettermotherfuckingwebsite.com I decided to make my own. There’s a few things that I’d like to highlight, is nothing but as a reminder that the decisions you’ve made were not without thought.
Initially the colour scheme was black on white with blue links. After some thought a syntax highlighting colour scheme was chosen - solarized. The creator has kindly included a scss snippet in the README.md.
Syntax highlighting was a little more difficult to get working. Jekyll’s default syntax highlighter rouge is compatible with pygments, and a kind github user has made a solarized theme for pygments. The code highlighting uses the opposite solarized theme for contrast. Below is some example code, and a link to some alternative themes if you ever decide to go for a change.
/**
* Does a thing
*/
function helloWorld(param1, param2) {
var something = 0;
// Do something
if (2.0 % 2 == something) {
console.log('Hello, world!');
} else {
return null;
}
// @TODO comment
}
There is code which can switch the colour scheme and save the change into a cookie, but this won’t work until a custom domain is used as github pages does not allow cookies.
A monospace font and 80 character width was chosen pretty arbitrary, at the possible cost of legibility. I suspect that you’ll probably regret this decision, but by the time you change your mind I hope you’ve got a better sense of design. At the moment the only downside is that inline code either looks no different from everything else, or it has to be highlighted using colour which makes it stand out quite a lot. Perhaps in future this will have a workaround to not be as jarring.
A very simple navbar exists at the top of the screen. When selecting posts or archive, a secondary navbar of posts appears. Unfortunately a magic number is used to indent this, but some CSS magic should be possible. A small liquid script is used to highlight the current page. Initially the navbar was inspired by the output of ls, with a future goal of being able to navigate a tree of files, but this idea has been abandoned for now.
Posts from my old wordpress site have been imported. I am still considering if posts from reddit should also be imported, as some of the threads are more discussion focused. Hopefully I will also slowly write about projects and creations that I’ve previously made to flesh this out as a store of my memories.
The posts navbar uses the filename to identify posts, which is extracted by the following liquid script:
post.url | downcase | split: "/" | last | split: "." | first
The posts page uses the title, which could be separate from the filename. At the moment this page simply links to the 10 most recent posts. An optional font matter for mathjax via cdnjs can be enabled. Currently there are no posts which uses mathjax, but when it is used, a selection of third party extensions and thorough look into the configuration is warranted.
A quick estimate of the reading time is calculated using this liquid script and placed at the start of every post. This is also an area that could be improved, perhaps by factoring in images and scripts, or even developing something special.
Archive is perhaps the most incomplete section. Currently all posts are listed by date reverse chronologically. A separate page should be created under archive which sorts by tags, by author and maybe even time read. Javascript based searching (or third party) and tree navigation are also extensions that seem useful.
There’s a lot that I’d still like to do. Learning firebase and adding firebase integration for dynamic content, learning and moving over to hakyll and circle ci, comments via staticman, google analytics, considering a gov.uk design, a rss and atom feed, and other jamstack apis.
So given all of this, I hope you’re happy with the amount of effort that I’ve put into this redesign. Hopefully you’ll be happy enough to not need to fiddle with it too much!
Best,
Past Self