✨feature: Wire up sites API listing, move add form to separate file

package.json

@@ -18,8 +18,8 @@
     "ejs": "^3.1.10",
     "express": "~4.16.1",
     "http-errors": "~1.6.3",
-    "morgan": "~1.9.1",
+    "jsdom": "^26.1.0",
-    "jsdom": "^26.1.0"
+    "morgan": "~1.9.1"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.7",

public/stylesheets/style.css

@@ -7,7 +7,6 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-blue-400: oklch(70.7% 0.165 254.624);
-    --color-slate-200: oklch(92.9% 0.013 255.508);
     --color-slate-300: oklch(86.9% 0.022 252.894);
     --color-slate-900: oklch(20.8% 0.042 265.755);
     --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -28,17 +27,12 @@
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --color-primary: oklch(0.57 0.203362 257.1706);
-    --color-primary-300: color-mix(in srgb, oklch(0.57 0.203362 257.1706) 30%, white);
-    @supports (color: color-mix(in lab, red, red)) {
-      --color-primary-300: color-mix(in oklch, var(--color-primary) 30%, white);
-    }
     --color-secondary: oklch(0.56 0.0176 257.23);
     --color-bodylinks: oklch(0.48 0.0789 211.58);
     --color-success: oklch(64.01% 0.1751 146.7);
     --color-info: oklch(0.55 0.0922 211.57);
     --color-warning: oklch(84.42% 0.1722 84.93);
     --text-18px: clamp(0.875rem, 0.9375vw, 1.9rem);
-    --text-20px: clamp(1rem,     1.0417vw, 2rem);
     --h1: calc(var(--text-base) * 2.25);
     --h2: calc(var(--text-base) * 1.75);
     --h3: calc(var(--text-base) * 1.5);
@@ -1253,6 +1247,9 @@
       }
     }
   }
+  .static {
+    position: static;
+  }
   .textarea {
     border: var(--border) solid #0000;
     min-height: calc(0.25rem * 20);
@@ -1396,6 +1393,11 @@
       }
     }
   }
+  .drawer-content {
+    grid-column-start: 2;
+    grid-row-start: 1;
+    min-width: calc(0.25rem * 0);
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -1920,9 +1922,6 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
-  .mr-4 {
-    margin-right: calc(var(--spacing) * 4);
-  }
   .fieldset-legend {
     margin-bottom: calc(0.25rem * -1);
     display: flex;
@@ -2101,12 +2100,6 @@
   .flex {
     display: flex;
   }
-  .inline-block {
-    display: inline-block;
-  }
-  .list-item {
-    display: list-item;
-  }
   .table {
     display: table;
   }
@@ -2188,16 +2181,41 @@
       margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .rounded {
+    border-radius: 0.25rem;
+  }
   .rounded-box {
     border-radius: var(--radius-box);
   }
   .rounded-box {
     border-radius: var(--radius-box);
   }
+  .rounded-r {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+  }
+  .rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-r-0 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0px;
+  }
+  .border-l-0 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 0px;
+  }
+  .border-base-200 {
+    border-color: var(--color-base-200);
+  }
+  .border-base-300 {
+    border-color: var(--color-base-300);
+  }
   .bg-base-100 {
     background-color: var(--color-base-100);
   }
@@ -2225,9 +2243,6 @@
   .text-18px {
     font-size: var(--text-18px);
   }
-  .text-20px {
-    font-size: var(--text-20px);
-  }
   .text-wrap {
     text-wrap: wrap;
   }
@@ -2240,9 +2255,6 @@
   .text-gray-800 {
     color: var(--color-gray-800);
   }
-  .text-slate-200 {
-    color: var(--color-slate-200);
-  }
   .text-slate-300 {
     color: var(--color-slate-300);
   }
