feat: add recent movies feed

src/_data/lastfm.js

@@ -17,7 +17,9 @@ const fetchRecentTracks = async () => {
   const tracks = response.recenttracks.track.slice(0, 5);
 
   const recentTracks = tracks.map((track) => {
-    const timestamp = dayjs(track.date["#text"]).utc(true).fromNow();
+    const timestamp = track.date
+      ? dayjs(track.date["#text"]).utc(true).fromNow()
+      : dayjs().fromNow();
     return {
       artist: track.artist["#text"],
       track: track.name,

src/_data/letterboxd.js

@@ -0,0 +1,55 @@
+require("dotenv").config();
+
+const EleventyFetch = require("@11ty/eleventy-fetch");
+const cheerio = require("cheerio");
+const dayjs = require("dayjs");
+const utc = require("dayjs/plugin/utc");
+const relativeTime = require("dayjs/plugin/relativeTime");
+
+dayjs.extend(utc);
+dayjs.extend(relativeTime);
+
+const fetchRecentMovies = async () => {
+  const url = `https://letterboxd.com/wonderfulfrog/rss/`;
+
+  const response = await EleventyFetch(url, { duration: "1m", type: "text" });
+
+  const $ = cheerio.load(response, { xml: true });
+
+  const recentMovies = [];
+
+  $("channel")
+    .children("item")
+    .slice(0, 6)
+    .each((_, element) => {
+      const title = $(element).children("letterboxd\\:filmTitle").text();
+
+      if (!title) {
+        return false;
+      }
+
+      const watchedDate = $(element)
+        .children("letterboxd\\:watchedDate")
+        .text();
+      const year = $(element).children("letterboxd\\:filmYear").text();
+      const img = $(element).children("description").text();
+      const imgSrc = $(img).children("img").attr("src");
+      const url = $(element).children("link").text();
+      const rewatch = $(element).children("letterboxd\\:rewatch").text();
+      const rating = $(element).children("letterboxd\\:memberRating").text();
+
+      recentMovies.push({
+        imgSrc,
+        isRewatch: rewatch === "Yes",
+        rating,
+        title,
+        url,
+        watchedDate,
+        year,
+      });
+    });
+
+  return recentMovies;
+};
+
+module.exports = fetchRecentMovies;

src/css/blocks/now.css

@@ -0,0 +1,10 @@
+.media-grid {
+  display: grid;
+  grid-gap: var(--spacing-0\.5);
+}
+
+@supports (width: min(100px, 100%)) {
+  .media-grid {
+    grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
+  }
+}

src/now.html

@@ -7,7 +7,7 @@ title: /now
 <h1>/now</h1>
 <p>What am I doing right now? Everything on here is automatically generated from various data sources.</p>
 <p>
-    What is a `/now` page? Check out <a href="https://nownownow.com/about">nownownow.com.</a>
+    What is a `/now` page? Check out <a href="https://nownownow.com/about">nownownow.com</a>.
 </p>
 <h2>🎶 Listening</h2>
 <ul class="[ p-0 flow ]" role="list">
@@ -20,3 +20,16 @@ title: /now
         </li>
     {% endfor %}
 </ul>
+<h2>🍿 Movies</h2>
+<ul class="[ media-grid p-0 ]" role="list">
+    {% for movie in letterboxd %}
+        <li>
+            <a href="{{ movie.url }}"
+               target="_blank"
+               rel="external noreferrer noopener">
+                <p class="[ visually-hidden ]">{{ movie.title }}</p>
+                {% image movie.imgSrc, "", "", "[ movie-poster ]" %}
+            </a>
+        </li>
+    {% endfor %}
+</ul>