Add maintenance system

src/components/Announcement.vue

@@ -12,9 +12,9 @@ function getColor() {
   <div v-if="announce" class="w-full flex justify-center mt-8">
     <div class="relative">
       <h1 class="px-4 py-2 bg-white dark:bg-zinc-900 rounded-md border border-zinc-100 dark:border-zinc-300/10" v-html="announce.content" />
-      <span class="absolute -top-1 -right-1 flex h-3 w-3">
+      <span class="absolute -top-0.5 -right-0.5 flex h-2 w-2">
         <span span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" :class="getColor()" />
-        <span class="relative inline-flex rounded-full h-3 w-3" :class="getColor()" />
+        <span class="relative inline-flex rounded-full h-2 w-2" :class="getColor()" />
       </span>
     </div>
   </div>

src/components/header/Header.vue

@@ -2,7 +2,7 @@
   <header class="z-30 sticky top-0 left-0 flex justify-center w-full">
     <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 flex justify-between bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
       <Logo />
-      <NavBar />
+      <NavBar v-if="navbar" />
       <div class="flex gap-2">
         <ClientOnly>
           <div class="flex items-center rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
@@ -15,3 +15,13 @@
     </div>
   </header>
 </template>
+
+<script setup lang="ts">
+
+defineProps({
+  navbar: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>

src/layouts/maintenance.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+const getColor = computed(() => appConfig.ui.primary)
+</script>
+
+<template>
+  <div>
+    <NuxtLoadingIndicator :color="getColor" />
+    <section class="fixed inset-0 flex justify-center sm:px-8">
+      <div class="flex w-full max-w-7xl">
+        <div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
+      </div>
+    </section>
+    <div class="relative z-50 min-h-[100svh]">
+      <Header :navbar="false" />
+      <UContainer>
+        <NuxtPage />
+      </UContainer>
+      <Footer />
+    </div>
+  </div>
+</template>

src/middlewares/maintenance.ts

@@ -0,0 +1,17 @@
+export default defineNuxtRouteMiddleware(async (to, from) => {
+  let isMaintenance = true
+  const { $trpc } = useNuxtApp()
+
+  try {
+    isMaintenance = await $trpc.maintenance.is.query()
+  } catch (error) {
+    return navigateTo('/maintenance')
+  }
+
+  if (isMaintenance) {
+    return navigateTo('/maintenance')
+  }
+  if (!isMaintenance && to.path === '/maintenance') {
+    return navigateTo('/')
+  }
+})

src/pages/maintenance.vue

@@ -0,0 +1,65 @@
+<template>
+  <section class="w-full min-h-[80svh] flex justify-center items-center">
+    <div class="text-center space-y-8 max-w-5xl">
+      <h3 class="text-subtitle uppercase text-sm">Coming back soon</h3>
+      <h1 class="text-4xl md:text-7xl font-bold">
+        The website is under maintenance
+      </h1>
+      <div v-if="maintenance">
+        <p class="text-subtitle">
+          {{ maintenance.reason }}
+        </p>
+        <div>
+          <p class="text-subtitle">
+            Maintenance planned from {{ useDateFormat(maintenance.beginAt, format).value }} to {{ useDateFormat(maintenance.endAt, format).value }}
+          </p>
+        </div>
+      </div>
+      <div class="flex justify-center items-center gap-4">
+        <UButton
+          v-for="social in socials"
+          :key="social.name"
+          :icon="social.icon"
+          size="md"
+          :link="social.link"
+          variant="ghost"
+          target="_blank"
+          :ui="{ rounded: 'rounded-full' }"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'maintenance'
+})
+
+const { $trpc } = useNuxtApp()
+const maintenance = await $trpc.maintenance.get.query()
+const format = 'DD MMMM YYYY, HH:mm'
+
+const socials = [
+  {
+    name: 'mail',
+    icon: 'i-material-symbols-alternate-email',
+    link: 'mailto:arthurdanjou@outlook.fr',
+  },
+  {
+    name: 'twitter',
+    icon: 'i-ph-twitter-logo-bold',
+    link: 'https://twitter.com/ArthurDanj',
+  },
+  {
+    name: 'github',
+    icon: 'i-ph-github-logo-bold',
+    link: 'https://twitter.com/ArthurDanj',
+  },
+  {
+    name: 'linkedin',
+    icon: 'i-ph-linkedin-logo-bold',
+    link: 'https://www.linkedin.com/in/arthurdanjou/',
+  },
+]
+</script>