creations/profilePage
1
2
Fork 3
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: creations:main
Branches Tags
creations:main
creations:dev
KrstlSkll69:main
KrstlSkll69:dev
..
compare: KrstlSkll69:main
Branches Tags
KrstlSkll69:main
KrstlSkll69:dev
creations:main
creations:dev

No commits in common. "main" and "main" have entirely different histories.
main ... main

16 changed files with 173 additions and 734 deletions
Show stats Expand all files Collapse all files

7
.env.example
View file

@ -12,12 +12,5 @@ LANYARD_INSTANCE=https://lanyard.rest
# Required if you want to enable badges # Required if you want to enable badges
BADGE_API_URL=http://localhost:8081 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 # https://www.steamgriddb.com/api/v2, if you want games to have images
STEAMGRIDDB_API_KEY=steamgrid_api_key STEAMGRIDDB_API_KEY=steamgrid_api_key
# https://plausible.io
PLAUSIBLE_SCRIPT_HTML=''

1
.gitignore vendored
View file

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

44
README.md
View file

@ -2,9 +2,6 @@
A cool little web app that shows your Discord profile, current activity, and more. Built with Bun. A cool little web app that shows your Discord profile, current activity, and more. Built with Bun.
# Preview
https://creations.works
--- ---
## Requirements ## Requirements
@ -29,7 +26,7 @@ https://git.creations.works/creations/badgeAPI
### 4. SteamGridDB ### 4. SteamGridDB
>Only needed if you want to fetch game icons that Discord doesn’t provide: >You only have to use this if you want to fetch game icons that Discord doesn’t provide:
https://www.steamgriddb.com/api/v2 https://www.steamgriddb.com/api/v2
--- ---
@ -62,9 +59,7 @@ cp .env.example .env
| `LANYARD_USER_ID` | Your Discord user ID, for the default page | | `LANYARD_USER_ID` | Your Discord user ID, for the default page |
| `LANYARD_INSTANCE` | Endpoint of the Lanyard instance | | `LANYARD_INSTANCE` | Endpoint of the Lanyard instance |
| `BADGE_API_URL` | Badge API URL ([badgeAPI](https://git.creations.works/creations/badgeAPI)) | | `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 | | `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) #### Optional Lanyard KV Variables (per-user customization)
@ -78,8 +73,6 @@ These can be defined in Lanyard's KV store to customize the page:
| `badges` | Enables badge fetching (`true` / `false`) | | `badges` | Enables badge fetching (`true` / `false`) |
| `readme` | URL to a README displayed on the profile (`.md` or `.html`) | | `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 | | `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`) |
--- ---
@ -91,28 +84,6 @@ bun run start
--- ---
## Optional: Analytics with Plausible
You can enable [Plausible Analytics](https://plausible.io) tracking by setting a script snippet in your environment.
### `.env` Variable
| Variable | Description |
|-------------------------|------------------------------------------------------------------------|
| `PLAUSIBLE_SCRIPT_HTML` | Full `<script>` tag(s) to inject into the `<head>` for analytics |
#### Example
```env
PLAUSIBLE_SCRIPT_HTML='<script defer data-domain="example.com" src="https://plausible.example.com/js/script.js"></script><script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>'
```
- The script will only be injected if this variable is set.
- Plausible provides the correct script when you add a domain.
- Be sure to wrap it in single quotes (`'`) so it works in `.env`.
---
## Docker Support ## Docker Support
### Build & Start with Docker Compose ### Build & Start with Docker Compose
@ -125,19 +96,6 @@ Make sure the `.env` file is configured correctly before starting the container.
--- ---
## Routes
These are the main public routes exposed by the server:
| Route | Description |
|---------|-----------------------------------------------------------------------------|
| `/` | Loads the profile page for the default Discord user defined in `.env` (`LANYARD_USER_ID`) |
| `/[id]` | Loads the profile page for a specific Discord user ID passed in the URL |
> Example: `https://creations.works/209830981060788225` shows the profile of that specific user.
---
## License ## License
[BSD 3](LICENSE) [BSD 3](LICENSE)

64
config/environment.ts
View file

@ -1,69 +1,19 @@
import { resolve } from "node:path"; export const environment: Environment = {
import { logger } from "@creations.works/logger";
const environment: Environment = {
port: Number.parseInt(process.env.PORT || "8080", 10), port: Number.parseInt(process.env.PORT || "8080", 10),
host: process.env.HOST || "0.0.0.0", host: process.env.HOST || "0.0.0.0",
development: development:
process.env.NODE_ENV === "development" || process.argv.includes("--dev"), process.env.NODE_ENV === "development" || process.argv.includes("--dev"),
}; };
const redisTtl: number = process.env.REDIS_TTL export const redisTtl: number = process.env.REDIS_TTL
? Number.parseInt(process.env.REDIS_TTL, 10) ? Number.parseInt(process.env.REDIS_TTL, 10)
: 60 * 60 * 1; // 1 hour : 60 * 60 * 1; // 1 hour
const lanyardConfig: LanyardConfig = { export const lanyardConfig: LanyardConfig = {
userId: process.env.LANYARD_USER_ID || "", userId: process.env.LANYARD_USER_ID || "",
instance: process.env.LANYARD_INSTANCE || "", instance: process.env.LANYARD_INSTANCE || "https://api.lanyard.rest",
}; };
const reviewDb = { export const badgeApi: string | null = process.env.BADGE_API_URL || null;
enabled: process.env.REVIEW_DB === "true" || process.env.REVIEW_DB === "1", export const steamGridDbKey: string | undefined =
url: "https://manti.vendicated.dev/api/reviewdb", process.env.STEAMGRIDDB_API_KEY;
};
const badgeApi: string | null = process.env.BADGE_API_URL || null;
const steamGridDbKey: string | undefined = process.env.STEAMGRIDDB_API_KEY;
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,
};

BIN
public/assets/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 168 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/assets/favicon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9 KiB

25
public/css/error.css Normal file
View file

@ -0,0 +1,25 @@
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;
}

