Move all immutable assets to one folder

Closes #918

README.md

@@ -81,6 +81,8 @@ sendou.ink/
 └── scripts/ -- Stand-alone scripts to be run outside of the app
 ```
 
+NOTE: `public/static-assets` should only have files that don't change as it is cached for 1 month.
+
 ## Commands
 
 ### Converting gifs (badges) to thumbnail (.png)

app/components/Avatar.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import type { User } from "~/db/types";
 import * as React from "react";
+import { BLANK_IMAGE_URL } from "~/utils/urls";
 
 const dimensions = {
   xxs: 24,
@@ -38,7 +39,7 @@ export function Avatar({
           ? `https://cdn.discordapp.com/avatars/${user.discordId}/${
               user.discordAvatar
             }.webp${size === "lg" ? "?size=240" : "?size=80"}`
-          : "/img/blank.gif" // avoid broken image placeholder
+          : BLANK_IMAGE_URL // avoid broken image placeholder
       }
       alt={alt}
       title={alt ? alt : undefined}

app/components/Placement.tsx

@@ -1,4 +1,9 @@
 import { useTranslation } from "~/hooks/useTranslation";
+import {
+  FIRST_PLACEMENT_ICON_PATH,
+  SECOND_PLACEMENT_ICON_PATH,
+  THIRD_PLACEMENT_ICON_PATH,
+} from "~/utils/urls";
 
 export type PlacementProps = {
   placement: number;
@@ -9,11 +14,11 @@ export type PlacementProps = {
 const getSpecialPlacementIconPath = (placement: number): string | null => {
   switch (placement) {
     case 3:
-      return "/svg/placements/third.svg";
+      return THIRD_PLACEMENT_ICON_PATH;
     case 2:
-      return "/svg/placements/second.svg";
+      return SECOND_PLACEMENT_ICON_PATH;
     case 1:
-      return "/svg/placements/first.svg";
+      return FIRST_PLACEMENT_ICON_PATH;
     default:
       return null;
   }

app/components/layout/Footer.tsx

@@ -9,6 +9,7 @@ import {
   SENDOU_INK_GITHUB_URL,
   SENDOU_INK_PATREON_URL,
   SENDOU_INK_TWITTER_URL,
+  SENDOU_LOVE_EMOJI_PATH,
   SPLATOON_2_SENDOU_IN_URL,
   userPage,
 } from "~/utils/urls";
@@ -86,7 +87,7 @@ export function Footer({
             {t("footer.thanks")}
             <Image
               alt=""
-              path="/img/layout/sendou_love"
+              path={SENDOU_LOVE_EMOJI_PATH}
               width={24}
               height={24}
             />

app/components/layout/Menu.tsx

@@ -6,6 +6,7 @@ import { useIsMounted } from "~/hooks/useIsMounted";
 import { canPerformAdminActions } from "~/permissions";
 import { useUser } from "~/modules/auth";
 import { useTranslation } from "~/hooks/useTranslation";
+import { navIconUrl } from "~/utils/urls";
 
 export function Menu({
   expanded,
@@ -47,7 +48,7 @@ export function Menu({
           >
             <Image
               className="layout__menu__link__icon"
-              path={`/img/layout/${navItem.name.replace(" ", "")}`}
+              path={navIconUrl(navItem.name)}
               alt={navItem.name}
             />
             <div>{t(`pages.${navItem.name}` as any)}</div>

app/styles/common.css

@@ -461,7 +461,7 @@ dialog::backdrop {
   flex-wrap: wrap;
   justify-content: center;
   background-color: var(--bg-lighter);
-  background-image: url("/svg/background-pattern.svg");
+  background-image: url("/static-assets/svg/background-pattern.svg");
   margin-block-end: var(--s-4);
   overflow-x: auto;
 }
@@ -648,7 +648,7 @@ dialog::backdrop {
 .avatar {
   border-radius: 50%;
   background-color: var(--bg-lighter);
-  background-image: url("/svg/background-pattern.svg");
+  background-image: url("/static-assets/svg/background-pattern.svg");
 }
 
 .alert > svg {

app/styles/layout.css

@@ -23,7 +23,7 @@
   justify-content: center;
   border-radius: var(--rounded);
   background-color: var(--bg-lighter);
-  background-image: url("/svg/background-pattern.svg");
+  background-image: url("/static-assets/svg/background-pattern.svg");
 }
 
 .layout__avatar {
@@ -153,7 +153,7 @@
   height: max-content;
   margin-top: 5rem;
   background-color: var(--bg-lighter);
-  background-image: url("/svg/background-pattern.svg");
+  background-image: url("/static-assets/svg/background-pattern.svg");
   border-end-start-radius: var(--rounded);
   border-start-start-radius: var(--rounded);
   overflow-y: auto;
@@ -171,7 +171,7 @@
   height: 2rem;
   border-radius: var(--rounded);
   background-color: var(--bg-lighter);
-  background-image: url("/svg/background-pattern.svg");
+  background-image: url("/static-assets/svg/background-pattern.svg");
 }
 
 .layout__menu__links {

app/utils/images.ts

@@ -1 +0,0 @@
-export const layoutIcon = (icon: string) => `/img/layout/${icon}.webp`;

app/utils/urls.ts

@@ -48,9 +48,18 @@ export const STOP_IMPERSONATING_URL = "/auth/impersonate/stop";
 export const SEED_URL = "/seed";
 export const PLANNER_URL = "/plans";
 
-export const COMMON_PREVIEW_IMAGE = "/img/layout/common-preview.png";
-export const ERROR_GIRL_IMAGE_PATH = `/img/layout/error-girl`;
-export const LOGO_PATH = `/img/layout/logo`;
+export const BLANK_IMAGE_URL = "/static-assets/img/blank.gif";
+export const COMMON_PREVIEW_IMAGE =
+  "/static-assets/img/layout/common-preview.png";
+export const ERROR_GIRL_IMAGE_PATH = "/static-assets/img/layout/error-girl";
+export const LOGO_PATH = "/static-assets/img/layout/logo";
+export const SENDOU_LOVE_EMOJI_PATH = "/static-assets/img/layout/sendou_love";
+export const FIRST_PLACEMENT_ICON_PATH =
+  "/static-assets/svg/placements/first.svg";
+export const SECOND_PLACEMENT_ICON_PATH =
+  "/static-assets/svg/placements/second.svg";
+export const THIRD_PLACEMENT_ICON_PATH =
+  "/static-assets/svg/placements/third.svg";
 
 export const GET_ALL_USERS_ROUTE = "/users";
 export const GET_ALL_EVENTS_WITH_MAP_POOLS_ROUTE = "/calendar/map-pool-events";
@@ -115,36 +124,38 @@ export const badgeUrl = ({
 }: {
   code: Badge["code"];
   extension?: "gif";
-}) => `/badges/${code}${extension ? `.${extension}` : ""}`;
+}) => `/static-assets/badges/${code}${extension ? `.${extension}` : ""}`;
 export const articlePreviewUrl = (slug: string) =>
-  `/img/article-previews/${slug}.png`;
+  `/static-assets/img/article-previews/${slug}.png`;
 
 export const navIconUrl = (navItem: typeof navItems[number]["name"]) =>
-  `/img/layout/${navItem}`;
+  `/static-assets/img/layout/${navItem}`;
 export const gearImageUrl = (gearType: GearType, gearSplId: number) =>
-  `/img/gear/${gearType.toLowerCase()}/${gearSplId}`;
+  `/static-assets/img/gear/${gearType.toLowerCase()}/${gearSplId}`;
 export const weaponCategoryUrl = (
   category: typeof weaponCategories[number]["name"]
-) => `/img/weapon-categories/${category}`;
+) => `/static-assets/img/weapon-categories/${category}`;
 export const mainWeaponImageUrl = (mainWeaponSplId: MainWeaponId) =>
-  `/img/main-weapons/${mainWeaponSplId}`;
+  `/static-assets/img/main-weapons/${mainWeaponSplId}`;
 export const outlinedMainWeaponImageUrl = (mainWeaponSplId: MainWeaponId) =>
-  `/img/main-weapons-outlined/${mainWeaponSplId}`;
+  `/static-assets/img/main-weapons-outlined/${mainWeaponSplId}`;
 export const subWeaponImageUrl = (subWeaponSplId: SubWeaponId) =>
-  `/img/sub-weapons/${subWeaponSplId}`;
+  `/static-assets/img/sub-weapons/${subWeaponSplId}`;
 export const specialWeaponImageUrl = (specialWeaponSplId: SpecialWeaponId) =>
-  `/img/special-weapons/${specialWeaponSplId}`;
+  `/static-assets/img/special-weapons/${specialWeaponSplId}`;
 export const abilityImageUrl = (ability: AbilityWithUnknown) =>
-  `/img/abilities/${ability}`;
-export const modeImageUrl = (mode: ModeShort) => `/img/modes/${mode}`;
-export const stageImageUrl = (stageId: StageId) => `/img/stages/${stageId}`;
+  `/static-assets/img/abilities/${ability}`;
+export const modeImageUrl = (mode: ModeShort) =>
+  `/static-assets/img/modes/${mode}`;
+export const stageImageUrl = (stageId: StageId) =>
+  `/static-assets/img/stages/${stageId}`;
 export const stageMinimapImageUrlWithEnding = ({
   stageId,
   modeShort,
 }: {
   stageId: StageId;
   modeShort: ModeShort;
-}) => `/img/stage-minimaps/${stageId}-${modeShort}.jpeg`;
+}) => `/static-assets/img/stage-minimaps/${stageId}-${modeShort}.jpeg`;
 
 export function resolveBaseUrl(url: string) {
   return new URL(url).host;