Val Town Code SearchReturn to Val Town

27      title?: string;
28      author?: string;
29      coverImage?: string;
30    };
31    currentlyWatching?: {
32      title?: string;
33      platform?: string;
34      posterImage?: string;
35    };
36    profile_img?: string;
72            <div className="flex flex-col gap-4">
73              <div>
74                <label htmlFor="profile_img" className="text-sm font-medium text-neutral-800">Profile Image</label>
75                <input
76                  id="profile_img"
77                  type="file"
78                  name="profile_img"
79                  accept="image/*"
80                  className="py-2"
81                />
201              </div>
202              <div>
203                <label htmlFor="currentlyReadingCoverImage" className="text-sm font-medium text-neutral-800">Currently Reading Cover Image URL</label>
204                <input
205                  id="currentlyReadingCoverImage"
206                  type="text"
207                  name="currentlyReadingCoverImage"
208                  value={user.currentlyReading?.coverImage}
209                  className="w-full mt-1 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
210                  placeholder="Currently Reading Cover Image URL"
211                />
212              </div>
234              </div>
235              <div>
236                <label htmlFor="currentlyWatchingPosterImage" className="text-sm font-medium text-neutral-800">Currently Watching Poster Image URL</label>
237                <input
238                  id="currentlyWatchingPosterImage"
239                  type="text"
240                  name="currentlyWatchingPosterImage"
241                  value={user.currentlyWatching?.posterImage}
242                  className="w-full mt-1 px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
243                  placeholder="Currently Watching Poster Image URL"
244                />
245              </div>

