first

src/pages/[...all].vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+/**
+ * This is a Vue Component that will be
+ * automatically mapped to a catch all path on vue-router (404).
+ *
+ * You will be able to access this page  at http://localhost:3000/non-existing-page
+ *
+ * Read more about routing:
+ * @see /vite.config.ts
+ * @see /src/router.ts
+ */
+import type { VueroSSRContext } from '/@server/types'
+import { setResponseHeader, setResponseStatus } from 'h3'
+import { useSSRContext } from 'vue'
+
+const { t } = useI18n()
+
+useHead({
+  title: `${t('pages.not-found.page-title')} - Vuero`,
+  meta: [
+    {
+      name: 'robots',
+      content: 'noindex',
+    },
+  ],
+})
+
+/**
+ * When the route is not found, we want to send 404 error code
+ * We do this by using the `useSSRContext` composable, then we use this to set the 404 status code
+ * @see src/entry-server.ts
+ * @see server.ts
+ */
+if (import.meta.env.SSR) {
+  const event = useSSRContext<VueroSSRContext>()?.event
+  if (event) {
+    setResponseHeader(event, 'Cache-Control', 'no-cache, no-store, must-revalidate')
+    setResponseStatus(event, 404)
+  }
+}
+</script>
+
+<template>
+  <MinimalLayout>
+    <div class="error-container">
+      <div class="error-nav">
+        <VDarkmodeToggle />
+      </div>
+
+      <div class="error-wrapper">
+        <div class="error-inner has-text-centered">
+          <div class="bg-number">
+            404
+          </div>
+          <SVGErrorPlaceholder />
+
+          <h3>{{ t('pages.not-found.page-heading') }}</h3>
+          <p>
+            {{ t('pages.not-found.page-body') }}
+          </p>
+          <div class="button-wrap">
+            <VButton
+              color="primary"
+              elevated
+              to="/"
+            >
+              {{ t('pages.not-found.page-button') }}
+            </VButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </MinimalLayout>
+</template>
+
+<style lang="scss">
+.error-container {
+  width: 100vw;
+  min-height: 100vh;
+
+  .error-nav {
+    .dark-mode {
+      position: absolute;
+      inset-inline-end: 0;
+      top: 0;
+      display: inline-block;
+      transform: scale(0.5);
+    }
+  }
+
+  .error-wrapper {
+    max-width: 840px;
+    margin: 0 auto;
+    padding-top: 40px;
+
+    .error-inner {
+      position: relative;
+      max-width: 540px;
+      margin: 0 auto;
+
+      .bg-number {
+        font-family: var(--font);
+        position: absolute;
+        top: -58px;
+        inset-inline-start: -50px;
+        inset-inline-end: 0;
+        margin: 0 auto;
+        font-size: 28rem;
+        font-weight: 600;
+        opacity: 0.15;
+        z-index: 0;
+      }
+
+      img,
+      svg,
+      h3,
+      p,
+      .button-wrap {
+        position: relative;
+        z-index: 1;
+      }
+
+      img,
+      .iconify {
+        display: block;
+        max-width: 100%;
+        margin: 0 auto;
+      }
+
+      h3 {
+        font-size: 1.5rem;
+        font-family: var(--font-alt);
+        color: var(--dark-text);
+        font-weight: 600;
+        margin-top: 10px;
+      }
+
+      p {
+        font-family: var(--font);
+        font-size: 1.1rem;
+        margin-bottom: 16px;
+      }
+
+      .button-wrap {
+        .button {
+          min-width: 220px;
+          min-height: 50px;
+        }
+      }
+    }
+  }
+}
+
+.is-dark {
+  .error-container {
+    .error-wrapper {
+      .error-inner {
+        .bg-number {
+          opacity: 0.09;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (width <= 767px) {
+  .error-container {
+    .error-wrapper {
+      padding-top: 60px;
+
+      .error-inner {
+        padding: 10px;
+
+        .bg-number {
+          top: -35px;
+          inset-inline-start: -18px;
+          inset-inline-end: 0;
+          font-size: 13rem;
+        }
+
+        img,
+        .iconify {
+          max-width: 345px;
+        }
+      }
+    }
+  }
+}
+</style>