fix for pdf not loading - seemed to be Orion only(but i use that so)

package.json

@@ -50,6 +50,7 @@
     "jose": "^6.1.3",
     "mermaid": "^11.12.2",
     "motion": "^12.23.26",
+    "pdfjs-dist": "^5.4.449",
     "solid-js": "^1.9.5",
     "solid-tiptap": "^0.8.0",
     "uuid": "^13.0.0",

src/routes/blog/[title]/index.tsx

@@ -35,7 +35,16 @@ const getPostByTitle = query(
     const userID = await getUserID(event.nativeEvent);
     const conn = ConnectionFactory();
 
-    let query = "SELECT * FROM Post WHERE title = ?";
+    let query;
+    //TODO: get id from url param instead of title param
+    //
+    if (title == "by-id") {
+      const [searchParams, setSearchParams] = useSearchParams();
+
+      query = "SELECT * FROM Post WHERE id = ?";
+    } else {
+      query = "SELECT * FROM Post WHERE title = ?";
+    }
     if (privilegeLevel !== "admin") {
       query += ` AND published = TRUE`;
     }

src/routes/resume.tsx

@@ -1,27 +1,59 @@
 import { Title, Meta } from "@solidjs/meta";
-import { onMount, onCleanup } from "solid-js";
+import { createSignal, onMount, Show, For } from "solid-js";
+import { isServer } from "solid-js/web";
+import { TerminalSplash } from "~/components/TerminalSplash";
 
 export default function Resume() {
-  let iframeRef: HTMLIFrameElement | undefined;
+  const [pages, setPages] = createSignal<HTMLCanvasElement[]>([]);
+  const [loading, setLoading] = createSignal(true);
+  const [error, setError] = createSignal(false);
+  let containerRef: HTMLDivElement | undefined;
 
-  onMount(() => {
+  onMount(async () => {
-    const handleError = (e: ErrorEvent) => {
+    try {
-      if (e.filename?.includes("resume.pdf") || e.message === "Script error.") {
+      // Dynamically import PDF.js only on client
-        e.preventDefault();
+      const pdfjsLib = await import("pdfjs-dist");
-        e.stopPropagation();
+
+      // Set worker source to local file
+      pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs";
+
+      // Load the PDF
+      const loadingTask = pdfjsLib.getDocument("/resume.pdf");
+      const pdf = await loadingTask.promise;
+
+      const canvases: HTMLCanvasElement[] = [];
+
+      // Render each page
+      for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
+        const page = await pdf.getPage(pageNum);
+        const viewport = page.getViewport({ scale: 1.5 });
+
+        // Create canvas
+        const canvas = document.createElement("canvas");
+        const context = canvas.getContext("2d");
+        if (!context) continue;
+
+        canvas.height = viewport.height;
+        canvas.width = viewport.width;
+        canvas.className = "shadow-lg mb-4 mx-auto max-w-full";
+
+        // Render page
+        await page.render({
+          canvasContext: context,
+          viewport: viewport
+        }).promise;
+
+        canvases.push(canvas);
       }
-    };
 
-    window.addEventListener("error", handleError, true);
+      setPages(canvases);
-
+      setLoading(false);
-    onCleanup(() => {
+    } catch (err) {
-      window.removeEventListener("error", handleError, true);
+      console.error("Error loading PDF:", err);
-
+      setError(true);
-      if (iframeRef) {
+      setLoading(false);
-        iframeRef.src = "about:blank";
     }
   });
-  });
 
   return (
     <>
@@ -31,15 +63,73 @@ export default function Resume() {
         content="View Michael Freno's resume - Software Engineer."
       />
 
-      <main class="flex h-screen w-full flex-col">
+      <main class="flex min-h-screen w-full flex-col">
-        <div class="flex h-full w-full items-center justify-center">
+        <Show
-          <iframe
+          when={!loading() && !error()}
-            ref={iframeRef}
+          fallback={
-            src="/resume.pdf"
+            <Show when={error()} fallback={<TerminalSplash />}>
-            class="h-full w-full border-0"
+              <div class="flex h-screen w-full flex-col items-center justify-center gap-6 p-8">
-            title="Resume PDF"
+                <div class="flex flex-col items-center gap-4 text-center">
-          />
+                  <h2 class="text-2xl font-bold">View Resume</h2>
+                  <p class="text-gray-600 dark:text-gray-400">
+                    Unable to load PDF viewer.
+                  </p>
                 </div>
+                <div class="mb-4 flex gap-3">
+                  <a
+                    href="/resume.pdf"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="bg-blue rounded px-4 py-2 text-base text-sm hover:brightness-125"
+                  >
+                    Open in New Tab
+                  </a>
+                  <a
+                    href="/resume.pdf"
+                    download="Michael_Freno_Resume.pdf"
+                    class="border-blue text-blue rounded border px-4 py-2 text-sm hover:brightness-125"
+                  >
+                    Download PDF
+                  </a>
+                </div>
+              </div>
+            </Show>
+          }
+        >
+          <div
+            ref={containerRef}
+            class="flex w-full flex-col items-center gap-4 overflow-y-auto p-4"
+          >
+            <div class="mb-4 flex gap-3">
+              <a
+                href="/resume.pdf"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="bg-blue rounded px-4 py-2 text-base text-sm hover:brightness-125"
+              >
+                Open in New Tab
+              </a>
+              <a
+                href="/resume.pdf"
+                download="Michael_Freno_Resume.pdf"
+                class="border-blue text-blue rounded border px-4 py-2 text-sm hover:brightness-125"
+              >
+                Download PDF
+              </a>
+            </div>
+            <For each={pages()}>
+              {(canvas) => {
+                let divRef: HTMLDivElement | undefined;
+                onMount(() => {
+                  if (divRef) {
+                    divRef.appendChild(canvas);
+                  }
+                });
+                return <div ref={divRef} />;
+              }}
+            </For>
+          </div>
+        </Show>
       </main>
     </>
   );