From 338dc9aa9505ff026b3e03d63f0bff6c198d0738 Mon Sep 17 00:00:00 2001
From: Cynthia Foxwell <gamers@riseup.net>
Date: Wed, 16 Jul 2025 16:17:29 -0600
Subject: [PATCH] userinfo: nothing is ever sized the same...

---
 src/modules/utility/userinfo.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/modules/utility/userinfo.js b/src/modules/utility/userinfo.js
index 0066a82..b843b1b 100644
--- a/src/modules/utility/userinfo.js
+++ b/src/modules/utility/userinfo.js
@@ -72,16 +72,16 @@ async function fetchQuestData() {
   questsFetch = Date.now() + 60 * 60 * 1000;
 }
 
-function nameplateBackground(color) {
+function nameplateBackground(width, height, color, light = false) {
   return sharp(
-    Buffer.from(`<svg viewBox="0 0 448 84" width="448" height="84" xmlns="http://www.w3.org/2000/svg">
+    Buffer.from(`<svg viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <linearGradient id="nameplate">
       <stop offset="0%" stop-color="${color}1A" />
-      <stop offset="100%" stop-color="${color}66" />
+      <stop offset="100%" stop-color="${color}${light ? "66" : "4D"}" />
     </linearGradient>
   </defs>
-  <rect x="0" y="0" width="448" height="84" fill="url('#nameplate')"/>
+  <rect x="0" y="0" width="${width}" height="${height}" fill="url('#nameplate')"/>
 </svg>`)
   );
 }
@@ -515,13 +515,16 @@ userinfo.callback = async function (msg, line) {
         const static = await fetch(imageUrl)
           .then((res) => res.arrayBuffer())
           .then((b) => Buffer.from(b));
+        const metadata = sharp(static).metadata();
 
-        const bg_light = nameplateBackground(palette.lightBackground);
+        const bg_light = nameplateBackground(metadata.width, metadata.height, palette.lightBackground, true);
         bg_light.composite([{input: static}]);
-        const bg_dark = nameplateBackground(palette.darkBackground);
+        const bg_dark = nameplateBackground(metadata.width, metadata.height, palette.darkBackground);
         bg_dark.composite([{input: static}]);
 
-        const final = sharp({create: {width: 448, height: 168, channels: 4, background: "transparent"}});
+        const final = sharp({
+          create: {width: metadata.width, height: metadata.height * 2, channels: 4, background: "transparent"},
+        });
         final.composite([
           {input: await bg_light.toBuffer(), gravity: "north"},
           {input: await bg_dark.toBuffer(), gravity: "south"},
@@ -552,6 +555,7 @@ userinfo.callback = async function (msg, line) {
         },
       ],
       image: {url: imageUrl},
+      footer: `SKU ID: ${nameplate.sku_id}`,
     };
   }