Val Town Code SearchReturn to Val Town

135  const lastSunday = today.startOf("week").minus({ days: 1 });
136
137  // Fetch relevant memories using the utility function
138  const memories = await getRelevantMemories();
139

67  const [currentPage, setCurrentPage] = useState(1);
68
69  const fetchMemories = useCallback(async () => {
70    setLoading(true);
71    setError(null);
72    try {
73      const response = await fetch(API_BASE);
74      if (!response.ok) {
75        throw new Error(`HTTP error! status: ${response.status}`);
78      setMemories(data);
79    } catch (e) {
80      console.error("Failed to fetch memories:", e);
81      setError(e.message || "Failed to fetch memories.");
82    } finally {
83      setLoading(false);
86
87  useEffect(() => {
88    fetchMemories();
89  }, [fetchMemories]);
90
91  const handleAddMemory = async (e: React.FormEvent) => {
100
101    try {
102      const response = await fetch(API_BASE, {
103        method: "POST",
104        headers: { "Content-Type": "application/json" },
112      setNewMemoryTags("");
113      setShowAddForm(false);
114      await fetchMemories();
115    } catch (e) {
116      console.error("Failed to add memory:", e);
123
124    try {
125      const response = await fetch(`${API_BASE}/${id}`, {
126        method: "DELETE",
127      });
129        throw new Error(`HTTP error! status: ${response.status}`);
130      }
131      await fetchMemories();
132    } catch (e) {
133      console.error("Failed to delete memory:", e);
155
156    try {
157      const response = await fetch(`${API_BASE}/${editingMemory.id}`, {
158        method: "PUT",
159        headers: { "Content-Type": "application/json" },
164      }
165      setEditingMemory(null);
166      await fetchMemories();
167    } catch (e) {
168      console.error("Failed to update memory:", e);

143);
144
145// HTTP vals expect an exported "fetch handler"
146export default app.fetch;
147

163```
164
1655. **fetchTranspiledJavaScript** - Fetch and transpile TypeScript to JavaScript:
166```ts
167const jsCode = await fetchTranspiledJavaScript("https://esm.town/v/username/project/path/to/file.ts");
168```
169
242
243    // Inject data to avoid extra round-trips
244    const initialData = await fetchInitialData();
245    const dataScript = `<script>
246      window.__INITIAL_DATA__ = ${JSON.stringify(initialData)};
300
3015. **API Design:**
302   - `fetch` handler is the entry point for HTTP vals
303   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`
304   - Properly handle CORS if needed for external access

82  const [cookieAndTeaMode, setCookieAndTeaMode] = useState(false);
83
84  // Fetch images from backend instead of blob storage directly
85  useEffect(() => {
86    // Set default background color in case image doesn't load
89    }
90
91    // Fetch avatar image
92    fetch("/api/images/stevens.jpg")
93      .then((response) => {
94        if (response.ok) return response.blob();
103      });
104
105    // Fetch wood background
106    fetch("/api/images/wood.jpg")
107      .then((response) => {
108        if (response.ok) return response.blob();
129  }, []);
130
131  const fetchMemories = useCallback(async () => {
132    setLoading(true);
133    setError(null);
134    try {
135      const response = await fetch(API_BASE);
136      if (!response.ok) {
137        throw new Error(`HTTP error! status: ${response.status}`);
154      }
155    } catch (e) {
156      console.error("Failed to fetch memories:", e);
157      setError(e.message || "Failed to fetch memories.");
158    } finally {
159      setLoading(false);
162
163  useEffect(() => {
164    fetchMemories();
165  }, [fetchMemories]);
166
167  const handleAddMemory = async (e: React.FormEvent) => {
176
177    try {
178      const response = await fetch(API_BASE, {
179        method: "POST",
180        headers: { "Content-Type": "application/json" },
188      setNewMemoryTags("");
189      setShowAddForm(false);
190      await fetchMemories();
191    } catch (e) {
192      console.error("Failed to add memory:", e);
199
200    try {
201      const response = await fetch(`${API_BASE}/${id}`, {
202        method: "DELETE",
203      });
205        throw new Error(`HTTP error! status: ${response.status}`);
206      }
207      await fetchMemories();
208    } catch (e) {
209      console.error("Failed to delete memory:", e);
231
232    try {
233      const response = await fetch(`${API_BASE}/${editingMemory.id}`, {
234        method: "PUT",
235        headers: { "Content-Type": "application/json" },
240      }
241      setEditingMemory(null);
242      await fetchMemories();
243    } catch (e) {
244      console.error("Failed to update memory:", e);

234  const [isDragging, setIsDragging] = useState(false);
235
236  const fetchBlobs = useCallback(async () => {
237    setLoading(true);
238    try {
239      const response = await fetch(`/api/blobs?prefix=${encodeKey(searchPrefix)}&limit=${limit}`);
240      const data = await response.json();
241      setBlobs(data);
242    } catch (error) {
243      console.error("Error fetching blobs:", error);
244    } finally {
245      setLoading(false);
248
249  useEffect(() => {
250    fetchBlobs();
251  }, [fetchBlobs]);
252
253  const handleSearch = (e) => {
264      setBlobContentLoading(true);
265      try {
266        const response = await fetch(`/api/blob?key=${encodeKey(clickedBlob.key)}`);
267        const content = await response.text();
268        setSelectedBlob({ ...clickedBlob, key: decodeKey(clickedBlob.key) });
269        setEditContent(content);
270      } catch (error) {
271        console.error("Error fetching blob content:", error);
272      } finally {
273        setBlobContentLoading(false);
278  const handleSave = async () => {
279    try {
280      await fetch(`/api/blob?key=${encodeKey(selectedBlob.key)}`, {
281        method: "PUT",
282        body: editContent,
290  const handleDelete = async (key) => {
291    try {
292      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
293      setBlobs(blobs.filter(b => b.key !== key));
294      if (selectedBlob && selectedBlob.key === key) {
307        const key = `${searchPrefix}${file.name}`;
308        formData.append("key", encodeKey(key));
309        await fetch("/api/blob", { method: "POST", body: formData });
310        const newBlob = { key, size: file.size, lastModified: new Date().toISOString() };
311        setBlobs([newBlob, ...blobs]);
315      }
316    }
317    fetchBlobs();
318  };
319
329      try {
330        const fullKey = `${searchPrefix}${key}`;
331        await fetch(`/api/blob?key=${encodeKey(fullKey)}`, {
332          method: "PUT",
333          body: "",
344  const handleDownload = async (key) => {
345    try {
346      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
347      const blob = await response.blob();
348      const url = window.URL.createObjectURL(blob);
363    if (newKey && newKey !== oldKey) {
364      try {
365        const response = await fetch(`/api/blob?key=${encodeKey(oldKey)}`);
366        const content = await response.blob();
367        await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
368          method: "PUT",
369          body: content,
370        });
371        await fetch(`/api/blob?key=${encodeKey(oldKey)}`, { method: "DELETE" });
372        setBlobs(blobs.map(b => b.key === oldKey ? { ...b, key: newKey } : b));
373        if (selectedBlob && selectedBlob.key === oldKey) {
383    const newKey = `__public/${key}`;
384    try {
385      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
386      const content = await response.blob();
387      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
388        method: "PUT",
389        body: content,
390      });
391      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
392      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
393      if (selectedBlob && selectedBlob.key === key) {
402    const newKey = key.slice(9); // Remove "__public/" prefix
403    try {
404      const response = await fetch(`/api/blob?key=${encodeKey(key)}`);
405      const content = await response.blob();
406      await fetch(`/api/blob?key=${encodeKey(newKey)}`, {
407        method: "PUT",
408        body: content,
409      });
410      await fetch(`/api/blob?key=${encodeKey(key)}`, { method: "DELETE" });
411      setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));
412      if (selectedBlob && selectedBlob.key === key) {
838});
839
840export default lastlogin((request: Request) => app.fetch(request));

9
10  // Proxy the request to the old blog
11  const response = await fetch(
12    new Request(OLD_BLOG_URL + url.pathname + url.search, {
13      method: c.req.method,

32
33/**
34 * Creates a wrapper around a fetch handler that injects a script tag into HTML responses
35 *
36 * @param handler The original fetch handler function
37 * @param scriptContent The HTML content to inject
38 * @returns A new fetch handler with HTML rewriting capability
39 */
40export function injectHTML(

39});
40
41// Export the fetch handler for Val Town
42export default liveReload(app.fetch, import.meta.url);

83We didn't. We left them where they are, and proxy to them.
84
85Writing a proxy in Val Town (or any functions platform with the ['fetch handler' interface](https://blog.val.town/blog/the-api-we-forgot-to-name/)) is a delight:
86
87```ts
89export async function proxy(req: Request): Promise<Response> {
90  const url = new URL(req.url);
91  return fetch(OLD_BLOG_HOST + url.pathname + url.search, {
92    method: req.method,
93    headers: req.headers,