/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useState } from "https://esm.sh/react@18.2.0"; function App() { const [apiKey, setApiKey] = useState(""); const [stories, setStories] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const handleSubmit = async (e) => { e.preventDefault(); setLoading(true); setError(""); try { const response = await fetch("/scrape", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ apiKey }), }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); setStories(data.stories); } catch (err) { setError(err.message); } finally { setLoading(false); } }; return (

Hacker News Top Stories Scraper

{error &&

{error}

} {stories.length > 0 && (

Top 5 Hacker News Stories:

{stories.map((story, index) => (

{index + 1}. {story.title}

Link: {story.link}

Points: {story.points}

))}

)}

View source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === "POST" && new URL(request.url).pathname === "/scrape") { const { apiKey } = await request.json(); const { PuppeteerDeno } = await import("https://deno.land/x/puppeteer@16.2.0/src/deno/Puppeteer.ts"); const { default: Steel } = await import("https://esm.sh/steel-sdk"); const client = new Steel({ steelAPIKey: apiKey }); const puppeteer = new PuppeteerDeno({ productName: "chrome", preferredRevision: "107.0.5304.62", }); let session; let browser; try { session = await client.sessions.create({}); browser = await puppeteer.connect({ browserWSEndpoint: `wss://connect.steel.dev?apiKey=${apiKey}&sessionId=${session.id}`, }); const page = await browser.newPage(); await page.goto("https://news.ycombinator.com", { waitUntil: "networkidle0" }); const stories = await page.evaluate(() => { const items = []; const storyRows = document.querySelectorAll("tr.athing"); for (let i = 0; i < 5; i++) { const row = storyRows[i]; const titleElement = row.querySelector(".titleline > a"); const subtext = row.nextElementSibling; const score = subtext?.querySelector(".score"); items.push({ title: titleElement?.textContent || "", link: titleElement?.getAttribute("href") || "", points: score?.textContent?.split(" ")[0] || "0", }); } return items; }); return new Response(JSON.stringify({ stories }), { headers: { "Content-Type": "application/json" }, }); } catch (error) { return new Response(JSON.stringify({ error: error.message }), { status: 500, headers: { "Content-Type": "application/json" }, }); } finally { if (browser) await browser.close(); if (session) await client.sessions.release(session.id); } } return new Response( ` Hacker News Top Stories Scraper

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; } .container { background-color: #f4f4f4; padding: 20px; border-radius: 5px; } h1 { color: #2c3e50; } form { margin-bottom: 20px; } input[type="text"] { width: 300px; padding: 10px; margin-right: 10px; } button { padding: 10px 15px; background-color: #3498db; color: white; border: none; cursor: pointer; } button:disabled { background-color: #bdc3c7; } .error { color: #e74c3c; } .stories { background-color: white; padding: 20px; border-radius: 5px; } .story { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; } .story:last-child { border-bottom: none; } .story h3 { margin-bottom: 5px; color: #2c3e50; } .story p { margin: 5px 0; } .source-link { text-align: center; margin-top: 20px; } .source-link a { color: #3498db; text-decoration: none; } `;

steel_example