From 23f37beef35c385acad2c0c56c01761ecaf50d8d Mon Sep 17 00:00:00 2001
From: creations <creations@creations.works>
Date: Thu, 17 Apr 2025 18:26:59 -0400
Subject: [PATCH] update to allow html readme, fx id page for colors

---
 public/css/index.css   |  4 +++-
 src/helpers/lanyard.ts | 27 ++++++++++++++-------------
 src/routes/[id].ts     | 14 ++++++++++++--
 src/views/index.ejs    |  2 +-
 4 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/public/css/index.css b/public/css/index.css
index ac5f70f..11b05ee 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -494,7 +494,9 @@ ul {
 
 /* readme :p */
 .readme {
-	max-width: 700px;
+	max-width: fit-content;
+	min-width: 700px;
+	overflow: hidden;
 	width: 100%;
 	background: var(--readme-bg);
 	padding: 1.5rem;
diff --git a/src/helpers/lanyard.ts b/src/helpers/lanyard.ts
index de78955..c13ba06 100644
--- a/src/helpers/lanyard.ts
+++ b/src/helpers/lanyard.ts
@@ -49,11 +49,12 @@ export async function getLanyardData(id?: string): Promise<LanyardResponse> {
 
 export async function handleReadMe(data: LanyardData): Promise<string | null> {
 	const userReadMe: string | null = data.kv?.readme;
+	const validExtension = /\.(md|markdown|txt|html?)$/i;
 
 	if (
 		!userReadMe ||
-		!userReadMe.toLowerCase().endsWith("readme.md") ||
-		!userReadMe.startsWith("http")
+		!userReadMe.startsWith("http") ||
+		!validExtension.test(userReadMe)
 	) {
 		return null;
 	}
@@ -65,15 +66,7 @@ export async function handleReadMe(data: LanyardData): Promise<string | null> {
 			},
 		});
 
-		const contentType: string = res.headers.get("content-type") || "";
-		if (
-			!res.ok ||
-			!(
-				contentType.includes("text/markdown") ||
-				contentType.includes("text/plain")
-			)
-		)
-			return null;
+		if (!res.ok) return null;
 
 		if (res.headers.has("content-length")) {
 			const size: number = Number.parseInt(
@@ -86,9 +79,17 @@ export async function handleReadMe(data: LanyardData): Promise<string | null> {
 		const text: string = await res.text();
 		if (!text || text.length < 10) return null;
 
-		const html: string | null = await marked.parse(text);
-		const safe: string | null = DOMPurify.sanitize(html);
+		let html: string;
+		if (
+			userReadMe.toLowerCase().endsWith(".html") ||
+			userReadMe.toLowerCase().endsWith(".htm")
+		) {
+			html = text;
+		} else {
+			html = await marked.parse(text);
+		}
 
+		const safe: string | null = DOMPurify.sanitize(html);
 		return safe;
 	} catch {
 		return null;
diff --git a/src/routes/[id].ts b/src/routes/[id].ts
index 16ea3c0..46e3952 100644
--- a/src/routes/[id].ts
+++ b/src/routes/[id].ts
@@ -1,3 +1,4 @@
+import { getImageColors } from "@/helpers/colors";
 import { lanyardConfig } from "@config/environment";
 import { renderEjsTemplate } from "@helpers/ejs";
 import { getLanyardData, handleReadMe } from "@helpers/lanyard";
@@ -38,6 +39,14 @@ async function handler(request: ExtendedRequest): Promise<Response> {
 		status = presence.discord_status;
 	}
 
+	let colors: ImageColorResult | null = null;
+	if (presence.kv.colors === "true") {
+		const avatar: string = presence.discord_user.avatar
+			? `https://cdn.discordapp.com/avatars/${presence.discord_user.id}/${presence.discord_user.avatar}`
+			: `https://cdn.discordapp.com/embed/avatars/${presence.discord_user.discriminator || 1 % 5}`;
+		colors = await getImageColors(avatar, true);
+	}
+
 	const ejsTemplateData: EjsTemplateData = {
 		title: presence.discord_user.global_name || presence.discord_user.username,
 		username:
@@ -52,8 +61,9 @@ async function handler(request: ExtendedRequest): Promise<Response> {
 		},
 		instance,
 		readme,
-		allowSnow: presence.kv.snow || false,
-		allowRain: presence.kv.rain || false,
+		allowSnow: presence.kv.snow === "true",
+		allowRain: presence.kv.rain === "true",
+		colors: colors?.colors ?? {},
 	};
 
 	return await renderEjsTemplate("index", ejsTemplateData);
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 0db4f4b..e24109a 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -24,7 +24,7 @@
 	<meta name="color-scheme" content="dark">
 </head>
 
-<%- include('partial/style.ejs') %>
+<%- include("partial/style.ejs") %>
 
 <body>
 	<div class="user-card">