6  const userResult = await sqlite.execute({
7    sql: `SELECT id, name, bio, username, email, location, currently_listening, currently_reading_title, 
8                 currently_reading_author, currently_reading_cover_image, currently_watching_title, 
9                 currently_watching_platform, currently_watching_poster_image, profile_theme, updated_at, profile_img 
10          FROM users WHERE username = ?`,
11    args: [username],
16  }
17
18  const [id, name, bio, usernameRetrieved, email, location, currentlyListening, currentlyReadingTitle, currentlyReadingAuthor, currentlyReadingCoverImage, currentlyWatchingTitle, currentlyWatchingPlatform, currentlyWatchingPosterImage, profile_theme, updated_at, profile_img] = userResult.rows[0];
19
20  const linksResult = await sqlite.execute({
25  const links = linksResult.rows.map(([id, label, url]) => ({ id, label, url }));
26
27  return { id, name, bio, username: usernameRetrieved, email, location, currentlyListening, currentlyReading: { title: currentlyReadingTitle || '', author: currentlyReadingAuthor || '', coverImage: currentlyReadingCoverImage || '' }, currentlyWatching: { title: currentlyWatchingTitle || '', platform: currentlyWatchingPlatform || '', posterImage: currentlyWatchingPosterImage || '' }, links, profile_theme, updated_at, profile_img };
28}
29
39  await sqlite.execute({
40    sql: `UPDATE users SET name = ?, bio = ?, location = ?, currently_listening = ?, currently_reading_title = ?, 
41                   currently_reading_author = ?, currently_reading_cover_image = ?, currently_watching_title = ?, 
42                   currently_watching_platform = ?, currently_watching_poster_image = ?, profile_theme = ?, 
43                   updated_at = CURRENT_TIMESTAMP WHERE id = ? profile_img = ?`,
44    args: [name, bio, location || null, currentlyListening || null, currentlyReading?.title || null, currentlyReading?.author || null, currentlyReading?.coverImage || null, currentlyWatching?.title || null, currentlyWatching?.platform || null, currentlyWatching?.posterImage || null, profile_theme || null, profile_img || userId],
45  });
46}
121
122
123export const uploadProfileImage = async (file, username) => {
124  const blobKey = `profile_img/${username}`;
125  const reader = new FileReader();
140
141
142export async function getProfileImageUrl(username) {
143  const key = `profile_img/${username}`;
144  const imageUrl = await blob.get(key);
145  return imageUrl;
146}
147

1/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
2import { getUserByUsername, updateUser, uploadProfileImage } from "https://esm.town/v/iamseeley/Queries";
3import EditProfilePage from "https://esm.town/v/iamseeley/EditProfilePage";
4import RootLayout from "https://esm.town/v/iamseeley/RootLayout";
41      title: body.currentlyReadingTitle,
42      author: body.currentlyReadingAuthor,
43      coverImage: body.currentlyReadingCoverImage,
44    };
45    const currentlyWatching = {
46      title: body.currentlyWatchingTitle,
47      platform: body.currentlyWatchingPlatform,
48      posterImage: body.currentlyWatchingPosterImage,
49    };
50    const profile_theme = body.profile_theme;
56    const existingUser = await getUserByUsername(username);
57
58    // Handle profile image upload
59    const profileImgFile = body.profile_img;
60    let profileImgUrl = existingUser.profile_img; // Default to existing image URL
61
62    if (profileImgFile && profileImgFile.size) {
63      profileImgUrl = await uploadProfileImage(profileImgFile, username);
64    }
65

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7Use this button to install the val:

1Fancy animated SVGs in readmes, along with centering and image sizing.
2```
3<div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div>

89    {
90      headers: {
91        "Content-Type": "image/svg+xml",
92      },
93    },

8      title?: string;
9      author?: string;
10      coverImage?: string;
11    };
12    currentlyWatching?: {
13      title?: string;
14      platform?: string;
15      posterImage?: string;
16    };
17  };
37          <div className="flex items-center">
38            <img
39              src={user.currentlyReading.coverImage}
40              alt={user.currentlyReading.title}
41              className="w-20 h-28 mr-4"
52          <div className="flex items-center">
53            <img
54              src={user.currentlyWatching.posterImage}
55              alt={user.currentlyWatching.title}
56              className="w-20 h-28 mr-4"

11  { name: 'currently_reading_title', type: 'TEXT' },
12  { name: 'currently_reading_author', type: 'TEXT' },
13  { name: 'currently_reading_cover_image', type: 'TEXT' },
14  { name: 'currently_watching_title', type: 'TEXT' },
15  { name: 'currently_watching_platform', type: 'TEXT' },
16  { name: 'currently_watching_poster_image', type: 'TEXT' },
17];
18

3import { blob } from "https://esm.town/v/std/blob?v=12";
4import { fileToDataURL } from "https://esm.town/v/stevekrouse/fileToDataURL";
5import { modifyImage } from "https://esm.town/v/stevekrouse/modifyImage";
6import { chat } from "https://esm.town/v/stevekrouse/openai";
7import { Hono } from "npm:hono@3";
23    <html>
24      <head>
25        <title>Image downsizer & saver</title>
26        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
27        <script src="https://cdn.tailwindcss.com" />
52                type="file"
53                id="file"
54                accept="image/*"
55                name="file"
56              />
101  console.log(key);
102
103  /* parse the mimetype out of file-image/png-blahblah */
104  const type = key.split("-")[1];
105

3import { blob } from "https://esm.town/v/std/blob?v=12";
4import { fileToDataURL } from "https://esm.town/v/stevekrouse/fileToDataURL";
5import { modifyImage } from "https://esm.town/v/stevekrouse/modifyImage";
6import { chat } from "https://esm.town/v/stevekrouse/openai";
7import { Hono } from "npm:hono@3";
23    <html>
24      <head>
25        <title>Image downsizer & saver</title>
26        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
27        <script src="https://cdn.tailwindcss.com" />
52                type="file"
53                id="file"
54                accept="image/*"
55                name="file"
56              />
101  console.log(key);
102
103  /* parse the mimetype out of file-image/png-blahblah */
104  const type = key.split("-")[1];
105