Show last updated and upload date of boards

package.json

@@ -14,12 +14,15 @@
   "dependencies": {
     "@astrojs/check": "^0.7.0",
     "@astrojs/solid-js": "^4.4.0",
+    "@popperjs/core": "^2.11.8",
     "@rollup/plugin-yaml": "^4.1.2",
+    "@types/bootstrap": "^5.2.10",
     "@types/globalthis": "^1.0.4",
     "@types/node": "^20.14.8",
     "@types/slug": "^5.0.8",
     "@types/tabulator-tables": "^6.2.2",
     "astro": "^4.11.0",
+    "bootstrap": "^5.3.3",
     "isomorphic-dompurify": "^2.12.0",
     "jszip": "^3.10.1",
     "marked": "^13.0.0",
@@ -30,6 +33,7 @@
   },
   "devDependencies": {
     "json-schema-to-typescript": "^14.0.5",
-    "rimraf": "^5.0.7"
+    "rimraf": "^5.0.7",
+    "sass": "^1.77.6"
   }
 }

src/components/board/boardImage.astro

@@ -1,16 +1,17 @@
 ---
+
 import type { MapDescriptorExtended } from '~/lib/getboards';
+import { daysAgo, humanReadableDate, isoDate } from '~/lib/utils';
 interface Props {
   board: MapDescriptorExtended;
   link: boolean;
   imageHeight: string;
 }
 const { board, link, imageHeight } = Astro.props;
 ---
-<style is:global define:vars={{imageHeight}}>
+<style is:global>
 .mapCard-image-board {
   width: 100%;
-  height: var(--imageHeight);
   object-fit: scale-down;
   position: absolute;
   filter: drop-shadow(0 0 6px #000b);
@@ -19,15 +20,13 @@ const { board, link, imageHeight } = Astro.props;
 }
 .mapCard-image-background {
   width: 100%;
-  height: var(--imageHeight);
   object-fit: cover;
   position: relative;
   filter: blur(1px) grayscale(50%) contrast(50%) opacity(65%);
   z-index: 1;
 }
 .btn-state-tiny {
   position: absolute;
-  padding: 12px 0px;
   line-height: 0;
   border-width: 2px;
   width: 2rem;
@@ -39,6 +38,7 @@ const { board, link, imageHeight } = Astro.props;
 .btn-state-tiny.btn-primary {
   background-color: rgba(var(--bs-secondary-bg-rgb), 0.5);
   border-color: var(--bs-secondary-border-subtle);
+  padding: 0.75rem 0.375rem;
 }
 .btn-state-tiny.btn-primary
 :checked+.btn-state-tiny {
@@ -154,19 +154,32 @@ const { board, link, imageHeight } = Astro.props;
 { link ? (
   <a class="map-state" href={`/boards/${board.slug}`}>
   {board.frbFiles.map((_frbFile, index) => (
-    <img class={`card-img-top mapCard-image-board state-${index}`} src={board.imageUrls[index]} loading="lazy" />
+    <img class={`card-img-top mapCard-image-board state-${index}`} style={`height: ${imageHeight}`} src={board.imageUrls[index]} loading="lazy" />
   ))}
   </a>
 ) : (
   <span class="map-state">
   {board.frbFiles.map((_frbFile, index) => (
-    <img class={`card-img-top mapCard-image-board state-${index}`} src={board.imageUrls[index]} loading="lazy" />
+    <img class={`card-img-top mapCard-image-board state-${index}`} style={`height: ${imageHeight}`} src={board.imageUrls[index]} loading="lazy" />
   ))}
   </span>
 )}
-<img class="card-img-top mapCard-image-background" src={`/images/backgrounds/${board.background}.webp`} loading="lazy" />
+<img class="card-img-top mapCard-image-background" style={`height: ${imageHeight}`} src={`/images/backgrounds/${board.background}.webp`} loading="lazy" />
+{ daysAgo(new Date(board.uploadDate)) < 30 && (
+  <div class="top-right-absolute">
+    <div class="badge bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title={`Uploaded: ${(isoDate(new Date(board.uploadDate)))}`}>New</div>
+  </div>
+)}
+<div class="bottom-left-absolute">
+  <div class="badge bg-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title={(isoDate(new Date(board.lastUpdated)))}>Updated: {humanReadableDate(new Date(board.lastUpdated))}</div>
+</div>
 <div class="bottom-right-absolute">
   {board.authors?.map((author) => (
     <div class="badge bg-primary">{author.url ? (<a class="text-reset" href={ author.url }>{ author.name }</a>) : author.name}</div>
   ))}
-</div>
+</div>
+<script>
+  import { Tooltip } from "bootstrap";
+  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new Tooltip(tooltipTriggerEl))
+</script>

src/components/navbar.astro

@@ -1,8 +1,10 @@
 ---
 import { getPathnameWithoutExtension } from "~/lib/utils";
-
 const currentPagePath = getPathnameWithoutExtension(Astro.url);
 ---
+<script>
+  import { Dropdown } from "bootstrap";
+</script>
 
 <nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">

src/layouts/bootstrap.scss

@@ -0,0 +1 @@
+@import "bootstrap/scss/bootstrap";

src/layouts/layout.astro

@@ -4,6 +4,7 @@ interface Props {
 }
 const { title } = Astro.props;
 import './layout.css';
+import './bootstrap.scss'
 import Navbar from '~/components/navbar.astro';
 ---
 
@@ -14,12 +15,6 @@ import Navbar from '~/components/navbar.astro';
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="black" />
     <meta name="color-scheme" content="light dark" />
-    <link
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
-      crossorigin="anonymous"
-    />
     <meta name="generator" content={Astro.generator} />
     <link rel="icon" href="/favicon.ico" />
     <title>Fortune Street Modding - {title}</title>
@@ -29,6 +24,5 @@ import Navbar from '~/components/navbar.astro';
     <main role="main">
       <slot />
     </main>
-    <script is:inline src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   </body>
 </html>