1 files changed, 62 insertions, 0 deletions
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'
+			}
+		}
+	);
+};