3 files changed, 105 insertions, 40 deletions
diff --git a/bun.lockb b/bun.lockb
index cf38e675..db7a3275 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index ef7b5c20..aeaa4fc6 100644
--- a/package.json
+++ b/package.json
@@ -1,42 +1,45 @@
 {
-	"name": "due.moe",
-	"version": "0.0.0",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.20.4",
-		"@types/dom-to-image": "^2.6.5",
-		"@types/file-saver": "^2.0.5",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.5",
-		"svelte-adapter-bun": "^0.5.0",
-		"svelte-check": "^3.4.3",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
-	},
-	"type": "module",
-	"dependencies": {
-		"dexie": "^4.0.1-alpha.25",
-		"dom-to-image": "^2.6.0",
-		"html2canvas": "^1.4.1",
-		"rss-parser": "^3.13.0",
-		"socket.io": "^4.7.2",
-		"socket.io-client": "^4.7.2"
-	}
+  "name": "due.moe",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.20.4",
+    "@types/dom-to-image": "^2.6.5",
+    "@types/file-saver": "^2.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.30.0",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.10.1",
+    "svelte": "^4.0.5",
+    "svelte-adapter-bun": "^0.5.0",
+    "svelte-check": "^3.4.3",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.2"
+  },
+  "type": "module",
+  "dependencies": {
+    "dexie": "^4.0.1-alpha.25",
+    "dom-to-image": "^2.6.0",
+    "html2canvas": "^1.4.1",
+    "node-html-to-image": "^4.0.0",
+    "puppeteer": "^21.5.0",
+    "rss-parser": "^3.13.0",
+    "socket.io": "^4.7.2",
+    "socket.io-client": "^4.7.2",
+    "whatwg-url": "^13.0.0"
+  }
 }
diff --git a/src/routes/user/[user]/badges.png/+server.ts b/src/routes/user/[user]/badges.png/+server.ts
new file mode 100644
index 00000000..76915995
--- /dev/null
+++ b/src/routes/user/[user]/badges.png/+server.ts
@@ -0,0 +1,62 @@
+import nodeHtmlToImage from 'node-html-to-image';
+import { user } from '$lib/AniList/user';
+import type { Badge } from '$lib/userBadgesDatabase.js';
+
+export const GET = async ({ params }) => {
+	const badges = (await (
+		await fetch(`https://due.moe/api/badges?id=${(await user(params.user)).id}`)
+	).json()) as Badge[];
+
+	return new Response(
+		await nodeHtmlToImage({
+			html: `
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Event Badges</title>
+	</head>
+
+	<body>
+		<style>
+			body {
+				margin: 0;
+				padding: 0;
+				text-align: center;
+				background-color: #151f2e;
+				/* width: 1920px; */
+				margin: 0 auto;
+			}
+
+			img {
+				width: 100%;
+				height: auto;
+			}
+
+			#badges {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(8%, 1fr));
+				grid-gap: 0;
+			}
+		</style>
+
+		<div id="badges">
+			${badges
+				.map((badge) => {
+					return `<a href="${badge.post}"><img src="${badge.image}"></a>`;
+				})
+				.join('')}
+		</div>
+	</body>
+</html>
+			`
+		}),
+		{
+			headers: {
+				'Content-Type': 'image/png',
+				'Cache-Control': 'public, max-age=10, s-maxage=10'
+			}
+		}
+	);
+};