Badge thumbnail images

README.md

@@ -35,3 +35,17 @@ sendou.ink/
 ├── public/ -- Images, built assets etc. static files to be served as is
 └── scripts/ -- Stand-alone scripts to be run outside of the app
 ```
+
+## Commands
+
+### Converting gifs (badges) to thumbnail
+
+### png
+
+```bash
+sips -s format png ./*.gif --out .
+```
+
+### avif
+
+https://github.com/lovell/avif-cli

app/components/Image.tsx

@@ -1,18 +1,20 @@
 export function Image({
   path,
   alt,
+  title,
   className,
   width,
   height,
 }: {
   path: string;
   alt: string;
-  className: string;
+  title?: string;
+  className?: string;
   width?: number;
   height?: number;
 }) {
   return (
-    <picture>
+    <picture title={title}>
       <source
         type="image/avif"
         srcSet={`${path}.avif`}

app/db/models/badges.server.ts

@@ -27,7 +27,6 @@ const allStm = sql.prepare(`
 export type All = Array<Pick<Badge, "id" | "displayName" | "code">>;
 
 export function all() {
-  return []; // TODO: remove when page is done
   return allStm.all() as All;
 }
 

app/routes/badges.tsx

@@ -1,5 +1,6 @@
 import type { LinksFunction, LoaderFunction } from "@remix-run/node";
 import { Link, Outlet, useLoaderData, useParams } from "@remix-run/react";
+import { Image } from "~/components/Image";
 import { Main } from "~/components/Main";
 import { db } from "~/db";
 import type { All } from "~/db/models/badges.server";
@@ -19,7 +20,6 @@ export const loader: LoaderFunction = () => {
   return jsonCached<BadgesLoaderData>({ badges: db.badges.all() }, 120);
 };
 
-// xxx: https://web.dev/replace-gifs-with-videos/ check possibility to replace gif
 export default function BadgesPageLayout() {
   const data = useLoaderData<BadgesLoaderData>();
   const params = useParams();
@@ -34,13 +34,14 @@ export default function BadgesPageLayout() {
           {data.badges
             .filter((b) => !badgeIdBeingViewed || b.id !== badgeIdBeingViewed)
             .map((badge) => (
+              // xxx: firefox and squid junction avif fails to display
               <Link key={badge.id} to={String(badge.id)}>
-                <img
-                  src={badgeUrl({ code: badge.code, extension: "gif" })}
-                  alt={badge.displayName}
+                <Image
+                  path={badgeUrl({ code: badge.code })}
                   title={badge.displayName}
-                  width="64"
-                  height="64"
+                  alt={badge.displayName}
+                  width={64}
+                  height={64}
                 />
               </Link>
             ))}

app/routes/u.$identifier/index.tsx

@@ -12,6 +12,7 @@ import { TwitchIcon } from "~/components/icons/Twitch";
 import { TwitterIcon } from "~/components/icons/Twitter";
 import { YouTubeIcon } from "~/components/icons/YouTube";
 import { badgeExplanationText } from "../badges/$id";
+import { badgeUrl } from "~/utils/urls";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -136,7 +137,7 @@ function BadgeContainer(props: { badges: UserPageLoaderData["badges"] }) {
       >
         <img
           key={bigBadge.code}
-          src={`/gif/badges/${bigBadge.code}.gif`}
+          src={badgeUrl({ code: bigBadge.code, extension: "gif" })}
           alt={bigBadge.displayName}
           title={bigBadge.displayName}
           width="125"
@@ -147,7 +148,7 @@ function BadgeContainer(props: { badges: UserPageLoaderData["badges"] }) {
             {smallBadges.map((badge) => (
               <div key={badge.id} className="u__small-badge-container">
                 <img
-                  src={`/gif/badges/${badge.code}.gif`}
+                  src={badgeUrl({ code: badge.code, extension: "gif" })}
                   alt={badge.displayName}
                   title={badge.displayName}
                   onClick={() => setBadgeFirst(badge)}

app/utils/urls.ts

@@ -21,5 +21,5 @@ export const badgeUrl = ({
   extension,
 }: {
   code: Badge["code"];
-  extension: "gif" | "avif" | "png";
-}) => `/badges/${code}.${extension}`;
+  extension?: "gif";
+}) => `/badges/${code}${extension ? `.${extension}` : ""}`;