Add new filter and optimized catalog page

#284

Author: bmorcelli

assets/js/catalog.js

@@ -17,6 +17,7 @@ const sortVersionsByPublishedDate = (versions) => {
     });
 };
 const API_URL = "https://api.launcherhub.net/giveMeTheList";
+const DEVICES_API_URL = "https://api.launcherhub.net/devices";
 const CDN_COVER = "https://m5burner-cdn.m5stack.com/cover/";
 const CDN_FIRMWARE = "https://m5burner-cdn.m5stack.com/firmware/";
 const SAMPLE_CARDPUTER_COVER = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200'%3E%3Crect width='320' height='200' fill='%2300dd00'/%3E%3Ctext x='160' y='110' font-family='Inter,Arial,sans-serif' font-size='32' fill='%2301110b' text-anchor='middle'%3ENo Image%3C/text%3E%3C/svg%3E";
@@ -82,6 +83,17 @@ const makeDownloadName = (entry, versionLabel) => {
     const base = parts.filter((part) => part.length > 0).join("-");
     return `${base || "launcher-firmware"}.bin`;
 };
+const formatPublishedDate = (value) => {
+    const timestamp = getPublishedTimestamp(value);
+    if (!Number.isFinite(timestamp)) {
+        return null;
+    }
+    return new Intl.DateTimeFormat("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "2-digit"
+    }).format(new Date(timestamp));
+};
 document.addEventListener("DOMContentLoaded", () => {
     const list = document.querySelector("[data-catalog-list]");
     const emptyState = document.querySelector("[data-catalog-empty]");
@@ -97,10 +109,17 @@ document.addEventListener("DOMContentLoaded", () => {
     if (!orderSelect) {
         return;
     }
-    currentOrder = orderSelect.value === "name" ? "name" : "downloads";
+    currentOrder =
+        orderSelect.value === "name"
+            ? "name"
+            : orderSelect.value === "published_at"
+                ? "published_at"
+                : "downloads";
     const offlineMode = new URLSearchParams(window.location.search).has("offline");
     let firmware = [];
     let filtered = [];
+    let totalFirmwareCount = 0;
+    let initialCategory = "cardputer";
     const pendingImages = new Set();
     let imageObserver = null;
     const loadImage = (image) => {
@@ -150,7 +169,22 @@ document.addEventListener("DOMContentLoaded", () => {
         });
     };
     const renderCounter = () => {
-        counter.textContent = `${filtered.length} firmware${filtered.length === 1 ? "" : "s"}`;
+        counter.textContent = `${filtered.length} of ${totalFirmwareCount} firmwares`;
+    };
+    const getLatestVersionTimestamp = (entry) => {
+        return (entry.versions ?? []).reduce((latest, version) => {
+            return Math.max(latest, getPublishedTimestamp(version.published_at));
+        }, Number.NEGATIVE_INFINITY);
+    };
+    const getLatestVersion = (entry) => {
+        return (entry.versions ?? []).reduce((latest, version) => {
+            if (!latest) {
+                return version;
+            }
+            return getPublishedTimestamp(version.published_at) > getPublishedTimestamp(latest.published_at)
+                ? version
+                : latest;
+        }, null);
     };
     const buildCard = (entry) => {
         const article = document.createElement("article");
@@ -191,9 +225,59 @@ document.addEventListener("DOMContentLoaded", () => {
         body.style.justifyContent = "flex-start";
         const title = document.createElement("h3");
         title.className = "card__title";
-        title.textContent = entry.author ? `${entry.name} (${entry.author})` : entry.name;
         title.style.margin = "0";
         title.style.textAlign = "center";
+        title.style.display = "flex";
+        title.style.alignItems = "center";
+        title.style.justifyContent = "center";
+        title.style.gap = "8px";
+        const titleText = document.createElement("span");
+        titleText.textContent = entry.author ? `${entry.name} (${entry.author})` : entry.name;
+        title.append(titleText);
+        if (entry.github) {
+            const githubLink = document.createElement("a");
+            githubLink.href = entry.github;
+            githubLink.target = "_blank";
+            githubLink.rel = "noopener";
+            githubLink.title = "Open GitHub repository";
+            githubLink.setAttribute("aria-label", "Open GitHub repository");
+            githubLink.style.display = "inline-flex";
+            githubLink.style.alignItems = "center";
+            githubLink.style.color = "var(--accent, #00dd00)";
+            githubLink.style.textDecoration = "none";
+            githubLink.style.flex = "0 0 auto";
+            const githubIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            githubIcon.setAttribute("viewBox", "0 0 16 16");
+            githubIcon.setAttribute("width", "18");
+            githubIcon.setAttribute("height", "18");
+            githubIcon.setAttribute("aria-hidden", "true");
+            githubIcon.style.fill = "currentColor";
+            const githubPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+            githubPath.setAttribute("d", "M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.5-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.7 7.7 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8Z");
+            githubIcon.append(githubPath);
+            githubLink.append(githubIcon);
+            title.append(githubLink);
+        }
+        const latestVersion = getLatestVersion(entry);
+        const publishedDateLabel = formatPublishedDate(latestVersion?.published_at);
+        const metaRow = document.createElement("div");
+        metaRow.style.display = "flex";
+        metaRow.style.flexWrap = "wrap";
+        metaRow.style.alignItems = "center";
+        metaRow.style.justifyContent = "center";
+        metaRow.style.gap = "10px 14px";
+        metaRow.style.fontSize = "0.9rem";
+        metaRow.style.color = "rgba(245, 248, 242, 0.78)";
+        if ((entry.download ?? 0) > 0) {
+            const downloadsMeta = document.createElement("span");
+            downloadsMeta.textContent = `${entry.download} downloads`;
+            metaRow.append(downloadsMeta);
+        }
+        if (publishedDateLabel) {
+            const publishedMeta = document.createElement("span");
+            publishedMeta.textContent = `Published ${publishedDateLabel}`;
+            metaRow.append(publishedMeta);
+        }
         const descriptionWrapper = document.createElement("div");
         descriptionWrapper.style.position = "relative";
         descriptionWrapper.style.maxHeight = `${DESCRIPTION_COLLAPSED_HEIGHT}px`;
@@ -289,7 +373,7 @@ document.addEventListener("DOMContentLoaded", () => {
             updateReadMoreState();
         });
         setTimeout(updateReadMoreState, 0);
-        body.append(title, descriptionWrapper, readMoreButton, controls);
+        body.append(title, metaRow, descriptionWrapper, readMoreButton, controls);
         article.append(figure, body);
         return article;
     };
@@ -311,6 +395,17 @@ document.addEventListener("DOMContentLoaded", () => {
             filtered.sort((a, b) => a.name.localeCompare(b.name));
             return;
         }
+        if (currentOrder === "published_at") {
+            filtered.sort((a, b) => {
+                const aTime = getLatestVersionTimestamp(a);
+                const bTime = getLatestVersionTimestamp(b);
+                if (aTime !== bTime) {
+                    return bTime - aTime;
+                }
+                return a.name.localeCompare(b.name);
+            });
+            return;
+        }
         filtered.sort((a, b) => (b.download ?? 0) - (a.download ?? 0));
     };
     const applyFilters = () => {
@@ -325,39 +420,82 @@ document.addEventListener("DOMContentLoaded", () => {
         sortFiltered();
         renderList();
     };
-    const populateCategories = () => {
+    const populateCategories = (inputCategories) => {
         const categories = new Set(["all"]);
-        firmware.forEach((entry) => {
-            if (entry.category) {
-                categories.add(entry.category);
+        (inputCategories ?? []).forEach((category) => {
+            if (category) {
+                categories.add(category);
             }
         });
+        if (!inputCategories) {
+            firmware.forEach((entry) => {
+                if (entry.category) {
+                    categories.add(entry.category);
+                }
+            });
+        }
+        const orderedCategories = [
+            "all",
+            ...Array.from(categories)
+                .filter((category) => category !== "all")
+                .sort((a, b) => a.localeCompare(b))
+        ];
         categorySelect.innerHTML = "";
-        Array.from(categories).forEach((category) => {
+        orderedCategories.forEach((category) => {
             const option = document.createElement("option");
             option.value = category;
             option.textContent = category === "all" ? "All categories" : category;
             categorySelect.append(option);
         });
+        if (initialCategory && orderedCategories.includes(initialCategory)) {
+            categorySelect.value = initialCategory;
+        }
+        else {
+            categorySelect.value = "all";
+        }
     };
     const hydrate = (entries) => {
         const sortedEntries = entries.map((item) => ({
             ...item,
             versions: sortVersionsByPublishedDate(item.versions ?? [])
         }));
         firmware = sortedEntries.filter((item) => Array.isArray(item.versions) && item.versions.some((version) => Boolean(version.file)));
+        totalFirmwareCount = firmware.length;
         filtered = [...firmware];
-        populateCategories();
+        if (categorySelect.options.length === 0) {
+            populateCategories();
+        }
+        else {
+            const availableCategories = firmware
+                .map((entry) => entry.category)
+                .filter((category) => Boolean(category));
+            populateCategories(availableCategories);
+        }
         applyFilters();
     };
+    const fetchCategories = async () => {
+        const response = await fetch(DEVICES_API_URL);
+        if (!response.ok) {
+            throw new Error(`Device request failed with status ${response.status}`);
+        }
+        const payload = (await response.json());
+        const categories = payload
+            .map((item) => item.category?.trim())
+            .filter((category) => Boolean(category));
+        populateCategories(categories);
+    };
     const fetchData = async () => {
         try {
-            status.textContent = "Loading firmware list...";
+            status.textContent = "Loading catalog...";
+            const categoryPromise = fetchCategories().catch((error) => {
+                console.error(error);
+            });
             const response = await fetch(API_URL);
             if (!response.ok) {
                 throw new Error(`Request failed with status ${response.status}`);
             }
             const payload = (await response.json());
+            await categoryPromise;
             hydrate(payload);
             status.textContent = "";
         }
@@ -374,7 +512,11 @@ document.addEventListener("DOMContentLoaded", () => {
         applyFilters();
     });
     orderSelect.addEventListener("change", () => {
-        const value = orderSelect.value === "name" ? "name" : "downloads";
+        const value = orderSelect.value === "name"
+            ? "name"
+            : orderSelect.value === "published_at"
+                ? "published_at"
+                : "downloads";
         currentOrder = value;
         sortFiltered();
         renderList();

package.json

@@ -3,7 +3,9 @@
   "version": "1.0.0",
   "description": "Modernized Launcher web presence for GitHub Pages.",
   "scripts": {
-    "build": "node scripts/build.mjs"
+    "build": "node scripts/build.mjs",
+    "serve": "node scripts/dev-server.mjs",
+    "dev": "npm run build && npm run serve"
   },
   "keywords": [
     "esp32",

scripts/dev-server.mjs

@@ -0,0 +1,70 @@
+import { createReadStream, existsSync, statSync } from 'node:fs';
+import { createServer } from 'node:http';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const projectRoot = path.resolve(__dirname, '..');
+const rootDir = path.join(projectRoot, 'build');
+const port = Number(process.env.PORT || 3000);
+
+const mimeTypes = {
+  '.css': 'text/css; charset=utf-8',
+  '.gif': 'image/gif',
+  '.html': 'text/html; charset=utf-8',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.js': 'application/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.png': 'image/png',
+  '.svg': 'image/svg+xml; charset=utf-8',
+  '.txt': 'text/plain; charset=utf-8',
+  '.webp': 'image/webp'
+};
+
+const resolveRequestPath = (requestUrl) => {
+  const url = new URL(requestUrl, `http://localhost:${port}`);
+  const relativePath = decodeURIComponent(url.pathname === '/' ? '/index.html' : url.pathname);
+  const normalizedPath = path.normalize(relativePath).replace(/^(\.\.[/\\])+/, '');
+  let filePath = path.join(rootDir, normalizedPath);
+
+  if (existsSync(filePath) && statSync(filePath).isDirectory()) {
+    filePath = path.join(filePath, 'index.html');
+  }
+
+   if (!existsSync(filePath) && path.extname(filePath).length === 0) {
+    const htmlFilePath = `${filePath}.html`;
+    if (existsSync(htmlFilePath) && statSync(htmlFilePath).isFile()) {
+      filePath = htmlFilePath;
+    }
+  }
+
+  return filePath;
+};
+
+const server = createServer((request, response) => {
+  if (!request.url) {
+    response.writeHead(400);
+    response.end('Bad Request');
+    return;
+  }
+
+  const filePath = resolveRequestPath(request.url);
+  const relativeFilePath = path.relative(rootDir, filePath);
+  if (relativeFilePath.startsWith('..') || !existsSync(filePath) || !statSync(filePath).isFile()) {
+    response.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+    response.end('Not Found');
+    return;
+  }
+
+  const extension = path.extname(filePath).toLowerCase();
+  const contentType = mimeTypes[extension] ?? 'application/octet-stream';
+
+  response.writeHead(200, { 'Content-Type': contentType });
+  createReadStream(filePath).pipe(response);
+});
+
+server.listen(port, () => {
+  console.log(`Local preview available at http://localhost:${port}`);
+});