/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function SlidesApp() { const [slides, setSlides] = useState([]); const [currentSlide, setCurrentSlide] = useState(0); const [slidesUrl, setSlidesUrl] = useState(''); const [errorMessage, setErrorMessage] = useState(''); const [diagnosticInfo, setDiagnosticInfo] = useState(''); useEffect(() => { async function loadSlides() { try { const slidesResponse = await fetch(`${window.location.pathname}`); const slidesText = await slidesResponse.text(); setSlidesUrl(slidesResponse.url); if (!slidesResponse.ok) { setErrorMessage(`Server error: ${slidesResponse.status} ${slidesResponse.statusText}`); setDiagnosticInfo(slidesText); return; } const parsedSlides = slidesText.split('\n') .filter(line => line.trim()) .map(line => { const [duration, imageUrl] = line.trim().split(/\s+(.+)/); const parsedDuration = parseFloat(duration); if (isNaN(parsedDuration) || !imageUrl) { throw new Error(`Invalid line format: ${line}`); } return { duration: parsedDuration, imageUrl, originalLine: line }; }); if (parsedSlides.length === 0) { setErrorMessage('No valid slides found'); setDiagnosticInfo(slidesText); } else { setSlides(parsedSlides); } } catch (error) { setErrorMessage(`Error loading slides: ${error.message}`); setDiagnosticInfo(`Full error: ${error.toString()}\nStack trace: ${error.stack}`); } } loadSlides(); }, []); useEffect(() => { if (slides.length === 0) return; const currentSlideData = slides[currentSlide]; const timer = setTimeout(() => { setCurrentSlide((prev) => (prev + 1) % slides.length); }, currentSlideData.duration * 1000); return () => clearTimeout(timer); }, [currentSlide, slides]); if (errorMessage) { return (

Slides Error

Slides URL: {slidesUrl}

{errorMessage}

Diagnostic Information

{diagnosticInfo}

); } if (slides.length === 0) { return

Loading slides...

; } const currentSlideData = slides[currentSlide]; return (

Slide {currentSlide + 1} of {slides.length}
Duration: {currentSlideData.duration}s
Original line: {currentSlideData.originalLine}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); // Extract the target URL from the request path const targetUrl = decodeURIComponent(url.pathname.slice(1)); const fullUrl = `https://${targetUrl}`; // Validate the target URL to prevent potential abuse if (!fullUrl) { return new Response(JSON.stringify({ error: 'Please provide a valid URL in the path', providedPath: url.pathname, extractedUrl: targetUrl }), { status: 400, headers: { 'Content-Type': 'application/json' } }); } try { // Fetch the target URL with a browser-like user agent const slidesResponse = await fetch(fullUrl, { headers: { 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36' } }); const slidesText = await slidesResponse.text(); if (!slidesResponse.ok) { return new Response(JSON.stringify({ error: `Error fetching slides: ${slidesResponse.status} ${slidesResponse.statusText}`, targetUrl, responseText: slidesText }), { status: slidesResponse.status, headers: { 'Content-Type': 'application/json' } }); } return new Response(slidesText, { headers: { 'Content-Type': 'text/plain', 'X-Slides-Url': fullUrl } }); } catch (error) { return new Response(JSON.stringify({ error: `Error fetching slides: ${error.message}`, fullUrl, fullError: error.toString(), stack: error.stack }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } }

slides

Version 7