seth/profilePage
1
0
Fork 0
forked from creations/profilePage
Code Pull requests Activity

fix xss issue aka: creations/profilePage#3, update depends change how activities display, remove readme title,

Browse source
This commit is contained in:
creations 2025-04-06 20:59:38 -04:00
parent 6a502d030d
commit c79ee2b203
Signed by: creations
GPG key ID: 8F553AA4320FC711
6 changed files with 270 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
package.json
View file

@ -19,9 +19,9 @@
"eslint-plugin-prettier": "^5.2.6", "eslint-plugin-prettier": "^5.2.6",
"eslint-plugin-promise": "^7.2.1", "eslint-plugin-promise": "^7.2.1",
"eslint-plugin-simple-import-sort": "^12.1.1", "eslint-plugin-simple-import-sort": "^12.1.1",
"eslint-plugin-unicorn": "^56.0.1", "eslint-plugin-unicorn": "^58.0.0",
"eslint-plugin-unused-imports": "^4.1.4", "eslint-plugin-unused-imports": "^4.1.4",
"globals": "^15.15.0", "globals": "^16.0.0",
"prettier": "^3.5.3" "prettier": "^3.5.3"
}, },
"peerDependencies": { "peerDependencies": {
@ -29,7 +29,8 @@
}, },
"dependencies": { "dependencies": {
"ejs": "^3.1.10", "ejs": "^3.1.10",
"node-vibrant": "^4.0.3", "isomorphic-dompurify": "^2.23.0",
"marked": "^15.0.7" "marked": "^15.0.7",
"node-vibrant": "^4.0.3"
} }
} }

97
public/css/index.css
View file

