Val Town Code SearchReturn to Val Town

199});
200
201export default lastlogin((request: Request) => app.fetch(request));

231  const [isDragging, setIsDragging] = useState(false);
232
233  const fetchBlobs = useCallback(async () => {
234    setLoading(true);
235    try {
236      const response = await fetch(`/api/blobs?prefix=${encodeKey(searchPrefix)}&limit=${limit}`);
237      const data = await response.json();
238      setBlobs(data);
239    } catch (error) {
240      console.error("Error fetching blobs:", error);
241    } finally {
242      setLoading(false);
245
246  useEffect(() => {
247    fetchBlobs();
248  }, [fetchBlobs]);
249
250  const handleSearch = (e) => {
261      setBlobContentLoading(true);
262      try {
263        const response = await fetch(`/api/blob?key=${encodeKey(clickedBlob.key)}`);
264        const content = await response.text();
265        setSelectedBlob({ ...clickedBlob, key: decodeKey(clickedBlob.key) });
266        setEditContent(content);
267      } catch (error) {
268        console.error("Error fetching blob content:", error);
269      } finally {
270        setBlobContentLoading(false);
275  const handleSave = async () => {
276    try {
277      await fetch(`/api/blob?key=${encodeKey(selectedBlob.key)}`, {
278        method: "PUT",
279        body: editContent,
287  const handleDelete = async (key) => {
288    try {
289      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
290      setBlobs(blobs.filter(b => b.key !== key));
291      if (selectedBlob && selectedBlob.key === key) {
304        const key = `${searchPrefix}${file.name}`;
305        formData.append("key", encodeKey(key));
306        await fetch("/api/blob", { method: "POST", body: formData });
307        const newBlob = { key, size: file.size, lastModified: new Date().toISOString() };
308        setBlobs([newBlob, ...blobs]);
312      }
313    }
314    fetchBlobs();
315  };
316
326      try {
327        const fullKey = `${searchPrefix}${key}`;
328        await fetch(`/api/blob?key=${encodeKey(fullKey)}`, {
329          method: "PUT",
330          body: "",
341  const handleDownload = async (key) => {
342    try {
343      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
344      const blob = await response.blob();
345      const url = window.URL.createObjectURL(blob);
360    if (newKey && newKey !== oldKey) {
361      try {
362        const response = await fetch(`/api/blob?key=${encodeKey(oldKey)}`);
363        const content = await response.blob();
364        await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
365          method: "PUT",
366          body: content,
367        });
368        await fetch(`/api/blob?key=${encodeKey(oldKey)}`, { method: "DELETE" });
369        setBlobs(blobs.map(b => b.key === oldKey ? { ...b, key: newKey } : b));
370        if (selectedBlob && selectedBlob.key === oldKey) {
380    const newKey = `__public/${key}`;
381    try {
382      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
383      const content = await response.blob();
384      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
385        method: "PUT",
386        body: content,
387      });
388      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
389      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
390      if (selectedBlob && selectedBlob.key === key) {
399    const newKey = key.slice(9); // Remove "__public/" prefix
400    try {
401      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
402      const content = await response.blob();
403      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
404        method: "PUT",
405        body: content,
406      });
407      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
408      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
409      if (selectedBlob && selectedBlob.key === key) {

235
236// This is the entry point for HTTP vals
237export default app.fetch;

20    };
21
22    const response = await fetch(this.baseUrl, {
23      method: 'POST',
24      headers: {

93
94      // Call Anthropic API
95      const response = await fetch('https://api.anthropic.com/v1/messages', {
96        method: 'POST',
97        headers: {

1/** @jsxImportSource npm:hono/jsx **/
2
3import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=50";
4import { iframeHandler } from "https://esm.town/v/nbbaier/iframeHandler";
5import { resetStyle } from "https://esm.town/v/nbbaier/resetStyle";
16import { verifyToken } from "https://esm.town/v/pomdtr/verifyToken";
17import { ResultSet, sqlite } from "https://esm.town/v/std/sqlite";
18import { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave";
19import { Hono } from "npm:hono";
20import type { FC } from "npm:hono/jsx";
175});
176
177export const handler = app.fetch;
178export default iframeHandler(modifyFetchHandler(passwordAuth(handler, { verifyPassword: verifyToken })));

11}
12
13async function fetchRandomWikipediaArticle(): Promise<{ title: string; extract: string; pageId: number } | null> {
14  try {
15    const response = await fetch('https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&meta=&generator=random&formatversion=2&exsentences=1&explaintext=1&grnnamespace=0');
16    
17    if (!response.ok) {
32    return null;
33  } catch (error) {
34    console.error('Error fetching Wikipedia article:', error);
35    return null;
36  }
38
39export default async function(req: Request): Promise<Response> {
40  const article = await fetchRandomWikipediaArticle();
41  
42  if (!article) {
100    <div class="error-card">
101        <h1>Oops! Something went wrong</h1>
102        <p>Unable to fetch a Wikipedia article. Please try again.</p>
103        <a href="/" class="retry-link">Try Again</a>
104    </div>

5## Features
6
7- **Server-Side Rendering**: All content is fetched and rendered on the server - no JavaScript required
8- **Random Article Fetching**: Uses the Wikipedia API to fetch random articles on each page load
9- **Beautiful Design**: Dark gray background with light gray card featuring sharp corners and yellow drop shadow
10- **Smooth Animations**: CSS-only animations for the card entrance effect
16## How it Works
17
181. When a user visits the page, the server fetches a random Wikipedia article using the Wikipedia API
192. The server renders the complete HTML with the article title and first sentence extract embedded
203. The page displays immediately with a world icon as an SVG that links to the full article
36## Technical Implementation
37
38- **Server-Side Rendering**: Built as a TypeScript HTTP val that fetches Wikipedia data server-side
39- **No JavaScript**: Completely static HTML with CSS-only animations
40- **Wikipedia API Integration**: Fetches random articles using the Wikipedia API on the server
41- **Error Handling**: Proper error states with retry functionality
42- **Clean Architecture**: Separation of data fetching and HTML generation
43- **Performance**: Fast loading since no client-side API calls are needed
44

2import { email } from "https://esm.town/v/std/email?v=11";
3import { sqlite } from "https://esm.town/v/std/sqlite?v=5";
4import { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave";
5import { Hono } from "npm:hono@3";
6import locations from "../locations.json" with { type: "json" };
67    return profile;
68  } catch (e) {
69    console.error("Error fetching user profile:", e);
70    return null;
71  }
405join.get("/", Form);
406join.post("/", Submit);
407export default reloadOnSaveFetchMiddleware(join.fetch);

28});
29
30export default lastlogin(app.fetch);