feat: add status icon in status page link

package.json

@@ -12,12 +12,12 @@
   },
   "dependencies": {
     "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/starlight": "^0.27.1",
-    "@astrojs/vue": "^4.5.0",
+    "@astrojs/starlight": "0.28.2",
+    "@astrojs/vue": "4.5.1",
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.1.5",
     "@supabase/supabase-js": "^2.45.4",
-    "astro": "^4.15.4",
+    "astro": "4.15.9",
     "astro-embed": "^0.7.2",
     "caniuse-lite": "^1.0.30001660",
     "faiss-node": "^0.5.1",

src/components/CIExpert.vue

@@ -74,9 +74,9 @@
               <p class="mt-6 text-base text-gray-600 font-pj">
                 Benefit from our deep expertise in mobile app CI/CD best practices, without
                 the need to build and maintain a complex system yourself.
-                <p class="mt-6 text-base text-gray-600 font-pj">
+                <span class="mt-6 text-base text-gray-600 font-pj">
                   We already setup CI/CD for 50+ apps.
-                </p>
+                </span>
               </p>
             </div>
           </div>

src/components/Footer.vue

@@ -1,12 +1,23 @@
 <script setup lang="ts">
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, ref, onMounted } from 'vue'
 import { useRuntimeConfig } from '../config/app'
 import { openMessenger } from '../services/bento'
 
 const config = useRuntimeConfig()
 const brand = config.public.brand
 const year = new Date().getFullYear()
 
+const systemStatus = ref({ indicator: 'unknown', uptime: 'N/A' })
+
+onMounted(async () => {
+  try {
+    const response = await fetch('/status.json')
+    systemStatus.value = await response.json()
+  } catch (error) {
+    console.error('Error fetching status:', error)
+  }
+})
+
 const navigation = {
   solutions: [
     { name: 'Register', href: '/register/', target: '_blank' },
@@ -36,7 +47,12 @@ const navigation = {
     },
     { name: 'Pricing', href: '/pricing/' },
     { name: 'Guides', href: '/blog/' },
-    { name: 'Status', href: 'https://status.capgo.app/', target: '_blank' },
+    {
+      name: () => systemStatus.value.indicator === 'up' ? 'All systems normal' : 'Systems are disturbed',
+      href: 'https://status.capgo.app/',
+      target: '_blank',
+      icon: () => systemStatus.value.indicator === 'up' ? '🟢' : '🟠',
+    },
     {
       name: 'Chat',
       href: '#support',
@@ -204,15 +220,16 @@ const navigation = {
             <div class="mt-12 md:mt-0">
               <h3 class="text-base font-medium text-gray-900">Support</h3>
               <ul role="list" class="mt-4 space-y-4">
-                <li v-for="item in navigation.support" :key="item.name">
+                <li v-for="item in navigation.support" :key="typeof item.name === 'function' ? item.name() : item.name">
                   <a
                     :rel="item.rel"
                     :href="item.href"
                     :target="item.target"
-                    class="text-base text-gray-500 hover:text-gray-900 duration-200 transition-all duration-200 border-b-2 border-transparent hover:border-blue-600 focus:border-blue-600"
+                    class="text-base text-gray-500 hover:text-gray-900 duration-200 transition-all duration-200 border-b-2 border-transparent hover:border-blue-600 focus:border-blue-600 flex items-center"
                     @click="item.execute && item.execute()"
                   >
-                    {{ item.name }}
+                    <span v-if="item.icon" class="mr-2">{{ typeof item.icon === 'function' ? item.icon() : item.icon }}</span>
+                    {{ typeof item.name === 'function' ? item.name() : item.name }}
                   </a>
                 </li>
               </ul>

src/pages/status.json.ts

@@ -0,0 +1,18 @@
+import type { APIRoute } from 'astro'
+
+export const GET: APIRoute = async ({ params, request }) => {
+  try {
+    const response = await fetch('https://status.capgo.app/status.json')
+    const data = await response.json()
+
+    return new Response(JSON.stringify(data), {
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+  } catch (error) {
+    console.error('Error fetching status:', error)
+    return new Response(JSON.stringify({ indicator: 'unknown', uptime: 'N/A' }), { status: 500 })
+  }
+}