The site is styled using the W3.css library, while the frontpage grid of ‘postcards’ is done using a jekyll plugin. The postcards system also means dynamic searches for posts can be achieved in a static site with some javascript.

Code for this site in held in git bitbucket so feel free to clone or wander the code.

CSS

Intially I’d used an out-the-box jekyll theme, basically-basic, which was close but not how I wanted the site to look. Trying to work with someone else’s stylesheets was proving way too frustrating so I stripped it all out and replaced with w3.css which is a standardised CSS library. The end result was much less CSS and a more systematic approach to styling.

The customisation and tweaks made are all in the one main.css file at assets/stylesheets/main.css

I still need to work on the semantic layout and accessibility markup.

postcards

The site front page is a grid of ‘postcards’ which are provide a compact extract of each post. This is done by using the jekyll-multipost plugin. On building the site, each post creates two outputs: the normal full post page eg Diablo and an associated postcard Diablo postcard.

Both outputs utilise thier own layouts and includes, and the postcard is created under a separated directory structure /postcard controlled by the _config.yml When the front page is built it loops through all posts as expected but instead of procesing the post, it fetches the content of the associated postcard instead using another plugin jekyll_remote_include and uses that. Once downside of this technique is that remote_include needs a running HTTP server offering the site to provide the postcard content. I do this by running lighttpd in background that serves from the _site directory.

searching

The major advantage of these pre-prepared postcards is they are available as the results of a dynamic search. Each post is assigned arbitary tags - this post has jekyll, css. Posts and postcards create buttons for these tags that have a HTTP link such as /tag/?tag=css Since the whole point of Jekyll is to produce a static site there is no server running to interpret the URL ? parameter.

After a lot of internet searching and trial and error the solution I built is to have the ‘tag’ page have its own layout that provides a bare bones page and loads a javascript. When the tag/index.html page is loaded, the javascript is invoked. It collects the URL string, extracts the parameter (in this instance css and searches a JSON format file to obtain a list of postcards that match to search. The postcards are fetched and inserted into the tag.index.html page DOM. The JSON file is produced during site building and acts as an index of content.

Creating the JSON

One of Jekylls understated abilities is to specify arbitary output files. The pages/posts.liquid file contains the liquid markdown code to structure data into a JSON format dataset - in this example of all the posts known in the site being built. The output is a file at _site/posts.json

 
[
	{% assign comma = "," | cgi_escape %}
	{% assign posts = site.posts | where:"layout", "post"  %}
	{% for p in posts  %}
		{% assign t = p.tags | join: "," | downcase | cgi_escape | split: comma %} {%comment%}escape speces with +{%endcomment%}
		{
		  "title"    : "{{ p.title }}",
		  "taxonomy" : "{{ p.taxonomy }}",
		  "tags"     : {{ t | prepend: "" }},
	...
         

becomes:

 

[
		{
		  "title"    : "Styling, postcards and searches",
		  "taxonomy" : "technical",
		  "tags"     : ["jekyll", "css"],
		  "href"     : "/2023/Styling_and_postcards.html",
	...
         

Javascript can then use $.getJSON('/posts.json',... to load posts.json, and search it to locate appropriate posts.

TODO

There seems to be a lot of little things to get right, mostly in terms of layout. Getting everything aligned. Pagination (avoiding long lists of posts) SEO optimising Tweaking styling such as fonts, bits of colour. Better buttons and menus. Catching up on past events and writing a post. Connecting posts to galleries and maps.