From 766d8b1e00a6648294b1bbf238cc478fae065dbe Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 4 Feb 2024 07:28:31 -0800
Subject: feat(badges): use thumbnails for catbox.moe

---
 src/routes/user/[user]/badges/+page.svelte | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 28b60c6f..24a3de8f 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -282,6 +282,9 @@
 				return set;
 			}, {});
 	};
+
+	const thumbnail = (url: string | undefined) =>
+		url && url.includes('catbox.moe') ? url.replace('catbox.moe/', 'catbox.moe/thumbs/t_') : url;
 </script>
 
 <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} />
@@ -331,11 +334,11 @@
 														use:tooltip
 													>
 														<img
-															src={cdn(badge.image)}
+															src={cdn(thumbnail(badge.image))}
 															alt={badge.description}
 															loading="lazy"
 															class="badge"
-															on:error={(e) => fallback(e, badge.image)}
+															on:error={(e) => fallback(e, thumbnail(badge.image))}
 														/>
 													</a>
 												{/each}
@@ -499,10 +502,10 @@
 													use:tooltip
 												>
 													<img
-														src={cdn(badge.image)}
+														src={cdn(thumbnail(badge.image))}
 														alt={badge.description}
 														loading="lazy"
-														on:error={(e) => fallback(e, badge.image)}
+														on:error={(e) => fallback(e, thumbnail(badge.image))}
 													/>
 												</a>
 											{:else}
@@ -517,10 +520,10 @@
 													use:tooltip
 												>
 													<img
-														src={cdn(badge.image)}
+														src={cdn(thumbnail(badge.image))}
 														alt={badge.description}
 														loading="lazy"
-														on:error={(e) => fallback(e, badge.image)}
+														on:error={(e) => fallback(e, thumbnail(badge.image))}
 													/>
 												</a>
 											{/if}
-- 
cgit v1.2.3