feat: add 404 not found page (#178)

* adds 404 pagenotfound

Signed-off-by: afzal442 <[email protected]>

* modifies the file to show nav and footer

Signed-off-by: afzal442 <[email protected]>

* minor changes

Signed-off-by: afzal442 <[email protected]>

* refactors the description

Signed-off-by: afzal442 <[email protected]>

* minor changes fixed

Signed-off-by: afzal442 <[email protected]>

* minor typo fixed

Signed-off-by: afzal442 <[email protected]>

* Apply suggestions from code review

Co-authored-by: Jeff Yang <[email protected]>

Author: afzal442

src/main.js

@@ -4,6 +4,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import App from './App.vue'
 import Home from './views/Home.vue'
 import Create from './views/Create.vue'
+import PageNotFound from './views/PageNotFound.vue'
 
 const routes = [
   {
@@ -15,6 +16,12 @@ const routes = [
     name: 'create',
     path: '/create',
     component: Create
+  },
+
+  {
+    name: 'NotFound',
+    path: '/:catchAll(.*)',
+    component: PageNotFound
   }
 ]
 

src/views/PageNotFound.vue

@@ -0,0 +1,63 @@
+<template>
+  <main>
+    <NavBar />
+    <div class="heading">
+      <h1>404 Page Not Found</h1>
+      <p>Oops! We couldn't find that page.</p>
+      <p>
+        Go back to the
+        <RouterLink to="/" class="link alt" :style="learnMore"
+          >homepage</RouterLink
+        >.
+      </p>
+    </div>
+    <Footer />
+  </main>
+</template>
+
+<script>
+import NavBar from '../components/NavBar.vue'
+import Footer from '../components/Footer.vue'
+import { onUnmounted } from 'vue'
+import { store } from '../store'
+
+export default {
+  components: {
+    NavBar,
+    Footer
+  },
+  setup() {
+    onUnmounted(() => {
+      // delete each property of config
+      // since `store.config` is being watched in store.js
+      // and Vue watch function does not tracked
+      // if we reassign `store.config` (i.e. store.config = {})
+      for (const config in store.config) {
+        delete store.config[config]
+      }
+      // since we delete each property,
+      // it is better to reassign the initial values
+      // which are defined in store.js
+      store.config.template = ''
+      store.config.include_test = false
+      store.config.output_dir = './logs'
+      store.config.log_every_iters = 2
+    })
+  }
+}
+</script>
+
+<style scoped>
+h1 {
+  color: var(--c-brand-red);
+}
+.heading {
+  max-width: 75vw;
+  margin: auto;
+  text-align: center;
+}
+.heading .alt {
+  background: var(--c-white);
+  color: var(--c-brand-red);
+}
+</style>