218
public/css/index.css
View file

@ -85,15 +85,6 @@ body {
align-items: center; align-items: center;
} }
main {
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.open-source-logo { .open-source-logo {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
@ -177,10 +168,10 @@ main {
.decoration { .decoration {
position: absolute; position: absolute;
top: -13px; top: -18px;
left: -16px; left: -18px;
width: 160px; width: 164px;
height: 160px; height: 164px;
pointer-events: none; pointer-events: none;
} }
@ -339,25 +330,6 @@ ul {
max-width: 700px; max-width: 700px;
} }
.activities-section {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 700px;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.activities-section .activity-block-header {
margin: 1rem 0 .5rem;
font-size: 2rem;
font-weight: 600;
text-align: center;
}
.activities { .activities {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -414,7 +386,6 @@ ul {
object-fit: cover; object-fit: cover;
flex-shrink: 0; flex-shrink: 0;
border-color: var(--card-bg); border-color: var(--card-bg);
background-color: var(--card-bg);
border-width: 2px; border-width: 2px;
border-style: solid; border-style: solid;
@ -814,184 +785,3 @@ ul {
font-size: 0.95rem; 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;
}
}

228
public/js/index.js
View file

@ -2,19 +2,10 @@ const head = document.querySelector("head");
const userId = head?.dataset.userId; const userId = head?.dataset.userId;
const activityProgressMap = new Map(); const activityProgressMap = new Map();
const reviewURL = head?.dataset.reviewDb;
let instanceUri = head?.dataset.instanceUri; let instanceUri = head?.dataset.instanceUri;
let badgeURL = head?.dataset.badgeUrl; let badgeURL = head?.dataset.badgeUrl;
let socket; let socket;
let badgesLoaded = false; let badgesLoaded = false;
let readmeLoaded = false;
let cssLoaded = false;
const reviewsPerPage = 50;
let currentReviewOffset = 0;
let hasMoreReviews = true;
let isLoadingReviews = false;
function formatTime(ms) { function formatTime(ms) {
const totalSecs = Math.floor(ms / 1000); const totalSecs = Math.floor(ms / 1000);
@ -128,108 +119,6 @@ function resolveActivityImage(img, applicationId) {
return `https://cdn.discordapp.com/app-assets/${applicationId}/${img}.png`; 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) { function buildActivityHTML(activity) {
const start = activity.timestamps?.start; const start = activity.timestamps?.start;
const end = activity.timestamps?.end; const end = activity.timestamps?.end;
@ -258,15 +147,18 @@ function buildActivityHTML(activity) {
const activityTypeMap = { const activityTypeMap = {
0: "Playing", 0: "Playing",
1: "Streaming", 1: "Streaming",
2: "Listening to", 2: "Listening",
3: "Watching", 3: "Watching",
4: "Custom Status", 4: "Custom Status",
5: "Competing", 5: "Competing",
}; };
const activityType = activityTypeMap[activity.type] const activityType =
? `${activityTypeMap[activity.type]}${activity.type === 2 ? ` ${activity.name}` : ""}` activity.name === "Spotify"
: "Playing"; ? "Listening to Spotify"
: activity.name === "TIDAL"
? "Listening to TIDAL"
: activityTypeMap[activity.type] || "Playing";
const activityTimestamp = const activityTimestamp =
start && progress === null start && progress === null
@ -391,13 +283,7 @@ async function loadBadges(userId, options = {}) {
const res = await fetch(url); const res = await fetch(url);
const json = await res.json(); const json = await res.json();
if ( if (!res.ok || !json.badges) {
!res.ok ||
!json.badges ||
Object.values(json.badges).every(
(arr) => !Array.isArray(arr) || arr.length === 0,
)
) {
target.textContent = "Failed to load badges."; target.textContent = "Failed to load badges.";
return; return;
} }
@ -442,13 +328,10 @@ async function loadBadges(userId, options = {}) {
} }
async function populateReadme(data) { async function populateReadme(data) {
if (readmeLoaded) return;
const readmeSection = document.querySelector(".readme"); const readmeSection = document.querySelector(".readme");
const kv = data.kv || {};
if (readmeSection && kv.readme) { if (readmeSection && data.kv?.readme) {
const url = kv.readme; const url = data.kv.readme;
try { try {
const res = await fetch(`/api/readme?url=${encodeURIComponent(url)}`); const res = await fetch(`/api/readme?url=${encodeURIComponent(url)}`);
if (!res.ok) throw new Error("Failed to fetch readme"); if (!res.ok) throw new Error("Failed to fetch readme");
@ -457,7 +340,6 @@ async function populateReadme(data) {
readmeSection.innerHTML = `<div class="markdown-body">${text}</div>`; readmeSection.innerHTML = `<div class="markdown-body">${text}</div>`;
readmeSection.classList.remove("hidden"); readmeSection.classList.remove("hidden");
readmeLoaded = true;
} catch (err) { } catch (err) {
console.error("Failed to load README", err); console.error("Failed to load README", err);
readmeSection.classList.add("hidden"); readmeSection.classList.add("hidden");
@ -467,47 +349,9 @@ async function populateReadme(data) {
} }
} }
async function updatePresence(initialData) { async function updatePresence(data) {
if ( const cssLink = data.kv?.css;
!initialData || if (cssLink) {
typeof initialData !== "object" ||
initialData.success === false ||
initialData.error
) {
const loadingOverlay = document.getElementById("loading-overlay");
if (loadingOverlay) {
loadingOverlay.innerHTML = `
<div class="error-message">
<p>${initialData?.error?.message || "Failed to load presence data."}</p>
</div>
`;
loadingOverlay.style.opacity = "1";
}
return;
}
const data =
initialData?.d && Object.keys(initialData.d).length > 0
? initialData.d
: initialData;
const kv = data.kv || {};
if (kv.optout === "true") {
const loadingOverlay = document.getElementById("loading-overlay");
if (loadingOverlay) {
loadingOverlay.innerHTML = `
<div class="error-message">
<p>This user has opted out of sharing their presence.</p>
</div>
`;
loadingOverlay.style.opacity = "1";
}
return;
}
const cssLink = kv.css;
if (cssLink && !cssLoaded) {
try { try {
const res = await fetch(`/api/css?url=${encodeURIComponent(cssLink)}`); const res = await fetch(`/api/css?url=${encodeURIComponent(cssLink)}`);
if (!res.ok) throw new Error("Failed to fetch CSS"); if (!res.ok) throw new Error("Failed to fetch CSS");
@ -516,13 +360,12 @@ async function updatePresence(initialData) {
const style = document.createElement("style"); const style = document.createElement("style");
style.textContent = cssText; style.textContent = cssText;
document.head.appendChild(style); document.head.appendChild(style);
cssLoaded = true;
} catch (err) { } catch (err) {
console.error("Failed to load CSS", err); console.error("Failed to load CSS", err);
} }
} }
if (!badgesLoaded && data?.kv && data.kv.badges !== "false") { if (!badgesLoaded && data && data.kv.badges !== "false") {
loadBadges(userId, { loadBadges(userId, {
services: [], services: [],
seperated: true, seperated: true,
@ -535,7 +378,6 @@ async function updatePresence(initialData) {
const avatarWrapper = document.querySelector(".avatar-wrapper"); const avatarWrapper = document.querySelector(".avatar-wrapper");
const avatarImg = avatarWrapper?.querySelector(".avatar"); const avatarImg = avatarWrapper?.querySelector(".avatar");
const decorationImg = avatarWrapper?.querySelector(".decoration");
const usernameEl = document.querySelector(".username"); const usernameEl = document.querySelector(".username");
if (!data.discord_user) { if (!data.discord_user) {
@ -567,19 +409,6 @@ 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) { if (usernameEl) {
const username = const username =
data.discord_user.global_name || data.discord_user.username; data.discord_user.global_name || data.discord_user.username;
@ -588,10 +417,6 @@ async function updatePresence(initialData) {
} }
updateClanBadge(data); updateClanBadge(data);
if (kv.reviews !== "false") {
populateReviews(userId);
setupReviewScrollObserver(userId);
}
const platform = { const platform = {
mobile: data.active_on_discord_mobile, mobile: data.active_on_discord_mobile,
@ -670,7 +495,7 @@ async function updatePresence(initialData) {
}); });
const activityList = document.querySelector(".activities"); const activityList = document.querySelector(".activities");
const activitiesTitle = document.querySelector(".activity-block-header"); const activitiesTitle = document.querySelector(".activity-header");
if (activityList && activitiesTitle) { if (activityList && activitiesTitle) {
if (filtered?.length) { if (filtered?.length) {
@ -684,9 +509,9 @@ async function updatePresence(initialData) {
getAllNoAsset(); getAllNoAsset();
} }
if (kv.snow === "true") loadEffectScript("snow"); if (data.kv?.snow === "true") loadEffectScript("snow");
if (kv.rain === "true") loadEffectScript("rain"); if (data.kv?.rain === "true") loadEffectScript("rain");
if (kv.stars === "true") loadEffectScript("stars"); if (data.kv?.stars === "true") loadEffectScript("stars");
const loadingOverlay = document.getElementById("loading-overlay"); const loadingOverlay = document.getElementById("loading-overlay");
if (loadingOverlay) { if (loadingOverlay) {
@ -812,19 +637,6 @@ if (userId && instanceUri) {
socket.addEventListener("message", (event) => { socket.addEventListener("message", (event) => {
const payload = JSON.parse(event.data); const payload = JSON.parse(event.data);
if (payload.error || payload.success === false) {
const loadingOverlay = document.getElementById("loading-overlay");
if (loadingOverlay) {
loadingOverlay.innerHTML = `
<div class="error-message">
<p>${payload.error?.message || "An unknown error occurred."}</p>
</div>
`;
loadingOverlay.style.opacity = "1";
}
return;
}
if (payload.op === 1 && payload.d?.heartbeat_interval) { if (payload.op === 1 && payload.d?.heartbeat_interval) {
heartbeatInterval = setInterval(() => { heartbeatInterval = setInterval(() => {
socket.send(JSON.stringify({ op: 3 })); socket.send(JSON.stringify({ op: 3 }));
@ -841,8 +653,8 @@ if (userId && instanceUri) {
} }
if (payload.t === "INIT_STATE" || payload.t === "PRESENCE_UPDATE") { if (payload.t === "INIT_STATE" || payload.t === "PRESENCE_UPDATE") {
updatePresence(payload); updatePresence(payload.d);
requestAnimationFrame(updateElapsedAndProgress); requestAnimationFrame(() => updateElapsedAndProgress());
} }
}); });

39
public/js/rain.js
View file

@ -25,29 +25,24 @@ const getRaindropColor = () => {
const createRaindrop = () => { const createRaindrop = () => {
if (raindrops.length >= maxRaindrops) { if (raindrops.length >= maxRaindrops) {
const oldest = raindrops.shift(); const oldestRaindrop = raindrops.shift();
rainContainer.removeChild(oldest); rainContainer.removeChild(oldestRaindrop);
} }
const raindrop = document.createElement("div"); const raindrop = document.createElement("div");
raindrop.classList.add("raindrop"); raindrop.classList.add("raindrop");
raindrop.style.position = "absolute"; raindrop.style.position = "absolute";
const height = Math.random() * 10 + 10;
raindrop.style.width = "2px"; raindrop.style.width = "2px";
raindrop.style.height = `${height}px`; raindrop.style.height = `${Math.random() * 10 + 10}px`;
raindrop.style.background = getRaindropColor(); raindrop.style.background = getRaindropColor();
raindrop.style.borderRadius = "1px"; raindrop.style.borderRadius = "1px";
raindrop.style.left = `${Math.random() * window.innerWidth}px`;
raindrop.style.top = `-${raindrop.style.height}`;
raindrop.style.opacity = Math.random() * 0.5 + 0.3; raindrop.style.opacity = Math.random() * 0.5 + 0.3;
raindrop.x = Math.random() * window.innerWidth;
raindrop.y = -height;
raindrop.speed = Math.random() * 6 + 4; raindrop.speed = Math.random() * 6 + 4;
raindrop.directionX = (Math.random() - 0.5) * 0.2; raindrop.directionX = (Math.random() - 0.5) * 0.2;
raindrop.directionY = Math.random() * 0.5 + 0.8; raindrop.directionY = Math.random() * 0.5 + 0.8;
raindrop.style.left = `${raindrop.x}px`;
raindrop.style.top = `${raindrop.y}px`;
raindrops.push(raindrop); raindrops.push(raindrop);
rainContainer.appendChild(raindrop); rainContainer.appendChild(raindrop);
}; };
@ -56,29 +51,23 @@ setInterval(createRaindrop, 50);
function updateRaindrops() { function updateRaindrops() {
raindrops.forEach((raindrop, index) => { raindrops.forEach((raindrop, index) => {
const height = Number.parseFloat(raindrop.style.height); const rect = raindrop.getBoundingClientRect();
raindrop.x += raindrop.directionX * raindrop.speed; raindrop.style.left = `${rect.left + raindrop.directionX * raindrop.speed}px`;
raindrop.y += raindrop.directionY * raindrop.speed; raindrop.style.top = `${rect.top + raindrop.directionY * raindrop.speed}px`;
raindrop.style.left = `${raindrop.x}px`; if (rect.top + rect.height >= window.innerHeight) {
raindrop.style.top = `${raindrop.y}px`;
if (raindrop.y > window.innerHeight) {
rainContainer.removeChild(raindrop); rainContainer.removeChild(raindrop);
raindrops.splice(index, 1); raindrops.splice(index, 1);
return;
} }
if ( if (
raindrop.x > window.innerWidth || rect.left > window.innerWidth ||
raindrop.y > window.innerHeight || rect.top > window.innerHeight ||
raindrop.x < 0 rect.left < 0
) { ) {
raindrop.x = Math.random() * window.innerWidth; raindrop.style.left = `${Math.random() * window.innerWidth}px`;
raindrop.y = -height; raindrop.style.top = `-${raindrop.style.height}`;
raindrop.style.left = `${raindrop.x}px`;
raindrop.style.top = `${raindrop.y}px`;
} }
}); });

43
public/js/snow.js
View file

@ -25,22 +25,17 @@ const createSnowflake = () => {
const snowflake = document.createElement("div"); const snowflake = document.createElement("div");
snowflake.classList.add("snowflake"); snowflake.classList.add("snowflake");
snowflake.style.position = "absolute"; snowflake.style.position = "absolute";
const size = Math.random() * 3 + 2; snowflake.style.width = `${Math.random() * 3 + 2}px`;
snowflake.style.width = `${size}px`; snowflake.style.height = snowflake.style.width;
snowflake.style.height = `${size}px`;
snowflake.style.background = "white"; snowflake.style.background = "white";
snowflake.style.borderRadius = "50%"; snowflake.style.borderRadius = "50%";
snowflake.style.opacity = Math.random(); snowflake.style.opacity = Math.random();
snowflake.style.left = `${Math.random() * window.innerWidth}px`;
snowflake.x = Math.random() * window.innerWidth; snowflake.style.top = `-${snowflake.style.height}`;
snowflake.y = -size;
snowflake.speed = Math.random() * 3 + 2; snowflake.speed = Math.random() * 3 + 2;
snowflake.directionX = (Math.random() - 0.5) * 0.5; snowflake.directionX = (Math.random() - 0.5) * 0.5;
snowflake.directionY = Math.random() * 0.5 + 0.5; snowflake.directionY = Math.random() * 0.5 + 0.5;
snowflake.style.left = `${snowflake.x}px`;
snowflake.style.top = `${snowflake.y}px`;
snowflakes.push(snowflake); snowflakes.push(snowflake);
snowContainer.appendChild(snowflake); snowContainer.appendChild(snowflake);
}; };
@ -49,12 +44,10 @@ setInterval(createSnowflake, 80);
function updateSnowflakes() { function updateSnowflakes() {
snowflakes.forEach((snowflake, index) => { snowflakes.forEach((snowflake, index) => {
const size = Number.parseFloat(snowflake.style.width); const rect = snowflake.getBoundingClientRect();
const centerX = snowflake.x + size / 2;
const centerY = snowflake.y + size / 2;
const dx = centerX - mouse.x; const dx = rect.left + rect.width / 2 - mouse.x;
const dy = centerY - mouse.y; const dy = rect.top + rect.height / 2 - mouse.y;
const distance = Math.sqrt(dx * dx + dy * dy); const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 30) { if (distance < 30) {
@ -65,27 +58,21 @@ function updateSnowflakes() {
snowflake.directionY += (Math.random() - 0.5) * 0.01; snowflake.directionY += (Math.random() - 0.5) * 0.01;
} }
snowflake.x += snowflake.directionX * snowflake.speed; snowflake.style.left = `${rect.left + snowflake.directionX * snowflake.speed}px`;
snowflake.y += snowflake.directionY * snowflake.speed; snowflake.style.top = `${rect.top + snowflake.directionY * snowflake.speed}px`;
snowflake.style.left = `${snowflake.x}px`; if (rect.top + rect.height >= window.innerHeight) {
snowflake.style.top = `${snowflake.y}px`;
if (snowflake.y > window.innerHeight) {
snowContainer.removeChild(snowflake); snowContainer.removeChild(snowflake);
snowflakes.splice(index, 1); snowflakes.splice(index, 1);
return;
} }
if ( if (
snowflake.x > window.innerWidth || rect.left > window.innerWidth ||
snowflake.y > window.innerHeight || rect.top > window.innerHeight ||
snowflake.x < 0 rect.left < 0
) { ) {
snowflake.x = Math.random() * window.innerWidth; snowflake.style.left = `${Math.random() * window.innerWidth}px`;
snowflake.y = -size; snowflake.style.top = `-${snowflake.style.height}`;
snowflake.style.left = `${snowflake.x}px`;
snowflake.style.top = `${snowflake.y}px`;
} }
}); });

28
public/js/stars.js
View file

@ -11,46 +11,48 @@ document.body.appendChild(container);
for (let i = 0; i < 60; i++) { for (let i = 0; i < 60; i++) {
const star = document.createElement("div"); const star = document.createElement("div");
star.className = "star";
const size = Math.random() * 2 + 1; const size = Math.random() * 2 + 1;
star.style.position = "absolute";
star.style.width = `${size}px`; star.style.width = `${size}px`;
star.style.height = `${size}px`; star.style.height = `${size}px`;
star.style.background = "white";
star.style.borderRadius = "50%";
star.style.opacity = Math.random(); star.style.opacity = Math.random();
star.style.top = `${Math.random() * 100}vh`; star.style.top = `${Math.random() * 100}vh`;
star.style.left = `${Math.random() * 100}vw`; star.style.left = `${Math.random() * 100}vw`;
star.style.animationDuration = `${Math.random() * 3 + 2}s`; star.style.animation = `twinkle ${Math.random() * 3 + 2}s infinite alternate ease-in-out`;
container.appendChild(star); container.appendChild(star);
} }
function createShootingStar() { function createShootingStar() {
const star = document.createElement("div"); const star = document.createElement("div");
star.className = "shooting-star"; star.classList.add("shooting-star");
star.x = Math.random() * window.innerWidth * 0.8; let x = Math.random() * window.innerWidth * 0.8;
star.y = Math.random() * window.innerHeight * 0.3; let y = Math.random() * window.innerHeight * 0.3;
const angle = (Math.random() * Math.PI) / 6 + Math.PI / 8; const angle = (Math.random() * Math.PI) / 6 + Math.PI / 8;
const speed = 10; const speed = 10;
const totalFrames = 60; const totalFrames = 60;
let frame = 0;
const deg = angle * (180 / Math.PI); const deg = angle * (180 / Math.PI);
star.style.left = `${star.x}px`; star.style.left = `${x}px`;
star.style.top = `${star.y}px`; star.style.top = `${y}px`;
star.style.transform = `rotate(${deg}deg)`; star.style.transform = `rotate(${deg}deg)`;
container.appendChild(star); container.appendChild(star);
let frame = 0;
function animate() { function animate() {
star.x += Math.cos(angle) * speed; x += Math.cos(angle) * speed;
star.y += Math.sin(angle) * speed; y += Math.sin(angle) * speed;
star.style.left = `${star.x}px`; star.style.left = `${x}px`;
star.style.top = `${star.y}px`; star.style.top = `${y}px`;
star.style.opacity = `${1 - frame / totalFrames}`; star.style.opacity = `${1 - frame / totalFrames}`;
frame++; frame++;
if (frame < totalFrames) { if (frame < totalFrames) {
requestAnimationFrame(animate); requestAnimationFrame(animate);
} else if (star.parentNode === container) { } else {
container.removeChild(star); container.removeChild(star);
} }
} }

2
src/index.ts
View file

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

15
src/routes/[id].ts
View file

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

112
src/server.ts
View file

@ -1,5 +1,5 @@
import { resolve } from "node:path"; import { resolve } from "node:path";
import { environment, robotstxtPath } from "@config/environment"; import { environment } from "@config/environment";
import { logger } from "@creations.works/logger"; import { logger } from "@creations.works/logger";
import { import {
type BunFile, type BunFile,
@ -65,15 +65,10 @@ class ServerHandler {
} }
} }
private async serveStaticFile( private async serveStaticFile(pathname: string): Promise<Response> {
request: ExtendedRequest,
pathname: string,
ip: string,
): Promise<Response> {
let filePath: string;
let response: Response;
try { try {
let filePath: string;
if (pathname === "/favicon.ico") { if (pathname === "/favicon.ico") {
filePath = resolve("public", "assets", "favicon.ico"); filePath = resolve("public", "assets", "favicon.ico");
} else { } else {
@ -86,37 +81,16 @@ class ServerHandler {
const fileContent: ArrayBuffer = await file.arrayBuffer(); const fileContent: ArrayBuffer = await file.arrayBuffer();
const contentType: string = file.type || "application/octet-stream"; const contentType: string = file.type || "application/octet-stream";
response = new Response(fileContent, { return new Response(fileContent, {
headers: { "Content-Type": contentType }, headers: { "Content-Type": contentType },
}); });
} else {
logger.warn(`File not found: ${filePath}`);
response = new Response("Not Found", { status: 404 });
} }
logger.warn(`File not found: ${filePath}`);
return new Response("Not Found", { status: 404 });
} catch (error) { } catch (error) {
logger.error([`Error serving static file: ${pathname}`, error as Error]); logger.error([`Error serving static file: ${pathname}`, error as Error]);
response = new Response("Internal Server Error", { status: 500 }); return 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( private async handleRequest(
@ -126,52 +100,16 @@ class ServerHandler {
const extendedRequest: ExtendedRequest = request as ExtendedRequest; const extendedRequest: ExtendedRequest = request as ExtendedRequest;
extendedRequest.startPerf = performance.now(); 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; 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") { if (pathname.startsWith("/public") || pathname === "/favicon.ico") {
return await this.serveStaticFile(extendedRequest, pathname, ip); return await this.serveStaticFile(pathname);
} }
const match: MatchedRoute | null = this.router.match(request); const match: MatchedRoute | null = this.router.match(request);
let requestBody: unknown = {}; let requestBody: unknown = {};
let response: Response;
let logRequest = true;
if (match) { if (match) {
const { filePath, params, query } = match; const { filePath, params, query } = match;
@ -183,6 +121,8 @@ class ServerHandler {
? contentType.split(";")[0].trim() ? contentType.split(";")[0].trim()
: null; : null;
logRequest = routeModule.routeDef.log !== false;
if ( if (
routeModule.routeDef.needsBody === "json" && routeModule.routeDef.needsBody === "json" &&
actualContentType === "application/json" actualContentType === "application/json"
@ -291,6 +231,30 @@ 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; return response;
} }
} }

81
src/views/index.html
View file

@ -3,72 +3,57 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="View real-time Discord presence, activities, and badges with open-source integration." />
<meta name="color-scheme" content="dark" />
<title>Discord Presence</title> <title>Discord Presence</title>
<link rel="icon" id="site-icon" type="image/png" href="/public/assets/favicon.png" />
<link rel="stylesheet" href="/public/css/index.css" /> <link rel="stylesheet" href="/public/css/index.css" />
<link rel="stylesheet" href="/public/css/root.css" /> <link rel="stylesheet" href="/public/css/root.css" />
<meta name="color-scheme" content="dark" />
<link rel="icon" id="site-icon" type="image/png" />
</head> </head>
<body> <body>
<div id="loading-overlay" role="status" aria-live="polite"> <div id="loading-overlay">
<div class="loading-spinner"></div> <div class="loading-spinner"></div>
</div> </div>
<header> <a
<a href="https://git.creations.works/creations/profilePage"
href="https://git.creations.works/creations/profilePage" target="_blank"
target="_blank" rel="noopener noreferrer"
rel="noopener noreferrer" >
title="View source code on Forgejo" <img
> class="open-source-logo"
<img src="/public/assets/forgejo_logo.svg"
class="open-source-logo" alt="Forgejo Logo"
src="/public/assets/forgejo_logo.svg" style="opacity: 0.5"
alt="Forgejo open-source logo" />
style="opacity: 0.5" </a>
loading="lazy"
/>
</a>
</header>
<main> <div class="user-card">
<section class="user-card"> <div class="avatar-status-wrapper">
<div class="avatar-status-wrapper"> <div class="avatar-wrapper">
<div class="avatar-wrapper"> <img class="avatar hidden" src="" />
<img class="avatar hidden"/> <div class="status-indicator offline hidden"></div>
<img class="decoration hidden"/> </div>
<div class="status-indicator offline hidden"></div> <div class="user-info">
</div> <div class="user-info-inner">
<div class="user-info"> <h1 class="username"></h1>
<div class="user-info-inner">
<h1 class="username"></h1>
</div>
</div> </div>
</div> </div>
</section> </div>
</div>
<section id="badges" class="badges hidden" aria-label="User Badges"></section> <div id="badges" class="badges hidden"></div>
<section aria-label="Discord Activities" class="activities-section"> <h2 class="activity-header hidden">Activities</h2>
<h2 class="activity-block-header hidden">Activities</h2> <ul class="activities"></ul>
<ul class="activities"></ul>
</section>
<section class="readme hidden" aria-label="Profile README"> <section class="readme hidden">
<div class="markdown-body"></div> <div class="markdown-body"></div>
</section>
</main>
<section class="reviews hidden" aria-label="User Reviews">
<h2>User Reviews</h2>
<ul class="reviews-list">
</ul>
</section> </section>
<script src="/public/js/index.js" type="module"></script> <script src="/public/js/index.js"></script>
</body> </body>
</html> </html>