fix: add 404 / Netlify redirects page / add catch-all route for 404

.nvmrc

@@ -0,0 +1 @@
+v10.14.2

CHANGELOG.md

@@ -25,6 +25,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix: add watcher for wordcount [`3d5ec82`](https://github.com/ICJIA/icjia-markdown-next/commit/3d5ec82088b6511806a928586c2455ab481b13c9)
 - chore: update version for release [`2887fed`](https://github.com/ICJIA/icjia-markdown-next/commit/2887fedf3d7e7419109ce91a08a6b74bf51badfe)
 - feature: add wordcount / update displayStatus to show clipboard copy [`eb7f7d7`](https://github.com/ICJIA/icjia-markdown-next/commit/eb7f7d733d00adc814f3cff0a14a36cea6392f2a)
+- chore: add changelog [`9c616c8`](https://github.com/ICJIA/icjia-markdown-next/commit/9c616c8ae846c4c565db6557ce4b96a3a34517b1)
 - fix: remove ordered list on toolbar [`edae5da`](https://github.com/ICJIA/icjia-markdown-next/commit/edae5dab2a0e2ff73e90fce8a457f5103e77c309)
 - fix: fix incorrect wordcount for blank textarea [`2828cf9`](https://github.com/ICJIA/icjia-markdown-next/commit/2828cf970ba0db26af37f9cbdc8998e933af22c9)
+- fix: add link to README [`f7fdb50`](https://github.com/ICJIA/icjia-markdown-next/commit/f7fdb502f6dc6a09183f2af73e1600f3bdcdf9c4)
 - fix: remove space in markdown bold entity [`ea4677e`](https://github.com/ICJIA/icjia-markdown-next/commit/ea4677e86a128e56a3dc2d932197e6c13f99745b)

public/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

src/components/NavPrimary.vue

@@ -8,11 +8,11 @@
       <v-tooltip bottom open-delay="400">
         <v-btn
           slot="activator"
-          color="grey darken-1"
+          color="white"
           style="font-size: 10px"
-          dark
+          flat
           small
-          href="https://github.com/ICJIA/icjia-calendar/blob/master/CHANGELOG.md"
+          href="https://github.com/ICJIA/icjia-markdown-next/blob/master/CHANGELOG.md"
           target="_blank"
         >
           <v-icon size="10px">fab fa-github</v-icon>

src/router.js

@@ -12,13 +12,24 @@ export default new Router({
       path: "/",
       name: "home",
       component: Home
-    }
+    },
     // {
     //   path: "/sandbox",
     //   name: "sandbox",
 
     //   component: () =>
     //     import(/* webpackChunkName: "about" */ "./views/Sandbox.vue")
-    // }
+    // },
+    {
+      path: "/404",
+      name: "error",
+      component: () =>
+        import(/* webpackChunkName: "error" */ "./views/404.vue"),
+      meta: {}
+    },
+    {
+      path: "*",
+      redirect: { name: "error" }
+    }
   ]
 });

src/views/404.vue

@@ -0,0 +1,112 @@
+<template>
+  <main>
+    <section>
+      <span>404</span>
+      <p>The requested path could not be found</p>
+    </section>
+  </main>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+}
+main,
+aside,
+section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+main {
+  height: 100%;
+}
+aside {
+  background: #000;
+  flex-shrink: 1;
+  padding: 30px 20px;
+}
+aside p {
+  margin: 0;
+  color: #999999;
+  font-size: 14px;
+  line-height: 24px;
+}
+aside a {
+  color: #fff;
+  text-decoration: none;
+}
+section span {
+  font-size: 24px;
+  font-weight: 500;
+  display: block;
+  border-bottom: 1px solid #eaeaea;
+  text-align: center;
+  padding-bottom: 20px;
+  width: 100px;
+}
+section p {
+  font-size: 14px;
+  font-weight: 400;
+}
+section span + p {
+  margin: 20px 0 0 0;
+}
+.route {
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.route a {
+  text-decoration: none;
+}
+@media (min-width: 768px) {
+  section {
+    height: 40px;
+    flex-direction: row;
+  }
+  section span,
+  section p {
+    height: 100%;
+    line-height: 40px;
+  }
+  section span {
+    border-bottom: 0;
+    border-right: 1px solid #eaeaea;
+    padding: 0 20px 0 0;
+    width: auto;
+  }
+  section span + p {
+    margin: 0;
+    padding-left: 20px;
+  }
+  aside {
+    padding: 50px 0;
+  }
+  aside p {
+    max-width: 520px;
+    text-align: center;
+  }
+}
+</style>