@@ -2272,6 +2284,10 @@
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .badge-error {
     --badge-color: var(--color-error);
     --badge-fg: var(--color-error-content);

routes/index.js

@@ -1,5 +1,5 @@
-var express = require('express');
+const express = require('express');
-var router = express.Router();
+const router = express.Router();
 const SiteModel = require('../models/SiteModel');
 const sitesModel = new SiteModel();
 
@@ -7,7 +7,7 @@ const sitesModel = new SiteModel();
 router.get('/', async function(req, res, next) {
   const sites = await sitesModel.getAll();
   console.log('Sites:', sites);
-  res.render('index', { title: 'Express', sites: sites });
+  res.render('index', { title: 'Playwright Testing Dashboard', sites: sites });
 });
 
 module.exports = router;

views/add-form.ejs

@@ -0,0 +1,10 @@
+<fieldset class="fieldset bg-base-100 rounded-box px-8 py-4 shadow-md">
+  <legend class="fieldset-legend h3">Start a new test</legend>
+  <div class="flex gap-0">
+    <div class="w-fit m-0 p-0">
+      <input type="text" class="input w-full border-r-0 rounded-r-none" placeholder="Site/URL to test" />
+      <p class="label">Add either single URL or link to sitemap</p>
+    </div>
+    <button type="submit" class="btn btn-info">Test</button>
+  </div>
+</fieldset>

views/error.ejs

@@ -1,3 +1,59 @@
-<h1><%= message %></h1>
+<!DOCTYPE html>
-<h2><%= error.status %></h2>
+<html>
-<pre><%= error.stack %></pre>
+
+<head>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap">
+
+  <title>
+    Playwright Dashboard - ERROR
+  </title>
+
+  <link rel='stylesheet' href='/stylesheets/style.css' />
+</head>
+
+<body>
+  <main class="">
+    <header class="bg-gray-200 w-full">
+      <div class="container mx-auto flex justify-between items-center text-gray-800 py-4">
+        <div class="flex items-center">
+          <!-- <img src="/images/logo.png" alt="Logo" class="h-8 mr-2"> -->
+          <h1 class="">
+            Playwright Dashboard - ERROR
+          </h1>
+        </div>
+        <nav>
+          <ul class="flex space-x-4">
+            <li><a href="/" class="text-white hover:text-gray-400">Home</a></li>
+            <li><a href="/about" class="text-white hover:text-gray-400">About</a></li>
+            <li><a href="/contact" class="text-white hover:text-gray-400">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <article class="container mx-auto py-4 min-h-[70dvh]">
+      <h1><%= message %></h1>
+      <h2><%= error.status %></h2>
+      <pre><%= error.stack %></pre>
+    </article>
+
+    <footer class="bg-gray-800 text-white p-4 mt-8">
+      <div class="container mx-auto text-center">
+        <div class="flex justify-center gap-8 items-center mb-4">
+          <p>&copy; <%= new Date().getFullYear() %>
+              Playwright Dashboard. All rights reserved.</p>
+          <p>Powered by <a href="https://example.com" class="text-bodylinks">Your Company</a></p>
+        </div>
+
+        <p>
+          <a href="/privacy" class="text-blue-400">Privacy Policy</a> |
+          <a href="/terms" class="text-blue-400">Terms of Service</a>
+        </p>
+      </div>
+    </footer>
+  </main>
+</body>
+</html>
+

views/index.ejs

@@ -3,38 +3,18 @@
 <article class="container mx-auto py-4 min-h-[70dvh]">
   <h2>Welcome to <%= title %></h2>
 
-  <fieldset class="fieldset bg-base-100 rounded-box px-8 py-4 shadow-md">
+  <%- include('add-form'); -%>
-    <legend class="fieldset-legend h3">Start a new test</legend>
+
-    <div class="flex gap-0">
+  <h2 class="mt-8">Your Tests</h2>
-      <div class="w-fit m-0 p-0">
-        <input type="text" class="input" placeholder="Type here" />
-        <p class="label">Add either single URL or link to sitemap</p>
-      </div>
-      <button type="submit" class="btn btn-info">Test</button>
-    </div>
-  </fieldset>
 
   <ul class="list bg-base-100 rounded-box shadow-md mt-8">
-    <li class="list-row list-none items-center gap-8">
+    <% for (let i=0; i < sites.length; i++) { %>
-      <h3 class="text-slate-300 m-0 p-0"><a href="/test/1" class="text-slate-300 link">Test 1</a></h3>
+      <li class="list-row list-none items-center gap-8">
-      <span class="site-name list-col-grow text-18px">example.com</span>
+        <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="badge badge-info">In Progress</span>
+        <span class="site-name list-col-grow text-18px"><%= sites[i].domain_name %></span>
-    </li>
+        <span class="badge badge-info">In Progress</span>
-    <li class="list-row list-none items-center gap-8">
+      </li>
-      <h3 class="text-slate-300 m-0 p-0"><a href="/test/2" class="text-slate-300 link">Test 2</a></h3>
+    <% } %>
-      <span class="site-name list-col-grow text-18px">example.com</span>
-      <span class="badge badge-success">Completed</span>
-    </li>
-    <li class="list-row list-none items-center gap-8">
-      <h3 class="text-slate-300 m-0 p-0"><a href="/test/3" class="text-slate-300 link">Test 3</a></h3>
-      <span class="site-name list-col-grow text-18px">example.com</span>
-      <span class="badge badge-error">Failed</span>
-    </li>
-    <li class="list-row list-none items-center gap-8">
-      <h3 class="text-slate-300 m-0 p-0"><a href="/test/4" class="text-slate-300 link">Test 4</a></h3>
-      <span class="site-name list-col-grow text-18px">example.com</span>
-      <span class="badge badge-warning">Pending</span>
-    </li>
   </ul>
 </article>