feat /browse: add NEW tag

BlueprintFramework · Dec 30, 2024 · 71a9cf8 · 71a9cf8
1 parent 7736a3c
commit 71a9cf8
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/browse/extensions/index.html b/browse/extensions/index.html
@@ -228,12 +228,17 @@ <h2 class="h3 my-3">
       /** @param {Product[]} products */
       function displayProduct(data) {
         const productContainer = document.getElementById("productContainer");
-        let date = new Date(data.created);
-        date = date.toLocaleDateString('en-US', {
+        const createdDate = new Date(data.created);
+        const date = createdDate.toLocaleDateString('en-US', {
           year: 'numeric',
           month: 'long',
           day: 'numeric',
         });
+
+        const twoWeeksAgo = new Date(); 
+        twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14);
+        const isNew = createdDate > twoWeeksAgo;
+
         productContainer.innerHTML = `
           <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-3 position-relative pt-5 mb-4" style="background: url('${data.banner}') center; background-size: cover; border: unset;">
             <div class="blur-gradient-overlay"></div>
@@ -320,6 +325,14 @@ <h2 class="h3 my-3">
                 </span>
 
                 <div class="mt-2">
+                  ${
+                    (isNew) ? (`
+                      <span class="badge bg-primary text-light-emphasis rounded-pill placeholder-wave">
+                        <i class="bi bi-stars"></i>
+                        new
+                      </span>
+                    `) : ('')
+                  }
                   <span class="badge bg-light-subtle text-light-emphasis rounded-pill">
                     ${
                       (data.type == "THEME") ? (`
@@ -335,10 +348,6 @@ <h2 class="h3 my-3">
                     <i class="bi bi-tag-fill"></i>
                     ${data.identifier}
                   </span>
-                  <span class="badge bg-light-subtle text-light-emphasis rounded-pill">
-                    <i class="bi bi-hash"></i>
-                    ${data.id}
-                  </span>
                 </div>
               </div>
 

diff --git a/browse/index.html b/browse/index.html
@@ -398,17 +398,22 @@ <h1 class="modal-title fs-5" id="filterModalLabel"><i class="bi bi-filter"></i>
       function displayProducts(products) {
         const productList = document.getElementById("products");
         productList.innerHTML = "";
+        const twoWeeksAgo = new Date();
+        twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14);
 
         for (const product of sortProducts(products)) {
           const listItem = document.createElement("div");
           const categoryClass =
             product.type === "THEME" ? "filter-themes" : "filter-extensions";
+
+          const createdDate = new Date(product.created);
+          const isNew = createdDate > twoWeeksAgo;
 
           listItem.className =
             "col-sm-12 col-md-6 col-lg-4 mb-4 " + categoryClass;
           listItem.innerHTML = `
-            <div class="card overflow-hidden bg-dark-subtle">
-              <a href="./extensions/#${product.identifier}" class="text-decoration-none text-body">
+            <a href="./extensions/#${product.identifier}" class="text-decoration-none text-body">
+              <div class="card overflow-hidden bg-dark-subtle">
                 <img src="${
                   product.banner
                 }" onclick="setTimeout(() => {document.getElementById('${
@@ -420,10 +425,18 @@ <h1 class="modal-title fs-5" id="filterModalLabel"><i class="bi bi-filter"></i>
                   <h5 class="card-title text-truncate">${
                     product.name
                   } <span class="author-tag">by ${product.author.name}</span></h5>
-                  <p class="card-text text-truncate">${product.summary}</p>
+                  <p class="card-text text-truncate mb-0">${product.summary}</p>
+                  ${
+                    (isNew) ? (`
+                      <span class="badge bg-primary text-body-emphasis placeholder-wave position-absolute rounded-pill top-0 start-0 m-2">
+                        <i class="bi bi-stars"></i>
+                        <b>NEW</b>
+                      </span>
+                    `) : ('')
+                  }
                 </div>
-                </a>
-            </div>
+              </div>
+            </a>
           `;
 
           productList.appendChild(listItem);