Update refresh intervals in UpdateTimer and UptimeStatusIsland components from 30 minutes to 5 minutes for more frequent status checks and updates.

src/components/UpdateTimer.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-const REFRESH_INTERVAL = 1800; // seconds
+const REFRESH_INTERVAL = 300; // seconds
 
 export default function UpdateTimer({ onRefresh }) {
   const [secondsLeft, setSecondsLeft] = useState(REFRESH_INTERVAL);

src/components/UptimeStatusIsland.jsx

@@ -105,32 +105,32 @@ export default function UptimeStatusIsland() {
     setUserLocale(navigator.language || 'en-US');
   }, []);
 
-  // Helper: get the current 30-min window key (e.g., '2024-06-07T12:00')
+  // Helper: get the current 5-min window key (e.g., '2024-06-07T12:00')
-  const getCurrent30MinKey = () => {
+  const getCurrent5MinKey = () => {
     const now = new Date();
     now.setSeconds(0, 0);
     const min = now.getMinutes();
-    now.setMinutes(Math.floor(min / 30) * 30);
+    now.setMinutes(Math.floor(min / 5) * 5);
     return now.toISOString().slice(0, 16); // 'YYYY-MM-DDTHH:mm'
   };
 
-  // Helper: get seconds to next 30-min mark
+  // Helper: get seconds to next 5-min mark
-  const getSecondsToNext30Min = () => {
+  const getSecondsToNext5Min = () => {
     const now = new Date();
     const minutes = now.getMinutes();
     const seconds = now.getSeconds();
     const ms = now.getMilliseconds();
-    const next30 = Math.ceil((minutes + 0.01) / 30) * 30;
+    const next5 = Math.ceil((minutes + 0.01) / 5) * 5;
     let next = new Date(now);
-    next.setMinutes(next30, 0, 0);
+    next.setMinutes(next5, 0, 0);
     if (next <= now) {
-      next.setMinutes(next.getMinutes() + 30);
+      next.setMinutes(next.getMinutes() + 5);
     }
     return Math.floor((next - now) / 1000);
   };
 
   useEffect(() => {
-    const update = () => setSecondsToNextUpdate(getSecondsToNext30Min());
+    const update = () => setSecondsToNextUpdate(getSecondsToNext5Min());
     update();
     const interval = setInterval(update, 1000);
     return () => clearInterval(interval);
@@ -143,7 +143,7 @@ export default function UptimeStatusIsland() {
     if (cache) {
       try {
         const { key, data: cachedData } = JSON.parse(cache);
-        if (key === getCurrent30MinKey() && cachedData) {
+        if (key === getCurrent5MinKey() && cachedData) {
           setData(cachedData);
           setLoading(false);
           return;
@@ -163,9 +163,9 @@ export default function UptimeStatusIsland() {
       if (!response.ok) throw new Error('Failed to fetch uptime data');
       const json = await response.json();
       setData(json);
-      // Cache with current 30-min key
+      // Cache with current 5-min key
       const cacheKey = 'uptimeStatusCache';
-      sessionStorage.setItem(cacheKey, JSON.stringify({ key: getCurrent30MinKey(), data: json }));
+      sessionStorage.setItem(cacheKey, JSON.stringify({ key: getCurrent5MinKey(), data: json }));
     } catch (err) {
       setError(err.message || 'Unknown error');
     } finally {
@@ -173,7 +173,7 @@ export default function UptimeStatusIsland() {
     }
   }, []);
 
-  // Scheduled fetch logic (every 30 min, update cache)
+  // Scheduled fetch logic (every 5 min, update cache)
   const fetchData = useCallback(async () => {
     setLoading(true);
     setError(null);
@@ -182,9 +182,9 @@ export default function UptimeStatusIsland() {
       if (!response.ok) throw new Error('Failed to fetch uptime data');
       const json = await response.json();
       setData(json);
-      // Cache with current 30-min key
+      // Cache with current 5-min key
       const cacheKey = 'uptimeStatusCache';
-      sessionStorage.setItem(cacheKey, JSON.stringify({ key: getCurrent30MinKey(), data: json }));
+      sessionStorage.setItem(cacheKey, JSON.stringify({ key: getCurrent5MinKey(), data: json }));
     } catch (err) {
       setError(err.message || 'Unknown error');
     } finally {
@@ -197,16 +197,16 @@ export default function UptimeStatusIsland() {
     const minutes = now.getMinutes();
     const seconds = now.getSeconds();
     const ms = now.getMilliseconds();
-    const next30 = Math.ceil((minutes + 0.01) / 30) * 30;
+    const next5 = Math.ceil((minutes + 0.01) / 5) * 5;
     let next = new Date(now);
-    next.setMinutes(next30, 0, 0);
+    next.setMinutes(next5, 0, 0);
     if (next <= now) {
-      next.setMinutes(next.getMinutes() + 30);
+      next.setMinutes(next.getMinutes() + 5);
     }
     const msToNext = next - now;
     const timeout = setTimeout(() => {
       fetchData();
-      const interval = setInterval(fetchData, 30 * 60 * 1000);
+      const interval = setInterval(fetchData, 5 * 60 * 1000);
       fetchData.interval = interval;
     }, msToNext);
     return () => {
@@ -247,7 +247,7 @@ export default function UptimeStatusIsland() {
     return badgeRefs.current[monitorId][badge];
   };
 
-  const totalBarSeconds = 30 * 60;
+  const totalBarSeconds = 5 * 60;
   const barValue = secondsToNextUpdate !== null ? (totalBarSeconds - secondsToNextUpdate) : 0;
   const barPercent = (barValue / totalBarSeconds) * 100;
   const barGradient = 'linear-gradient(90deg, #0161ef 0%, #0154cf 100%)';

src/pages/[lang]/uptime.astro

@@ -85,7 +85,7 @@ const metadata = {
       <div class="backdrop-blur-sm bg-blue-50/50 dark:bg-blue-900/20 rounded-lg p-4 border-l-4 border-blue-500">
         <h4 class="font-semibold text-blue-800 dark:text-blue-200 mb-1">🔄 Updates</h4>
         <p class="text-sm text-blue-700 dark:text-blue-300">
-          Status checks every 30 minutes with automatic refresh
+          Status checks every 5 minutes with automatic refresh
         </p>
       </div>
       <div class="backdrop-blur-sm bg-green-50/50 dark:bg-green-900/20 rounded-lg p-4 border-l-4 border-green-500">