add badges and fix clan tags, and readme issue

.env.example

@@ -5,3 +5,6 @@ PORT=8080
 # this is only the default value if non is give in /id
 LANYARD_USER_ID=id-here
 LANYARD_INSTANCE=https://lanyard.rest
+
+# Required if you want to enable badges
+BADGE_API_URL=http://localhost:8081

README.md

@@ -36,6 +36,7 @@ cp .env.example .env
 | `PORT`             | Port to run the server on (default: `8080`)      |
 | `LANYARD_USER_ID`  | Your Discord user ID                             |
 | `LANYARD_INSTANCE` | Lanyard WebSocket endpoint URL                   |
+| `BADGE_API_URL`    | Uses the [badge api](https://git.creations.works/creations/badgeAPI) only required if you want to use badges
 
 #### Optional Lanyard KV Vars (per-user customization)
 

config/environment.ts

@@ -9,3 +9,5 @@ export const lanyardConfig: LanyardConfig = {
 	userId: process.env.LANYARD_USER_ID || "",
 	instance: process.env.LANYARD_INSTANCE || "https://api.lanyard.rest",
 };
+
+export const badgeApi: string | null = process.env.BADGE_API_URL || null;

public/css/index.css

@@ -26,7 +26,7 @@ body {
 }
 
 .hidden {
-	display: none;
+	display: none !important;
 }
 
 .activity-header.hidden {
@@ -63,6 +63,28 @@ body {
 	border-radius: 50%;
 }
 
+.badges {
+	max-width: 700px;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 0.3rem;
+	flex-wrap: wrap;
+	margin-top: 0.5rem;
+	padding: 0.5rem;
+	background-color: var(--card-bg);
+	border-radius: 10px;
+	border: 1px solid var(--border-color);
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.badge {
+	width: 26px;
+	height: 26px;
+	border-radius: 50%;
+}
+
 .decoration {
 	position: absolute;
 	top: -18px;
@@ -143,7 +165,11 @@ body {
 	align-items: center;
 	justify-content: center;
 	gap: 0.3rem;
-	padding: 0.2rem 0.3rem;
+	padding: .4rem 0.5rem;
+
+	text-align: center;
+	align-items: center;
+	justify-content: center;
 }
 
 .clan-badge img {
@@ -154,7 +180,7 @@ body {
 }
 
 .clan-badge span {
-	font-size: 1rem;
+	font-size: .9rem;
 	color: var(--text-color);
 	margin: 0;
 
@@ -409,6 +435,14 @@ ul {
 		align-items: center;
 	}
 
+	.badges {
+		max-width: 100%;
+		border-radius: 0;
+		border: none;
+		background-color: transparent;
+		margin-top: 0;
+	}
+
 	.avatar-status-wrapper {
 		flex-direction: column;
 		align-items: center;
@@ -548,7 +582,7 @@ ul {
 	border-radius: 8px;
 	border: 1px solid var(--border-color);
 
-	margin-top: 2rem;
+	margin-top: 1rem;
 
 	box-sizing: border-box;
 	overflow: hidden;
@@ -626,7 +660,8 @@ ul {
 
 @media (max-width: 600px) {
 	.readme {
-		width: 100%;
+		max-width: 100%;
+		min-width: 100%;
 		padding: 1rem;
 
 		margin-top: 1rem;

public/js/index.js

@@ -84,6 +84,7 @@ setInterval(updateElapsedAndProgress, 1000);
 const head = document.querySelector("head");
 const userId = head?.dataset.userId;
 let instanceUri = head?.dataset.instanceUri;
+let badgeURL = head?.dataset.badgeUrl;
 
 if (userId && instanceUri) {
 	if (!instanceUri.startsWith("http")) {
@@ -276,6 +277,79 @@ function buildActivityHTML(activity) {
 	`;
 }
 
+if (badgeURL && badgeURL !== "null" && userId) {
+	if (!badgeURL.startsWith("http")) {
+		badgeURL = `https://${badgeURL}`;
+	}
+
+	if (!badgeURL.endsWith("/")) {
+		badgeURL += "/";
+	}
+
+	async function loadBadges(userId, options = {}) {
+		const {
+			services = [],
+			seperated = false,
+			cache = true,
+			targetId = "badges",
+		} = options;
+
+		const params = new URLSearchParams();
+		if (services.length) params.set("services", services.join(","));
+		if (seperated) params.set("seperated", "true");
+		if (!cache) params.set("cache", "false");
+
+		const url = `${badgeURL}${userId}?${params.toString()}`;
+		const target = document.getElementById(targetId);
+		if (!target) return;
+
+		target.classList.add("hidden");
+
+		try {
+			const res = await fetch(url);
+			const json = await res.json();
+
+			if (!res.ok || !json.badges) {
+				target.textContent = "Failed to load badges.";
+				return;
+			}
+
+			const badges = Array.isArray(json.badges)
+				? json.badges
+				: Object.values(json.badges).flat();
+
+			if (badges.length === 0) {
+				target.innerHTML = "";
+				target.classList.add("hidden");
+				return;
+			}
+
+			target.innerHTML = "";
+			for (const badge of badges) {
+				const img = document.createElement("img");
+				img.src = badge.badge;
+				img.alt = badge.tooltip;
+				img.title = badge.tooltip;
+				img.className = "badge";
+				target.appendChild(img);
+			}
+
+			target.classList.remove("hidden");
+		} catch (err) {
+			console.error(err);
+			target.innerHTML = "";
+			target.classList.add("hidden");
+		}
+	}
+
+	loadBadges(userId, {
+		services: [],
+		seperated: false,
+		cache: true,
+		targetId: "badges",
+	});
+}
+
 function updatePresence(data) {
 	const avatarWrapper = document.querySelector(".avatar-wrapper");
 	const statusIndicator = avatarWrapper?.querySelector(".status-indicator");

src/routes/[id].ts

@@ -1,5 +1,5 @@
 import { getImageColors } from "@/helpers/colors";
-import { lanyardConfig } from "@config/environment";
+import { badgeApi, lanyardConfig } from "@config/environment";
 import { renderEjsTemplate } from "@helpers/ejs";
 import { getLanyardData, handleReadMe } from "@helpers/lanyard";
 
@@ -64,6 +64,7 @@ async function handler(request: ExtendedRequest): Promise<Response> {
 		allowSnow: presence.kv.snow === "true",
 		allowRain: presence.kv.rain === "true",
 		colors: colors?.colors ?? {},
+		badgeApi: badgeApi,
 	};
 
 	return await renderEjsTemplate("index", ejsTemplateData);

src/routes/index.ts

@@ -1,5 +1,5 @@
 import { getImageColors } from "@/helpers/colors";
-import { lanyardConfig } from "@config/environment";
+import { badgeApi, lanyardConfig } from "@config/environment";
 import { renderEjsTemplate } from "@helpers/ejs";
 import { getLanyardData, handleReadMe } from "@helpers/lanyard";
 
@@ -63,6 +63,7 @@ async function handler(): Promise<Response> {
 		allowSnow: presence.kv.snow === "true",
 		allowRain: presence.kv.rain === "true",
 		colors: colors?.colors ?? {},
+		badgeApi: badgeApi,
 	};
 
 	return await renderEjsTemplate("index", ejsTemplateData);

src/server.ts

@@ -236,7 +236,6 @@ class ServerHandler {
 				"unknown";
 		}
 
-
 		logger.custom(
 			`[${request.method}]`,
 			`(${response.status})`,

src/views/index.ejs

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head data-user-id="<%= user.id %>" data-instance-uri="<%= instance %>">
+<head data-user-id="<%= user.id %>" data-instance-uri="<%= instance %>" data-badge-url="<%= badgeApi %>">
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
@@ -50,7 +50,7 @@
 			<div class="user-info">
 				<div class="user-info-inner">
 					<h1><%= username %></h1>
-					<% if (user.clan) { %>
+					<% if (user.clan && user.clan.tag) { %>
 						<div class="clan-badge">
 							<img src="https://cdn.discordapp.com/clan-badges/<%= user.clan.identity_guild_id %>/<%= user.clan.badge %>" alt="Clan Badge" class="clan-badge">
 							<span class="clan-name"><%= user.clan.tag %></span>
@@ -79,6 +79,9 @@
 		</div>
 	</div>
 
+	<% if(badgeApi) { %>
+	<div id="badges" class="badges"></div>
+	<% } %>
 	<%
 		let filtered = activities
 			.filter(a => a.type !== 4)