[[position]] doesn't work with static adapter, make a route for each …

…job ad, add header text to identify each page of generated pdf
ssciwr · Dec 9, 2024 · a9801cc · a9801cc
1 parent 672b8a2
commit a9801cc
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 29 deletions.
diff --git a/src/routes/[[position]]/+page.svelte → src/lib/components/ApplicationForm.svelte b/src/routes/[[position]]/+page.svelte → src/lib/components/ApplicationForm.svelte
@@ -1,7 +1,6 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-import { page } from "$app/stores";
 import UploadPdf from "$lib/components/UploadPdf.svelte";
 import DownloadOutline from "flowbite-svelte-icons/DownloadOutline.svelte";
 import Button from "flowbite-svelte/Button.svelte";
@@ -11,16 +10,15 @@ import Input from "flowbite-svelte/Input.svelte";
 import Label from "flowbite-svelte/Label.svelte";
 import P from "flowbite-svelte/P.svelte";
 import type { PDFPage } from "pdf-lib";
-import { PDFDocument } from "pdf-lib";
+import { PDFDocument, rgb } from "pdf-lib";
 
-let name = $state("");
+let {
+	position,
+}: {
+	position: string;
+} = $props();
 
-let openPositions = $state({
-	rse: "SSC Research Software Engineer",
-	web: "SSC Research Software Engineer - Web Development",
-	hpc: "SSC Research Software Engineer - HPC",
-} as Record<string, string>);
-let position = openPositions[$page.params.position] ?? "";
+let name = $state("");
 
 let pdfs = $state([
 	{
@@ -59,14 +57,15 @@ let applicationComplete = $derived.by(() => {
 });
 
 function writeLine(page: PDFPage, text: string, yPos: number): number {
-	page.drawText(text, { x: 50, y: page.getSize().height - yPos });
-	return yPos + 50;
+	const yPadding = 40;
+	page.drawText(text, { x: 50, y: page.getSize().height - yPos, size: 18 });
+	return yPos + yPadding;
 }
 
 async function createPdfFrontPage() {
 	const pdfDoc = await PDFDocument.create();
 	const page = pdfDoc.addPage();
-	let yPos = 100;
+	let yPos = 80;
 	yPos = writeLine(page, "SSC Application", yPos);
 	yPos = writeLine(page, `Position: ${position}`, yPos);
 	yPos = writeLine(page, `Name: ${name}`, yPos);
@@ -80,7 +79,11 @@ async function createPdfFrontPage() {
 	return pdfDoc;
 }
 
-async function addPdf(pdfDoc: PDFDocument, uploadedPdf: File | null) {
+async function addPdf(
+	pdfDoc: PDFDocument,
+	uploadedPdf: File | null,
+	pdfId: string,
+) {
 	if (!uploadedPdf) {
 		return;
 	}
@@ -90,7 +93,13 @@ async function addPdf(pdfDoc: PDFDocument, uploadedPdf: File | null) {
 		uploadedDoc,
 		uploadedDoc.getPageIndices(),
 	)) {
-		pdfDoc.addPage(page);
+		let newPage = pdfDoc.addPage(page);
+		newPage.drawText(`${pdfId} - ${position} - ${name}`, {
+			x: 5,
+			y: page.getSize().height - 12,
+			size: 10,
+			color: rgb(0.227, 0.62, 0.749),
+		});
 	}
 }
 
@@ -100,7 +109,7 @@ async function downloadMergedPdf() {
 	}
 	let pdfDoc = await createPdfFrontPage();
 	for (const pdf of pdfs) {
-		await addPdf(pdfDoc, pdf.file);
+		await addPdf(pdfDoc, pdf.file, pdf.id);
 	}
 	const dataUri = await pdfDoc.saveAsBase64({ dataUri: true });
 	const link = document.createElement("a");
@@ -110,9 +119,6 @@ async function downloadMergedPdf() {
 }
 </script>
 
-<div class="flex flex-col container max-w-2xl md:mx-auto p-2">
-	<Heading class="my-2 p-4 text-center text-red-500">WORK IN PROGRESSS!</Heading>
-	{#if position}
 		<div class="flex flex-col space-y-4 p-4">
 			<Heading tag="h3">{position}</Heading>
 			<P
@@ -138,9 +144,3 @@ async function downloadMergedPdf() {
 				Download PDF
 			</Button>
 		</div>
-	{:else}
-		<div class="flex flex-col space-y-4 p-4">
-			<Heading tag="h3">Invalid or expired link.</Heading>
-		</div>
-	{/if}
-</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -0,0 +1,11 @@
+<script>
+import "../app.pcss";
+import Heading from "flowbite-svelte/Heading.svelte";
+</script>
+
+<div class="flex flex-col container max-w-2xl md:mx-auto p-2">
+<div class="flex flex-col container max-w-2xl md:mx-auto p-2">
+	<Heading class="my-2 p-4 text-center text-red-500">WORK IN PROGRESSS!</Heading>
+</div>
+<slot />
+</div>
diff --git a/src/routes/[[position]]/+layout.ts → src/routes/+layout.ts b/src/routes/[[position]]/+layout.ts → src/routes/+layout.ts
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -0,0 +1,9 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+import Heading from "flowbite-svelte/Heading.svelte";
+</script>
+
+<div class="flex flex-col space-y-4 p-4">
+	<Heading tag="h3">Invalid or expired link.</Heading>
+</div>
diff --git a/src/routes/[[position]]/+layout.svelte b/src/routes/[[position]]/+layout.svelte
diff --git a/src/routes/hpc/+page.svelte b/src/routes/hpc/+page.svelte
@@ -0,0 +1,7 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+import ApplicationForm from "$lib/components/ApplicationForm.svelte";
+</script>
+
+<ApplicationForm position="SSC Research Software Engineer - HPC" />
diff --git a/src/routes/rse/+page.svelte b/src/routes/rse/+page.svelte
@@ -0,0 +1,7 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+import ApplicationForm from "$lib/components/ApplicationForm.svelte";
+</script>
+
+<ApplicationForm position="SSC Research Software Engineer" />
diff --git a/src/routes/web/+page.svelte b/src/routes/web/+page.svelte
@@ -0,0 +1,7 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+import ApplicationForm from "$lib/components/ApplicationForm.svelte";
+</script>
+
+<ApplicationForm position="SSC Research Software Engineer - Web Development" />