feat: add placeholder for images with invalid src

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];

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;
+}

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>
+                {% set textContent %}
-                {% image album.imageUrl, "" %}
+                    {{ 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 %}