Implement photo thumbnails

This implements generating image thumbnails on the fly via ImageMagick WASM, and tells the browser to cache them for a week, making the loading of photo directories much faster when it has many large images.

Closes #12

components/photos/ListPhotos.tsx

@@ -48,7 +48,7 @@ export default function ListPhotos(
                     {isImage
                       ? (
                         <img
-                          src={`/files/open/${file.file_name}?path=${file.parent_path}`}
+                          src={`/photos/thumbnail/${file.file_name}?path=${file.parent_path}`}
                           class='h-auto max-w-full rounded-md'
                           alt={file.file_name}
                           title={file.file_name}

deno.json

@@ -25,6 +25,7 @@
     "./": "./",
     "xml": "https://deno.land/x/xml@2.1.3/mod.ts",
     "mrmime": "https://deno.land/x/mrmime@v2.0.0/mod.ts",
+    "imagemagick": "https://deno.land/x/imagemagick_deno@0.0.26/mod.ts",
     "fresh/": "https://deno.land/x/fresh@1.6.8/",
     "$fresh/": "https://deno.land/x/fresh@1.6.8/",
     "preact": "https://esm.sh/preact@10.19.6",

fresh.gen.ts

@@ -36,6 +36,7 @@ import * as $news_feeds from './routes/news/feeds.tsx';
 import * as $notes from './routes/notes.tsx';
 import * as $notes_open_fileName_ from './routes/notes/open/[fileName].tsx';
 import * as $photos from './routes/photos.tsx';
+import * as $photos_thumbnail_fileName_ from './routes/photos/thumbnail/[fileName].tsx';
 import * as $settings from './routes/settings.tsx';
 import * as $signup from './routes/signup.tsx';
 import * as $Settings from './islands/Settings.tsx';
@@ -85,6 +86,7 @@ const manifest = {
     './routes/notes.tsx': $notes,
     './routes/notes/open/[fileName].tsx': $notes_open_fileName_,
     './routes/photos.tsx': $photos,
+    './routes/photos/thumbnail/[fileName].tsx': $photos_thumbnail_fileName_,
     './routes/settings.tsx': $settings,
     './routes/signup.tsx': $signup,
   },

routes/photos/thumbnail/[fileName].tsx

@@ -0,0 +1,80 @@
+import { Handlers } from 'fresh/server.ts';
+import { ImageMagick, initialize, MagickGeometry } from 'imagemagick';
+
+import { FreshContextState } from '/lib/types.ts';
+import { getFile } from '/lib/data/files.ts';
+
+interface Data {}
+
+const MIN_WIDTH = 25;
+const MIN_HEIGHT = 25;
+const MAX_WIDTH = 2048;
+const MAX_HEIGHT = 2048;
+
+export const handler: Handlers<Data, FreshContextState> = {
+  async GET(request, context) {
+    if (!context.state.user) {
+      return new Response('Redirect', { status: 303, headers: { 'Location': `/login` } });
+    }
+
+    const { fileName } = context.params;
+
+    if (!fileName) {
+      return new Response('Not Found', { status: 404 });
+    }
+
+    const searchParams = new URL(request.url).searchParams;
+
+    let currentPath = searchParams.get('path') || '/';
+
+    // Send invalid paths back to root
+    if (!currentPath.startsWith('/') || currentPath.includes('../')) {
+      currentPath = '/';
+    }
+
+    // Always append a trailing slash
+    if (!currentPath.endsWith('/')) {
+      currentPath = `${currentPath}/`;
+    }
+
+    const fileResult = await getFile(context.state.user.id, currentPath, decodeURIComponent(fileName));
+
+    if (!fileResult.success) {
+      return new Response('Not Found', { status: 404 });
+    }
+
+    const width = parseInt(searchParams.get('width') || '500', 10);
+    const height = parseInt(searchParams.get('height') || '500', 10);
+
+    if (
+      fileResult.contentType?.split('/')[0] !== 'image' || isNaN(width) || isNaN(height) ||
+      width > MAX_WIDTH || height > MAX_HEIGHT || width < MIN_WIDTH || height < MIN_HEIGHT
+    ) {
+      return new Response('Bad Request', { status: 400 });
+    }
+
+    await initialize();
+
+    const sizingData = new MagickGeometry(
+      width,
+      height,
+    );
+    sizingData.ignoreAspectRatio = false;
+
+    const resizedImageContents = await new Promise<Uint8Array>((resolve) => {
+      ImageMagick.read(fileResult.contents!, (image) => {
+        image.resize(sizingData);
+        image.write((data) => resolve(data));
+      });
+    });
+
+    return new Response(resizedImageContents, {
+      status: 200,
+      headers: {
+        'cache-control': `max-age=${604_800}`, // Tell browsers to cache for 1 week (60 * 60 * 24 * 7 = 604_800)
+        'content-type': fileResult.contentType!,
+        'content-length': resizedImageContents.byteLength.toString(),
+      },
+    });
+  },
+};