Badges url via function

app/routes/badges.tsx

@@ -5,6 +5,7 @@ import { db } from "~/db";
 import type { All } from "~/db/models/badges.server";
 import styles from "~/styles/badges.css";
 import { jsonCached } from "~/utils/remix";
+import { badgeUrl } from "~/utils/urls";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -35,8 +36,7 @@ export default function BadgesPageLayout() {
             .map((badge) => (
               <Link key={badge.id} to={String(badge.id)}>
                 <img
-                  // xxx: from constants
-                  src={`/gif/badges/${badge.code}.gif`}
+                  src={badgeUrl({ code: badge.code, extension: "gif" })}
                   alt={badge.displayName}
                   title={badge.displayName}
                   width="64"

app/routes/badges/$id.tsx

@@ -7,7 +7,7 @@ import type { OwnersByBadge } from "~/db/models/badges.server";
 import type { Badge } from "~/db/types";
 import { jsonCached } from "~/utils/remix";
 import { discordFullName } from "~/utils/strings";
-import { BADGES_PAGE } from "~/utils/urls";
+import { BADGES_PAGE, badgeUrl } from "~/utils/urls";
 import type { BadgesLoaderData } from "../badges";
 
 export interface BadgeDetailsLoaderData {
@@ -38,7 +38,7 @@ export default function BadgeDetailsPage() {
   return (
     <div className="stack md items-center">
       <img
-        src={`/gif/badges/${badge.code}.gif`}
+        src={badgeUrl({ code: badge.code, extension: "gif" })}
         alt={badge.displayName}
         title={badge.displayName}
         width="200"

app/utils/urls.ts

@@ -1,3 +1,5 @@
+import type { Badge } from "~/db/types";
+
 export const SENDOU_INK_DISCORD_URL = "https://discord.gg/sendou";
 export const SENDOU_INK_TWITTER_URL = "https://twitter.com/sendouink";
 export const SENDOU_INK_PATREON_URL = "https://patreon.com/sendou";
@@ -13,3 +15,11 @@ export const STOP_IMPERSONATING_URL = "/auth/impersonate/stop";
 export const userPage = (discordId: string) => `/u/${discordId}`;
 export const impersonateUrl = (idToLogInAs: number) =>
   `/auth/impersonate?id=${idToLogInAs}`;
+
+export const badgeUrl = ({
+  code,
+  extension,
+}: {
+  code: Badge["code"];
+  extension: "gif" | "avif" | "png";
+}) => `/badges/${code}.${extension}`;