added homepage link

'type' >> 'types' as it is more suitable

README.md

@@ -1,38 +1,5 @@
-# create-svelte
+# K-Comebacks
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+A web-app featuring a (somewhat) complete and updated list of the latest K-/J-/C-Pop Comebacks.
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+[Visit kcomebacks.jonasjones.dev](https://kcomebacks.jonasjones.dev)

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { onMount } from "svelte";
+	import { recordRequest } from "./analytics";
 
 	let releases = [];
 	let searchArtist = "";
@@ -8,11 +9,13 @@
 	let startDate = null;
 	let endDate = null;
 	let filteredReleases = [];
-	let pageSize = 10;
+	let pageSize = 50;
 	let currentPage = 1;
 	let releaseTypes = [];
 	let totalPages = 1;
 	let pages = [];
+	let last_update = "Loading...";
+	let loading = "Loading...";
 
 	function sortByColumn(column) {
 		// Sort releases based on the selected column
@@ -36,12 +39,13 @@
 				.includes(searchTitle.toLowerCase());
 			const releaseTypeMatch =
 				selectedRelease === "" ||
-				(release.releaseType === null
+				(release.types === null
 					? "Unknown"
-					: release.releaseType) === selectedRelease;
+					: release.types) === selectedRelease ||
+					release.types.includes(selectedRelease);
 			const dateMatch =
-				(!startDate || new Date(release.date) >= startDate) &&
-				(!endDate || new Date(release.date) <= endDate);
+				(!startDate || new Date(release.date) >= new Date(startDate)) &&
+				(!endDate || new Date(release.date) <= new Date(endDate));
 			return artistMatch && titleMatch && releaseTypeMatch && dateMatch;
 		});
 
@@ -68,20 +72,33 @@
 	}
 
 	onMount(async () => {
+	recordRequest();
     try {
-      const response = await fetch('https://cdn.jonasjones.dev/api/kcomebacks/data.json');
+      const response = await fetch('https://cdn.jonasjones.dev/api/kcomebacks/rkpop_data.json');
+	  //const response = await fetch('/rkpop_data.json')
       if (response.ok) {
         releases = await response.json();
 
+		last_update = releases[0].last_update;
+		releases.shift();
+
         // Extract unique release types from the releases array
         releaseTypes = Array.from(new Set(releases.map(release => {
-          return release.releaseType === null ? 'Unknown' : release.releaseType;
+          return release.types === null ? 'Unknown' : release.types;
         })));
 
+		// releaseTypes should be an array of all elements of all the release.types lists of all releases
+		releaseTypes = releaseTypes.flat();
+
+		// eliminate duplicates
+		releaseTypes = [...new Set(releaseTypes)];
+
         // Sort releases by date from most recent to least recent
         releases.sort((a, b) => new Date(b.date) - new Date(a.date));
 
         filterReleases(); // Initial filtering based on default values
+
+		loading = "";
       } else {
         console.error('Failed to fetch data:', response.status);
       }
@@ -91,7 +108,10 @@
   });
 </script>
 
+<title>K-Pop Comebacks</title>
+
 <div class="container">
+	<a href="https://jonasjones.dev" style="color: white;position:absolute;right:20px;text-decoration:underline" >Homepage -></a>
 	<div class="title-banner">
 		<h1 class="title">K-Comebacks</h1>
 	</div>
@@ -194,6 +214,7 @@
 		</div>
 	</div>
 	<p>Click on the column title to filter by them</p>
+	<p>Last updated: {last_update}</p>
 	<table>
 		<thead>
 			<tr>
@@ -201,26 +222,28 @@
 				<th on:click={() => sortByColumn("date")}>Date</th>
 				<th on:click={() => sortByColumn("artist")}>Artist</th>
 				<th on:click={() => sortByColumn("title")}>Title</th>
-				<th on:click={() => sortByColumn("releaseType")}>Release Type</th>
+				<th on:click={() => sortByColumn("type")}>Release Types</th>
 			</tr>
 		</thead>
 		<tbody>
 			{#each filteredReleases as release}
 				<tr>
 					<!--calculate the release number-->
-					<td>{releases.indexOf(release) + 1}</td>
+					<td>{releases.length - releases.indexOf(release)}</td>
 					<td>{release.date}</td>
 					<td>{release.artist}</td>
 					<td>{release.title}</td>
 					<td
-						>{release.releaseType === null
+						>{release.types === null
 							? "Unknown"
-							: release.releaseType}</td
+							// show the release.types list as a comma separated string
+							: release.types.join(", ")}</td
 					>
 				</tr>
 			{/each}
 		</tbody>
 	</table>
+	<h1>{loading}</h1>
 </div>
 
 <style>

src/routes/analytics.js

@@ -0,0 +1,34 @@
+// Function to record the request with analytics
+export async function recordRequest() {
+
+    const analyticsData = {
+      timestamp: Date.now(),
+      domain: window.location.hostname,
+      method: 'GET', // Assuming the request method is GET; adjust as necessary
+      path: window.location.pathname,
+    };
+
+    console.log('Recording request:', analyticsData);
+
+    const ANALYTICS_URL = 'https://analytics.jonasjones.dev/requests/record/ipunknown';
+    const ANALYTICS_API_KEY = import.meta.env.VITE_ANALYTICS_API_KEY;
+
+    try {
+      const response = await fetch(ANALYTICS_URL, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': ANALYTICS_API_KEY,
+        },
+        body: JSON.stringify(analyticsData),
+      });
+
+      if (response.ok) {
+        console.log('Request recorded successfully');
+      } else {
+        console.error('Failed to record request:', response.status, await response.text());
+      }
+    } catch (error) {
+      console.error('Error recording request:', error);
+    }
+  }