feat(frontend): self host avatar placeholders

frontend/src/lib/api/entities.ts

@@ -153,19 +153,24 @@ export const pronounDisplay = (entry: Pronoun) => {
 };
 
 export const userAvatars = (user: User | MeUser | MemberPartialUser) => {
-  if (!user.avatar) return [];
+  if (!user.avatar) return defaultAvatars;
 
   return [
     `${PUBLIC_BASE_URL}/media/users/${user.id}/${user.avatar}.webp`,
-    `${PUBLIC_BASE_URL}/media/users/${user.id}/${user.avatar}.webp`,
+    `${PUBLIC_BASE_URL}/media/users/${user.id}/${user.avatar}.jpg`,
   ];
 };
 
 export const memberAvatars = (member: Member | PartialMember) => {
-  if (!member.avatar) return [];
+  if (!member.avatar) return defaultAvatars;
 
   return [
     `${PUBLIC_BASE_URL}/media/members/${member.id}/${member.avatar}.webp`,
-    `${PUBLIC_BASE_URL}/media/members/${member.id}/${member.avatar}.webp`,
+    `${PUBLIC_BASE_URL}/media/members/${member.id}/${member.avatar}.jpg`,
   ];
 };
+
+export const defaultAvatars = [
+  `${PUBLIC_BASE_URL}/default/512.webp`,
+  `${PUBLIC_BASE_URL}/default/512.jpg`,
+];

frontend/src/lib/components/FallbackImage.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { defaultAvatars } from "$lib/api/entities";
+
   export let urls: string[];
   export let alt: string;
   export let width = 300;
@@ -14,6 +16,8 @@
       return "application/octet-stream";
     }
   };
+
+  $: urls = urls.length > 0 ? urls : defaultAvatars;
 </script>
 
 {#if urls.length > 0}
@@ -21,9 +25,8 @@
     {#each urls as url}
       <source {width} srcSet={url} type={contentTypeFor(url)} />
     {/each}
-    <img {width} src={urls[0]} {alt} class="rounded-circle img-fluid" />
+    <img {width} src={urls[0] || defaultAvatars[0]} {alt} class="rounded-circle img-fluid" />
   </picture>
 {:else}
-  <!-- TODO: actual placeholder that isn't a cat -->
-  <img {width} class="rounded-circle img-fluid" src="https://placekitten.com/512/512" {alt} />
+  <img {width} class="rounded-circle img-fluid" src={defaultAvatars[0]} {alt} />
 {/if}