update docs, add S3 URL to allowlist

Author: andrelandgraf

app/routes/resources+/images.tsx

@@ -8,8 +8,9 @@ export async function loader({ request }: Route.LoaderArgs) {
 	headers.set('Cache-Control', 'public, max-age=31536000, immutable')
 	return getImgResponse(request, {
 		headers,
-		allowlistedOrigins: [domain],
-		cacheFolder: process.env.NODE_ENV === 'production' ? '/data/images' : './data/images',
+		allowlistedOrigins: [domain, process.env.AWS_ENDPOINT_URL_S3],
+		cacheFolder:
+			process.env.NODE_ENV === 'production' ? '/data/images' : './data/images',
 		getImgSource: ({ params }) => {
 			if (params.src.startsWith('/resources')) {
 				// Fetch image from resource endpoint

docs/decisions/039-image-optimization.md renamed to docs/decisions/041-image-optimization.md

@@ -34,10 +34,6 @@ Introduce an image optimization endpoint using the
 [openimg package](https://github.com/andrelandgraf/openimg). We can then use the
 `Img` component to query for optimized images and iterate from there.
 
-In the future, we may decide to look into [unpic-img](https://unpic.pics/img/)
-for futher enhancements on the client side and/or look into creating blurred
-placeholder images using openimg/node and openimg/vite or alternative solutions.
-
 ## Consequences
 
 Serving newly added images will now lead to an image optimization step whenever

docs/images.md renamed to docs/image-optimization.md

@@ -1,31 +1,19 @@
-# Images
-
-The Epic Stack distinguishes between user images and static app image assets.
-User images are stored in SQLite along with the rest of the application data,
-while static images are stored in the [../public/img/](../public/img/) folder.
-See the [images decision doc](./decisions/018-images.md) for more details.
-
-## User Images
-
-User images (uploaded by a user) are stored in SQLite and served via resource
-routes, for example:
-[/resources/user-images/$imageId](../app/routes/resources+/user-images.$imageId.tsx).
-
-## Image Optimization
+# Image Optimization
 
 The Epic Stack uses [openimg](https://github.com/andrelandgraf/openimg) to
 optimize images on demand, introduced via
 [this decision doc](./decisions/039-image-optimization.md).
 
-### Server Part
+## Server Part
 
 The [/resources/images](../app/routes/resources+/images.tsx) endpoint accepts
 the search parameters `src`, `w` (width), `h` (height), `format`, and `fit` to
 perform image transformations and serve optimized variants. The transformations
 are performed with `sharp`, and the optimized images are cached in
-`./data/images` on the filesystem and via HTTP caching.
+`./data/images` on the filesystem and via HTTP caching. All transformations happen
+via stream processing, so images are never loaded fully into memory at once.
 
-### Client Part
+## Client Part
 
 On the client side, the `Img` React component from openimg/react is used to
 query the [/resources/images](../app/routes/resources+/images.tsx) endpoint with
@@ -36,11 +24,11 @@ loading. It also computes `srcset` and `sizes` based on the provided `width` and
 `height` props. Use the `isAboveFold` prop on the `Img` component to priotize
 images that should load immediately.
 
-### Image Sources
+## Image Sources
 
 If you want to add a new image storage location, like an S3 bucket, update the
-[/resources/images](../app/routes/resources+/images.tsx) endpoint and modify the
-`getSource` function to instruct openimg on how to retrieve the source images
-from the new location. Currently, the endpoint uses fetch requests to retrieve
-user images from the resource route endpoints and the filesystem to retrieve
-static application assets from the public and assets folders.
+[/resources/images](../app/routes/resources+/images.tsx) endpoint and modify
+`getSource` and `allowlistedOrigins` to instruct openimg on how to retrieve the
+source images from the new location. Currently, the endpoint uses fetch requests
+to retrieve user images from the resource route endpoints and the filesystem to
+retrieve static application assets from the public and assets folders.