/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; // Frontend React Component for Website Status function WebsiteMonitor() { const [websites, setWebsites] = useState([ { url: "https://val.town", status: "unknown" }, { url: "https://deno.com", status: "unknown" }, { url: "https://github.com", status: "unknown" }, ]); const [history, setHistory] = useState([]); useEffect(() => { async function checkWebsites() { const results = await fetch("/check-websites"); const data = await results.json(); setWebsites(data.currentStatus); setHistory(data.history); } checkWebsites(); const interval = setInterval(checkWebsites, 60000); // Check every minute return () => clearInterval(interval); }, []); return (

🌐 Website Status Monitor

{websites.map((site, index) => (

{site.status === "up" ? "✅" : "❌"} {site.url} {site.status.toUpperCase()}

))}

📜 Check History

{history.map((entry, index) => ( ))}

Website	Status	Timestamp
{entry.url}	{entry.status.toUpperCase()}	{new Date(entry.timestamp).toLocaleString()}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const SCHEMA_VERSION = 1; // Create tables for tracking website status await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_website_status_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, url TEXT NOT NULL, status TEXT NOT NULL, timestamp DATETIME DEFAULT CURRENT_TIMESTAMP ) `); // Websites to monitor const websites = [ "https://lms.unsap.ac.id", "https://unsap.ac.id", "https://pmb.unsap.ac.ud", ]; // Route for checking website status if (new URL(request.url).pathname === "/check-websites") { const currentStatus = []; const history = []; for (const url of websites) { try { const start = Date.now(); const response = await fetch(url, { method: "HEAD", timeout: 5000 }); const status = response.ok ? "up" : "down"; const responseTime = Date.now() - start; // Insert status into SQLite await sqlite.execute( ` INSERT INTO ${KEY}_website_status_${SCHEMA_VERSION} (url, status, timestamp) VALUES (?, ?, datetime('now')) `, [url, status], ); currentStatus.push({ url, status, responseTime }); } catch (error) { await sqlite.execute( ` INSERT INTO ${KEY}_website_status_${SCHEMA_VERSION} (url, status, timestamp) VALUES (?, ?, datetime('now')) `, [url, "down"], ); currentStatus.push({ url, status: "down" }); } } // Fetch recent history const historyResult = await sqlite.execute(` SELECT url, status, timestamp FROM ${KEY}_website_status_${SCHEMA_VERSION} ORDER BY timestamp DESC LIMIT 20 `); return new Response( JSON.stringify({ currentStatus, history: historyResult.rows, }), { headers: { "Content-Type": "application/json" }, }, ); } // Main page render return new Response( ` Website Status Monitor

`, { headers: { "Content-Type": "text/html" }, }, ); }

stirringPlumHawk

Version 3