/** @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"; const bibleEndpoints = [ { url: "/worker", name: "ASV" }, { url: "https://bible-api.com/?random=true&translation=bbe", name: "BBE" }, { url: "https://bible-api.com/?random=true&translation=darby", name: "Darby" }, { url: "https://bible-api.com/?random=true&translation=dra", name: "DRA" }, { url: "https://bible-api.com/?random=true&translation=web", name: "WEB" }, { url: "https://bible-api.com/?random=true&translation=ylt", name: "YLT" }, { url: "https://bible-api.com/?random=true&translation=oeb-cw", name: "OEB-CW" }, { url: "https://bible-api.com/?random=true&translation=webbe", name: "WEBBe" }, { url: "https://bible-api.com/?random=true&translation=oeb-us", name: "OEB-US" }, ]; // Global rate limit for all versions const rateLimit = 10000; let lastRequestTime = 0; function App() { const [verse, setVerse] = useState<{ text: string; reference: string; version: string } | null>(null); const [status, setStatus] = useState<"idle" | "loading" | "error">("loading"); const [errorMessage, setErrorMessage] = useState(""); const fetchRandomVerse = async () => { setStatus("loading"); setErrorMessage(""); let attempt = 0; const maxAttempts = bibleEndpoints.length; while (attempt < maxAttempts) { try { // Check global rate limit const currentTime = Date.now(); if ((currentTime - lastRequestTime) < rateLimit) { throw new Error("Rate limit. Please wait."); } const randomIndex = Math.floor(Math.random() * bibleEndpoints.length); const endpoint = bibleEndpoints[randomIndex]; // If the endpoint is the worker, use a relative URL const url = endpoint.url.startsWith('/') ? endpoint.url : endpoint.url; const response = await fetch(url, { mode: "cors", // Enable CORS headers: { "Origin": window.location.origin, // Add origin header }, }); if (!response.ok) throw new Error(`API error for ${endpoint.name}: ${response.statusText}`); const data = await response.json(); const formattedVerse = { text: data.text, reference: data.reference, version: endpoint.name, }; setVerse(formattedVerse); setStatus("idle"); // Update global last request time lastRequestTime = currentTime; return; } catch (error) { console.error("Error:", error); attempt++; if (attempt === maxAttempts) { setStatus("error"); setErrorMessage( `Failed to fetch verse after ${maxAttempts} attempts. ${ error instanceof Error ? error.message : "Unknown error" }. Please try again later.`, ); } } } }; // Auto-fetch verse on component mount useEffect(() => { fetchRandomVerse(); }, []); return (

🙏 Verse of the Day

{status === "error" && (

{errorMessage}

)} {status === "loading" && (

Loading verse...

)} {verse && status === "idle" && (

"{verse.text}"

{verse.reference}

@{verse.version}

)}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { // Handle worker endpoint if (new URL(request.url).pathname.endsWith('/worker')) { const headers = new Headers(); headers.set('Content-Type', 'application/json'); headers.set('Access-Control-Allow-Origin', '*'); headers.set('Access-Control-Allow-Methods', 'GET'); headers.set('Access-Control-Allow-Headers', 'Content-Type'); try { const response = await fetch("https://bible-api.com/?random=true&translation=asv"); const data = await response.json(); return new Response(JSON.stringify(data), { headers: headers, status: 200 }); } catch (error) { return new Response(JSON.stringify({ error: error.message }), { headers: headers, status: 500 }); } } // Add CORS headers to server response const headers = new Headers({ "Content-Type": "text/html", "Access-Control-Allow-Origin": "*", // Allow all origins "Access-Control-Allow-Methods": "GET, POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Origin", }); return new Response( ` Verse of the Day

`, { headers }, ); }

verseOfTheDayApp

Version 4