Code

Show Off Your Letterboxd Film Diary with Eleventy

We’ll use an Eleventy data file and an NPM package to parse the Letterboxd RSS feed into JSON

One of my favorite new parts of my site is my Film Diary. I love to watch movies, and I thought it would be fun to promi­nent­ly dis­play diary entries from Letterboxd.

Let­ter­boxd is a won­der­ful film com­mu­ni­ty where you can keep track of films you want to watch and one’s you’ve watched, rate and review films, cre­ate lists of films, and the list goes on.

While Let­ter­boxd does have an API, I found the authen­ti­ca­tion meth­ods a bit more advanced than what I knew how to do. I found a cool NPM pack­age that pars­es the RSS feed that Let­ter­boxd cre­ates for pub­lic pro­files and returns that infor­ma­tion in JSON.

Let’s make this thing.

Install the Package

Oops! I for­got to do this in the video, but you’ll need to first install the pack­age in your terminal.

npm i letterboxd

Pulling in Our Data

Let’s cre­ate a new data file. I store mine in ./src/_data/. We’ll call it letterboxd.js. Inside this file, we’ll write the following:

// ./src/_data/letterboxd.js

const letterboxd = require('letterboxd');

module.exports = async () => {
  const items = letterboxd('ttimsmith', (error, items) => {
    if (error) {
      return console.log(error);
    }
  });

  return items;
};

First, we’re pulling in our pack­age into the file by requir­ing it at the top. Then, we cre­ate a con­stant that’ll con­tain our items. We call the letterboxd() func­tion and pass in our user­name. You’ll want to sub­sti­tute ttimsmith for your username.

Next, if there’s an error, we’re print­ing out the error with console.log(). If every­thing goes well, we return our items.

Displaying the Films

Now let’s cre­ate a par­tial for our film diary. I put my par­tials in ./src/_includes/partials/. We’ll call it film-diary.html. Inside this file, we’ll write the following:

<!-- ./src/_includes/partials/film-diary.html -->

{% set letterboxdItems = letterboxd.slice(0,5) %}

<div class="film__items">
  {% for item in letterboxdItems %}
  <article class="film__entry">
    <a href="{{ item.uri }}" class="film__url">
      <div class="film__media">
        <img
          src="{{ item.film.image.tiny }}"
          alt="Poster for {{ item.film.title }}"
          loading="lazy">
      </div>
      <div class="film__info">
        <span class="film__title">{{ item.film.title }}<span class="film__rating">{{ item.rating.text }}</span></span>
        <span class="film__watched-date">{{ item.date.watched }}</span>
      </div>
    </a>
  </article>
  {% endfor %}
</div>

First, we’re cre­at­ing a vari­able called letterboxdItems which returns the first five entries. The func­tion gives us the last fifty entries, and that’s way too many for our homepage.

Next, we loop letterboxdItems and dis­play the poster, the title of the film, the rat­ing, and the date it was watched.

You’ll want to include this par­tial in your tem­plate like this:

{% include 'partials/film-diary.html' %}

Wrapping Up

And there you have it! You’re pulling in your last five diary entries from Let­ter­boxd and dis­play­ing them on your site. Now’s the time to add your own styles and make it look great.

If you need help, or end up using this tuto­r­i­al to cre­ate your own film diary, please let me know! I’m @smithtimmytim on Twitter.