😍 pr0n

/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON?v=41"; const subreddits = ["IdiotsInCars"]; const fetchWithImage = async (subreddit: string) => { const { data: { children } } = await fetchJSON( `https://www.reddit.com/r/${subreddit}.json`, ); const posts = children .map((child: any) => child.data) .filter((post: any) => post.post_hint === "image") .map((post: any) => ({ title: post.title, url: post.url, score: post.score, subreddit: post.subreddit, })); return posts; }; const fetchAllReddits = async () => { const posts = (await Promise.all(subreddits.map(fetchWithImage))).flat(); return posts; }; function ImageGrid({ posts }) { return (

{posts.map((post, index) => (

))}

); } function App() { const [posts, setPosts] = useState([]); useEffect(() => { fetch("/api/posts").then(ok => ok.json()) .then(posts => setPosts(posts)); }, []); return (

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(req: Request): Promise { if (req.url.endsWith("/api/posts")) { const posts = await fetchAllReddits(); posts.sort((a, b) => b.score - a.score); return Response.json(posts); } return new Response( ` 😍 pr0n

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; } h1 { text-align: center; color: #333; } .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .image-item { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .image-item:hover { transform: scale(1.05); } .image-item img { width: 100%; height: 250px; object-fit: cover; display: block; } `;

redditImageGrab