✨feature: Make index page a grid of domains and tests in cards

views/domain-cards.ejs

@@ -0,0 +1,45 @@
+<%
+// Helper function to format date
+function formatDate(dateString) {
+  let date = new Date(dateString);
+  return date.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+}
+
+// Group data by unique domain_name
+let groupedDomains = {};
+data.forEach(item => {
+  let domain = item.domain_name?.trim();
+  if (!domain) return;
+  if (!groupedDomains[domain]) {
+    groupedDomains[domain] = [];
+  }
+  groupedDomains[domain].push(item);
+});
+%>
+
+<div class="card-container grid gap-6 grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
+  <% Object.keys(groupedDomains).forEach(domain => { %>
+    <% // Sort entries by created_at descending and limit to 5
+      let sortedEntries=groupedDomains[domain]
+      .sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
+      .slice(0, 5);
+    %>
+    <div class="card w-fit bg-base-100 card-lg shadow-sm">
+      <div class="card-body">
+        <h2 class="card-title"><%= domain %></h2>
+        <% sortedEntries.forEach(entry => { %>
+          <div class="flex">
+            <p class="w-fit px-4 font-normal"><%= entry.id %></p>
+            <p class="flex-grow-1 font-normal"><%= formatDate(entry.created_at) %></p>
+          </div>
+        <% }) %>
+      </div>
+    </div>
+  <% }) %>
+</div>

views/index.ejs

@@ -3,19 +3,13 @@
 <article class="container mx-auto py-4 min-h-[70dvh]">
   <h2>Welcome to <%= title %></h2>
 
-  <%- include('add-form'); -%>
+  <div%- include('add-form'); -%>
 
-  <h2 class="mt-8">Your Tests</h2>
+  <h2 class="text-25px font-bold mt-8">Your Tests</h2>
 
-  <ul class="list bg-base-100 rounded-box shadow-md mt-8">
-    <% for (let i=0; i < sites.length; i++) { %>
-      <li class="list-row list-none items-center gap-8">
-        <h3 class="text-slate-300 m-0 p-0"><a href="/test/<%= i %>" class="text-slate-300 link">Test <%= i+1 %></a></h3>
-        <span class="site-name list-col-grow text-18px"><%= sites[i].domain_name %></span>
-        <span class="badge badge-info">In Progress</span>
-      </li>
-    <% } %>
-  </ul>
+  <div class="mt-8">
+    <%- include('domain-cards', { data: sites }); -%>
+  </div>
 </article>
 
 <%- include('footer'); -%>