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.