@ -142,18 +142,28 @@ ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 1rem; gap: 1rem;
background: #1a1a1d; background-color: #1e1f22;
padding: 1rem; padding: 0.75rem 1rem;
border-radius: 6px; border-radius: 10px;
box-shadow: 0 0 0 1px #2e2e30; box-shadow: 0 1px 0 0 #2e2e30;
transition: background 0.2s ease;
align-items: flex-start;
} }
.activity:hover { .activity:hover {
background: #2a2a2d; background: #2a2a2d;
} }
.activity-wrapper {
display: flex;
flex-direction: column;
width: 100%;
}
.activity-wrapper-inner {
display: flex;
flex-direction: row;
gap: 1rem;
}
.activity-art { .activity-art {
width: 80px; width: 80px;
height: 80px; height: 80px;
@ -165,7 +175,15 @@ ul {
.activity-content { .activity-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between;
flex: 1; flex: 1;
gap: 0.5rem;
position: relative;
}
.activity-top {
display: flex;
flex-direction: column;
gap: 0.25rem; gap: 0.25rem;
} }
@ -175,36 +193,49 @@ ul {
align-items: flex-start; align-items: flex-start;
} }
.activity-bottom {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.activity-name { .activity-name {
font-weight: bold; font-weight: 600;
font-size: 1.1rem; font-size: 1rem;
color: #ffffff; color: #fff;
} }
.activity-detail { .activity-detail {
font-size: 0.95rem; font-size: 0.875rem;
color: #ccc; color: #b5bac1;
} }
.activity-timestamp { .activity-timestamp {
font-size: 0.8rem; font-size: 0.75rem;
color: #777; color: #b5bac1;
text-align: right; text-align: right;
margin-left: auto;
white-space: nowrap;
} }
.progress-bar { .progress-bar {
height: 6px; height: 4px;
background-color: #333; background-color: #2e2e30;
border-radius: 3px; border-radius: 2px;
overflow: hidden;
width: 100%;
margin-top: 0.5rem; margin-top: 0.5rem;
overflow: hidden;
} }
.progress-fill { .progress-fill {
background-color: #5865f2;
transition: width 0.4s ease;
height: 100%; height: 100%;
background-color: #00b0f4; }
transition: width 0.5s ease;
.progress-bar,
.progress-time-labels {
width: 100%;
margin-top: 0.5rem;
} }
.progress-time-labels { .progress-time-labels {
@ -215,6 +246,21 @@ ul {
margin-top: 0.25rem; margin-top: 0.25rem;
} }
.activity-type-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
}
.activity-type-label {
font-size: 0.75rem;
text-transform: uppercase;
font-weight: 600;
color: #aaa;
margin-bottom: 0.50rem;
display: block;
}
.activity-header.no-timestamp { .activity-header.no-timestamp {
justify-content: flex-start; justify-content: flex-start;
} }
@ -226,9 +272,9 @@ ul {
.activity-buttons { .activity-buttons {
display: flex; display: flex;
flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
margin-top: 0.75rem; margin-top: 0.75rem;
justify-content: flex-end;
} }
.activity-button { .activity-button {
@ -249,10 +295,9 @@ ul {
text-decoration: none; text-decoration: none;
} }
.activity-button.disabled { .activity-button:disabled {
background-color: #4e5058; background-color: #2d2e31;
cursor: default; cursor: not-allowed;
pointer-events: none;
opacity: 0.8; opacity: 0.8;
} }
@ -392,6 +437,8 @@ ul {
border-radius: 8px; border-radius: 8px;
box-shadow: 0 0 0 1px #2e2e30; box-shadow: 0 0 0 1px #2e2e30;
margin-top: 2rem;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;

157
public/js/index.js
View file

@ -4,9 +4,20 @@ const activityProgressMap = new Map();
function formatTime(ms) { function formatTime(ms) {
const totalSecs = Math.floor(ms / 1000); const totalSecs = Math.floor(ms / 1000);
const mins = Math.floor(totalSecs / 60); const hours = Math.floor(totalSecs / 3600);
const mins = Math.floor((totalSecs % 3600) / 60);
const secs = totalSecs % 60; const secs = totalSecs % 60;
return `${mins}:${secs.toString().padStart(2, "0")}`;
return `${String(hours).padStart(1, "0")}:${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
}
function formatVerbose(ms) {
const totalSecs = Math.floor(ms / 1000);
const hours = Math.floor(totalSecs / 3600);
const mins = Math.floor((totalSecs % 3600) / 60);
const secs = totalSecs % 60;
return `${hours}h ${mins}m ${secs}s`;
} }
function updateElapsedAndProgress() { function updateElapsedAndProgress() {
@ -17,17 +28,14 @@ function updateElapsedAndProgress() {
if (!start) return; if (!start) return;
const elapsed = now - start; const elapsed = now - start;
const mins = Math.floor(elapsed / 60000);
const secs = Math.floor((elapsed % 60000) / 1000);
const display = el.querySelector(".elapsed"); const display = el.querySelector(".elapsed");
if (display) if (display) display.textContent = `(${formatVerbose(elapsed)} ago)`;
display.textContent = `(${mins}m ${secs.toString().padStart(2, "0")}s ago)`;
}); });
document.querySelectorAll(".progress-bar").forEach((bar) => { document.querySelectorAll(".progress-bar").forEach((bar) => {
const start = Number(bar.dataset.start); const start = Number(bar.dataset.start);
const end = Number(bar.dataset.end); const end = Number(bar.dataset.end);
if (!start || !end || end <= start) return; if (!start || !end || end <= start || now > end) return;
const duration = end - start; const duration = end - start;
const elapsed = now - start; const elapsed = now - start;
@ -43,7 +51,7 @@ function updateElapsedAndProgress() {
document.querySelectorAll(".progress-time-labels").forEach((label) => { document.querySelectorAll(".progress-time-labels").forEach((label) => {
const start = Number(label.dataset.start); const start = Number(label.dataset.start);
const end = Number(label.dataset.end); const end = Number(label.dataset.end);
if (!start || !end || end <= start) return; if (!start || !end || end <= start || now > end) return;
const current = Math.max(0, now - start); const current = Math.max(0, now - start);
const total = end - start; const total = end - start;
@ -102,7 +110,7 @@ if (userId && instanceUri) {
if (payload.t === "INIT_STATE" || payload.t === "PRESENCE_UPDATE") { if (payload.t === "INIT_STATE" || payload.t === "PRESENCE_UPDATE") {
updatePresence(payload.d); updatePresence(payload.d);
updateElapsedAndProgress(); requestAnimationFrame(() => updateElapsedAndProgress());
} }
}); });
} }
@ -129,64 +137,98 @@ function buildActivityHTML(activity) {
art = `https://cdn.discordapp.com/app-assets/${activity.application_id}/${img}.png`; art = `https://cdn.discordapp.com/app-assets/${activity.application_id}/${img}.png`;
} }
const activityTypeMap = {
0: "Playing",
1: "Streaming",
2: "Listening",
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 activityTimestamp = const activityTimestamp =
!total && start start && progress === null
? ` ? `<div class="activity-timestamp" data-start="${start}">
<div class="activity-timestamp" data-start="${start}"> <span>Since: ${new Date(start).toLocaleTimeString("en-GB", {
<span> hour: "2-digit",
Since: ${new Date(start).toLocaleTimeString("en-GB", { minute: "2-digit",
hour: "2-digit", second: "2-digit",
minute: "2-digit", })} <span class="elapsed"></span></span>
second: "2-digit", </div>`
})} <span class="elapsed"></span> : "";
</span>
</div>` const activityButtons =
activity.buttons && activity.buttons.length > 0
? `<div class="activity-buttons">
${activity.buttons
.map((button, index) => {
const label =
typeof button === "string"
? button
: button.label;
let url = null;
if (typeof button === "object" && button.url) {
url = button.url;
} else if (index === 0 && activity.url) {
url = activity.url;
}
return url
? `<a href="${url}" class="activity-button" target="_blank" rel="noopener noreferrer">${label}</a>`
: null;
})
.filter(Boolean)
.join("")}
</div>`
: ""; : "";
const progressBar = const progressBar =
progress !== null progress !== null
? ` ? `<div class="progress-bar" data-start="${start}" data-end="${end}">
<div class="progress-bar" data-start="${start}" data-end="${end}">
<div class="progress-fill" style="width: ${progress}%"></div> <div class="progress-fill" style="width: ${progress}%"></div>
</div> </div>
<div class="progress-time-labels" data-start="${start}" data-end="${end}"> <div class="progress-time-labels" data-start="${start}" data-end="${end}">
<span class="progress-current">${formatTime(elapsed)}</span> <span class="progress-current">${formatTime(elapsed)}</span>
<span class="progress-total">${formatTime(total)}</span> <span class="progress-total">${formatTime(total)}</span>
</div> </div>`
`
: ""; : "";
const activityButtons = activity.buttons && activity.buttons.length > 0 const isMusic = activity.type === 2 || activity.type === 3;
? `<div class="activity-buttons">
${activity.buttons.map((button, index) => { const primaryLine = isMusic ? activity.details : activity.name;
const buttonLabel = typeof button === 'string' ? button : button.label; const secondaryLine = isMusic ? activity.state : activity.details;
let buttonUrl = null; const tertiaryLine = isMusic ? activity.assets?.large_text : activity.state;
if (typeof button === 'object' && button.url) {
buttonUrl = button.url;
}
else if (index === 0 && activity.url) {
buttonUrl = activity.url;
}
if (buttonUrl) {
return `<a href="${buttonUrl}" class="activity-button" target="_blank" rel="noopener noreferrer">${buttonLabel}</a>`;
} else {
return `<span class="activity-button disabled">${buttonLabel}</span>`;
}
}).join('')}
</div>`
: '';
return ` return `
<li class="activity"> <li class="activity">
${art ? `<img class="activity-art" src="${art}" alt="Art">` : ""} <div class="activity-wrapper">
<div class="activity-content"> <div class="activity-type-wrapper">
<div class="activity-header ${progress !== null ? "no-timestamp" : ""}"> <span class="activity-type-label" data-type="${activity.type}">${activityType}</span>
<span class="activity-name">${activity.name}</span>
${activityTimestamp} ${activityTimestamp}
</div> </div>
${activity.details ? `<div class="activity-detail">${activity.details}</div>` : ""} <div class="activity-wrapper-inner">
${activity.state ? `<div class="activity-detail">${activity.state}</div>` : ""} ${art ? `<img class="activity-art" src="${art}" alt="Art">` : ""}
${activityButtons} <div class="activity-content">
<div class="inner-content">
<div class="activity-top">
<div class="activity-header ${progress !== null ? "no-timestamp" : ""}">
<span class="activity-name">${primaryLine}</span>
</div>
${secondaryLine ? `<div class="activity-detail">${secondaryLine}</div>` : ""}
${tertiaryLine ? `<div class="activity-detail">${tertiaryLine}</div>` : ""}
</div>
<div class="activity-bottom">
${activityButtons}
</div>
</div>
</div>
</div>
${progressBar} ${progressBar}
</div> </div>
</li> </li>
@ -234,10 +276,21 @@ function updatePresence(data) {
} else if (emoji?.name) { } else if (emoji?.name) {
emojiHTML = `${emoji.name} `; emojiHTML = `${emoji.name} `;
} }
customStatus.innerHTML = `${emojiHTML}${custom.state}`; customStatus.innerHTML = `
${emojiHTML}
${custom.state ? `<span class="custom-status-text">${custom.state}</span>` : ""}
`;
} }
const filtered = data.activities?.filter((a) => a.type !== 4); const filtered = data.activities
?.filter((a) => a.type !== 4)
?.sort((a, b) => {
const priority = { 2: 0, 1: 1, 3: 2 }; // Listening, Streaming, Watching ? should i keep this
const aPriority = priority[a.type] ?? 99;
const bPriority = priority[b.type] ?? 99;
return aPriority - bPriority;
});
const activityList = document.querySelector(".activities"); const activityList = document.querySelector(".activities");
if (activityList) { if (activityList) {

6
src/helpers/lanyard.ts
View file

@ -1,5 +1,6 @@
import { lanyardConfig } from "@config/environment"; import { lanyardConfig } from "@config/environment";
import { fetch } from "bun"; import { fetch } from "bun";
import DOMPurify from "isomorphic-dompurify";
import { marked } from "marked"; import { marked } from "marked";
export async function getLanyardData(id?: string): Promise<LanyardResponse> { export async function getLanyardData(id?: string): Promise<LanyardResponse> {
@ -85,7 +86,10 @@ export async function handleReadMe(data: LanyardData): Promise<string | null> {
const text: string = await res.text(); const text: string = await res.text();
if (!text || text.length < 10) return null; if (!text || text.length < 10) return null;
return marked.parse(text); const html: string | null = await marked.parse(text);
const safe: string | null = DOMPurify.sanitize(html);
return safe;
} catch { } catch {
return null; return null;
} }

10
src/server.ts
View file

@ -34,22 +34,16 @@ class ServerHandler {
open: webSocketHandler.handleOpen.bind(webSocketHandler), open: webSocketHandler.handleOpen.bind(webSocketHandler),
message: webSocketHandler.handleMessage.bind(webSocketHandler), message: webSocketHandler.handleMessage.bind(webSocketHandler),
close: webSocketHandler.handleClose.bind(webSocketHandler), close: webSocketHandler.handleClose.bind(webSocketHandler),
error(error) {
logger.error(`Server error: ${error.message}`);
return new Response(`Server Error: ${error.message}`, {
status: 500,
});
},
}, },
}); });
const accessUrls = [ const accessUrls: string[] = [
`http://${server.hostname}:${server.port}`, `http://${server.hostname}:${server.port}`,
`http://localhost:${server.port}`, `http://localhost:${server.port}`,
`http://127.0.0.1:${server.port}`, `http://127.0.0.1:${server.port}`,
]; ];
logger.info(`Server running at ${accessUrls[0]}`, true); logger.info(`Server running at ${accessUrls[0]}`);
logger.info(`Access via: ${accessUrls[1]} or ${accessUrls[2]}`, true); logger.info(`Access via: ${accessUrls[1]} or ${accessUrls[2]}`, true);
this.logRoutes(); this.logRoutes();

118
src/views/index.ejs
View file

@ -46,14 +46,25 @@
<% } else if (emoji?.name) { %> <% } else if (emoji?.name) { %>
<%= emoji.name %> <%= emoji.name %>
<% } %> <% } %>
<%= activities[0].state %> <% if (activities[0].state) { %>
<span class="custom-status-text"><%= activities[0].state %></span>
<% } %>
</p> </p>
<% } %> <% } %>
</div> </div>
</div> </div>
</div> </div>
<% const filtered = activities.filter(a => a.type !== 4); %> <%
let filtered = activities
.filter(a => a.type !== 4)
.sort((a, b) => {
const priority = { 2: 0, 1: 1, 3: 2 }; // Listening, Streaming, Watching ? should i keep this
const aPriority = priority[a.type] ?? 99;
const bPriority = priority[b.type] ?? 99;
return aPriority - bPriority;
});
%>
<% if (filtered.length > 0) { %> <% if (filtered.length > 0) { %>
<h2>Activities</h2> <h2>Activities</h2>
<ul class="activities"> <ul class="activities">
@ -75,16 +86,28 @@
} else if (img) { } else if (img) {
art = `https://cdn.discordapp.com/app-assets/${activity.application_id}/${img}.png`; art = `https://cdn.discordapp.com/app-assets/${activity.application_id}/${img}.png`;
} }
const activityTypeMap = {
0: "Playing",
1: "Streaming",
2: "Listening",
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";
%> %>
<li class="activity"> <li class="activity">
<% if (art) { %> <div class="activity-wrapper">
<img class="activity-art" src="<%= art %>" alt="Art"> <div class="activity-type-wrapper">
<% } %> <span class="activity-type-label" data-type="<%= activity.type %>">
<%= activityType %>
<div class="activity-content"> </span>
<div class="activity-header <%= progress !== null ? 'no-timestamp' : '' %>">
<span class="activity-name"><%= activity.name %></span>
<% if (start && progress === null) { %> <% if (start && progress === null) { %>
<div class="activity-timestamp" data-start="<%= start %>"> <div class="activity-timestamp" data-start="<%= start %>">
<% const started = new Date(start); %> <% const started = new Date(start); %>
@ -95,33 +118,54 @@
<% } %> <% } %>
</div> </div>
<% if (activity.details) { %> <div class="activity-wrapper-inner">
<div class="activity-detail"><%= activity.details %></div> <% if (art) { %>
<% } %> <img class="activity-art" src="<%= art %>" alt="Art">
<% if (activity.state) { %> <% } %>
<div class="activity-detail"><%= activity.state %></div>
<% } %>
<% if (activity.buttons && activity.buttons.length > 0) { %> <div class="activity-content">
<div class="activity-buttons"> <div class="inner-content">
<% activity.buttons.forEach((button, index) => { <%
const buttonLabel = typeof button === 'string' ? button : button.label; const isMusic = activity.type === 2 || activity.type === 3;
let buttonUrl = null; const primaryLine = isMusic ? activity.details : activity.name;
if (typeof button === 'object' && button.url) { const secondaryLine = isMusic ? activity.state : activity.details;
buttonUrl = button.url; const tertiaryLine = isMusic ? activity.assets?.large_text : activity.state;
} %>
else if (index === 0 && activity.url) { <div class="activity-top">
buttonUrl = activity.url; <div class="activity-header <%= progress !== null ? 'no-timestamp' : '' %>">
} <span class="activity-name"><%= primaryLine %></span>
%> </div>
<% if (buttonUrl) { %>
<a href="<%= buttonUrl %>" class="activity-button" target="_blank" rel="noopener noreferrer"><%= buttonLabel %></a> <% if (secondaryLine) { %>
<% } else { %> <div class="activity-detail"><%= secondaryLine %></div>
<span class="activity-button disabled"><%= buttonLabel %></span> <% } %>
<% } %> <% if (tertiaryLine) { %>
<% }); %> <div class="activity-detail"><%= tertiaryLine %></div>
<% } %>
</div>
<div class="activity-bottom">
<% if (activity.buttons && activity.buttons.length > 0) { %>
<div class="activity-buttons">
<% activity.buttons.forEach((button, index) => {
const buttonLabel = typeof button === 'string' ? button : button.label;
let buttonUrl = null;
if (typeof button === 'object' && button.url) {
buttonUrl = button.url;
}
else if (index === 0 && activity.url) {
buttonUrl = activity.url;
}
%>
<% if (buttonUrl) { %>
<a href="<%= buttonUrl %>" class="activity-button" target="_blank" rel="noopener noreferrer"><%= buttonLabel %></a>
<% } %>
<% }); %>
</div>
<% } %>
</div>
</div>
</div> </div>
<% } %> </div>
<% if (progress !== null) { %> <% if (progress !== null) { %>
<div class="progress-bar" data-start="<%= start %>" data-end="<%= end %>"> <div class="progress-bar" data-start="<%= start %>" data-end="<%= end %>">
@ -130,7 +174,7 @@
<% if (start && end) { %> <% if (start && end) { %>
<div class="progress-time-labels" data-start="<%= start %>" data-end="<%= end %>"> <div class="progress-time-labels" data-start="<%= start %>" data-end="<%= end %>">
<span class="progress-current">--:--</span> <span class="progress-current"></span>
<span class="progress-total"><%= Math.floor((end - start) / 60000) %>:<%= String(Math.floor(((end - start) % 60000) / 1000)).padStart(2, "0") %></span> <span class="progress-total"><%= Math.floor((end - start) / 60000) %>:<%= String(Math.floor(((end - start) % 60000) / 1000)).padStart(2, "0") %></span>
</div> </div>
<% } %> <% } %>
@ -140,8 +184,8 @@
<% }) %> <% }) %>
</ul> </ul>
<% } %> <% } %>
<% if (readme) { %> <% if (readme) { %>
<h2>Readme</h2>
<section class="readme"> <section class="readme">
<div class="markdown-body"><%- readme %></div> <div class="markdown-body"><%- readme %></div>
</section> </section>