One of my fa­vorite new parts of my site is my Film Diary. I love to watch movies, and I thought it would be fun to promi­nently dis­play di­ary en­tries from Letterboxd.

Letterboxd is a won­der­ful film com­mu­nity where you can keep track of films you want to watch and one’s you’ve watched, rate and re­view films, cre­ate lists of films, and the list goes on.

While Letterboxd does have an API, I found the au­then­ti­ca­tion meth­ods a bit more ad­vanced than what I knew how to do. I found a cool NPM pack­age that parses the RSS feed that Letterboxd cre­ates for pub­lic pro­files and re­turns that in­for­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 in­stall the pack­age in your ter­mi­nal.

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 fol­low­ing:

// ./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 re­quir­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 user­name.

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

Displaying the Films #

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

<!-- ./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 re­turns the first five en­tries. The func­tion gives us the last fifty en­tries, and that’s way too many for our home­page.

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

You’ll want to in­clude 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 di­ary en­tries from Letterboxd 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 us­ing this tu­to­r­ial to cre­ate your own film di­ary, please let me know! I’m @smithtimmytim on Twitter.