64- Hono (server-side)
65- Tailwind CSS (styling)
66- Uses the Charlie's User Search API for fetching user val data
67- Uses Val Town's profile picture proxy for user avatars
68
4const app = new Hono();
5
6// API endpoint to fetch user profile data
7app.get("/api/profile/:username", async (c) => {
8 const username = c.req.param("username");
10 try {
11 // Call the user search API
12 const response = await fetch(
13 `https://charliesusersearch.val.run/?user=${username}`
14 );
15
16 if (!response.ok) {
17 return c.json({ error: "Failed to fetch user data" }, 500);
18 }
19
21 return c.json(data);
22 } catch (error) {
23 console.error("Error fetching user data:", error);
24 return c.json({ error: "Failed to fetch user data" }, 500);
25 }
26});
52});
53
54// HTTP vals expect an exported "fetch handler"
55// This is how you "run the server" in Val Town with Hono
56export default app.fetch;
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { fetchMoiConfig } from "../utils/moiConfig.tsx";
4
5interface Val {
45 };
46
47 // Attempt to fetch moi.md for this val if it doesn't have an image
48 useEffect(() => {
49 const fetchMoiData = async () => {
50 // Only try to fetch moi.md if there's no image_url
51 if (!val.image_url) {
52 try {
59 // Construct the base URL for the val/project
60 const baseUrl = urlParts.slice(0, xIndex + 3).join('/');
61 const config = await fetchMoiConfig(baseUrl);
62 setMoiConfig(config);
63 }
64 } catch (error) {
65 console.error("Error fetching moi.md for val:", error);
66 }
67 }
68 };
69
70 fetchMoiData();
71 }, [val.url, val.image_url]);
72
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { ValGrid } from "./ValGrid.tsx";
4import { fetchMoiConfig, getProfileImageUrl } from "../utils/moiConfig.tsx";
5
6interface UserProfileProps {
57
58 useEffect(() => {
59 const fetchUserProfile = async () => {
60 setLoading(true);
61 setError(null);
62
63 try {
64 // Fetch both user profile data and moi config in parallel
65 const [profileResponse, config] = await Promise.all([
66 fetch(`/api/profile/${username}?page=${currentPage}`),
67 fetchMoiConfig(`https://www.val.town/x/${username}/`)
68 ]);
69
72
73 if (!profileResponse.ok) {
74 throw new Error(`Failed to fetch profile data: ${profileResponse.statusText}`);
75 }
76
97 setProfileData(data);
98 } catch (err) {
99 console.error("Error fetching profile:", err);
100 setError(err instanceof Error ? err.message : "Unknown error occurred");
101 } finally {
104 };
105
106 fetchUserProfile();
107 }, [username, currentPage]);
108
78
79/**
80 * Fetch and parse moi.md for a project
81 * Returns the parsed configuration or null if not found or invalid
82 */
83export async function fetchMoiConfig(baseUrl: string): Promise<MoiConfig | null> {
84 try {
85 // Try to fetch the moi.md file from the project root
86 const response = await fetch(`${baseUrl}/moi.md`);
87
88 // If file doesn't exist, return null
94 return parseFrontmatter(content);
95 } catch (error) {
96 console.error("Error fetching moi.md:", error);
97 return null;
98 }
55}
56
57// Export the fetch handler for HTTP vals
58export default app.fetch;
59
892 const searchPattern = `%${searchText}%`;
893
894 // 3. Start all data fetching queries in parallel, regardless of result type
895 // This way we don't wait for counts to finish before starting data queries
896 const fileResultsPromise = (async () => {
27 if (userId && !processedUsers.has(userId)) {
28 try {
29 // Fetch user data
30 const user = await vt.users.retrieve(userId);
31
43 processedUsers.add(userId);
44 } catch (error) {
45 console.error(`Error fetching user ${userId}:`, error);
46 // Continue with val processing even if user fetch fails
47 }
48 }
1240 <h3>Try searching for:</h3>
1241 <div className="search-examples">
1242 <a href="?q=fetch" className="example-link">fetch</a>
1243 <a href="?q=api" className="example-link">api</a>
1244 <a href="?q=database" className="example-link">database</a>
1395 <h3>Try searching for:</h3>
1396 <div className="search-examples">
1397 <a href="?q=fetch" className="example-link">fetch</a>
1398 <a href="?q=api" className="example-link">api</a>
1399 <a href="?q=database" className="example-link">database</a>
6 let lastSearchTerm = '';
7 let debounceTimer;
8 let currentRequest = null; // To track the current fetch request
9 let requestCounter = 0; // To identify requests
10 let currentResults = [];
11 let selectedIndex = -1;
12
13 // Function to fetch typeahead results
14 async function fetchTypeahead(query) {
15 if (query.length < 1) {
16 hideResults();
32
33 try {
34 const response = await fetch(\`/typeahead?q=\${encodeURIComponent(query)}\`, { signal });
35 if (!response.ok) throw new Error('Network response was not ok');
36
51 // Ignore abort errors which happen when we cancel the request
52 if (error.name !== 'AbortError') {
53 console.error('Typeahead fetch error:', error);
54 }
55 } finally {
120 // If it's a new query (just one character), search immediately
121 if (query.length === 1) {
122 fetchTypeahead(query);
123 } else {
124 // Otherwise use debounce for better performance during typing
125 debounceTimer = setTimeout(() => {
126 fetchTypeahead(query);
127 }, 200); // Debounce delay
128 }