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

fix issue with rain and snow, fix ejs formatting

Browse source
This commit is contained in:
creations 2025-04-09 18:35:08 -04:00
parent 78c2eb4545
commit c54d959e7e
Signed by: creations
GPG key ID: 8F553AA4320FC711
2 changed files with 85 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/routes/index.ts
View file

@ -37,6 +37,8 @@ async function handler(): Promise<Response> {
status = presence.discord_status; status = presence.discord_status;
} }
console.log(presence.kv.rain);
const ejsTemplateData: EjsTemplateData = { const ejsTemplateData: EjsTemplateData = {
title: presence.discord_user.global_name || presence.discord_user.username, title: presence.discord_user.global_name || presence.discord_user.username,
username: username:
@ -51,10 +53,13 @@ async function handler(): Promise<Response> {
}, },
instance, instance,
readme, readme,
allowSnow: presence.kv.snow || false, allowSnow: presence.kv.snow === "true",
allowRain: presence.kv.rain || false, allowRain: presence.kv.rain === "true",
}; };
console.log("allowSnow", presence.kv.snow);
console.log("allowRain", presence.kv.rain);
return await renderEjsTemplate("index", ejsTemplateData); return await renderEjsTemplate("index", ejsTemplateData);
} }

152
src/views/index.ejs
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head data-user-id="<%= user.id %>" data-instance-uri="<%= instance %>"> <head data-user-id="<%= user.id %>" data-instance-uri="<%= instance %>">
<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">
@ -13,29 +14,31 @@
<link rel="stylesheet" href="/public/css/index.css"> <link rel="stylesheet" href="/public/css/index.css">
<script src="/public/js/index.js" defer></script> <script src="/public/js/index.js" defer></script>
<%= typeof allowSnow %> <%= allowSnow %>
<% if (allowSnow) { %> <% if (allowSnow) { %>
<script src="/public/js/snow.js" defer></script> <script src="/public/js/snow.js" defer></script>
<% } %> <% } %>
<% if(allowRain) { %> <% if(allowRain) { %>
<script src="/public/js/rain.js" defer></script> <script src="/public/js/rain.js" defer></script>
<% } %> <% } %>
<meta name="color-scheme" content="dark"> <meta name="color-scheme" content="dark">
</head> </head>
<body> <body>
<div class="user-card"> <div class="user-card">
<div class="avatar-status-wrapper"> <div class="avatar-status-wrapper">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img class="avatar" src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>" alt="Avatar"> <img class="avatar" src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>" alt="Avatar">
<% if (user.avatar_decoration_data) { %> <% if (user.avatar_decoration_data) { %>
<img class="decoration" src="https://cdn.discordapp.com/avatar-decoration-presets/<%= user.avatar_decoration_data.asset %>" alt="Decoration"> <img class="decoration" src="https://cdn.discordapp.com/avatar-decoration-presets/<%= user.avatar_decoration_data.asset %>" alt="Decoration">
<% } %> <% } %>
<% if (platform.mobile) { %> <% if (platform.mobile) { %>
<svg class="platform-icon mobile-only" viewBox="0 0 1000 1500" fill="#43a25a" aria-label="Mobile" width="17" height="17"> <svg class="platform-icon mobile-only" viewBox="0 0 1000 1500" fill="#43a25a" aria-label="Mobile" width="17" height="17">
<path d="M 187 0 L 813 0 C 916.277 0 1000 83.723 1000 187 L 1000 1313 C 1000 1416.277 916.277 1500 813 1500 L 187 1500 C 83.723 1500 0 1416.277 0 1313 L 0 187 C 0 83.723 83.723 0 187 0 Z M 125 1000 L 875 1000 L 875 250 L 125 250 Z M 500 1125 C 430.964 1125 375 1180.964 375 1250 C 375 1319.036 430.964 1375 500 1375 C 569.036 1375 625 1319.036 625 1250 C 625 1180.964 569.036 1125 500 1125 Z"/> <path d="M 187 0 L 813 0 C 916.277 0 1000 83.723 1000 187 L 1000 1313 C 1000 1416.277 916.277 1500 813 1500 L 187 1500 C 83.723 1500 0 1416.277 0 1313 L 0 187 C 0 83.723 83.723 0 187 0 Z M 125 1000 L 875 1000 L 875 250 L 125 250 Z M 500 1125 C 430.964 1125 375 1180.964 375 1250 C 375 1319.036 430.964 1375 500 1375 C 569.036 1375 625 1319.036 625 1250 C 625 1180.964 569.036 1125 500 1125 Z" />
</svg> </svg>
<% } else { %> <% } else { %>
<div class="status-indicator <%= status %>"></div> <div class="status-indicator <%= status %>"></div>
<% } %> <% } %>
</div> </div>
<div class="user-info"> <div class="user-info">
@ -47,16 +50,16 @@
? `https://cdn.discordapp.com/emojis/${emoji.id}.${emoji.animated ? "gif" : "png"}` ? `https://cdn.discordapp.com/emojis/${emoji.id}.${emoji.animated ? "gif" : "png"}`
: null; : null;
%> %>
<p class="custom-status"> <p class="custom-status">
<% if (isCustom && emojiUrl) { %> <% if (isCustom && emojiUrl) { %>
<img src="<%= emojiUrl %>" alt="<%= emoji.name %>" class="custom-emoji"> <img src="<%= emojiUrl %>" alt="<%= emoji.name %>" class="custom-emoji">
<% } else if (emoji?.name) { %> <% } else if (emoji?.name) { %>
<%= emoji.name %> <%= emoji.name %>
<% } %> <% } %>
<% if (activities[0].state) { %> <% if (activities[0].state) { %>
<span class="custom-status-text"><%= activities[0].state %></span> <span class="custom-status-text"><%= activities[0].state %></span>
<% } %> <% } %>
</p> </p>
<% } %> <% } %>
</div> </div>
</div> </div>
@ -121,51 +124,51 @@
? "Listening to TIDAL" ? "Listening to TIDAL"
: activityTypeMap[activity.type] || "Playing"; : activityTypeMap[activity.type] || "Playing";
%> %>
<li class="activity"> <li class="activity">
<div class="activity-wrapper"> <div class="activity-wrapper">
<div class="activity-type-wrapper"> <div class="activity-type-wrapper">
<span class="activity-type-label" data-type="<%= activity.type %>"><%= activityType %></span> <span class="activity-type-label" data-type="<%= activity.type %>"><%= activityType %></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); %>
<span> <span>
Since: <%= started.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) %> <span class="elapsed"></span> Since: <%= started.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) %> <span class="elapsed"></span>
</span> </span>
</div> </div>
<% } %>
</div>
<div class="activity-wrapper-inner">
<% if (art) { %>
<div class="activity-image-wrapper">
<img class="activity-image" src="<%= art %>" alt="Art" <%= activity.assets?.large_text ? `title="${activity.assets.large_text}"` : '' %>>
<% if (smallArt) { %>
<img class="activity-image-small" src="<%= smallArt %>" alt="Small Art" <%= activity.assets?.small_text ? `title="${activity.assets.small_text}"` : '' %>>
<% } %> <% } %>
</div> </div>
<div class="activity-wrapper-inner"> <% } %>
<% if (art) { %> <div class="activity-content">
<div class="activity-image-wrapper"> <div class="inner-content">
<img class="activity-image" src="<%= art %>" alt="Art" <%= activity.assets?.large_text ? `title="${activity.assets.large_text}"` : '' %>> <%
<% if (smallArt) { %>
<img class="activity-image-small" src="<%= smallArt %>" alt="Small Art" <%= activity.assets?.small_text ? `title="${activity.assets.small_text}"` : '' %>>
<% } %>
</div>
<% } %>
<div class="activity-content">
<div class="inner-content">
<%
const isMusic = activity.type === 2 || activity.type === 3; const isMusic = activity.type === 2 || activity.type === 3;
const primaryLine = isMusic ? activity.details : activity.name; const primaryLine = isMusic ? activity.details : activity.name;
const secondaryLine = isMusic ? activity.state : activity.details; const secondaryLine = isMusic ? activity.state : activity.details;
const tertiaryLine = isMusic ? activity.assets?.large_text : activity.state; const tertiaryLine = isMusic ? activity.assets?.large_text : activity.state;
%> %>
<div class="activity-top"> <div class="activity-top">
<div class="activity-header <%= progress !== null ? 'no-timestamp' : '' %>"> <div class="activity-header <%= progress !== null ? 'no-timestamp' : '' %>">
<span class="activity-name"><%= primaryLine %></span> <span class="activity-name"><%= primaryLine %></span>
</div>
<% if (secondaryLine) { %>
<div class="activity-detail"><%= secondaryLine %></div>
<% } %>
<% if (tertiaryLine) { %>
<div class="activity-detail"><%= tertiaryLine %></div>
<% } %>
</div> </div>
<div class="activity-bottom"> <% if (secondaryLine) { %>
<% if (activity.buttons && activity.buttons.length > 0) { %> <div class="activity-detail"><%= secondaryLine %></div>
<div class="activity-buttons"> <% } %>
<% activity.buttons.forEach((button, index) => { <% 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; const buttonLabel = typeof button === 'string' ? button : button.label;
let buttonUrl = null; let buttonUrl = null;
if (typeof button === 'object' && button.url) { if (typeof button === 'object' && button.url) {
@ -174,36 +177,37 @@
buttonUrl = activity.url; buttonUrl = activity.url;
} }
%> %>
<% if (buttonUrl) { %> <% if (buttonUrl) { %>
<a href="<%= buttonUrl %>" class="activity-button" target="_blank" rel="noopener noreferrer"><%= buttonLabel %></a> <a href="<%= buttonUrl %>" class="activity-button" target="_blank" rel="noopener noreferrer"><%= buttonLabel %></a>
<% } %>
<% }) %>
</div>
<% } %> <% } %>
<% }) %>
</div> </div>
<% } %>
</div> </div>
</div> </div>
</div> </div>
<% if (progress !== null) { %>
<div class="progress-bar" data-start="<%= start %>" data-end="<%= end %>">
<div class="progress-fill" <%= progress !== null ? `style="width: ${progress}%"` : '' %>></div>
</div>
<% if (start && end) { %>
<div class="progress-time-labels" data-start="<%= start %>" data-end="<%= end %>">
<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>
</div>
<% } %>
<% } %>
</div> </div>
</li> <% if (progress !== null) { %>
<div class="progress-bar" data-start="<%= start %>" data-end="<%= end %>">
<div class="progress-fill" <%= progress !== null ? `style="width: ${progress}%"` : '' %>></div>
</div>
<% if (start && end) { %>
<div class="progress-time-labels" data-start="<%= start %>" data-end="<%= end %>">
<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>
</div>
<% } %>
<% } %>
</div>
</li>
<% }); %> <% }); %>
</ul> </ul>
<% if (readme) { %> <% if (readme) { %>
<section class="readme"> <section class="readme">
<div class="markdown-body"><%- readme %></div> <div class="markdown-body"><%- readme %></div>
</section> </section>
<% } %> <% } %>
</body> </body>
</html> </html>