Media Diary with Eleventy

I built out a media diary of stuff I watch, because I don’t enjoy using letterboxd and I’m on an eternal quest of reinventing existing platforms on my own site, because I like controlling how things look and work.

🌟 The Eleventy Structure: a JSON data file of each movie, which includes the name/review/rating/etc. Each item is looped through like a collection, and displayed on a page.

Movie posters and short reviews, organized in 4 columns.
The media diary as it looks right now. I'm gradually adding posters to each one.

Eleventy JSON Data

I use a global data file that contains all of my movies. My data sits inside _data/watched.json, and a movie entry looks like:

"title": "Moonrise Kingdom",
"date": "2021-09-04",
"review": "Charming. As expected, the aesthetics are gorgeous: lovely colour palettes, symmetrical frames, and fun music.",
"category": "movie",
"rating": 3,
"poster": "moonrise-kingdom"

I used to create a new post for every movie, which would contain frontmatter of the movie metadata and then a review in the content, but decided this was too cumbersome to maintain. Since my watchlist is expected to be high-volume, structured, and brief, a JSON file would be easier to maintain.

Layout Template

This is rendered in my watchlist.liquid layout. I can use my JSON data like I do for post collections; e.g. {{ watched.title }} calls the title of the movie.

My watchlist.liquid markup looks like:

{% for watched in watched %}
<article class="watchitem">
{% if watched.poster %}
<img src="/img/watchlist/{{ watched.poster}}.jpg" alt="" class="watchitem__poster frame">
{% else %}
<div class="watchitem__poster-placeholder"></div>
{% endif %}
<h2 class="watchitem__title">{{ watched.title }}</h2>
<div class="watchitem__content">{{ }}</div>
<div class="watchitem__rating">{{ watched.rating }}</div>
<div class="watchitem__date">{{ | date: "%b %e, %Y" }}</div>
{% endfor %}

To summarize it:

  • {% for watched in watched %} loops through each item in my watched.json data file.
  • {% if watched.poster %} – if I have a movie poster included in the data, it’ll display it; if not, it’ll display a placeholder div. All of my images are inside a single /img/watchlist/ folder with a .jpg extension.
  • {{ | date: "%b %e, %Y" }} shows the formatted date.

My star ratings are done in some rudimentary JavaScript that translates my numerical rating into stars. I don’t know if I like rating things—I feel so wishy-washy about all of them and I find it hard to quantify how I think something is, so I might not keep it. Who knows!


Many folks have done this before; some of my inspirations include:

I’m calling mine a media diary or watchlist for now. The goal is to organize data on my media consumption, and display it in a pleasing way on my site. This could eventually include things like music, games, or books; for now, I’m keeping the scope small as I have a clear idea of how I want this to be.