/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [url, setUrl] = useState(""); const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const [showImageList, setShowImageList] = useState(false); const [showVideoList, setShowVideoList] = useState(false); const [showFullHtml, setShowFullHtml] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); setLoading(true); try { const startTime = performance.now(); const response = await fetch(`?url=${encodeURIComponent(url)}`); const endTime = performance.now(); const data = await response.json(); data.latency = endTime - startTime; setResult(data); } catch (error) { console.error("Error:", error); setResult({ error: "An error occurred while processing the request." }); } setLoading(false); }; const getDomainPreview = (url, title) => { const domain = new URL(url).hostname.replace('www.', ''); const shortTitle = title.length > 30 ? title.substring(0, 30) + '...' : title; return `${domain} - ${shortTitle}`; }; const toggleImageList = () => { setShowImageList(!showImageList); setShowVideoList(false); }; const toggleVideoList = () => { setShowVideoList(!showVideoList); setShowImageList(false); }; const toggleHtmlView = () => { setShowFullHtml(!showFullHtml); }; const downloadImage = async (imageUrl) => { try { const response = await fetch(imageUrl); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = imageUrl.split('/').pop(); document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); } catch (error) { console.error("Error downloading image:", error); } }; const downloadVideo = async (videoUrl) => { try { const response = await fetch(videoUrl); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = videoUrl.split('/').pop(); document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); } catch (error) { console.error("Error downloading video:", error); } }; const escapeHtml = (unsafe) => { return unsafe .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """) .replace(/'/g, "'"); }; const prettifyHtml = (html) => { let formatted = ''; let indent = 0; const tab = ' '; // 2 spaces for indentation const tags = html.split(/(<\/?[^>]+>)/); for (let i = 0; i < tags.length; i++) { const tag = tags[i].trim(); if (tag.startsWith('') && !tag.startsWith(' 0) { formatted += tab.repeat(indent) + tag + '\n'; } } return formatted.trim(); }; const highlightHtml = (html) => { const escapedHtml = escapeHtml(prettifyHtml(html)); return escapedHtml .replace(/(<[^&]*>)/g, '$1') .replace(/(".*?")/g, '$1') .replace(/(\s+\w+)=/g, '$1='); }; const ImageListPopup = ({ imageList }) => (

Image List

downloadImage(img.url)}>{img.url}
Size: {img.size} KB

); const VideoListPopup = ({ videoList }) => (

Video List

{video.url}
Size: {video.size.toFixed(3)} GB

); return (

Page Detector

{result && ( <>

{getDomainPreview(result.url, result.pageTitle)}

Images: {result.imageCount} (Estimated size: {result.estimatedImageSize.toFixed(2)} GB)

Videos: {result.videoCount} (Estimated size: {result.estimatedVideoSize.toFixed(2)} GB)

Total Estimated Size: {result.totalEstimatedSize.toFixed(2)} GB

Performance Metrics

CDN/Cloud Usage: {result.cdnUsage.length > 0 ? result.cdnUsage.join(", ") : "Not detected"}

Estimated FCP: {result.estimatedFCP} ms

Latency: {result.latency.toFixed(2)} ms

Availability: {result.availability}

{showImageList && } {showVideoList && }

Page HTML {showFullHtml ? 'Full View' : 'Preview'}


        
      )}
      
        View source on Val Town

pageDetector