Add openimg for image optimization

.gitignore

@@ -15,6 +15,7 @@ node_modules
 /playwright/.cache/
 /tests/fixtures/email/
 /tests/fixtures/uploaded/
+/tests/fixtures/openimg/
 /coverage
 
 /other/cache.db

app/components/user-dropdown.tsx

@@ -1,3 +1,4 @@
+import { Img } from 'openimg/react'
 import { useRef } from 'react'
 import { Link, Form } from 'react-router'
 import { getUserImgSrc } from '#app/utils/misc.tsx'
@@ -25,10 +26,12 @@ export function UserDropdown() {
 						onClick={(e) => e.preventDefault()}
 						className="flex items-center gap-2"
 					>
-						<img
+						<Img
 							className="h-8 w-8 rounded-full object-cover"
 							alt={user.name ?? user.username}
-							src={getUserImgSrc(user.image?.id)}
+							src={getUserImgSrc(user.image?.objectKey)}
+							width={256}
+							height={256}
 						/>
 						<span className="text-body-sm font-bold">
 							{user.name ?? user.username}

app/root.tsx

@@ -1,3 +1,4 @@
+import { OpenImgContextProvider } from 'openimg/react'
 import {
 	data,
 	Link,
@@ -33,7 +34,7 @@ import { prisma } from './utils/db.server.ts'
 import { getEnv } from './utils/env.server.ts'
 import { pipeHeaders } from './utils/headers.server.ts'
 import { honeypot } from './utils/honeypot.server.ts'
-import { combineHeaders, getDomainUrl } from './utils/misc.tsx'
+import { combineHeaders, getDomainUrl, getImgSrc } from './utils/misc.tsx'
 import { useNonce } from './utils/nonce-provider.ts'
 import { type Theme, getTheme } from './utils/theme.server.ts'
 import { makeTimings, time } from './utils/timing.server.ts'
@@ -83,7 +84,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 							id: true,
 							name: true,
 							username: true,
-							image: { select: { id: true } },
+							image: { select: { objectKey: true } },
 							roles: {
 								select: {
 									name: true,
@@ -194,7 +195,10 @@ function App() {
 	useToast(data.toast)
 
 	return (
-		<>
+		<OpenImgContextProvider
+			optimizerEndpoint="/resources/images"
+			getSrc={getImgSrc}
+		>
 			<div className="flex min-h-screen flex-col justify-between">
 				<header className="container py-6">
 					<nav className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
@@ -226,7 +230,7 @@ function App() {
 			</div>
 			<EpicToaster closeButton position="top-center" theme={theme} />
 			<EpicProgress />
-		</>
+		</OpenImgContextProvider>
 	)
 }
 

app/routes/resources+/download-user-data.tsx

@@ -1,6 +1,6 @@
 import { requireUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
-import { getDomainUrl } from '#app/utils/misc.tsx'
+import { getDomainUrl, getNoteImgSrc, getUserImgSrc } from '#app/utils/misc.tsx'
 import { type Route } from './+types/download-user-data.ts'
 
 export async function loader({ request }: Route.LoaderArgs) {
@@ -47,14 +47,14 @@ export async function loader({ request }: Route.LoaderArgs) {
 			image: user.image
 				? {
 						...user.image,
-						url: `${domain}/resources/user-images/${user.image.id}`,
+						url: domain + getUserImgSrc(user.image.objectKey),
 					}
 				: null,
 			notes: user.notes.map((note) => ({
 				...note,
 				images: note.images.map((image) => ({
 					...image,
-					url: `${domain}/resources/note-images/${image.id}`,
+					url: domain + getNoteImgSrc(image.objectKey),
 				})),
 			})),
 		},

app/routes/resources+/images.tsx

@@ -0,0 +1,62 @@
+import { invariantResponse } from '@epic-web/invariant'
+import { getImgResponse } from 'openimg/node'
+import { getDomainUrl } from '#app/utils/misc.tsx'
+import { getSignedGetRequestInfo } from '#app/utils/storage.server.ts'
+import { type Route } from './+types/images'
+
+export async function loader({ request }: Route.LoaderArgs) {
+	const url = new URL(request.url)
+	const searchParams = url.searchParams
+
+	const headers = new Headers()
+	headers.set('Cache-Control', 'public, max-age=31536000, immutable')
+
+	const objectKey = searchParams.get('objectKey')
+
+	return getImgResponse(request, {
+		headers,
+		allowlistedOrigins: [
+			getDomainUrl(request),
+			process.env.AWS_ENDPOINT_URL_S3,
+		].filter(Boolean),
+		cacheFolder:
+			process.env.NODE_ENV === 'production'
+				? '/data/images'
+				: './tests/fixtures/openimg',
+		getImgSource: () => {
+			if (objectKey) {
+				const { url: signedUrl, headers: signedHeaders } =
+					getSignedGetRequestInfo(objectKey)
+				return {
+					type: 'fetch',
+					url: signedUrl,
+					headers: signedHeaders,
+				}
+			}
+
+			const src = searchParams.get('src')
+			invariantResponse(src, 'src query parameter is required', { status: 400 })
+
+			if (URL.canParse(src)) {
+				// Fetch image from external URL; will be matched against allowlist
+				return {
+					type: 'fetch',
+					url: src,
+				}
+			}
+			// Retrieve image from filesystem (public folder)
+			if (src.startsWith('/assets')) {
+				// Files managed by Vite
+				return {
+					type: 'fs',
+					path: '.' + src,
+				}
+			}
+			// Fallback to files in public folder
+			return {
+				type: 'fs',
+				path: './public' + src,
+			}
+		},
+	})
+}

app/routes/settings+/profile.index.tsx

@@ -2,6 +2,7 @@ import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { invariantResponse } from '@epic-web/invariant'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { Img } from 'openimg/react'
 import { data, Link, useFetcher } from 'react-router'
 import { z } from 'zod'
 import { ErrorList, Field } from '#app/components/forms.tsx'
@@ -36,7 +37,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 			username: true,
 			email: true,
 			image: {
-				select: { id: true },
+				select: { objectKey: true },
 			},
 			_count: {
 				select: {
@@ -101,10 +102,13 @@ export default function EditUserProfile({ loaderData }: Route.ComponentProps) {
 		<div className="flex flex-col gap-12">
 			<div className="flex justify-center">
 				<div className="relative h-52 w-52">
-					<img
-						src={getUserImgSrc(loaderData.user.image?.id)}
+					<Img
+						src={getUserImgSrc(loaderData.user.image?.objectKey)}
 						alt={loaderData.user.username}
 						className="h-full w-full rounded-full object-cover"
+						width={832}
+						height={832}
+						isAboveFold
 					/>
 					<Button
 						asChild

app/routes/settings+/profile.photo.tsx

@@ -56,7 +56,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 			id: true,
 			name: true,
 			username: true,
-			image: { select: { id: true } },
+			image: { select: { objectKey: true } },
 		},
 	})
 	invariantResponse(user, 'User not found', { status: 404 })
@@ -142,7 +142,9 @@ export default function PhotoRoute({
 				<img
 					src={
 						newImageSrc ??
-						(loaderData.user ? getUserImgSrc(loaderData.user.image?.id) : '')
+						(loaderData.user
+							? getUserImgSrc(loaderData.user.image?.objectKey)
+							: '')
 					}
 					className="h-52 w-52 rounded-full object-cover"
 					alt={loaderData.user?.name ?? loaderData.user?.username}
@@ -202,7 +204,7 @@ export default function PhotoRoute({
 					>
 						<Icon name="trash">Reset</Icon>
 					</Button>
-					{loaderData.user.image?.id ? (
+					{loaderData.user.image ? (
 						<StatusButton
 							className="peer-valid:hidden"
 							variant="destructive"

app/routes/users+/$username.tsx

@@ -1,4 +1,5 @@
 import { invariantResponse } from '@epic-web/invariant'
+import { Img } from 'openimg/react'
 import {
 	type LoaderFunctionArgs,
 	Form,
@@ -21,7 +22,7 @@ export async function loader({ params }: LoaderFunctionArgs) {
 			name: true,
 			username: true,
 			createdAt: true,
-			image: { select: { id: true } },
+			image: { select: { id: true, objectKey: true } },
 		},
 		where: {
 			username: params.username,
@@ -48,10 +49,12 @@ export default function ProfileRoute() {
 				<div className="relative w-52">
 					<div className="absolute -top-40">
 						<div className="relative">
-							<img
-								src={getUserImgSrc(data.user.image?.id)}
+							<Img
+								src={getUserImgSrc(data.user.image?.objectKey)}
 								alt={userDisplayName}
 								className="h-52 w-52 rounded-full object-cover"
+								width={832}
+								height={832}
 							/>
 						</div>
 					</div>

app/routes/users+/$username_+/__note-editor.tsx

@@ -8,6 +8,7 @@ import {
 	type FieldMetadata,
 } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
+import { Img } from 'openimg/react'
 import { useState } from 'react'
 import { Form } from 'react-router'
 import { z } from 'zod'
@@ -108,11 +109,11 @@ export function NoteEditor({
 						<div>
 							<Label>Images</Label>
 							<ul className="flex flex-col gap-4">
-								{imageList.map((image, index) => {
-									console.log('image.key', image.key)
+								{imageList.map((imageMeta, index) => {
+									const image = note?.images[index]
 									return (
 										<li
-											key={image.key}
+											key={imageMeta.key}
 											className="relative border-b-2 border-muted-foreground"
 										>
 											<button
@@ -129,7 +130,10 @@ export function NoteEditor({
 													Remove image {index + 1}
 												</span>
 											</button>
-											<ImageChooser meta={image} />
+											<ImageChooser
+												meta={imageMeta}
+												objectKey={image?.objectKey}
+											/>
 										</li>
 									)
 								})}
@@ -165,11 +169,17 @@ export function NoteEditor({
 	)
 }
 
-function ImageChooser({ meta }: { meta: FieldMetadata<ImageFieldset> }) {
+function ImageChooser({
+	meta,
+	objectKey,
+}: {
+	meta: FieldMetadata<ImageFieldset>
+	objectKey: string | undefined
+}) {
 	const fields = meta.getFieldset()
 	const existingImage = Boolean(fields.id.initialValue)
 	const [previewImage, setPreviewImage] = useState<string | null>(
-		fields.id.initialValue ? getNoteImgSrc(fields.id.initialValue) : null,
+		objectKey ? getNoteImgSrc(objectKey) : null,
 	)
 	const [altText, setAltText] = useState(fields.altText.initialValue ?? '')
 
@@ -188,10 +198,12 @@ function ImageChooser({ meta }: { meta: FieldMetadata<ImageFieldset> }) {
 						>
 							{previewImage ? (
 								<div className="relative">
-									<img
+									<Img
 										src={previewImage}
 										alt={altText ?? ''}
 										className="h-32 w-32 rounded-lg object-cover"
+										width={512}
+										height={512}
 									/>
 									{existingImage ? null : (
 										<div className="pointer-events-none absolute -right-0.5 -top-0.5 rotate-12 rounded-sm bg-secondary px-2 py-1 text-xs text-secondary-foreground shadow-md">