From 0e3ef370c7d980d4af772b074baf6ed4fc53d6be Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Fri, 22 Mar 2024 16:27:45 -0700
Subject: [PATCH] feat: add placeholder for images with invalid src

---
 config/shortcodes/image.js           |  8 ++++++++
 src/css/blocks/image-placeholder.css | 13 +++++++++++++
 src/now.html                         | 12 +++++++++---
 3 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 src/css/blocks/image-placeholder.css

diff --git a/config/shortcodes/image.js b/config/shortcodes/image.js
index fbce1d4..2356323 100644
--- a/config/shortcodes/image.js
+++ b/config/shortcodes/image.js
@@ -14,10 +14,15 @@ const imageShortcode = async (
   alt = "",
   caption = "",
   className = undefined,
+  placeholder = "",
   widths = [400, 800, 1280],
   formats = ["webp", "jpeg"],
   sizes = "100vw",
 ) => {
+  if (!src) {
+    return `<div class="image-placeholder">${placeholder}</div>`;
+  }
+
   const metadata = await Image(src, {
     widths: [...widths, null],
     formats: [...formats, null],
@@ -26,6 +31,9 @@ const imageShortcode = async (
     sharpOptions: {
       animated: true,
     },
+    cacheOptions: {
+      duration: "7d",
+    },
   });
 
   const lowsrc = metadata.jpeg[metadata.jpeg.length - 1];
diff --git a/src/css/blocks/image-placeholder.css b/src/css/blocks/image-placeholder.css
new file mode 100644
index 0000000..fa809a3
--- /dev/null
+++ b/src/css/blocks/image-placeholder.css
@@ -0,0 +1,13 @@
+.image-placeholder {
+  background-color: var(--color-surface);
+  border-radius: var(--spacing-1);
+  width: 100%;
+  height: 100%;
+  font-size: 0.8em;
+  line-height: 1.125em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-1);
+  text-align: center;
+}
diff --git a/src/now.html b/src/now.html
index 7e3142d..0427db1 100644
--- a/src/now.html
+++ b/src/now.html
@@ -19,8 +19,11 @@ title: /now
             <a href="{{ album.url }}"
                target="_blank"
                rel="external noreferrer noopener">
-                <p class="[ visually-hidden ]">{{ album.artist }} - {{ album.album }}</p>
-                {% image album.imageUrl, "" %}
+                {% set textContent %}
+                    {{ album.artist }} - {{ album.album }}
+                {% endset %}
+                <p class="[ visually-hidden ]">{{ textContent }}</p>
+                {% image album.imageUrl, "", "", "", textContent %}
             </a>
         </li>
     {% endfor %}
@@ -32,8 +35,11 @@ title: /now
             <a href="{{ movie.url }}"
                target="_blank"
                rel="external noreferrer noopener">
+                {% set textContent %}
+                    {{ movie.title }}
+                {% endset %}
                 <p class="[ visually-hidden ]">{{ movie.title }}</p>
-                {% image movie.imgSrc, "" %}
+                {% image movie.imgSrc, "", "", "" , textContent %}
             </a>
         </li>
     {% endfor %}