feat: check if image exists before caching optimized version

src/_data/json/roundups/2023.js

@@ -7,7 +7,7 @@ export default {
       url: 'https://app.thestorygraph.com/books/9946c834-81f1-4c7f-b7d1-30a804e9874f',
     },
     {
-      alt: 'Where Are Your Boys Tonigh?',
+      alt: 'Where Are Your Boys Tonight?',
       author: 'Chris Payne',
       image: 'https://cd-books.b-cdn.net/vajp3jxy6kee5ka2ymbvjc2fqkvf',
       url: 'https://app.thestorygraph.com/books/f074d4e3-a9fc-42af-889e-54697a1fece0',

src/_includes/partials/now/media-grid.liquid

@@ -37,10 +37,11 @@
               'lazy'
             {%- endif -%}
           {%- endcapture -%}
+          {% capture fallbackIcon %}{% tablericon icon alt %}{% endcapture %}
           {% if imageMaxWidth %}
-            {% image item.image, alt, '', loadingStrategy, imageMaxWidth %}
+            {% image item.image, alt, '', loadingStrategy, shape, fallbackIcon, imageMaxWidth %}
           {% else %}
-            {% image item.image, alt, '', loadingStrategy %}
+            {% image item.image, alt, '', loadingStrategy, shape, fallbackIcon, 1248 %}
           {% endif %}
         </div>
       </a>

src/_includes/partials/webmentions/comments.liquid

@@ -6,12 +6,9 @@
         <div class="comment__wrapper--interior flex--centered">
           <a href={{mention.url}}>
             <div class="avatar__wrapper flex--centered">
-              <img
-                src="{{ mention.author.photo }}"
-                alt="{{ mention.author.name | escape }}"
-                class="avatar__image"
-                loading="lazy"
-                onerror="this.onerror=null; this.src='/assets/img/icons/user.webp'" />
+            {% capture authorAlt %}{{ mention.author.name | escape }}{% endcapture %}
+            {% capture fallbackIcon %}{% tablericon "user" authorAlt %}{% endcapture %}
+            {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'rounded', fallbackIcon %}
             </div>
           </a>
           <div class="comment">

src/_includes/partials/webmentions/interaction.liquid

@@ -11,12 +11,9 @@
     {% for mention in mentions[type] %}
     <a href={{mention.url}}>
       <div class="avatar__wrapper flex--centered">
-        <img
-          src="{{ mention.author.photo }}"
-          alt="{{ mention.author.name | escape }}"
-          class="avatar__image"
-          loading="lazy"
-          onerror="this.onerror=null; this.src='/assets/img/icons/user.webp'" />
+        {% capture authorAlt %}{{ mention.author.name | escape }}{% endcapture %}
+        {% capture fallbackIcon %}{% tablericon "user" authorAlt %}{% endcapture %}
+        {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'rounded', fallbackIcon %}
       </div>
     </a>
     {% endfor %}

src/assets/styles/index.css

@@ -407,6 +407,33 @@ li {
   width: 100%;
 }
 
+.image__placeholder {
+  background-color: var(--color-darkest);
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.image__placeholder > svg {
+  stroke: var(--color-lightest) !important;
+  stroke-width: var(--stroke-width-bold);
+  height: 1.75rem;
+  width: 1.75rem;
+}
+
+.image__placeholder.square,
+.image__placeholder.round {
+  aspect-ratio: 1/1;
+}
+
+.image__placeholder.round {
+  border-radius: var(--rounded-full);
+}
+
+.image__placeholder.vertical {
+  aspect-ratio: 2/3;
+}
+
 /* pages */
 .page__header {
   font-size: var(--font-size-2xl);

src/assets/styles/widgets/webmentions.css

@@ -94,6 +94,7 @@
 
 .webmentions .interaction .avatar__wrapper img {
   width: 100%;
+  height: 100%;
   border-radius: var(--rounded-full);
 }