/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useRef } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function generateShortCode(length = 5) { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; return Array.from(crypto.getRandomValues(new Uint8Array(length))) .map((x) => chars[x % chars.length]) .join(''); } function App() { const [longUrl, setLongUrl] = useState(''); const [shortUrl, setShortUrl] = useState(''); const [error, setError] = useState(''); const [copyStatus, setCopyStatus] = useState(''); const shortUrlInputRef = useRef(null); const handleGenerate = async () => { try { const response = await fetch('/generate', { method: 'POST', body: JSON.stringify({ longUrl }), headers: { 'Content-Type': 'application/json' } }); if (!response.ok) { throw new Error('Failed to generate short URL'); } const data = await response.json(); setShortUrl(data.shortUrl); setError(''); setCopyStatus(''); } catch (err) { setError(err.message); } }; const copyToClipboard = () => { try { // First, try navigator clipboard if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(shortUrl).then(() => { setCopyStatus('✅ Copied!'); }).catch((err) => { fallbackCopyTextToClipboard(shortUrl); }); } else { // Fallback for non-secure contexts fallbackCopyTextToClipboard(shortUrl); } } catch (err) { fallbackCopyTextToClipboard(shortUrl); } }; const fallbackCopyTextToClipboard = (text) => { const textArea = document.createElement("textarea"); textArea.value = text; // Avoid scrolling to bottom textArea.style.top = "0"; textArea.style.left = "0"; textArea.style.position = "fixed"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand('copy'); setCopyStatus(successful ? '✅ Copied!' : '❌ Copy failed'); } catch (err) { setCopyStatus('❌ Copy failed'); } document.body.removeChild(textArea); }; return (

🔗 Short URL Generator

setLongUrl(e.target.value)} placeholder="Enter long URL here" style={{ width: '100%', padding: '10px', marginBottom: '10px' }} /> {error && (

{error}

)} {shortUrl && (

)} {copyStatus && (

{copyStatus}

)}

View Source

); } 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 = 2; // Create URLs table if not exists await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_urls_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, short_code TEXT UNIQUE NOT NULL, long_url TEXT NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `); // Handle URL generation if (request.method === 'POST') { const { longUrl } = await request.json(); // Validate URL try { new URL(longUrl); } catch { return new Response(JSON.stringify({ error: 'Invalid URL' }), { status: 400, headers: { 'Content-Type': 'application/json' } }); } const shortCode = generateShortCode(); const baseUrl = new URL(request.url).origin; const shortUrl = `${baseUrl}/${shortCode}`; await sqlite.execute( `INSERT INTO ${KEY}_urls_${SCHEMA_VERSION} (short_code, long_url) VALUES (?, ?)`, [shortCode, longUrl] ); return new Response(JSON.stringify({ shortUrl }), { headers: { 'Content-Type': 'application/json' } }); } // Handle redirection if (request.method === 'GET') { const shortCode = new URL(request.url).pathname.slice(1); if (shortCode) { const result = await sqlite.execute( `SELECT long_url FROM ${KEY}_urls_${SCHEMA_VERSION} WHERE short_code = ?`, [shortCode] ); if (result.rows.length > 0) { const longUrl = result.rows[0].long_url; return new Response(null, { status: 302, headers: { 'Location': longUrl } }); } } } // Serve HTML for the main page return new Response(` Short URL Generator

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

shorturl