feat: ✨ Add preview route

Author: RatulMaharaj

apps/api/.gitignore

@@ -39,4 +39,6 @@ yarn-error.log*
 **/*.tgz
 **/*.log
 package-lock.json
-**/*.bun
+**/*.bun
+
+.cache/

apps/api/bun.lockb

@@ -4,13 +4,14 @@
 	"description": "Invoicelink.io API Endpoints",
 	"scripts": {
 		"dev": "bun --watch src/index.ts",
-		"build": "bun build src/index.ts --outdir=dist",
+		"build": "bun build src/index.ts --outdir=.dist",
 		"start": "NODE_ENV=production bun src/index.ts",
 		"test": "bun test",
 		"postinstall": "bunx puppeteer browsers install chrome"
 	},
 	"dependencies": {
 		"@elysiajs/swagger": "^1.1.0",
+		"cloudinary": "^2.4.0",
 		"elysia": "latest",
 		"puppeteer": "^23.0.2"
 	},

apps/api/package.json

@@ -1,13 +1,25 @@
 import { Elysia } from "elysia";
 import { swagger } from '@elysiajs/swagger'
 import invoice from "./invoice";
+import preview from "./preview";
+const { version } = require("../package.json");
 
-
-const app = new Elysia().use(invoice).use(swagger({
+const app = new Elysia({
+}).use(invoice).use(preview).use(swagger({
   path: "/",
-  version: "1.1.0",
-})).listen(3000);
+  documentation: {
+    info: {
+      title: 'Invoicelink.io',
+      version,
+      description: 'Internal API Documentation',
+    },
+  }
+}));
+
+app.listen(3000);
 
 console.log(
-  `🦊 Elysia is running at http://${app.server?.hostname}:${app.server?.port}`
+  `🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`
 );
+
+

apps/api/src/index.ts

@@ -1,11 +1,16 @@
-import { Elysia } from 'elysia'
+import { Elysia, t } from 'elysia'
 import puppeteer from 'puppeteer';
 
 const plugin = new Elysia()
     .get('/invoice', async ({
         query
+    }: {
+        query: {
+            id: string;
+            type: string;
+            download?: string;
+        }
     }) => {
-        console.log(query)
         const { id, type, download } = query
 
 	    let browser = await puppeteer.launch({ headless: true });
@@ -19,12 +24,41 @@ const plugin = new Elysia()
 
         await browser.close();
 
-		return new Response(pdf, {
+		return new Response(pdf as unknown as File, {
 			headers: {
 				'Content-Type': 'application/pdf',
 				'Content-Disposition': download ? `attachment; filename="invoice.pdf"` : `inline`
-			}
+			},
+            status: 200
         });
-	});
+	}, {
+        query: t.Object({
+            id: t.String({
+                description: 'An invoice or quicklink id',
+                error: 'Please provide an id'
+            }),
+            type: t.String({
+                description: 'The type of document to generate',
+                enum: ['invoice', 'quicklink'],
+                default: 'invoice',
+                error: 'Please provide a type'
+            }),
+            download: t.Optional(t.Boolean({
+                description: 'Whether to download the file or display it in the browser',
+                default: false,
+                error: 'Please provide a boolean download option'
+            }))
+        }),
+        response: t.Any({
+            description: 'The generated invoice or quicklink',
+            type: 'application/pdf',
+            example: 'invoice.pdf',
+            error: 'An error occurred generating the PDF'
+        }),
+        detail: {
+            summary: 'Generate PDF Invoice',
+            description: 'Create a PDF for an invoice or quicklink',
+        }
+    });
 
 export default plugin

apps/api/src/invoice.ts

@@ -0,0 +1,53 @@
+import { Elysia, t } from 'elysia'
+import puppeteer from 'puppeteer';
+
+const plugin = new Elysia()
+    .get('/preview', async ({
+        query
+    }: {
+        query: {
+            styleId: string;
+        }
+    }) => {
+        console.log(query)
+        const { styleId } = query
+
+	    let browser = await puppeteer.launch({ headless: true });
+		const page = await browser.newPage();
+
+		await page.goto(`https://app.invoicelink.io/invoice?styleId=${styleId}`,{ waitUntil: 'domcontentloaded' });
+		const img = await page.screenshot({
+			fullPage: true,
+			optimizeForSpeed: true,
+			quality: 70,
+			omitBackground: true,
+			type: 'webp'
+		});
+
+        await browser.close();
+
+		return new Response(img, {
+			headers: {
+				'Content-Type': 'image/webp'
+			},
+            status: 200
+		});
+	}, {
+        query: t.Object({
+            styleId: t.String({
+                description: 'An invoice template style id',
+                error: 'Please provide an invoice template style id'
+            }),
+        }),
+        response: t.Any({
+            description: 'Screenshot of the template styles',
+            type: 'image/webp',
+            error: 'An error occurred generating the preview'
+        }),
+        detail: {
+            summary: 'Generate Style Preview',
+            description: 'Create a preview image for invoice template styles',
+        }
+    });
+
+export default plugin

apps/api/src/preview.ts

@@ -6,7 +6,7 @@
 	"private": true,
 	"homepage": "https://app.invoicelink.io",
 	"scripts": {
-		"dev": "vite dev --open --port 5173",
+		"dev": "vite dev --port 5173",
 		"build": "vite build",
 		"preview": "vite preview",
 		"test": "npm run test:integration && npm run test:unit",

apps/app/package.json

@@ -48,10 +48,10 @@
 <div data-theme="light" class="flex h-svh w-full flex-col pb-20">
 	{#if data.pay}
 		<div
-			class="bg-pattern relative flex h-[25vh] w-full flex-col items-center justify-center bg-base-200 text-center"
+			class="bg-pattern bg-base-200 relative flex h-[25vh] w-full flex-col items-center justify-center text-center"
 		>
 			<div
-				class="absolute bottom-0 z-10 -mb-[10vh] flex h-auto w-[90vw] flex-col items-center justify-center gap-4 rounded-xl bg-base-100 p-10 shadow-lg sm:mx-auto sm:w-full sm:max-w-xl"
+				class="bg-base-100 absolute bottom-0 z-10 -mb-[10vh] flex h-auto w-[90vw] flex-col items-center justify-center gap-4 rounded-xl p-10 shadow-lg sm:mx-auto sm:w-full sm:max-w-xl"
 			>
 				<div class="flex flex-col items-center">
 					<div class="-mt-4 mb-4">