fix for pdf not loading - seemed to be Orion only(but i use that so)
This commit is contained in:
Michael Freno
@@ -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",
|
||||
|
||||
28
public/pdf.worker.min.mjs
Normal file
28
public/pdf.worker.min.mjs
Normal file
File diff suppressed because one or more lines are too long
@@ -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`;
|
||||
}
|
||||
|
||||
@@ -1,26 +1,58 @@
|
||||
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(() => {
|
||||
const handleError = (e: ErrorEvent) => {
|
||||
if (e.filename?.includes("resume.pdf") || e.message === "Script error.") {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onMount(async () => {
|
||||
try {
|
||||
// Dynamically import PDF.js only on client
|
||||
const pdfjsLib = await import("pdfjs-dist");
|
||||
|
||||
// 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);
|
||||
|
||||
onCleanup(() => {
|
||||
window.removeEventListener("error", handleError, true);
|
||||
|
||||
if (iframeRef) {
|
||||
iframeRef.src = "about:blank";
|
||||
}
|
||||
});
|
||||
setPages(canvases);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error("Error loading PDF:", err);
|
||||
setError(true);
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
|
||||
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">
|
||||
<div class="flex h-full w-full items-center justify-center">
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
src="/resume.pdf"
|
||||
class="h-full w-full border-0"
|
||||
title="Resume PDF"
|
||||
/>
|
||||
</div>
|
||||
<main class="flex min-h-screen w-full flex-col">
|
||||
<Show
|
||||
when={!loading() && !error()}
|
||||
fallback={
|
||||
<Show when={error()} fallback={<TerminalSplash />}>
|
||||
<div class="flex h-screen w-full flex-col items-center justify-center gap-6 p-8">
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user