From 277a653de7be5609fb26c7bd56fc98d5bba81d51 Mon Sep 17 00:00:00 2001
From: alex <alexgrimes.se@gmail.com>
Date: Sat, 11 Nov 2023 16:19:21 -0500
Subject: [PATCH 1/4] created a 404 page and added catchall route

---
 src/router/index.ts        |  6 ++++
 src/views/NotFoundView.vue | 65 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 src/views/NotFoundView.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index d8be488..a6d85ca 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
 import MapView from "../views/MapView.vue";
+import NotFoundView from "../views/NotFoundView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -17,6 +18,11 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import("../views/AboutView.vue"),
     },
+    {
+      path: '/:pathMatch(.*)',
+      name: "404",
+      component: NotFoundView,
+    },
   ],
 });
 
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
new file mode 100644
index 0000000..61f9165
--- /dev/null
+++ b/src/views/NotFoundView.vue
@@ -0,0 +1,65 @@
+<template>
+    <div class="star star1"></div>
+    <div class="star star2"></div>
+    <div class="star star3"></div>
+    <div class="star star4"></div>
+    <div class="star star5"></div>
+
+    <div class="error grid justify-items-center h-full place-content-center">
+        <div class="text-white text-[10em]">404</div>
+        <div class="text-white text-[2em]">Page Not Found</div>
+    </div>
+</template>
+
+<style>
+html,
+body {
+    margin: 0px;
+    background: linear-gradient(90deg, rgba(47, 54, 64, 1) 23%, rgba(24, 27, 32, 1) 100%);
+}
+
+.star {
+    background: rgb(230, 230, 90);
+    position: absolute;
+    width: 5px;
+    height: 5px;
+    content: '';
+    border-radius: 100%;
+    transform: rotate(250deg);
+    opacity: 0.4;
+    animation-name: shimmer;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+
+.star1 {
+    top: 40%;
+    left: 75%;
+    animation-delay: 1s;
+}
+
+.star2 {
+    top: 60%;
+    left: 90%;
+    animation-delay: 3s;
+}
+
+.star3 {
+    top: 10%;
+    left: 70%;
+    animation-delay: 2s;
+}
+
+.star4 {
+    top: 90%;
+    left: 40%;
+}
+
+.star5 {
+    top: 20%;
+    left: 30%;
+    animation-delay: 0.5s;
+}
+</style>
\ No newline at end of file

From da73eeee85947ab655af1066cf0d39a5978d8602 Mon Sep 17 00:00:00 2001
From: alex <alexgrimes.se@gmail.com>
Date: Sat, 11 Nov 2023 16:49:01 -0500
Subject: [PATCH 2/4] fixed linter error

---
 src/router/index.ts        |  2 +-
 src/views/NotFoundView.vue | 81 ++++++++++++++++++++------------------
 2 files changed, 43 insertions(+), 40 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index a6d85ca..e87d4d6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -19,7 +19,7 @@ const router = createRouter({
       component: () => import("../views/AboutView.vue"),
     },
     {
-      path: '/:pathMatch(.*)',
+      path: "/:pathMatch(.*)",
       name: "404",
       component: NotFoundView,
     },
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index 61f9165..565c601 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -1,65 +1,68 @@
 <template>
-    <div class="star star1"></div>
-    <div class="star star2"></div>
-    <div class="star star3"></div>
-    <div class="star star4"></div>
-    <div class="star star5"></div>
+  <div class="star star1"></div>
+  <div class="star star2"></div>
+  <div class="star star3"></div>
+  <div class="star star4"></div>
+  <div class="star star5"></div>
 
-    <div class="error grid justify-items-center h-full place-content-center">
-        <div class="text-white text-[10em]">404</div>
-        <div class="text-white text-[2em]">Page Not Found</div>
-    </div>
+  <div class="error grid justify-items-center h-full place-content-center">
+    <div class="text-white text-[10em]">404</div>
+    <div class="text-white text-[2em]">Page Not Found</div>
+  </div>
 </template>
 
 <style>
 html,
 body {
-    margin: 0px;
-    background: linear-gradient(90deg, rgba(47, 54, 64, 1) 23%, rgba(24, 27, 32, 1) 100%);
+  margin: 0px;
+  background: linear-gradient(
+    90deg,
+    rgba(47, 54, 64, 1) 23%,
+    rgba(24, 27, 32, 1) 100%
+  );
 }
 
 .star {
-    background: rgb(230, 230, 90);
-    position: absolute;
-    width: 5px;
-    height: 5px;
-    content: '';
-    border-radius: 100%;
-    transform: rotate(250deg);
-    opacity: 0.4;
-    animation-name: shimmer;
-    animation-duration: 1.5s;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
+  background: rgb(230, 230, 90);
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  content: "";
+  border-radius: 100%;
+  transform: rotate(250deg);
+  opacity: 0.4;
+  animation-name: shimmer;
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
 }
 
-
 .star1 {
-    top: 40%;
-    left: 75%;
-    animation-delay: 1s;
+  top: 40%;
+  left: 75%;
+  animation-delay: 1s;
 }
 
 .star2 {
-    top: 60%;
-    left: 90%;
-    animation-delay: 3s;
+  top: 60%;
+  left: 90%;
+  animation-delay: 3s;
 }
 
 .star3 {
-    top: 10%;
-    left: 70%;
-    animation-delay: 2s;
+  top: 10%;
+  left: 70%;
+  animation-delay: 2s;
 }
 
 .star4 {
-    top: 90%;
-    left: 40%;
+  top: 90%;
+  left: 40%;
 }
 
 .star5 {
-    top: 20%;
-    left: 30%;
-    animation-delay: 0.5s;
+  top: 20%;
+  left: 30%;
+  animation-delay: 0.5s;
 }
-</style>
\ No newline at end of file
+</style>

From 45c2ddd1ca1879f6ef5bd8f3fed39ca5b46bc3c9 Mon Sep 17 00:00:00 2001
From: alex <alexgrimes.se@gmail.com>
Date: Thu, 23 Nov 2023 13:39:30 -0500
Subject: [PATCH 3/4] found a intermittent issue with .click

---
 cypress/e2e/about.cy.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/about.cy.ts b/cypress/e2e/about.cy.ts
index e766932..e5947af 100644
--- a/cypress/e2e/about.cy.ts
+++ b/cypress/e2e/about.cy.ts
@@ -2,7 +2,8 @@ describe("About page", () => {
   it("displays information after navigating to tab", () => {
     cy.visit("/");
 
-    cy.contains("About").click();
+    cy.contains("About").click({ force: true });
+
 
     cy.contains("Upstate / Greenville SC Open Data Map Layers Demo");
   });

From 266b8c1b90decc5a7c972bab586a01d74f541542 Mon Sep 17 00:00:00 2001
From: alex <alexgrimes.se@gmail.com>
Date: Thu, 23 Nov 2023 13:42:27 -0500
Subject: [PATCH 4/4] prettier correction

---
 cypress/e2e/about.cy.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/cypress/e2e/about.cy.ts b/cypress/e2e/about.cy.ts
index e5947af..64f656e 100644
--- a/cypress/e2e/about.cy.ts
+++ b/cypress/e2e/about.cy.ts
@@ -4,7 +4,6 @@ describe("About page", () => {
 
     cy.contains("About").click({ force: true });
 
-
     cy.contains("Upstate / Greenville SC Open Data Map Layers Demo");
   });