migrate over to the new stickers endpoint

Signed-off-by: Xe Iaso <me@xeiaso.net>

3 files changed, 24 insertions, 22 deletions

diff --git a/lume/src/_components/XeblogConv.tsx b/lume/src/_components/XeblogConv.tsx
index 66d5e10..3377735 100644
--- a/lume/src/_components/XeblogConv.tsx
+++ b/lume/src/_components/XeblogConv.tsx
@@ -15,7 +15,6 @@ const ConvSnippet = ({
 }: XeblogConvProps) => {
   const nameLower = name.toLowerCase();
   name = name.replace(" ", "_");
-  const size = standalone ? 256 : 128;
 
   return (
     <>
@@ -25,7 +24,7 @@ const ConvSnippet = ({
             style={`max-height:${standalone ? "6" : "4"}rem`}
             alt={`${name} is ${mood}`}
             loading="lazy"
-            src={`https://cdn.xeiaso.net/sticker/${nameLower}/${mood}/${size}`}
+            src={`https://stickers.xeiaso.net/sticker/${nameLower}/${mood}`}
           />
         </div>
         <div className="convsnippet min-w-0 self-center">
diff --git a/lume/src/_components/XeblogSticker.tsx b/lume/src/_components/XeblogSticker.tsx
index 713cad2..8a4a747 100644
--- a/lume/src/_components/XeblogSticker.tsx
+++ b/lume/src/_components/XeblogSticker.tsx
@@ -1,29 +1,28 @@
 export interface XeblogStickerProps {
   name: string;
   mood: string;
+  maxHeight?: string | null;
 }
 
-export default function XeblogSticker({ name, mood }: XeblogStickerProps) {
+export default function XeblogSticker({
+  name,
+  mood,
+  maxHeight = null,
+}: XeblogStickerProps) {
   const nameLower = name.toLowerCase();
   name = name.replace(" ", "_");
+  if (maxHeight === null) {
+    maxHeight = "12rem";
+  }
 
   return (
     <>
-      <picture>
-        <source
-          type="image/avif"
-          srcset={`https://cdn.xeiaso.net/file/christine-static/stickers/${nameLower}/${mood}.avif`}
-        />
-        <source
-          type="image/webp"
-          srcset={`https://cdn.xeiaso.net/file/christine-static/stickers/${nameLower}/${mood}.webp`}
-        />
-        <img
-          alt={`${name} is ${mood}`}
-          loading="lazy"
-          src={`https://cdn.xeiaso.net/file/christine-static/stickers/${nameLower}/${mood}.png`}
-        />
-      </picture>
+      <img
+        style={`max-height:${maxHeight}`}
+        alt={`${name} is ${mood}`}
+        loading="lazy"
+        src={`https://stickers.xeiaso.net/sticker/${nameLower}/${mood}`}
+      />
     </>
   );
 }
diff --git a/lume/src/characters.njk b/lume/src/characters.njk
index eb81119..de58d42 100644
--- a/lume/src/characters.njk
+++ b/lume/src/characters.njk
@@ -11,9 +11,13 @@ date: 2012-12-21
     <p class="mb-4">{{ character.description | md | safe }}</p>
     <details class="my-4">
         <summary>All stickers</summary>
-        {% for mood in character.stickers %}
-            <h3 class="text-md my-4">{{ mood }}</h3>
-            {{ comp.XeblogSticker({ name: character.name, mood: mood }) | safe }}
-        {% endfor %}
+        <div class="grid grid-cols-4">
+            {% for mood in character.stickers %}
+                <figure>
+                    {{ comp.XeblogSticker({ name: character.name, mood: mood, maxHeight: "10rem" }) | safe }}
+                    <figcaption>{{ mood }}</figcaption>
+                </figure>
+            {% endfor %}
+        </div>
     </details>
 {% endfor %}
\ No newline at end of file