Add Maintenance Page

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"

layouts/maintenance.vue

@@ -0,0 +1,3 @@
+<template>
+  <slot />
+</template>

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 });
+  }
+});

pages/index.vue

@@ -3,7 +3,6 @@
 import { CategoryPostsType } from '~/utils/data/getInitialCategoryPostData';
 
 
-
 // Set Meta SEO
 useSeoMeta({
   title: "Beranda",

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>