Val Town Code SearchReturn to Val Town

9import { useUsageStats } from "../hooks/useUsageStats.ts";
10import { Messages } from "./Messages.tsx";
11import { InputBox, ImageDropContainer } from "./InputBox.tsx";
12import { PreviewFrame } from "./PreviewFrame.tsx";
13import { BranchSelect } from "./BranchSelect.tsx";
66  refetch: () => void;
67}) {
68  const [images, setImages] = useState<(string|null)[]>([]);
69  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
70  const { audio, user } = useContext(AppContext);
84    branchId,
85    selectedFiles,
86    images,
87    soundEnabled: audio,
88  });
108
109  return (
110    <ImageDropContainer
111      running={running}
112      images={images}
113      setImages={setImages}>
114      <div className="single-column-container">
115        <div className="single-sticky-header">
119            rel="norefferer"
120            className="block-link text-link lockup">
121            {project.imageUrl ? (
122              <img src={project.imageUrl} className="image-thumbnail" />
123            ) : user?.profileImageUrl ? (
124              <img
125                src={user.profileImageUrl}
126                className="avatar"
127                alt={user.username}
130              />
131            ) : (
132              <div className="image-placeholder" />
133            )}
134            <div>{project.name}</div>
153            onSubmit={e => {
154              handleSubmit(e);
155              setImages([]);
156            }}
157            onCancel={handleStop}
158            running={running}
159            error={error}
160            images={images}
161            setImages={setImages}
162          />
163          <Footer />
164        </div>
165      </div>
166    </ImageDropContainer>
167  );
168}

187      title: "Visual Inspection - Arms at Sides",
188      description: "Stand in front of a mirror with your arms at your sides. Look for changes in size, shape, or skin texture.",
189      imageDescription: "Person standing with arms relaxed at sides, looking in mirror"
190    },
191    {
193      title: "Visual Inspection - Arms Raised",
194      description: "Raise your arms overhead and look for the same changes. Check for dimpling or puckering.",
195      imageDescription: "Person with arms raised above head, examining in mirror"
196    },
197    {
199      title: "Visual Inspection - Hands on Hips",
200      description: "Place your hands on your hips and press firmly to flex your chest muscles. Look for changes.",
201      imageDescription: "Person with hands on hips, pressing firmly"
202    },
203    {
205      title: "Physical Examination - Lying Down",
206      description: "Lie down and use your right hand to examine your left breast. Use the pads of your fingers in a circular motion.",
207      imageDescription: "Person lying down, using circular motions to examine breast"
208    },
209    {
211      title: "Physical Examination - Standing/Shower",
212      description: "Repeat the examination while standing or in the shower. Wet skin can make it easier to feel changes.",
213      imageDescription: "Person standing, performing breast examination"
214    },
215    {
217      title: "Nipple Examination",
218      description: "Gently squeeze each nipple to check for discharge. Report any discharge to your healthcare provider.",
219      imageDescription: "Gentle examination of nipple area"
220    }
221  ];

32  title: string;
33  description: string;
34  imageDescription: string; // Since we can't use images, we'll use descriptive text
35}
36

