We recently redesigned our website from the ground up. While the look and organization changed, the underlying technologies have not. We are still using Jekyll to power the site, just as we’ve done since 2011. Jekyll has come a long way and we’re taking full advantage of some of its new features.

Collections

Collections are the Jekyll way to separate content types. They allow us to create new content types and to treat them differently. We are using collections for our team and project pages. Collection items have the attributes of “posts” in Jekyll with some subtle differences, like being ordered alphabetically in ascending order or not needing to have the date on the name. With collections we can achieve a greater content separation thus making the whole site more organized.

List views

Jekyll still has some challenges when it comes to paginate collections or categories. We solved this problem by rendering our list views (projects and blog posts) client side.

Jekyll outputs a JSON file that we use to render the content with ejs templates. This allows us to have greater control over content output and prevents your browser from blowing up when trying to render our 650+ blog posts at once.

Wrangling the JSON API

Jekyll’s JSON output can lead to a familiar comma problem. When Jekyll is generating a JSON file is common to see code like this:

{% raw %}[  {% for post in site.projects %}    {      "title": "{{ post.title }}"    }    {% unless forloop.last %},{% endunless %}  {% endfor %}{% endraw %}]

This will work fine when every element of the array is being printed, but if you start introducing conditions the forloop.last can’t be used to control the comma anymore.

For example we’re only showing posts that are not hidden. Image we’ve only three posts of which the third one is hidden. The resulting JSON would be:

[  {    "title": "Project one"  }  ,  {    "title": "Project two"  }  ,]

See the trailing comma? That little thing would break the JSON. It’s there because our last visible project is Project two but that is not the last element in the array so forloop.last doesn’t kick in and the comma is printed anyways.

The workaround for this situation is easy. You just have to print the comma before the element except for the first time:

{% raw %}[  {% assign comma = false %}  {% for post in site.projects %}  {% unless post.hidden == true %}    {% if comma %},{% endif %}    {% assign comma = true %}    {      "title": "{{ post.title | escape_once  }}"    }  {% endunless %}  {% endfor %}{% endraw %}]