Lesson 13: Recommended content

This content is likely out of date

The content of this course was written in May 2020, so parts will be outdated. There’s no immediate plan to do a full update, but this course is now open source, so if you see an issue, please raise an issue.

Head over to the project and follow the contribution guide if you would like to help.

In this last lesson on our blog, we’re going to add a “More from the blog” section to our layout. This will recommend some other posts to the reader once they reach the end of the post they’re on.

We’ll use a helper function to show 3 posts, picked at random, and—most importantly—to make sure they don’t include the post the reader’s currently on.

Adding our helper

Let’s open up eleventy-from-scratch/src/_data/helpers.js. On
line 22 add a comma, so it looks like this: },. Create a new line under that and add the following:

  /**
   * Filters out the passed item from the passed collection
   * and randomises and limits them based on flags
   *
   * @param {Array} collection The 11ty collection we want to take from
   * @param {Object} item The item we want to exclude (often current page)
   * @param {Number} limit=3 How many items we want back
   * @param {Boolean} random=true Wether or not this should be randomised
   * @returns {Array} The resulting collection
   */
getSiblingContent(collection, item, limit = 3, random = true) {
  let filteredItems = collection.filter(x => x.url !== item.url);

  if (random) {
    let counter = filteredItems.length;

    while (counter > 0) {
      // Pick a random index
      let index = Math.floor(Math.random() * counter);

      counter--;

      let temp = filteredItems[counter];

      // Swap the last element with the random one
      filteredItems[counter] = filteredItems[index];
      filteredItems[index] = temp;
    }
  }

  // Lastly, trim to length
  if (limit > 0) {
    filteredItems = filteredItems.slice(0, limit);
  }

  return filteredItems;
}

This is a pretty handy function. It takes a passed collection of any content, a single item (in our case the current blog post page), a limit to the number of items it can return and whether or not those items should be randomised.

The first thing it does is filter out our current post. It does that by comparing URLs, because they will always be unique. Then, if we want our collection to be random, it loops backwards through the collection and shuffles the items around. Finally, if we’ve set a limit, it slices that amount of items (default 3) out of the return filteredItems array.

Implementing our recommended content

Let’s implement that on our blog post layout. Open up eleventy-from-scratch/src/_includes/layouts/post.html. On line 4, create a new line and add the following:

{# Grab other posts that aren’t this one for the 'more from the blog' feed #}
{% set recommendedPosts = helpers.getSiblingContent(collections.blog, page) %}

Now, on line 29, just before the closing </article>, add the following:

{% if recommendedPosts %}
  <footer class="recommended-posts">
    {% set postListItems = recommendedPosts %}
    {% set postListHeadline = 'More from the blog' %}
    {% include "partials/post-list.html" %}
  </footer>
{% endif %}

Hopefully you can see the power of partials here. All we needed to do once we grabbed our recommendedPosts was chuck them into our existing post-list.html partial. Lovely stuff.

Now, if you open your browser at http://localhost:8080https://piccalil.li/blog/laws-of-ux/ (opens new window) again and scroll down, it should look like this:

Wrapping up

Over the course of these 3 lessons alone, I reckon you could very comfortably create a personal site with Eleventy. Add that to the knowledge you’ve learned from the earlier lessons and you’re in a really good place to own your own content.

Now, we’re going to plough on and build out the rest of this HTML-only site. Let’s go!