Add details not found page

src/main/resources/static/details.css

@@ -14,12 +14,14 @@ main {
     }
     
     & > :first-child {
-        border-radius: var(--corner-radius) var(--corner-radius) 0 0;
+        border-top-left-radius: var(--corner-radius);
+        border-top-right-radius: var(--corner-radius);
         margin-top: var(--pad-main);
     }
 
     & > :last-child {
-        border-radius: 0 0 var(--corner-radius) var(--corner-radius);
+        border-bottom-left-radius: var(--corner-radius);
+        border-bottom-right-radius: var(--corner-radius);
         margin-bottom: var(--pad-main);
     }
 
@@ -43,10 +45,13 @@ header {
     grid-gap: var(--gap-medium);
 }
 
-#title {
+h1 {
-    grid-column: 1 / 3;
     margin-block: var(--gap-medium) 0;
     text-align: center;
+}
+
+#title {
+    grid-column: 1 / 3;
 
     &::after {
         content: attr(data-type);
@@ -69,7 +74,7 @@ header {
     }
 }
 
-:has(#rating), #url {
+#details summary, #url {
     text-align: start;
     grid-column: 1 / 3;
 }
@@ -103,10 +108,6 @@ a {
     color: var(--text-color); 
 }
 
-#terms-of-use {
-    /* text-align: end; */
-}
-
 .upvote {
     margin: var(--gap-medium) 0;
     align-self: self-start;
@@ -125,10 +126,10 @@ a {
     text-wrap: balance;
     text-wrap: pretty;
     margin-top: 0;
+}
 
-    br {
+:is(#full-description, #not-found) br {
-        margin-bottom: .5lh;
+    margin-bottom: .5lh;
-    }
 }
 
 .skeleton {
@@ -178,3 +179,22 @@ a {
         background-position-x: calc(1.4 * var(--min-card-size)), 0;
     }
 }
+
+#not-found:not(.hidden) {
+    min-height: calc(100vh - 2 * var(--pad-main));
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-large);
+    justify-content: space-evenly;
+    container: nothing-found / inline-size;
+
+    p, h1 {
+        text-align: center;
+        text-wrap: balance;
+        text-wrap: pretty;
+    }
+}
+
+#nothing-found-bg {
+    background-position-x: calc(50% + 3cqh);
+}

src/main/resources/static/details.html

@@ -19,7 +19,7 @@
         </aside>
     </template>
 
-    <main class="skeleton">
+    <main id="details" class="skeleton">
         <header data-id="dataset-id">
             <h1 id="title" data-type="api">Title</h1>
             <span>
@@ -41,7 +41,7 @@
             <a id="terms-of-use">Terms of Use</a>
         </section>
         
-        <section id="details">
+        <section>
             <p id="full-description">Full description<br>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
                 nihil saepe et numquam quo id voluptatum recusandae assumenda
@@ -59,5 +59,18 @@
             </p>
         </section>
     </main>
+
+    <main id="not-found" class="hidden">
+        <h1>This is not the page you're looking for.</h1>
+        <div id="nothing-found-bg"></div>
+        <p>
+            The dataset or API you were sent to is not in our database.
+            Either it has been deleted by its author or we didn't know of it
+            to begin with.
+            <br>
+            You can try browsing for other datasets and APIs on our
+            <a href="/">homepage</a>.
+        </p>
+    </main>
 </body>
 </html>

src/main/resources/static/details.js

@@ -31,7 +31,7 @@ if (currentLocation.searchParams.has("id")) {
         shortDescription.innerText = dataset.shortDescription;
         url.href = dataset.url;
         url.innerText = dataset.url;
-        mainElement.querySelector(".upvote").replaceWith(upvoteComponent);
+        mainPage.querySelector(".upvote").replaceWith(upvoteComponent);
 
         date.innerText = dataset.parseDate().toLocaleDateString(undefined, {
             day: "numeric",
@@ -46,6 +46,12 @@ if (currentLocation.searchParams.has("id")) {
 
         fullDescription.innerText = dataset.fullDescription;
 
-        mainElement.classList.remove("skeleton");
+        mainPage.classList.remove("skeleton");
+    } else {
+        mainPage.classList.add("hidden");
+        notFoundPage.classList.remove("hidden");
     }
+} else {
+    mainPage.classList.add("hidden");
+    notFoundPage.classList.remove("hidden");
 }

src/main/resources/static/index.html

@@ -8,6 +8,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="prefetch" href="https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap">
     <link rel="stylesheet" href="main.css">
+    <link rel="prefetch" href="details.html">
+    <link rel="prefetch" href="details.css">
     <script type="module" src="main.js" defer></script>
 </head>
 <body>