fix(metadata/index.liquid): corrects 403s in open graph images

config/filters/general.js

@@ -15,6 +15,8 @@ export default {
       ellipsis: "...",
     }),
   shuffleArray,
+  mergeArray: (a, b) =>
+  Array.isArray(a) && Array.isArray(b) ? [...new Set([...a, ...b])] : [],
   pluralize: (count, string, trailing) => {
     const countStr = String(count).replace(/,/g, "");
     if (parseInt(countStr, 10) === 1) return string;

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "4.3.1",
+      "version": "4.3.2",
       "license": "MIT",
       "dependencies": {
         "html-minifier-terser": "7.2.0",
@@ -2622,9 +2622,9 @@
       }
     },
     "node_modules/liquidjs": {
-      "version": "10.21.0",
+      "version": "10.21.1",
-      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.21.0.tgz",
+      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.21.1.tgz",
-      "integrity": "sha512-DouqxNU2jfoZzb1LinVjOc/f6ssitGIxiDJT+kEKyYqPSSSd+WmGOAhtWbVm1/n75svu4aQ+FyQ3ctd3wh1bbw==",
+      "integrity": "sha512-NZXmCwv3RG5nire3fmIn9HsOyJX3vo+ptp0yaXUHAMzSNBhx74Hm+dAGJvscUA6lNqbLuYfXgNavRQ9UbUJhQQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "4.3.1",
+  "version": "4.3.2",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {

src/includes/metadata/index.liquid

@@ -1,5 +1,7 @@
 {%- assign fullUrl = globals.url | append: page.url -%}
 {%- assign oembedUrl = globals.url | append: "/oembed" | append: page.url -%}
+{%- capture appVersionString -%}{% appVersion %}{%- endcapture -%}
+{%- assign ogImageBaseUrl = globals.url | append: "/og/w800/" | append: appVersionString -%}
 {%- capture pageTitle -%}
   {%- if page.title -%}
     {{ page.title | append: ' • ' | append: globals.site_name }}
@@ -18,7 +20,7 @@
     {{ globals.site_description }}
   {%- endif -%}
 {%- endcapture -%}
-{%- assign ogImage = globals.cdn_url | append: globals.avatar -%}
+{%- assign ogImage = ogImageBaseUrl | append: globals.avatar -%}
 {%- case schema -%}
   {%- when 'artist' -%}
     {% render "fetchers/artist.php.liquid" %}
@@ -35,20 +37,20 @@
   {%- when 'blog' -%}
     {%- assign pageTitle = post.title -%}
     {%- assign pageDescription = post.description -%}
-    {%- assign ogImage = globals.cdn_url | append: post.image -%}
+    {%- assign ogImage = ogImageBaseUrl | append: post.image -%}
   {%- when 'music-index', 'music-week-artists' -%}
-    {%- assign ogImage = globals.cdn_url | append: music.week.artists[0].grid.image -%}
+    {%- assign ogImage = ogImageBaseUrl | append: music.week.artists[0].grid.image -%}
   {%- when 'music-week-albums', 'music-week-tracks' -%}
-    {%- assign ogImage = globals.cdn_url | append: music.week.albums[0].grid.image -%}
+    {%- assign ogImage = ogImageBaseUrl | append: music.week.albums[0].grid.image -%}
   {%- when 'music-month-artists' -%}
-    {%- assign ogImage = globals.cdn_url | append: music.month.artists[0].grid.image -%}
+    {%- assign ogImage = ogImageBaseUrl | append: music.month.artists[0].grid.image -%}
   {%- when 'music-month-albums' -%}
-    {%- assign ogImage = globals.cdn_url | append: music.month.albums[0].grid.image -%}
+    {%- assign ogImage = ogImageBaseUrl | append: music.month.albums[0].grid.image -%}
   {%- when 'music-releases' -%}
-    {%- assign ogImage = globals.cdn_url | append: albumReleases.upcoming[0].grid.image -%}
+    {%- assign ogImage = ogImageBaseUrl | append: albumReleases.upcoming[0].grid.image -%}
   {%- when 'books' -%}
     {%- assign overviewBook = books.all | filterBooksByStatus: 'started' | reverse | first %}
-    {%- assign ogImage = globals.cdn_url | append: overviewBook.image -%}
+    {%- assign ogImage = ogImageBaseUrl | append: overviewBook.image -%}
   {%- when 'books-year' -%}
     {%- assign pageTitle = 'Books' | append: ' • ' | append: year.value | append: ' • ' | append: globals.site_name -%}
     {%- capture pageDescription -%}
@@ -56,19 +58,21 @@
     {%- endcapture -%}
     {%- assign bookData = year.data | filterBooksByStatus: 'finished' -%}
     {%- assign bookYear = bookData | shuffleArray | first -%}
-    {%- assign ogImage = globals.cdn_url | append: bookYear.image -%}
+    {%- assign ogImage = ogImageBaseUrl | append: bookYear.image -%}
   {%- when 'favorite-movies' -%}
     {%- assign favoriteMovie = movies.favorites | shuffleArray | first %}
-    {%- assign ogImage = globals.cdn_url | append: favoriteMovie.backdrop -%}
+    {%- assign ogImage = ogImageBaseUrl | append: favoriteMovie.backdrop -%}
   {%- when 'favorite-shows' -%}
     {%- assign favoriteShow = tv.favorites | shuffleArray | first %}
-    {%- assign ogImage = globals.cdn_url | append: favoriteShow.backdrop -%}
+    {%- assign ogImage = ogImageBaseUrl | append: favoriteShow.backdrop -%}
   {%- when 'watching' -%}
-    {%- assign overviewMovie = movies.recentlyWatched | first %}
+    {%- assign mergedMovies = movies.recentlyWatched | mergeArray: movies.favorites %}
-    {%- assign ogImage = globals.cdn_url | append: overviewMovie.backdrop -%}
+    {%- assign mergedShows = tv.recentlyWatched | mergeArray: tv.favorites %}
+    {%- assign overviewWatched = mergedMovies | mergeArray: mergedShows | shuffleArray | first -%}
+    {%- assign ogImage = ogImageBaseUrl | append: overviewWatched.backdrop -%}
   {%- when 'upcoming-shows' -%}
     {%- assign upcomingShow = upcomingShows.watching | shuffleArray | first %}
-    {%- assign ogImage = globals.cdn_url | append: upcomingShow.backdrop -%}
+    {%- assign ogImage = ogImageBaseUrl | append: upcomingShow.backdrop -%}
   {%- when 'page' -%}
     {%- assign pageDescription = page.description -%}
 {% endcase %}

src/includes/metadata/static.liquid

@@ -7,4 +7,4 @@
 <meta property="og:url" content="{{ fullUrl }}" />
 <link rel="alternate" type="application/json+oembed" href="{{ oembedUrl }}" title="{{ pageTitle }}">
 <link rel="canonical" href="{{ fullUrl }}" />
-<meta property="og:image" content="{{ globals.url }}/og/w800/{% appVersion %}{{ globals.avatar }}" />
+<meta property="og:image" content="{{ ogImage }}" />

src/pages/media/watching/index.html

@@ -5,11 +5,13 @@ permalink: "/watching/index.html"
 schema: watching
 updated: "now"
 ---
-{%- assign featuredMovie = movies.recentlyWatched | shuffleArray | first -%}
+{%- assign mergedMovies = movies.recentlyWatched | mergeArray: movies.favorites %}
+{%- assign mergedShows = tv.recentlyWatched | mergeArray: tv.favorites %}
+{%- assign overviewWatched = mergedMovies | mergeArray: mergedShows | shuffleArray | first -%}
 <h2 class="page-title">{{ title }}</h2>
 {% render "media/watching/hero.liquid",
   globals:globals,
-  movie:featuredMovie
+  movie:overviewWatched
 %}
 <p>Here's all of the TV and movies I've been watching presented in what is (hopefully) an organized fashion.</p>
 <p><a href="/watching/shows/upcoming">You can see all of the shows I've got queued up here.</a></p>