228      <div className="result-header">
229        <div className="result-header-content">
230          {result.image_url && (
231            <div className="project-image">
232              <img src={result.image_url} alt={result.project_name} />
233            </div>
234          )}
292      <div className="result-header">
293        <div className="result-header-content">
294          {result.image_url && (
295            <div className="project-image">
296              <img src={result.image_url} alt={result.name} />
297            </div>
298          )}
351      <div className="result-header">
352        <div className="user-header">
353          {result.profile_image_url && (
354            <div className="user-avatar">
355              <img src={result.profile_image_url} alt={result.username || "User"} />
356            </div>
357          )}
1224                          <a href="?q=api" className="example-link">api</a>
1225                          <a href="?q=database" className="example-link">database</a>
1226                          <a href="?q=image" className="example-link">image</a>
1227                          <a href="?q=function" className="example-link">function</a>
1228                          <a href="?q=discord" className="example-link">discord</a>
1289                                  <div className="contributor-header">
1290                                    <div className="contributor-avatar">
1291                                      {contributor.profile_image_url
1292                                        ? <img src={contributor.profile_image_url} alt={contributor.username} />
1293                                        : (
1294                                          <div
1337                                  rel="noopener noreferrer"
1338                                >
1339                                  <div className="project-image">
1340                                    {project.image_url
1341                                      ? <img src={project.image_url} alt={project.name} />
1342                                      : (
1343                                        <div
1378                        <a href="?q=api" className="example-link">api</a>
1379                        <a href="?q=database" className="example-link">database</a>
1380                        <a href="?q=image" className="example-link">image</a>
1381                        <a href="?q=function" className="example-link">function</a>
1382                        <a href="?q=discord" className="example-link">discord</a>
1419          <div className="val-meta">
1420            <span className="username">
1421              {val.user_profile_image_url && (
1422                <img 
1423                  src={val.user_profile_image_url} 
1424                  alt={val.username} 
1425                  className="profile-image"
1426                />
1427              )}
1472            <div className="project-meta">
1473              <div className="username">
1474                {project.user_profile_image_url && (
1475                  <img 
1476                    src={project.user_profile_image_url} 
1477                    alt="Profile" 
1478                    className="profile-image"
1479                  />
1480                )}
1824  }
1825  
1826  .profile-image {
1827    width: 20px;
1828    height: 20px;

430}
431
432.project-card .project-image {
433  width: 24px;
434  height: 24px;
439}
440
441.project-image img {
442  width: 100%;
443  height: 100%;
540}
541
542.search-result .project-image {
543  width: 60px;
544  height: 60px;
549}
550
551.project-image img {
552  width: 100%;
553  height: 100%;

37          username: user.username,
38          bio: user.bio,
39          profile_image_url: user.profileImageUrl,
40          url: user.url,
41          updated_at: new Date().toISOString(), // Using current time as the API doesn't provide updated_at
55      name: project.name,
56      description: project.description,
57      image_url: project.imageUrl,
58      username: project.author.username || "",
59      updated_at: mainBranch?.updatedAt || new Date().toISOString(),

119  fileCount: number;
120  url: string;
121  profile_image_url: string | null;
122  updated_at: string;
123}[]> {
128      COUNT(DISTINCT f.id) as file_count,
129      'https://val.town/u/' || p.username as url,
130      u.profile_image_url,
131      MAX(p.updated_at) as updated_at
132     FROM ${tablePrefix}_projects p
144    fileCount: Number(row.file_count),
145    url: String(row.url),
146    profile_image_url: row.profile_image_url ? String(row.profile_image_url) : null,
147    updated_at: String(row.updated_at)
148  }));
158  description: string | null;
159  url: string;
160  image_url: string | null;
161  updated_at: string;
162}[]> {
168      p.description,
169      p.url,
170      p.image_url,
171      p.updated_at
172     FROM ${tablePrefix}_projects p
184    description: row.description ? String(row.description) : null,
185    url: String(row.url),
186    image_url: row.image_url ? String(row.image_url) : null,
187    updated_at: String(row.updated_at)
188  }));
204    fileCount: number;
205    url: string;
206    profile_image_url: string | null;
207    updated_at: string;
208  }[];
213    description: string | null;
214    url: string;
215    image_url: string | null;
216    updated_at: string;
217  }[];
314      username TEXT,
315      bio TEXT,
316      profile_image_url TEXT,
317      url TEXT NOT NULL,
318      updated_at TIMESTAMP NOT NULL
328      forked_branch_id TEXT,
329      description TEXT,
330      image_url TEXT,
331      user_id TEXT,
332      FOREIGN KEY (user_id) REFERENCES ${tablePrefix}_users(id)
359  username: z.string().nullable(),
360  bio: z.string().nullable(),
361  profile_image_url: z.string().nullable(),
362  url: z.string(),
363  updated_at: z.string().datetime(),
370  username: z.string(),
371  description: z.string().nullable(),
372  image_url: z.string().nullable(),
373  forked_branch_id: z.string().nullable(),
374  updated_at: z.string().datetime(),
433    // Insert new user
434    await sqlite.execute(
435      `INSERT INTO ${tablePrefix}_users (id, username, bio, profile_image_url, url, updated_at)
436       VALUES (?, ?, ?, ?, ?, ?)`,
437      [
439        user.username,
440        user.bio,
441        user.profile_image_url,
442        user.url,
443        user.updated_at,
449    await sqlite.execute(
450      `UPDATE ${tablePrefix}_users
451       SET username = ?, bio = ?, profile_image_url = ?, url = ?, updated_at = ?
452       WHERE id = ?`,
453      [
454        user.username,
455        user.bio,
456        user.profile_image_url,
457        user.url,
458        user.updated_at,
498    // Insert new project
499    await sqlite.execute(
500      `INSERT INTO ${tablePrefix}_projects (id, url, name, username, updated_at, forked_branch_id, description, image_url, user_id)
501       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
502      [
508        project.forked_branch_id,
509        project.description,
510        project.image_url,
511        project.user_id
512      ],
517    await sqlite.execute(
518      `UPDATE ${tablePrefix}_projects
519       SET url = ?, name = ?, username = ?, updated_at = ?, forked_branch_id = ?, description = ?, image_url = ?, user_id = ?
520       WHERE id = ?`,
521      [
526        project.forked_branch_id,
527        project.description,
528        project.image_url,
529        project.user_id,
530        project.id
812
813  const result = await sqlite.execute(
814    `SELECT u.id, u.username, u.bio, u.profile_image_url, u.url, u.updated_at,
815      (SELECT COUNT(*) FROM ${tablePrefix}_projects p
816       WHERE p.user_id = u.id) as matchCount
827    username: z.string().nullable(),
828    bio: z.string().nullable(),
829    profile_image_url: z.string().nullable(),
830    url: z.string(),
831    updated_at: z.string().datetime(),
889      // Always launch the files query for the active type or for samples
890      const result = await sqlite.execute(
891        `SELECT f.*, p.name as project_name, p.url as project_url, p.username, p.description, p.image_url
892          FROM ${tablePrefix}_files f
893          JOIN ${tablePrefix}_projects p ON f.project_id = p.id
904        username: z.string(),
905        description: z.string().nullable(),
906        image_url: z.string().nullable(),
907      });
908
1062  project_url: string;
1063  project_description: string | null;
1064  user_profile_image_url: string | null;
1065  update_count: number;
1066}[]> {
1081      p.url as project_url,
1082      p.description as project_description,
1083      u.profile_image_url as user_profile_image_url,
1084      -- Use updated_at as a proxy for edit frequency
1085      1 as update_count
1103    project_url: String(row.project_url),
1104    project_description: row.project_description ? String(row.project_description) : null,
1105    user_profile_image_url: row.user_profile_image_url ? String(row.user_profile_image_url) : null,
1106    update_count: Number(row.update_count)
1107  }));
1122  url: string;
1123  description: string | null;
1124  image_url: string | null;
1125  user_profile_image_url: string | null;
1126  edit_sessions: number;
1127  file_count: number;
1140      p.url,
1141      p.description,
1142      p.image_url,
1143      u.profile_image_url as user_profile_image_url,
1144      COUNT(DISTINCT strftime('%Y-%m-%d %H:%M', f.updated_at)) as edit_sessions,
1145      COUNT(f.id) as file_count,
1163    url: String(row.url),
1164    description: row.description ? String(row.description) : null,
1165    image_url: row.image_url ? String(row.image_url) : null,
1166    user_profile_image_url: row.user_profile_image_url ? String(row.user_profile_image_url) : null,
1167    edit_sessions: Number(row.edit_sessions),
1168    file_count: Number(row.file_count),

3It's common to have code and types that are needed on both the frontend and the backend. It's important that you write this code in a particularly defensive way because it's limited by what both environments support:
4
5![shapes at 25-02-25 11.57.13.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/75db1d51-d9b3-45e0-d178-25d886c10700/public)
6
7For example, you *cannot* use the `Deno` keyword. For imports, you can't use `npm:` specifiers, so we reccomend `https://esm.sh` because it works on the server & client. You *can* use TypeScript because that is transpiled in `/backend/index.ts` for the frontend. Most code that works on the frontend tends to work in Deno, because Deno is designed to support "web-standards", but there are definitely edge cases to look out for.

21## `favicon.svg`
22
23As of this writing Val Town only supports text files, which is why the favicon is an SVG and not an .ico or any other binary image format. If you need binary file storage, check out [Blob Storage](https://docs.val.town/std/blob/).
24
25## `components/`

73});
74
75// --- Blob Image Serving Routes ---
76
77// GET /api/images/:filename - Serve images from blob storage
78app.get("/api/images/:filename", async (c) => {
79  const filename = c.req.param("filename");
80
81  try {
82    // Get image data from blob storage
83    const imageData = await blob.get(filename);
84
85    if (!imageData) {
86      return c.json({ error: "Image not found" }, 404);
87    }
88
90    let contentType = "application/octet-stream"; // Default
91    if (filename.endsWith(".jpg") || filename.endsWith(".jpeg")) {
92      contentType = "image/jpeg";
93    } else if (filename.endsWith(".png")) {
94      contentType = "image/png";
95    } else if (filename.endsWith(".gif")) {
96      contentType = "image/gif";
97    } else if (filename.endsWith(".svg")) {
98      contentType = "image/svg+xml";
99    }
100
101    // Return the image with appropriate headers
102    return new Response(imageData, {
103      headers: {
104        "Content-Type": contentType,
107    });
108  } catch (error) {
109    console.error(`Error serving image ${filename}:`, error);
110    return c.json(
111      { error: "Failed to load image", details: error.message },
112      500,
113    );