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.

Series Learn Eleventy

Documenting new and exciting things I learn how to do with Eleventy.

View Series →

Webmentions 1 1 10

  1. Raymond Camden 🥑 Raymond Camden 🥑
    Holy smokes - never heard of Letterboxd. I love using Good Reads as a way to remind me what books I've read, going to start using this too.

Up Next