From 45da7f0625af71a512af41e4ef63e605a314be91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Peixoto?= <joaodiogopeixoto@gmail.com>
Date: Thu, 21 Jan 2021 19:39:13 +0000
Subject: [PATCH] feat: add 404 page

---
 src/.vuepress/theme/components/Footer.vue     |  2 +-
 .../theme/components/base/Transitions.vue     |  8 +------
 src/.vuepress/theme/layouts/404.vue           | 22 ++++++++++++++-----
 src/.vuepress/theme/layouts/GlobalLayout.vue  |  6 ++---
 src/.vuepress/theme/layouts/Layout.vue        |  4 ++--
 5 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/.vuepress/theme/components/Footer.vue b/src/.vuepress/theme/components/Footer.vue
index c7cfd334..f44762cf 100644
--- a/src/.vuepress/theme/components/Footer.vue
+++ b/src/.vuepress/theme/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="footer bg-gradient-6 text-white py-8 md:py-16">
+  <footer class="footer bg-gradient-6 text-white py-8 md:py-16 mt-auto">
     <div class="grid grid-cols-12 grid-margins">
       <NewsletterForm class="col-start-1 col-span-12 lg:pb-20" />
       <div class="col-start-0 md:col-start-1 col-span-12 md:col-span-12">
diff --git a/src/.vuepress/theme/components/base/Transitions.vue b/src/.vuepress/theme/components/base/Transitions.vue
index 6e393765..f55dea0d 100644
--- a/src/.vuepress/theme/components/base/Transitions.vue
+++ b/src/.vuepress/theme/components/base/Transitions.vue
@@ -10,9 +10,7 @@
     @leave="leave"
     @after-leave="afterLeave"
   >
-    <main :key="withKey">
-      <slot></slot>
-    </main>
+    <slot></slot>
   </transition>
 </template>
 
@@ -36,10 +34,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    withKey: {
-      type: String,
-      default: null,
-    },
     beforeEnter: Func,
     enter: Func,
     afterEnter: Func,
diff --git a/src/.vuepress/theme/layouts/404.vue b/src/.vuepress/theme/layouts/404.vue
index a6eb941e..14cbb88a 100644
--- a/src/.vuepress/theme/layouts/404.vue
+++ b/src/.vuepress/theme/layouts/404.vue
@@ -1,10 +1,14 @@
 <template>
-  <Layout>
-    <div>
-      <div>
-        <h1>404</h1>
-        <blockquote>Nothing to see here.</blockquote>
-        <RouterLink to="/">Take me home.</RouterLink>
+  <Layout class="flex flex-col flex-grow">
+    <div class="bg-gradient-6 h-20"></div>
+    <div class="bg-gray-light flex flex-grow">
+      <div class="grid-margins w-full type-rich py-8">
+        <h1>Item not found</h1>
+        <hr class="border separator" />
+        <div>
+          This item has been moved or removed.
+          <RouterLink to="/">Back to home</RouterLink>
+        </div>
       </div>
     </div>
   </Layout>
@@ -20,3 +24,9 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="postcss">
+.separator {
+  border-color: #e9e9ec;
+}
+</style>
diff --git a/src/.vuepress/theme/layouts/GlobalLayout.vue b/src/.vuepress/theme/layouts/GlobalLayout.vue
index ad51d8da..474b257a 100644
--- a/src/.vuepress/theme/layouts/GlobalLayout.vue
+++ b/src/.vuepress/theme/layouts/GlobalLayout.vue
@@ -1,12 +1,12 @@
 <template>
-  <main>
+  <div class="flex flex-col min-h-screen">
     <Nav v-if="shouldDisplay('nav')" ref="nav" />
     <MobileNav v-if="shouldDisplay('nav')" />
-    <Transition :with-key="$page.key" appear :after-leave="leaveScroll">
+    <Transition appear :after-leave="leaveScroll">
       <component :is="layout" />
     </Transition>
     <Footer v-if="shouldDisplay('footer')" />
-  </main>
+  </div>
 </template>
 
 <script>
diff --git a/src/.vuepress/theme/layouts/Layout.vue b/src/.vuepress/theme/layouts/Layout.vue
index 137c6b81..0e1fb31f 100644
--- a/src/.vuepress/theme/layouts/Layout.vue
+++ b/src/.vuepress/theme/layouts/Layout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <main>
     <slot name="header"></slot>
     <DynamicContent
       v-if="$page.frontmatter.body"
@@ -7,7 +7,7 @@
     />
     <slot></slot>
     <slot name="footer"></slot>
-  </div>
+  </main>
 </template>
 
 <script>