migrate over to the new stickers endpoint

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

4 files changed, 29 insertions, 27 deletions

diff --git a/dhall/characters.dhall b/dhall/characters.dhall
index ad46316..f10f7c2 100644
--- a/dhall/characters.dhall
+++ b/dhall/characters.dhall
@@ -38,16 +38,16 @@ let characters =
         , stickerName = "numa"
         , defaultPose = "delet"
         , description =
-            "Numa is the keeper of firey hot takes. Born in the fires of shitposting and satire, Numa genuinely does care about the topics being discussed, but has a bad habit of communicating in shitposts, memes, and hot takes intentionally designed to make you reconsider how serious she is being about any given topic. She could definitely be a wonderful teacher if she could lessen up a bit on the satire. The stickers for Numa are 3d renders of the author's v-tubing avatar, but Numa is written differently than the characterization of the author when streaming. Numa is a fairly tall (6') human with neon green hair that usually wears it in a high ponytail."
+            "Numa is the keeper of firey hot takes. Born in the fires of shitposting and satire, Numa genuinely does care about the topics being discussed, but has a bad habit of communicating in shitposts, memes, and hot takes intentionally designed to make you reconsider how serious she is being about any given topic. She could definitely be a wonderful teacher if she could lessen up a bit on the satire."
         , stickers =
           [ "delet"
-          , "delet2"
-          , "dismay"
+          , "disgust"
           , "happy"
-          , "neutral"
+          , "selfie"
+          , "sleepy"
+          , "smug"
           , "stare"
           , "thinking"
-          , "vibe"
           ]
         }
       , C::{
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