.env.example

@@ -12,6 +12,10 @@ LANYARD_INSTANCE=https://lanyard.rest
 # Required if you want to enable badges
 BADGE_API_URL=http://localhost:8081
 
+# Required if you want to enable reviews from reviewdb
+REVIEW_DB=true
+
+
 # https://www.steamgriddb.com/api/v2, if you want games to have images
 STEAMGRIDDB_API_KEY=steamgrid_api_key
 

.gitignore

@@ -3,3 +3,4 @@ bun.lock
 .env
 logs/
 .vscode/
+robots.txt

README.md

@@ -62,7 +62,9 @@ cp .env.example .env
 | `LANYARD_USER_ID`     | Your Discord user ID, for the default page                                  |
 | `LANYARD_INSTANCE`    | Endpoint of the Lanyard instance                                            |
 | `BADGE_API_URL`       | Badge API URL ([badgeAPI](https://git.creations.works/creations/badgeAPI))  |
+| `REVIEW_DB`           | Enables showing reviews from reviewdb on user pages                         |
 | `STEAMGRIDDB_API_KEY` | SteamGridDB API key for fetching game icons                                 |
+| `ROBOTS_FILE`         | If there it uses the file in /robots.txt route, requires a valid path       |
 
 #### Optional Lanyard KV Variables (per-user customization)
 
@@ -77,6 +79,7 @@ These can be defined in Lanyard's KV store to customize the page:
 | `readme`  | URL to a README displayed on the profile (`.md` or `.html`)        |
 | `css`     | URL to a css to change styles on the page, no import or require allowed |
 | `optout`  | Allows users to stop sharing there profile on the website (`true` / `false`) |
+| `reviews` | Enables reviews from reviewdb (`true` / `false`)                   |
 
 ---
 

config/environment.ts

-export const environment: Environment = {
+import { resolve } from "node:path";
+import { logger } from "@creations.works/logger";
+
+const environment: Environment = {
 	port: Number.parseInt(process.env.PORT || "8080", 10),
 	host: process.env.HOST || "0.0.0.0",
 	development:
 		process.env.NODE_ENV === "development" || process.argv.includes("--dev"),
 };
 
-export const redisTtl: number = process.env.REDIS_TTL
+const redisTtl: number = process.env.REDIS_TTL
 	? Number.parseInt(process.env.REDIS_TTL, 10)
 	: 60 * 60 * 1; // 1 hour
 
-export const lanyardConfig: LanyardConfig = {
+const lanyardConfig: LanyardConfig = {
 	userId: process.env.LANYARD_USER_ID || "",
-	instance: process.env.LANYARD_INSTANCE || "https://api.lanyard.rest",
+	instance: process.env.LANYARD_INSTANCE || "",
+};
+
+const reviewDb = {
+	enabled: process.env.REVIEW_DB === "true" || process.env.REVIEW_DB === "1",
+	url: "https://manti.vendicated.dev/api/reviewdb",
 };
 
-export const badgeApi: string | null = process.env.BADGE_API_URL || null;
-export const steamGridDbKey: string | undefined =
-	process.env.STEAMGRIDDB_API_KEY;
+const badgeApi: string | null = process.env.BADGE_API_URL || null;
+const steamGridDbKey: string | undefined = process.env.STEAMGRIDDB_API_KEY;
 
-export const plausibleScript: string | null =
+const plausibleScript: string | null =
 	process.env.PLAUSIBLE_SCRIPT_HTML?.trim() || null;
+
+const robotstxtPath: string | null = process.env.ROBOTS_FILE
+	? resolve(process.env.ROBOTS_FILE)
+	: null;
+
+function verifyRequiredVariables(): void {
+	const requiredVariables = [
+		"HOST",
+		"PORT",
+
+		"LANYARD_USER_ID",
+		"LANYARD_INSTANCE",
+	];
+
+	let hasError = false;
+
+	for (const key of requiredVariables) {
+		const value = process.env[key];
+		if (value === undefined || value.trim() === "") {
+			logger.error(`Missing or empty environment variable: ${key}`);
+			hasError = true;
+		}
+	}
+
+	if (hasError) {
+		process.exit(1);
+	}
+}
+
+export {
+	environment,
+	lanyardConfig,
+	redisTtl,
+	reviewDb,
+	badgeApi,
+	steamGridDbKey,
+	plausibleScript,
+	robotstxtPath,
+	verifyRequiredVariables,
+};

public/css/error.css

-body {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	min-height: 90vh;
-	background: #0e0e10;
-	color: #fff;
-	font-family: system-ui, sans-serif;
-}
-.error-container {
-	text-align: center;
-	padding: 2rem;
-	background: #1a1a1d;
-	border-radius: 12px;
-	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-}
-.error-title {
-	font-size: 2rem;
-	margin-bottom: 1rem;
-	color: #ff4e4e;
-}
-.error-message {
-	font-size: 1.2rem;
-	opacity: 0.8;
-}

public/css/index.css

@@ -177,10 +177,10 @@ main {
 
 .decoration {
 	position: absolute;
-	top: -18px;
-	left: -18px;
-	width: 164px;
-	height: 164px;
+	top: -13px;
+	left: -16px;
+	width: 160px;
+	height: 160px;
 	pointer-events: none;
 }
 
@@ -814,3 +814,184 @@ ul {
 		font-size: 0.95rem;
 	}
 }
+
+/* reviews */
+.reviews {
+	width: 100%;
+	max-width: 700px;
+	margin-top: 2rem;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	background-color: var(--card-bg);
+	padding: 1rem;
+	border-radius: 10px;
+	border: 1px solid var(--border-color);
+	box-sizing: border-box;
+}
+
+.reviews h2 {
+	margin: 0 0 1rem;
+	font-size: 2rem;
+	font-weight: 600;
+	text-align: center;
+}
+
+.reviews-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+
+.review {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	gap: 1rem;
+	padding: 0.75rem 1rem;
+	border-radius: 8px;
+	border: 1px solid var(--border-color);
+	transition: background-color 0.3s ease;
+}
+
+.review:hover {
+	background-color: var(--card-hover-bg);
+}
+
+.review-avatar {
+	width: 44px;
+	height: 44px;
+	border-radius: 50%;
+	object-fit: cover;
+	flex-shrink: 0;
+}
+
+.review-body {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+.review-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 1rem;
+	flex-wrap: wrap;
+}
+
+.review-header-inner {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.review-username {
+	font-weight: 600;
+	color: var(--text-color);
+}
+
+.review-timestamp {
+	font-size: 0.8rem;
+	color: var(--text-muted);
+}
+
+.review-content {
+	color: var(--text-secondary);
+	font-size: 0.95rem;
+	word-break: break-word;
+	white-space: pre-wrap;
+}
+
+.review-badges {
+	display: flex;
+	gap: 0.3rem;
+	flex-wrap: wrap;
+}
+
+.emoji {
+	width: 20px;
+	height: 20px;
+	vertical-align: middle;
+	margin: 0 2px;
+	display: inline-block;
+	transition: transform 0.3s ease;
+}
+
+.emoji:hover {
+	transform: scale(1.2);
+}
+
+.review-content img.emoji {
+	vertical-align: middle;
+}
+
+@media (max-width: 600px) {
+	.reviews {
+		max-width: 100%;
+		padding: 1rem;
+		border-radius: 0;
+		border: none;
+		background-color: transparent;
+	}
+
+	.reviews h2 {
+		font-size: 1.4rem;
+		text-align: center;
+		margin-bottom: 1rem;
+	}
+
+	.reviews-list {
+		gap: 0.75rem;
+	}
+
+	.review {
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		padding: 1rem;
+		border-radius: 0;
+	}
+
+	.review-avatar {
+		width: 64px;
+		height: 64px;
+	}
+
+	.review-body {
+		width: 100%;
+		align-items: center;
+	}
+
+	.review-header {
+		flex-direction: column;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.review-username {
+		font-size: 1rem;
+	}
+
+	.review-timestamp {
+		font-size: 0.75rem;
+	}
+
+	.review-content {
+		font-size: 0.9rem;
+	}
+
+	.review-badges {
+		justify-content: center;
+	}
+
+	.emoji {
+		width: 16px;
+		height: 16px;
+	}
+}

public/js/index.js

@@ -2,10 +2,19 @@ const head = document.querySelector("head");
 const userId = head?.dataset.userId;
 const activityProgressMap = new Map();
 
+const reviewURL = head?.dataset.reviewDb;
 let instanceUri = head?.dataset.instanceUri;
 let badgeURL = head?.dataset.badgeUrl;
 let socket;
+
 let badgesLoaded = false;
+let readmeLoaded = false;
+let cssLoaded = false;
+
+const reviewsPerPage = 50;
+let currentReviewOffset = 0;
+let hasMoreReviews = true;
+let isLoadingReviews = false;
 
 function formatTime(ms) {
 	const totalSecs = Math.floor(ms / 1000);
@@ -119,6 +128,108 @@ function resolveActivityImage(img, applicationId) {
 	return `https://cdn.discordapp.com/app-assets/${applicationId}/${img}.png`;
 }
 
+async function populateReviews(userId) {
+	if (!reviewURL || !userId || isLoadingReviews || !hasMoreReviews) return;
+	const reviewSection = document.querySelector(".reviews");
+	const reviewList = reviewSection?.querySelector(".reviews-list");
+	if (!reviewList) return;
+
+	isLoadingReviews = true;
+
+	try {
+		const url = `${reviewURL}/users/${userId}/reviews?flags=2&offset=${currentReviewOffset}`;
+		const res = await fetch(url);
+		const data = await res.json();
+
+		if (!data.success || !Array.isArray(data.reviews)) {
+			if (currentReviewOffset === 0) reviewSection.classList.add("hidden");
+			isLoadingReviews = false;
+			return;
+		}
+
+		const reviewsHTML = data.reviews
+			.map((review) => {
+				const sender = review.sender;
+				const username = sender.username;
+				const avatar = sender.profilePhoto;
+				let comment = review.comment;
+
+				comment = comment.replace(
+					/<(a?):\w+:(\d+)>/g,
+					(_, animated, id) =>
+						`<img src="https://cdn.discordapp.com/emojis/${id}.${animated ? "gif" : "webp"}" class="emoji" alt="emoji" />`,
+				);
+
+				const timestamp = review.timestamp
+					? new Date(review.timestamp * 1000).toLocaleString(undefined, {
+							hour12: false,
+							year: "numeric",
+							month: "2-digit",
+							day: "2-digit",
+							hour: "2-digit",
+							minute: "2-digit",
+						})
+					: "N/A";
+
+				const badges = (sender.badges || [])
+					.map(
+						(b) =>
+							`<img src="${b.icon}" class="badge" title="${b.description}" alt="${b.name}" />`,
+					)
+					.join("");
+
+				return `
+					<li class="review">
+						<img class="review-avatar" src="${avatar}" alt="${username}'s avatar"/>
+						<div class="review-body">
+							<div class="review-header">
+								<div class="review-header-inner">
+									<span class="review-username">${username}</span>
+									<span class="review-badges">${badges}</span>
+								</div>
+								<span class="review-timestamp">${timestamp}</span>
+							</div>
+							<div class="review-content">${comment}</div>
+						</div>
+					</li>
+				`;
+			})
+			.join("");
+
+		if (currentReviewOffset === 0) reviewList.innerHTML = reviewsHTML;
+		else reviewList.insertAdjacentHTML("beforeend", reviewsHTML);
+
+		reviewSection.classList.remove("hidden");
+
+		hasMoreReviews = data.hasNextPage;
+		isLoadingReviews = false;
+	} catch (err) {
+		console.error("Failed to fetch reviews", err);
+		isLoadingReviews = false;
+	}
+}
+
+function setupReviewScrollObserver(userId) {
+	const sentinel = document.createElement("div");
+	sentinel.className = "review-scroll-sentinel";
+	document.querySelector(".reviews").appendChild(sentinel);
+
+	const observer = new IntersectionObserver(
+		(entries) => {
+			if (entries[0].isIntersecting && hasMoreReviews && !isLoadingReviews) {
+				currentReviewOffset += reviewsPerPage;
+				populateReviews(userId);
+			}
+		},
+		{
+			rootMargin: "200px",
+			threshold: 0,
+		},
+	);
+
+	observer.observe(sentinel);
+}
+
 function buildActivityHTML(activity) {
 	const start = activity.timestamps?.start;
 	const end = activity.timestamps?.end;
@@ -147,18 +258,15 @@ function buildActivityHTML(activity) {
 	const activityTypeMap = {
 		0: "Playing",
 		1: "Streaming",
-		2: "Listening",
+		2: "Listening to",
 		3: "Watching",
 		4: "Custom Status",
 		5: "Competing",
 	};
 
-	const activityType =
-		activity.name === "Spotify"
-			? "Listening to Spotify"
-			: activity.name === "TIDAL"
-				? "Listening to TIDAL"
-				: activityTypeMap[activity.type] || "Playing";
+	const activityType = activityTypeMap[activity.type]
+		? `${activityTypeMap[activity.type]}${activity.type === 2 ? ` ${activity.name}` : ""}`
+		: "Playing";
 
 	const activityTimestamp =
 		start && progress === null
@@ -334,6 +442,8 @@ async function loadBadges(userId, options = {}) {
 }
 
 async function populateReadme(data) {
+	if (readmeLoaded) return;
+
 	const readmeSection = document.querySelector(".readme");
 	const kv = data.kv || {};
 
@@ -347,6 +457,7 @@ async function populateReadme(data) {
 
 			readmeSection.innerHTML = `<div class="markdown-body">${text}</div>`;
 			readmeSection.classList.remove("hidden");
+			readmeLoaded = true;
 		} catch (err) {
 			console.error("Failed to load README", err);
 			readmeSection.classList.add("hidden");
@@ -396,7 +507,7 @@ async function updatePresence(initialData) {
 	}
 
 	const cssLink = kv.css;
-	if (cssLink) {
+	if (cssLink && !cssLoaded) {
 		try {
 			const res = await fetch(`/api/css?url=${encodeURIComponent(cssLink)}`);
 			if (!res.ok) throw new Error("Failed to fetch CSS");
@@ -405,6 +516,7 @@ async function updatePresence(initialData) {
 			const style = document.createElement("style");
 			style.textContent = cssText;
 			document.head.appendChild(style);
+			cssLoaded = true;
 		} catch (err) {
 			console.error("Failed to load CSS", err);
 		}
@@ -423,6 +535,7 @@ async function updatePresence(initialData) {
 
 	const avatarWrapper = document.querySelector(".avatar-wrapper");
 	const avatarImg = avatarWrapper?.querySelector(".avatar");
+	const decorationImg = avatarWrapper?.querySelector(".decoration");
 	const usernameEl = document.querySelector(".username");
 
 	if (!data.discord_user) {
@@ -454,6 +567,19 @@ async function updatePresence(initialData) {
 		}
 	}
 
+	if (
+		decorationImg &&
+		data.discord_user?.avatar_decoration_data &&
+		data.discord_user.avatar_decoration_data.asset
+	) {
+		const newDecorationUrl = `https://cdn.discordapp.com/avatar-decoration-presets/${data.discord_user.avatar_decoration_data.asset}`;
+		decorationImg.src = newDecorationUrl;
+		decorationImg.classList.remove("hidden");
+	} else if (decorationImg) {
+		decorationImg.src = "";
+		decorationImg.classList.add("hidden");
+	}
+
 	if (usernameEl) {
 		const username =
 			data.discord_user.global_name || data.discord_user.username;
@@ -462,6 +588,10 @@ async function updatePresence(initialData) {
 	}
 
 	updateClanBadge(data);
+	if (kv.reviews !== "false") {
+		populateReviews(userId);
+		setupReviewScrollObserver(userId);
+	}
 
 	const platform = {
 		mobile: data.active_on_discord_mobile,

src/index.ts

 import { serverHandler } from "@/server";
+import { verifyRequiredVariables } from "@config/environment";
 import { logger } from "@creations.works/logger";
 
 async function main(): Promise<void> {
+	verifyRequiredVariables();
 	serverHandler.initialize();
 }
 

src/routes/[id].ts

 import { resolve } from "node:path";
-import { badgeApi, lanyardConfig, plausibleScript } from "@config/environment";
+import {
+	badgeApi,
+	lanyardConfig,
+	plausibleScript,
+	reviewDb,
+} from "@config/environment";
 import { file } from "bun";
 
 const routeDef: RouteDef = {
@@ -24,6 +29,10 @@ async function handler(request: ExtendedRequest): Promise<Response> {
 				head.setAttribute("data-instance-uri", instance);
 				head.setAttribute("data-badge-url", badgeApi || "");
 
+				if (reviewDb.enabled) {
+					head.setAttribute("data-review-db", reviewDb.url);
+				}
+
 				if (plausibleScript) {
 					head.append(plausibleScript, { html: true });
 				}

src/server.ts

 import { resolve } from "node:path";
-import { environment } from "@config/environment";
+import { environment, robotstxtPath } from "@config/environment";
 import { logger } from "@creations.works/logger";
 import {
 	type BunFile,
@@ -65,10 +65,15 @@ class ServerHandler {
 		}
 	}
 
-	private async serveStaticFile(pathname: string): Promise<Response> {
-		try {
+	private async serveStaticFile(
+		request: ExtendedRequest,
+		pathname: string,
+		ip: string,
+	): Promise<Response> {
 		let filePath: string;
+		let response: Response;
 
+		try {
 			if (pathname === "/favicon.ico") {
 				filePath = resolve("public", "assets", "favicon.ico");
 			} else {
@@ -81,16 +86,37 @@ class ServerHandler {
 				const fileContent: ArrayBuffer = await file.arrayBuffer();
 				const contentType: string = file.type || "application/octet-stream";
 
-				return new Response(fileContent, {
+				response = new Response(fileContent, {
 					headers: { "Content-Type": contentType },
 				});
-			}
+			} else {
 				logger.warn(`File not found: ${filePath}`);
-			return new Response("Not Found", { status: 404 });
+				response = new Response("Not Found", { status: 404 });
+			}
 		} catch (error) {
 			logger.error([`Error serving static file: ${pathname}`, error as Error]);
-			return new Response("Internal Server Error", { status: 500 });
+			response = new Response("Internal Server Error", { status: 500 });
+		}
+
+		this.logRequest(request, response, ip);
+		return response;
 	}
+
+	private logRequest(
+		request: ExtendedRequest,
+		response: Response,
+		ip: string | undefined,
+	): void {
+		logger.custom(
+			`[${request.method}]`,
+			`(${response.status})`,
+			[
+				request.url,
+				`${(performance.now() - request.startPerf).toFixed(2)}ms`,
+				ip || "unknown",
+			],
+			"90",
+		);
 	}
 
 	private async handleRequest(
@@ -100,16 +126,52 @@ class ServerHandler {
 		const extendedRequest: ExtendedRequest = request as ExtendedRequest;
 		extendedRequest.startPerf = performance.now();
 
+		const headers = request.headers;
+		let ip = server.requestIP(request)?.address;
+		let response: Response;
+
+		if (!ip || ip.startsWith("172.") || ip === "127.0.0.1") {
+			ip =
+				headers.get("CF-Connecting-IP")?.trim() ||
+				headers.get("X-Real-IP")?.trim() ||
+				headers.get("X-Forwarded-For")?.split(",")[0].trim() ||
+				"unknown";
+		}
+
 		const pathname: string = new URL(request.url).pathname;
+		if (pathname === "/robots.txt" && robotstxtPath) {
+			try {
+				const file: BunFile = Bun.file(robotstxtPath);
+
+				if (await file.exists()) {
+					const fileContent: ArrayBuffer = await file.arrayBuffer();
+					const contentType: string = file.type || "text/plain";
+
+					response = new Response(fileContent, {
+						headers: { "Content-Type": contentType },
+					});
+				} else {
+					logger.warn(`File not found: ${robotstxtPath}`);
+					response = new Response("Not Found", { status: 404 });
+				}
+			} catch (error) {
+				logger.error([
+					`Error serving robots.txt: ${robotstxtPath}`,
+					error as Error,
+				]);
+				response = new Response("Internal Server Error", { status: 500 });
+			}
+
+			this.logRequest(extendedRequest, response, ip);
+			return response;
+		}
+
 		if (pathname.startsWith("/public") || pathname === "/favicon.ico") {
-			return await this.serveStaticFile(pathname);
+			return await this.serveStaticFile(extendedRequest, pathname, ip);
 		}
 
 		const match: MatchedRoute | null = this.router.match(request);
 		let requestBody: unknown = {};
-		let response: Response;
-
-		let logRequest = true;
 
 		if (match) {
 			const { filePath, params, query } = match;
@@ -121,8 +183,6 @@ class ServerHandler {
 					? contentType.split(";")[0].trim()
 					: null;
 
-				logRequest = routeModule.routeDef.log !== false;
-
 				if (
 					routeModule.routeDef.needsBody === "json" &&
 					actualContentType === "application/json"
@@ -231,30 +291,6 @@ class ServerHandler {
 			);
 		}
 
-		if (logRequest) {
-			const headers = request.headers;
-			let ip = server.requestIP(request)?.address;
-
-			if (!ip || ip.startsWith("172.") || ip === "127.0.0.1") {
-				ip =
-					headers.get("CF-Connecting-IP")?.trim() ||
-					headers.get("X-Real-IP")?.trim() ||
-					headers.get("X-Forwarded-For")?.split(",")[0].trim() ||
-					"unknown";
-			}
-
-			logger.custom(
-				`[${request.method}]`,
-				`(${response.status})`,
-				[
-					request.url,
-					`${(performance.now() - extendedRequest.startPerf).toFixed(2)}ms`,
-					ip || "unknown",
-				],
-				"90",
-			);
-		}
-
 		return response;
 	}
 }

src/views/index.html

@@ -40,6 +40,7 @@
 				<div class="avatar-status-wrapper">
 					<div class="avatar-wrapper">
 						<img class="avatar hidden"/>
+						<img class="decoration hidden"/>
 						<div class="status-indicator offline hidden"></div>
 					</div>
 					<div class="user-info">
@@ -62,6 +63,12 @@
 			</section>
 		</main>
 
+		<section class="reviews hidden" aria-label="User Reviews">
+			<h2>User Reviews</h2>
+			<ul class="reviews-list">
+			</ul>
+		</section>
+
 		<script src="/public/js/index.js" type="module"></script>
 	</body>
 </html>