Merge pull request 'fix typo' (#8) from zyqunix/profilePage:main into main

Reviewed-on: creations/profilePage#8
Reviewed-by: creations <creations@creations.works>

.forgejo/workflows/docker-release.yml

@@ -1,26 +0,0 @@
-name: Docker Image Release
-
-on:
-  push:
-    tags:
-      - "v*"
-
-jobs:
-  release:
-    runs-on: docker
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set tag
-        run: echo "TAG=${GITHUB_REF##*/}" >> $GITHUB_ENV
-
-      - name: Login to Docker Registry
-        run: echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login -u "${{ secrets.REGISTRY_USERNAME }}" --password-stdin
-
-      - name: Build and Push Docker Image
-        run: |
-          IMAGE=creations/profile-page
-          docker build --target release -t $IMAGE:$TAG -t $IMAGE:latest .
-          docker push $IMAGE:$TAG
-          docker push $IMAGE:latest

README.md

@@ -63,7 +63,7 @@ cp .env.example .env
 | `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                         |
-| `TIMEZONE_API_URL`    | Enables showing times from [timezoneDB](https://git.creations.works/creations/timezoneDB) |
+| `TIMEZONE_API_URL`    | Enables showing times from [timezoneDB](https://git.creations.works/creations/timezoneDB-rs) |
 | `STEAMGRIDDB_API_KEY` | SteamGridDB API key for fetching game icons                                 |
 
 #### Optional Lanyard KV Variables (per-user customization)
@@ -81,6 +81,7 @@ These can be defined in Lanyard's KV store to customize the page:
 | `optout`  | Allows users to stop sharing there profile on the website (`true` / `false`) |
 | `reviews` | Enables reviews from reviewdb (`true` / `false`)                   |
 | `timezone`| Enables the showing of the current time from the timezone db API (`true` / `false`) |
+| `timezone_12` | Sets the timezone to default show 12h format, default is 24h   |
 
 ---
 

public/js/index.js

@@ -11,6 +11,7 @@ let socket;
 let badgesLoaded = false;
 let readmeLoaded = false;
 let cssLoaded = false;
+let timezoneLoaded = false;
 
 const reviewsPerPage = 50;
 let currentReviewOffset = 0;
@@ -131,7 +132,7 @@ function resolveActivityImage(img, applicationId) {
 
 async function populateReviews(userId) {
 	if (!reviewURL || !userId || isLoadingReviews || !hasMoreReviews) return;
-	const reviewSection = document.querySelector(".reviews");
+	const reviewSection = document.getElementById("reviews-section");
 	const reviewList = reviewSection?.querySelector(".reviews-list");
 	if (!reviewList) return;
 
@@ -200,7 +201,9 @@ async function populateReviews(userId) {
 		if (currentReviewOffset === 0) reviewList.innerHTML = reviewsHTML;
 		else reviewList.insertAdjacentHTML("beforeend", reviewsHTML);
 
+		if (data.reviews.length > 0 && reviewsHTML) {
 			reviewSection.classList.remove("hidden");
+		}
 
 		hasMoreReviews = data.hasNextPage;
 		isLoadingReviews = false;
@@ -210,8 +213,8 @@ async function populateReviews(userId) {
 	}
 }
 
-function populateTimezone(userId) {
+function populateTimezone(userId, format = "24h") {
-	if (!userId || !timezoneApiUrl) return;
+	if (!userId || !timezoneApiUrl || timezoneLoaded) return;
 
 	let currentTimezone = null;
 
@@ -227,6 +230,7 @@ function populateTimezone(userId) {
 
 			currentTimezone = json.timezone;
 			updateTime();
+			timezoneLoaded = true;
 		} catch (err) {
 			console.error("Failed to populate timezone", err);
 		}
@@ -236,7 +240,8 @@ function populateTimezone(userId) {
 		if (!currentTimezone) return;
 
 		const timezoneEl = document.querySelector(".timezone-value");
-		if (!timezoneEl) return;
+		const timezoneWrapper = document.getElementById("timezone-wrapper");
+		if (!timezoneEl || !timezoneWrapper) return;
 
 		const now = new Date();
 
@@ -256,8 +261,10 @@ function populateTimezone(userId) {
 			second: "2-digit",
 		});
 
-		timezoneEl.textContent = time24;
+		timezoneEl.textContent = format === "24h" ? time24 : time12;
-		timezoneEl.title = `${time12} (${currentTimezone})`;
+		timezoneEl.title = `${format === "12h" ? time24 : time12} (${currentTimezone})`;
+
+		timezoneWrapper.classList.remove("hidden");
 	}
 
 	fetchTimezone();
@@ -468,6 +475,7 @@ async function loadBadges(userId, options = {}) {
 				img.src = badge.badge;
 				img.alt = badge.tooltip;
 				img.title = badge.tooltip;
+				img.tooltip = badge.tooltip;
 				img.className = "badge";
 				target.appendChild(img);
 			}
@@ -649,11 +657,7 @@ async function updatePresence(initialData) {
 	}
 
 	if (kv.timezone !== "false" && userId && timezoneApiUrl) {
-		populateTimezone(userId);
+		populateTimezone(userId, kv.timezone_12 === "true" ? "12h" : "24h");
-		const timezoneEl = document.querySelector(".timezone-value");
-		if (timezoneEl) {
-			timezoneEl.classList.remove("hidden");
-		}
 	}
 
 	const platform = {

src/views/index.html

@@ -27,8 +27,8 @@
 				style="opacity: 0.5" loading="lazy" />
 		</a>
 
-		<div class="timezone-wrapper" id="timezone-wrapper" aria-label="Timezone Information">
+		<div class="timezone-wrapper hidden" id="timezone-wrapper" aria-label="Timezone Information">
-			<span class="timezone-label">Users Time:</span>
+			<span class="timezone-label">User's Time:</span>
 			<span class="timezone-value"></span>
 		</div>
 	</header>
@@ -61,7 +61,7 @@
 		</section>
 	</main>
 
-	<section class="reviews hidden" aria-label="User Reviews">
+	<section class="reviews hidden" aria-label="User Reviews" id="reviews-section">
 		<h2>User Reviews</h2>
 		<ul class="reviews-list">
 		</ul>