✨feature: Add TODO-Issues sync action

README.md

@@ -13,4 +13,4 @@ $env:DEBUG='playwright-a11y-dashboard:*'; npm start
 ## Notes, issues, and tasks
 
 - [Initial Project Outline](Outline.md)
-- [Project Task Board](https://git.keithsolomon.net/keith/Playwright-A11y-Dashboard/projects/1)
+- [Project Task Board](https://git.keithsolomon.net/keith/Playwright-A11y-Dashboard/projects/2)

helpers/utils.js

@@ -1,17 +0,0 @@
-/**
- * Utility functions for the application.
- */
-
-const isValidDomain = (domain) => {
-  // Regular expression to validate a domain name
-  // const domainRegex = /^(?!:\/\/)([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/;
-
-  // Regular expression to validate a domain name.  Requires http or https prefix.
-  // Allows for optional path after the domain.
-  const domainRegex = /^https?:\/\/[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(\/[^\s]*)?\/?$/;
-  return domainRegex.test(domain);
-}
-
-module.exports = {
-  isValidDomain
-};

models/SiteModel.js

@@ -3,7 +3,6 @@
  */
 
 const { supabase } = require('../auth');
-const { isValidDomain } = require('../helpers/utils');
 
 class SiteModel {
 
@@ -11,30 +10,17 @@ class SiteModel {
 
     /**
      * Inserts a new site into the database.
-     *
+     * 
+     * @param {string} name - The name of the site.
      * @param {string} domainName - The domain name of the site.
-     *
+     * 
      * @returns {Promise<Object>} - The result of the insert operation.
      */
-    async insert(domainName) {
+    async insert(name, domainName) {
-        // validate inputs
+        const { error } = await supabase.from(siteModel.tableName).insert({
-        if (!domainName) {
+            name: name,
-            throw new Error('Domain name is required to insert a site.');
-        }
-
-        // validate domain name format
-        if (!isValidDomain(domainName)) {
-            throw new Error('Invalid domain name format.');
-        }
-
-        // check if the domain name already exists
-        if (await this.getByDomainName(domainName).then(data => data.length !== 0)) {
-            throw new Error('Domain name already exists.');
-        }
-
-        const { data, error } = await supabase.from(SiteModel.tableName).insert({
             domain_name: domainName,
-        }).select();
+        });
 
         if (error) {
             console.error('Error inserting site:', error);
@@ -46,7 +32,7 @@ class SiteModel {
 
     /**
      * Retrieves all sites from the database.
-     *
+     * 
      * @returns {Promise<Array>} - An array of site objects.
      */
     async getAll() {
@@ -57,16 +43,14 @@ class SiteModel {
             throw error;
         }
 
-        data.reverse(); // Reverse the order to show the most recent sites first
-
         return data;
     }
 
     /**
      * Retrieves a site by its ID.
-     *
+     * 
      * @param {number} id - The ID of the site.
-     *
+     * 
      * @returns {Promise<Object>} - The site object.
      */
     async getById(id) {
@@ -80,24 +64,6 @@ class SiteModel {
         return data;
     }
 
-    /**
-     * Retrieves a site by its domain name.
-     *
-     * @param {string} domainName - The domain name of the site.
-     *
-     * @returns {Promise<Object>} - The site object.
-     */
-    async getByDomainName(domainName) {
-        const { data, error } = await supabase.from(SiteModel.tableName).select('*').eq('domain_name', domainName);
-
-        if (error) {
-            console.error('Error fetching site by domain name:', error);
-            throw error;
-        }
-
-        return data;
-    }
-
 }
 
-module.exports = SiteModel;
+module.exports = SiteModel;

package-lock.json

@@ -24,7 +24,6 @@
         "@tailwindcss/cli": "^4.1.7",
         "@tailwindcss/typography": "^0.5.16",
         "concurrently": "^8.2.0",
-        "daisyui": "^5.0.37",
         "tailwindcss": "^4.1.7"
       }
     },
@@ -1201,8 +1200,6 @@
     },
     "node_modules/cssstyle": {
       "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.3.1.tgz",
-      "integrity": "sha512-ZgW+Jgdd7i52AaLYCriF8Mxqft0gD/R9i9wi6RWBhs1pqdPEzPjym7rvRKi397WmQFf3SlyUsszhw+VVCbx79Q==",
       "license": "MIT",
       "dependencies": {
         "@asamuzakjp/css-color": "^3.1.2",
@@ -1212,20 +1209,8 @@
         "node": ">=18"
       }
     },
-    "node_modules/daisyui": {
-      "version": "5.0.37",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.37.tgz",
-      "integrity": "sha512-PLc+MhWAqTwolygEGPDi+ac+OsFqIt9nZylTIiyVlEx8loYL7Pt7hNWb8cp5pQQ9dhjYnda1ERiuM6OsJmvPGw==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/saadeghi/daisyui?sponsor=1"
-      }
-    },
     "node_modules/data-urls": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
-      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
       "license": "MIT",
       "dependencies": {
         "whatwg-mimetype": "^4.0.0",
@@ -1237,8 +1222,6 @@
     },
     "node_modules/data-urls/node_modules/tr46": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
-      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
       "license": "MIT",
       "dependencies": {
         "punycode": "^2.3.1"
@@ -1249,8 +1232,6 @@
     },
     "node_modules/data-urls/node_modules/whatwg-url": {
       "version": "14.2.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
-      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
       "license": "MIT",
       "dependencies": {
         "tr46": "^5.1.0",
@@ -1265,7 +1246,6 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
       "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.21.0"
       },

package.json

@@ -18,14 +18,13 @@
     "ejs": "^3.1.10",
     "express": "~4.16.1",
     "http-errors": "~1.6.3",
-    "jsdom": "^26.1.0",
+    "morgan": "~1.9.1",
-    "morgan": "~1.9.1"
+    "jsdom": "^26.1.0"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.7",
     "@tailwindcss/typography": "^0.5.16",
-    "concurrently": "^8.2.0",
+    "tailwindcss": "^4.1.7",
-    "daisyui": "^5.0.37",
+    "concurrently": "^8.2.0"
-    "tailwindcss": "^4.1.7"
   }
 }

public/favicon.ico

@@ -1 +0,0 @@
-

routes/index.js

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

routes/sites.js

@@ -5,10 +5,10 @@ const siteModel = new SiteModel();
 
 /**
  * GET sites listing.
- *
+ * 
  * Returns a list of all sites in JSON format.
  */
-router.get('/', async function (req, res, next) {
+router.get('/', async function(req, res, next) {
     const sites = await siteModel.getAll();
 
     res.json(sites);
@@ -16,19 +16,13 @@ router.get('/', async function (req, res, next) {
 
 /**
  * GET site by ID.
- *
+ * 
  * Returns a specific site by its ID in JSON format.
  */
-router.get('/:id', async function (req, res, next) {
+router.get('/:id', async function(req, res, next) {
     const siteId = req.params.id;
-    let site = null;
 
-    try {
+    const site = await siteModel.getById(siteId);
-        site = await siteModel.getById(siteId);
-    } catch (error) {
-        console.error('Error fetching site by ID:', error);
-        return res.status(400).send('Error fetching site: ' + error.message);
-    }
 
     if (!site) {
         return res.status(404).send('Site not found');
@@ -37,60 +31,30 @@ router.get('/:id', async function (req, res, next) {
     }
 });
 
-/**
- * GET site by domain name.
- *
- * Returns a specific site by its domain name in JSON format.
- */
-router.get('/domain/:domain', async function (req, res, next) {
-    const domainName = req.params.domain;
-    let sites = null;
-
-    try {
-        sites = await siteModel.getByDomainName(domainName);
-    } catch (error) {
-        console.error('Error fetching site by domain name:', error);
-        return res.status(400).send('Error fetching site: ' + error.message);
-    }
-
-    if (!sites || sites.length === 0) {
-        return res.status(404).send('Site not found');
-    } else {
-        res.render('sites', { title: 'Playwright Testing Dashboard', sites: sites });
-    }
-});
-
 /**
  * POST create a new site.
- *
+ * 
  * Creates a new site with the provided domain name.
- *
+ * 
+ * // TODO: Implement validation for domain name format
+ * // TODO: Implement error handling for duplicate domains
  * // TODO: Ability to add additional site properties (e.g., name, description)
  */
-router.post('/add', async function (req, res, next) {
+router.post('/add/:domain', function(req, res, next) {
-    const domain = req.body.domain;
+    const domain = req.params.domain;
-    let newSite = null;
+    
-
+    const newSite = siteModel.insert(domain);
-    // insert method passes a lot of validation errors to the caller
-    try {
-        newSite = await siteModel.insert(domain);
-    } catch (error) {
-        console.error('Error creating site:', error);
-        return res.status(400).send('Error creating site: ' + error.message);
-    }
 
     if (!newSite) {
-        res.status(400).send('Error creating site');
+        return res.status(400).send('Error creating site');
     } else {
-        // res.status(201).json(newSite);
+        res.status(201).json(newSite);
-        const sites = await siteModel.getAll();
-        res.render('index', { title: 'Playwright Testing Dashboard', sites: sites, msg: 'Site created successfully!' });
     }
 });
 
 /**
  * PUT update an existing site.
- *
+ * 
  * Updates an existing site with the provided ID and new data.
  */
 
@@ -103,4 +67,4 @@ router.post('/add', async function (req, res, next) {
 // TODO: Implement delete functionality
 
 
-module.exports = router;
+module.exports = router;

styles/base.css

@@ -1,9 +1,5 @@
 @import 'tailwindcss';
-@source "./views/*.ejs";
-@source "./styles/*.css";
-
 @import './colors.css';
 @import './typography.css';
 
-@plugin "daisyui";
 @plugin "@tailwindcss/typography";

styles/typography.css

@@ -108,15 +108,12 @@ p {
   margin-bottom: 1rem;
 }
 
+li ul, li ol { margin: 0 1rem; }
 
 ul { list-style-type: disc; }
 
-#main-nav ul { list-style-type: none; }
-
 ol { list-style-type: decimal; }
 
-li ul, li ol { margin: 0 1rem; }
-
 ol ol { list-style: lower-alpha; }
 
 ol ol ol { list-style: lower-roman; }

views/add-form.ejs

@@ -1,12 +0,0 @@
-<form action="/sites/add" method="POST" class="w-full">
-  <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" name="domain" id="domain" placeholder="https://example.com/" />
-        <p class="label pt-2">Single URL or link to sitemap, including "http" or "https"</p>
-      </div>
-      <button type="submit" class="btn btn-info">Test</button>
-    </div>
-  </fieldset>
-</form>

views/domain-cards.ejs

@@ -1,49 +0,0 @@
-<%
-// Helper function to format date
-function formatDate(dateString) {
-  let date = new Date(dateString);
-  return date.toLocaleString('en-CA', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: 'numeric',
-    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-full bg-base-100 card-lg shadow-sm wrap-anywhere">
-      <div class="card-body">
-        <h2 class="card-title"><%= domain %></h2>
-        <% sortedEntries.forEach(entry => { %>
-          <div class="flex font-normal">
-            <p class="w-fit"><%= entry.id %></p>
-            <p class="flex-grow-1"><%= formatDate(entry.created_at) %></p>
-          </div>
-        <% }) %>
-        <div class="card-actions justify-end mt-auto">
-          <a href="/sites/domain/<%= encodeURIComponent(domain) %>" class="btn btn-info text-info-content! hover:text-info-content!">View All Tests</a>
-        </div>
-      </div>
-    </div>
-  <% }) %>
-</div>

views/error.ejs

@@ -1,59 +1,3 @@
-<!DOCTYPE html>
+<h1><%= message %></h1>
-<html>
+<h2><%= error.status %></h2>
-
+<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/header.ejs

@@ -19,12 +19,11 @@
       <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=""><a class="no-underline!" href="/"><%= title %></a></h1>
+          <h1 class=""><%= title %></h1>
         </div>
-        <nav id="main-nav" class="flex items-center">
+        <nav>
           <ul class="flex space-x-4">
             <li><a href="/" class="text-white hover:text-gray-400">Home</a></li>
-            <!-- TODO: Make these routes/pages -->
             <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>

views/index.ejs

@@ -1,20 +1,14 @@
 <%- include('header'); -%>
 
 <article class="container mx-auto py-4 min-h-[70dvh]">
-  <h2>Welcome to <%= title %></h2>
+  <h2>Welcome to the <%= title %> EJS Template</h2>
+  <p>This is a simple example of using EJS for templating.</p>
 
-  <%- include('add-form'); -%>
+  <ul>
-  <% if (msg) { %>
+    <% for (let i = 0; i < sites.length; i++) { %>
-    <div class="alert alert-success mt-4">
+      <li><%= sites[i].name %></li>
-      <div class="text-xl"><%= msg %></div>
+    <% } %>
-    </div>
+  </ul>
-  <% } %>
-
-  <h2 class="text-25px font-bold mt-8">Your Tests</h2>
-
-  <div class="mt-8">
-    <%- include('domain-cards', { data: sites }); -%>
-  </div>
 </article>
 
 <%- include('footer'); -%>

views/sites.ejs

@@ -1,15 +0,0 @@
-<%- include('header'); -%>
-
-<article class="container mx-auto py-4 min-h-[70dvh]">
-  <h2>Welcome to <%= title %></h2>
-
-  <%- include('add-form'); -%>
-
-  <h2 class="text-25px font-bold mt-8">Tests for <%= sites[0].domain_name %></h2>
-
-  <div class="mt-8">
-    <%- include('test-list', { sites: sites }); -%>
-  </div>
-</article>
-
-<%- include('footer'); -%>

views/test-list.ejs

@@ -1,23 +0,0 @@
-<%
-// Helper function to format date
-function formatDate(dateString) {
-  let date = new Date(dateString);
-  return date.toLocaleString('en-CA', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit'
-  });
-}
-%>
-
-<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 %> - <%= formatDate(sites[i].created_at) %></span>
-      <span class="badge badge-info">In Progress</span>
-    </li>
-  <% } %>
-</ul>