Markdown and plugins in Jekyll

Jekyll provides a markdown language and plugin code to add extra capabilities to the system. There is documentation at the Jekyll site, this post is a list of the setup I’ve used and a reminder how to achieve some features.

plugins

Installed directly into the _plugins directory (and some installations into _includes). Cloned the original plugin repositories into my own bitbucket repository to allow some minor changes and experiments.

jekyll_file_exists

Tests for the existence of a file on disk. Used when creating the ‘postcards’ on the front page _layouts/front.html

	{% capture cardf_exists %}{% file_exists {{cardf}} %}{% endcapture %}
	{% if cardf_exists == "true" %} ...

jekyll_remote_include

Uses a HTTP call to collect a content for use. Used to get the HTML content of the prepared postcards before including onto the page. See _layouts/front.html. The url is a full http address to the postcard eg http://kevin.moore.name/postcard/2009/MakeHuman.html

	{% remote_include {{url}} %}

jekyll-multipost

Creates multiple output from the one source post. Used in creating a ‘postcard’ as well as the main page for each post. Requires the post’s ‘layout’ YAML front matter to be a list and to have the ‘postcard’ layout added:

---
title: "Diablo"
layout: [post, postcard] 
---

jekyll-mapping

Provides an interface to google maps on my Drive storage. The _config.yml provides configuration and access keys:

mapping:
  external: google maps
  provider: google_static
  api_key: Axxxxxxxxxxxxxxxxxxxxxxxxxxxx
  dimensions:
    width: 640
    height: 480

In the actual post, include a click-through map with an include:

{% include mapping.html caption="starting in Venice" alt="" data-align="right" %}

Specifying the map’s target in the post YAML front matter:

---
title: "Cycling Italy 2017 Venice to Florence"
mapping:
  latitude: 45.46955
  longitude: 12.26902
  mid: 1XNMZygM7jYGwLd8SL_8AYesCN28
--

The ‘mid’ variable is via ‘copy link’ in Drive or in the URL when viewing the map in google maps. If this is provided the latitude/longitude is optional.

_includes/mapping.html utilises the plugin with a tag:

{% capture mapurl %}https://www.google.com/maps/d/edit?mid={{ page.mapping['mid'] }}&usp=sharing{% endcapture %}
{% capture mapimg %}{% render_map 250,250 %}{% endcapture %}

jekyll-json

Included with jekyll-mapping

jekyll-jsonball

Parses JSON objects into liquid variables. Used in processing the JSON returned from twitter.

markdown, liquid

displaying code blocks

For example in this page. A div element with class w3-code surrounding {% highlight liquid %} {% raw %}

<div class="w3-code">       
	{% highlight liquid %} {% raw %}
        {% capture cardf_exists %}{% file_exists {{cardf}} %}{% endcapture %}
        {% if cardf_exists == "true" %} ...
        { % endraw %}{% endhighlight %}
</div>
[Tannus tyres]({% post_url /2018/2018-05-17-Tannus_tyres %})

Prepare the gallery in google photos and create a shared link. Specify that gallery in the posts YAML front matter eg:

---
title: "Cycling the Cotswolds 2021"
googlegallery: sduYA2MdXk2aBCLaA
---

Place an image into the post with an include:

{% include googlegallery.html alt="" data-align="right"
 img="assets/images/Cotswold mill at lower slaughter.jpg" %}

A future todo is to use the gallery album cover as the image.