Merge pull request 'Activity Buttons & CSS (some server changes)' (#5) from SteelTech/profilePage:main into main

Reviewed-on: creations/profilePage#5

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "github-enterprise.uri": "https://git.creations.works"
+}

public/css/index.css

@@ -224,6 +224,38 @@ ul {
 	color: #f0b232;
 }
 
+.activity-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+	margin-top: 0.75rem;
+}
+
+.activity-button {
+	background-color: #5865f2;
+	color: white;
+	border: none;
+	border-radius: 3px;
+	padding: 0.5rem 1rem;
+	font-size: 0.9rem;
+	cursor: pointer;
+	text-decoration: none;
+	transition: background-color 0.2s ease;
+	display: inline-block;
+}
+
+.activity-button:hover {
+	background-color: #4752c4;
+	text-decoration: none;
+}
+
+.activity-button.disabled {
+	background-color: #4e5058;
+	cursor: default;
+	pointer-events: none;
+	opacity: 0.8;
+}
+
 @media (max-width: 600px) {
 	html {
 		font-size: clamp(14px, 2vw, 16px);
@@ -338,6 +370,17 @@ ul {
 		margin-top: 0.25rem;
 		width: 100%;
 	}
+
+	.activity-buttons {
+		justify-content: center;
+		margin-top: 0.5rem;
+		width: 100%;
+	}
+
+	.activity-button {
+		font-size: 0.85rem;
+		padding: 0.4rem 0.8rem;
+	}
 }
 
 /* readme :p */

public/js/index.js

@@ -156,6 +156,26 @@ function buildActivityHTML(activity) {
 			`
 			: "";
 
+	const activityButtons = activity.buttons && activity.buttons.length > 0
+		? `<div class="activity-buttons">
+			${activity.buttons.map((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) {
+					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 `
 		<li class="activity">
 			${art ? `<img class="activity-art" src="${art}" alt="Art">` : ""}
@@ -166,6 +186,7 @@ function buildActivityHTML(activity) {
 				</div>
 				${activity.details ? `<div class="activity-detail">${activity.details}</div>` : ""}
 				${activity.state ? `<div class="activity-detail">${activity.state}</div>` : ""}
+				${activityButtons}
 				${progressBar}
 			</div>
 		</li>

src/server.ts

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

src/views/index.ejs

@@ -102,6 +102,27 @@
 							<div class="activity-detail"><%= activity.state %></div>
 						<% } %>
 
+						<% 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>
+									<% } else { %>
+										<span class="activity-button disabled"><%= buttonLabel %></span>
+									<% } %>
+								<% }); %>
+							</div>
+						<% } %>
+
 						<% if (progress !== null) { %>
 							<div class="progress-bar" data-start="<%= start %>" data-end="<%= end %>">
 								<div class="progress-fill" <%= progress !== null ? `style="width: ${progress}%"` : '' %>></div>