Use more native html elements

src/main/resources/static/details.css

@@ -81,21 +81,34 @@ h1 {
 
 #rating {
     color: color-mix(in oklab, var(--text-color) 80%, black);
-}
+    color: transparent;
-
+    width: 5lh;
-#rating::after {
-    content: "";
-    display: inline-block;
-    width: 5em;
     height: 1lh;
-    vertical-align: bottom;
     margin-inline: .5ch;
     mask-image: url("stars.svg");
     -webkit-mask-image: url("stars.svg");
-    mask-size: 100% 100%;
+    mask-size: contain;
     mask-mode: alpha;
     --rating-percent: calc((var(--rating, 0) / 5) * 100%);
-    background: linear-gradient(to right, var(--rating-color) var(--rating-percent), var(--bg-color) var(--rating-percent));
+    background: var(--bg-color);
+    vertical-align: bottom;
+}
+
+#rating::-webkit-meter-bar {
+    background: var(--bg-color);
+    border: none;
+    border-radius: 0;
+    grid-row: 1 / -1;
+}
+
+#rating::-webkit-meter-optimum-value,
+#rating::-webkit-meter-suboptimum-value,
+#rating::-webkit-meter-even-less-good-value {
+    background-color: var(--rating-color);
+}
+
+#rating::-moz-meter-bar {
+    background: var(--rating-color);
 }
 
 a {

src/main/resources/static/details.html

@@ -22,10 +22,10 @@
     <main id="details" class="skeleton">
         <header data-id="dataset-id">
             <h1 id="title" data-type="api">Title</h1>
-            <span>
+            <summary>
-                <span id="rating" style="--rating: 4">4</span>
+                <span id="rating-text">4</span><meter id="rating" value="4" max="5"></meter>
                 <span id="short-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis recusandae laborum odio corrupti voluptas quisquam dicta, quibusdam ipsum qui exercitationem.</span>
-            </span>
+            </summary>
             <a id="url">https://example.com/dataset</a>
             <aside class="upvote">
                 <button disabled class="upvote-btn btn flat">Upvote</button>
@@ -35,7 +35,7 @@
         </header>
         
         <section id="metadata">
-            <span>Added on: <span id="date" data-date="0">1. January 1970</span></span>
+            <span>Added on: <time id="date" datetime="0">1. January 1970</time></span>
             <span>Category: <span id="category">Something</span></span>
             <span>License: <span id="license">MIT</span></span>
             <a id="terms-of-use">Terms of Use</a>

src/main/resources/static/details.js

@@ -1,9 +1,11 @@
 import Dataset from "./dataset.js";
 
-const mainElement = document.getElementsByTagName("main")[0];
+const mainPage = document.getElementById("details");
+const notFoundPage = document.getElementById("not-found");
 
 const title = document.getElementById("title");
 const rating = document.getElementById("rating");
+const ratingText = document.getElementById("rating-text");
 const shortDescription = document.getElementById("short-description");
 const url = document.getElementById("url");
 const date = document.getElementById("date");
@@ -26,19 +28,19 @@ if (currentLocation.searchParams.has("id")) {
 
         title.innerText = dataset.title;
         title.dataset.type = dataset.type.toLowerCase();
-        rating.innerText = dataset.rating;
+        rating.value = dataset.rating;
-        rating.style.setProperty("--rating", `${dataset.rating}`);
+        ratingText.innerText = dataset.rating;
         shortDescription.innerText = dataset.shortDescription;
         url.href = dataset.url;
         url.innerText = dataset.url;
         mainPage.querySelector(".upvote").replaceWith(upvoteComponent);
 
+        date.datetime = dataset.date;
         date.innerText = dataset.parseDate().toLocaleDateString(undefined, {
             day: "numeric",
             month: "long",
             year: "numeric",
         });
-        date.dataset.date = dataset.parseDate().getTime();
         category.innerText = dataset.category.name;
         category.dataset.id = dataset.category.id;
         license.innerText = dataset.license;