From 63efc3e2eca336bcf23f1355c17c487d2d6d179e Mon Sep 17 00:00:00 2001
From: Farhan <farhan18apr02@gmail.com>
Date: Sat, 4 Nov 2023 11:33:06 +0700
Subject: [PATCH] Add Maintenance Page

---
 components/navbar/NavbarSticky.vue |  1 -
 layouts/maintenance.vue            |  3 ++
 middleware/maintenance.global.ts   |  8 ++++
 pages/index.vue                    |  1 -
 pages/maintenance.vue              | 73 ++++++++++++++++++++++++++++++
 5 files changed, 84 insertions(+), 2 deletions(-)
 create mode 100644 layouts/maintenance.vue
 create mode 100644 middleware/maintenance.global.ts
 create mode 100644 pages/maintenance.vue

diff --git a/components/navbar/NavbarSticky.vue b/components/navbar/NavbarSticky.vue
index ac1682b..12c393c 100644
--- a/components/navbar/NavbarSticky.vue
+++ b/components/navbar/NavbarSticky.vue
@@ -84,7 +84,6 @@ const { data: categoriesEvents } = await useFetch('/api/categories', {
       <!-- toggler navigasi -->
       <div class="d-xl-none d-xxl-none">
         <div class="d-flex justify-content-end">
-
           <button @click="toggleColorMode" class="btn border-0 translate__button mx-2 px-0" type="button"
             :title="colorMode.value" data-bs-toggle="dropdown" aria-expanded="false">
             <svg v-if="colorMode.preference === 'light'" xmlns="http://www.w3.org/2000/svg" width="22" height="22"
diff --git a/layouts/maintenance.vue b/layouts/maintenance.vue
new file mode 100644
index 0000000..fd0426e
--- /dev/null
+++ b/layouts/maintenance.vue
@@ -0,0 +1,3 @@
+<template>
+  <slot />
+</template>
\ No newline at end of file
diff --git a/middleware/maintenance.global.ts b/middleware/maintenance.global.ts
new file mode 100644
index 0000000..1bf1a51
--- /dev/null
+++ b/middleware/maintenance.global.ts
@@ -0,0 +1,8 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  // Contoh kondisi jika situs dalam mode maintenance
+  const maintenanceMode = true;
+
+  if (import.meta.env.PROD && maintenanceMode && to.path !== "/maintenance") {
+    return navigateTo("/maintenance", { redirectCode: 503 });
+  }
+});
diff --git a/pages/index.vue b/pages/index.vue
index bd5e04f..f7474d8 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,6 @@
 import { CategoryPostsType } from '~/utils/data/getInitialCategoryPostData';
 
 
-
 // Set Meta SEO
 useSeoMeta({
   title: "Beranda",
diff --git a/pages/maintenance.vue b/pages/maintenance.vue
new file mode 100644
index 0000000..daa0a6e
--- /dev/null
+++ b/pages/maintenance.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+
+definePageMeta({ layout: 'maintenance' })
+
+useSeoMeta({
+  title: "Maaf, Situs Ini Sedang Dalam Perbaikan"
+})
+</script>
+
+
+<template>
+  <div class="page-notfound-container d-flex justify-content-center align-self-center ">
+
+    <div class="d-flex flex-column mb-3 mx-auto">
+      <NuxtImg :class="'image-notfound'" placeholder="/images/ccsn_empty_page.png" src="/images/ccsn_empty_page.png"
+        loading="lazy" />
+      <h3 class="page-notfound__text">Maaf, Situs Ini Sedang Dalam Perbaikan</h3>
+      <h3 class="page-notfound__text">Situs Kami Tidak Tersedia Sementara Waktu</h3>
+      <h3 class="page-notfound__text">Perbaikan Sedang Dilakukan, Kami Berusaha Secepat Mungkin</h3>
+
+    </div>
+
+  </div>
+</template>
+
+
+<style lang="css" scoped>
+.page-notfound-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.page-notfound__text {
+  font-family: Poppins;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 120%;
+  text-align: center;
+  margin-bottom: 13px;
+}
+
+.image-notfound {
+  width: auto;
+  height: 350px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  object-fit: cover;
+  margin-bottom: 13px;
+}
+
+
+/* Dark Mode */
+
+.dark-mode .page-notfound-container {
+  background-color: #262626;
+}
+
+.dark-mode .page-notfound__text {
+  color: #fff;
+}
+
+@media (min-width: 1200px) {
+
+  .page-notfound__text {
+    font-size: 18px;
+  }
+
+}
+</style>
\ No newline at end of file