From 5d5d86c533e9d7bd7818bb60c2256146b60f0b4e Mon Sep 17 00:00:00 2001
From: agent <agent@srazka.com>
Date: Sun, 27 Sep 2026 09:37:15 +0000
Subject: [PATCH] Fix imported PDFs not rendering in the Docker image

nginx has no MIME type for .mjs, so the pdf.js worker was served as
application/octet-stream and browsers refused to load it. Every imported
PDF page then showed "Source PDF ... is not available", which looked like
missing files. Serve .mjs as text/javascript.

The page background now also tells the two failures apart: "not stored on
this device" when the source bytes are missing, and "could not display"
(with the error logged) when pdf.js fails.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VsorPV3JeJRoZ1mD1pdvtL
---
 docker/nginx.conf                       |  6 ++++++
 src/lib/components/PdfBackground.svelte | 22 ++++++++++++++--------
 src/lib/pdf/render.ts                   |  5 ++++-
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/docker/nginx.conf b/docker/nginx.conf
index f86d149..bee09c1 100644
--- a/docker/nginx.conf
+++ b/docker/nginx.conf
@@ -1,3 +1,9 @@
+# This file is included at http level, so this adds to nginx's MIME table.
+# Browsers refuse to run module scripts (the pdf.js worker) served as octet-stream.
+types {
+	text/javascript mjs;
+}
+
 server {
 	listen 80;
 	server_name _;
diff --git a/src/lib/components/PdfBackground.svelte b/src/lib/components/PdfBackground.svelte
index 4c070ba..3d3494e 100644
--- a/src/lib/components/PdfBackground.svelte
+++ b/src/lib/components/PdfBackground.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { loadSource, renderPage } from '$lib/pdf/render';
+	import { MissingSourceError, loadSource, renderPage } from '$lib/pdf/render';
 	import { vault } from '$lib/storage/vault.svelte';
 	import type { Origin } from '$lib/model/types';
 
@@ -13,7 +13,7 @@
 
 	let { origin, width, height, scale }: Props = $props();
 	let canvas: HTMLCanvasElement;
-	let failed = $state(false);
+	let failure = $state<'missing' | 'error' | null>(null);
 
 	// Render at a stepped resolution so zooming doesn't re-render constantly.
 	const STEPS = [0.25, 0.5, 1, 1.5, 2, 3, 4];
@@ -35,9 +35,13 @@
 				const doc = await loadSource(sourceId, () => vault.getSource(sourceId));
 				if (cancelled) return;
 				job = renderPage(doc, pageIndex, canvas, res);
-				failed = false;
-			} catch {
-				failed = true;
+				failure = null;
+			} catch (e) {
+				if (e instanceof MissingSourceError) failure = 'missing';
+				else {
+					failure = 'error';
+					console.error(`Could not render source PDF “${origin.name}”`, e);
+				}
 			}
 		}, 120);
 		return () => {
@@ -48,9 +52,11 @@
 	});
 </script>
 
-<canvas bind:this={canvas} class="bg" class:failed></canvas>
-{#if failed}
-	<div class="missing">Source PDF “{origin.name}” is not available</div>
+<canvas bind:this={canvas} class="bg"></canvas>
+{#if failure === 'missing'}
+	<div class="missing">Source PDF “{origin.name}” is not stored on this device</div>
+{:else if failure === 'error'}
+	<div class="missing">Could not display “{origin.name}” (see the browser console)</div>
 {/if}
 
 <style>
diff --git a/src/lib/pdf/render.ts b/src/lib/pdf/render.ts
index 44530fa..a33dc18 100644
--- a/src/lib/pdf/render.ts
+++ b/src/lib/pdf/render.ts
@@ -8,12 +8,15 @@ pdfjs.GlobalWorkerOptions.workerSrc = workerUrl;
 
 const docs = new Map<string, Promise<PDFDocumentProxy>>();
 
+/** The source PDF's bytes aren't stored on this device (as opposed to pdf.js failing on them). */
+export class MissingSourceError extends Error {}
+
 export function loadSource(sourceId: string, getBytes: () => Promise<Uint8Array | undefined>) {
 	let p = docs.get(sourceId);
 	if (!p) {
 		p = (async () => {
 			const bytes = await getBytes();
-			if (!bytes) throw new Error(`Missing source PDF ${sourceId}`);
+			if (!bytes) throw new MissingSourceError(`Missing source PDF ${sourceId}`);
 			// pdf.js transfers the buffer to its worker, so hand it a copy.
 			return pdfjs.getDocument({ data: bytes.slice() }).promise;
 		})();