feat: tv posters

config/mediaFilters.js

@@ -11,6 +11,7 @@ module.exports = {
         )
       : `https://cdn.coryd.dev/albums/${media.name.replace(/\s+/g, '-').toLowerCase()}.jpg`
   },
+  tv: (episode) => `https://cdn.coryd.dev/tv/${episode.replace(/\s+/g, '-').toLowerCase()}.jpg`,
   movie: (url, host, cdn) => {
     return url.replace(host, cdn).replace('600', '200').replace('900', '300')
   },

src/_data/tv.js

@@ -1,23 +1,19 @@
-const { extract } = require('@extractus/feed-extractor')
-const { AssetCache } = require('@11ty/eleventy-fetch')
+const EleventyFetch = require('@11ty/eleventy-fetch')
 
 module.exports = async function () {
   const TV_KEY = process.env.API_KEY_TRAKT
-  const url = `https://trakt.tv/users/cdransf/history.atom?slurm=${TV_KEY}`
-  // noinspection JSCheckFunctionSignatures
-  const asset = new AssetCache('tv_data')
-  if (asset.isCacheValid('1h')) return await asset.getCachedValue()
-  const res = await extract(url, {
-    getExtraEntryFields: (feedEntry) => {
-      const image = feedEntry['media:thumbnail']['@_url']
-      return {
-        image,
-      }
+  const url = 'https://api.trakt.tv/users/cdransf/history/shows'
+  const res = EleventyFetch(url, {
+    duration: '1h',
+    type: 'json',
+    fetchOptions: {
+      headers: {
+        'Content-Type': 'application/json',
+        'trakt-api-version': 2,
+        'trakt-api-key': TV_KEY,
+      },
     },
-  }).catch((error) => {
-    console.log(error.message)
-  })
-  const data = res.entries.splice(0, 6)
-  await asset.save(data, 'json')
-  return data
+  }).catch()
+  const shows = await res
+  return shows.splice(0, 6)
 }

src/_includes/now.liquid

@@ -163,18 +163,32 @@ layout: main
       Watching: tv
     </h2>
     <div>
-      <ul class="list-inside list-disc pl-5 md:pl-10">
-        {% for show in tv %}
-          <li class="mt-1.5 mb-2">
-            <a href="{{show.link}}" title="{{show.title | escape}}">
-              {{ show.title }}
-            </a>
-          </li>
+      <div class="grid grid-cols-3 gap-2 md:grid-cols-6 not-prose">
+        {% for episode in tv %}
+          <a href="https://trakt.tv/shows/{{episode.show.ids.slug}}/seasons/{{ episode.episode.season }}/episodes/{{ episode.episode.number }}" title="{{ episode.episode.title | escape}} {{ episode.show.title | escape }}">
+            <div class="relative block" style="max-width:226px">
+              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
+              <div class="absolute left-1 bottom-2 drop-shadow-md">
+                <div class="px-1 text-xs font-bold text-white">{{ episode.episode.title }}</div>
+                <div class="px-1 text-xs text-white">
+                  {{ episode.show.title }} • <strong>S</strong>{{ episode.episode.season }}<strong>E</strong>{{ episode.episode.number }}
+                </div>
+              </div>
+              <img
+                src="{{ episode.show.title | tv }}"
+                onerror="this.onerror=null; this.src='/assets/img/media/404-movie.jpg'"
+                width="226"
+                height="337"
+                class="rounded-lg"
+                alt="{{ episode.episode.title | escape}} {{ episode.show.title | escape }}"
+                loading="lazy" />
+            </div>
+          </a>
         {% endfor %}
-      </ul>
+      </div>
     </div>
   {% endif %}
-  <p class="text-xs text-center">This is a
+  <p class="text-xs text-center pt-4">This is a
     <a href="https://nownownow.com/about">now page</a>, and if you have your own site,
     <a href="https://nownownow.com/about">you should make one too</a>.</p>
 </div>