feat: ✨ add image switching

src/components/ref-img.webc

@@ -7,6 +7,15 @@
     :width="width"
     sizes="1000px"
   ></eleventy-image>
+  <eleventy-image
+    class="image nsfw"
+    :class="(dropshadow ? 'dropshadow' : '')"
+    :src="`src/img/${char}/${src.replace(/^(.*?)(\.[^.]+)$/, '$1-nsfw$2')}`"
+    :alt="`${alt} by ${artist}`"
+    :width="width"
+    sizes="1000px"
+    webc:if="nsfw"
+  ></eleventy-image>
   <figcaption class="caption">
     <template webc:nokeep @text="alt"></template>
     &copy;
@@ -18,19 +27,35 @@
   :host {
     display: grid;
     grid-template-rows: [image-start] 1fr [image-end caption-start] auto [caption-end];
+    grid-template-columns: [image-start] 1fr [image-end];
     place-content: center;
     row-gap: 1rem;
 
     margin-block: 0;
     margin-inline: auto;
 
+    .nsfw &:has(.image.nsfw) {
+      & .image {
+        display: none;
       }
 
-  :host :first-child {
+      & .image.nsfw {
+        display: block;
+      }
+    }
+
+    .nsfw &:not(:has(.image.nsfw)) {
+      & .image {
+        display: block;
+      }
+    }
+  }
+
+  :host :where(picture, img) {
     grid-area: image;
   }
 
-  :host img {
+  :host .image {
     display: block;
     width: 100%;
     height: 100%;
@@ -39,12 +64,16 @@
     border-radius: 1em;
   }
 
+  :host .image.nsfw {
+    display: none;
+  }
+
   :host .dropshadow {
     filter: drop-shadow(0.5em 0.25em 0.375em oklch(0 0 0 / 0.5));
   }
 
   :host .caption {
-    grid-area: caption;
+    grid-area: caption / image;
     text-align: center;
   }
 </style>