Val Town Code SearchReturn to Val Town

60  const { ValTown } = await import("npm:@valtown/sdk");
61  const vt = new ValTown();
62  const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
63  // const authorEmail = me.email;
64
128
129  c.set("email", email);
130  c.set("profile", { profileImageUrl, username });
131  await next();
132};

437          {profile && (
438            <div className="flex items-center space-x-4">
439              <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
440              <span>{profile.username}</span>
441              <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
580                            alt="Blob content"
581                            className="max-w-full h-auto"
582                            onError={() => console.error("Error loading image")}
583                          />
584                        </div>
630                  <li>Create public shareable links for blobs</li>
631                  <li>View and manage public folder</li>
632                  <li>Preview images directly in the interface</li>
633                </ul>
634              </div>

1# Simple image generator
2
3A bit of a toy image creator that can be used anywhere images can be, but is intended for social share images in `og:image` or `twitter:image` meta tags.
4
5## Usage examples
7**In a live web page**
8
9- Live example https://tylergaw-socialimageusage.web.val.run/
10- Live example Val https://www.val.town/v/tylergaw.socialImageUsage
11
12## Code examples
14**Default**
15
16This will set the `og:image` of a web page to a png image of an orange 1200x600 pixel rectangle
17
18```html
19<meta property="og:image" content="https://tylergaw-socialimage.web.val.run/">
20```
21
22Works the same way as an embedded image
23
24```html
25<img src="https://tylergaw-socialimage.web.val.run/">
26```
27
33- `bg`: Sets the background color. Default `orange`. See Color format examples below for details
34- `color`: Sets the background color. Default `black`. See Color format examples below for details
35- `w`: Sets the width of the image. Default `1200`
36- `h`: Sets the height of the image. Default `600`
37- `text`: Sets the text displayed. Default `Wellow horld`
38
39```html
40<meta property="og:image" content="https://tylergaw-socialimage.web.val.run/?bg=pink&w=1000&h=400">
41```
42

1export const socialImage = async (req: Request) => {
2  const params = new URL(req.url).searchParams;
3  // Look for values form query params, set defaults
21    return new Response(canvas.toBuffer(), {
22      headers: {
23        "Content-Type": "image/png",
24      },
25    });

3rss generator that creates rss feeds for non-rss blogs
4
5![CleanShot 2025-08-02 at 06.18.39@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d79f00e6-05f9-4056-0d70-8d61514c0f00/public)
6
7#### adding new entries
14#### how it works
15
16![CleanShot 2025-08-02 at 06.41.28@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/26566824-95e7-47a3-8a6a-a45933894600/public)
17
18#### limitations

7// how to receive files in val town
8// create form in val town
9// check if file is an image file
10// read the file with exifreader
11
88        <main style={pageStyles.main}>
89          <h1>Serverless EXIF Reader</h1>
90          <p>Read EXIF data from an image file</p>
91          <p className="message">{message}</p>
92          <form
167
168  console.log(list);
169  // const imageDate = tags["DateTimeOriginal"].description;
170  // const unprocessedTagValue = tags["DateTimeOriginal"].value;
171  // send data values in tabular format

6export const desc = 'Farcaster Explorer'
7// export const iconUrl = "https://imgur.com/TrJLlwp.png";
8// export const ogImageUrl = "https://imgur.com/xKVOVUE.png";
9
10export function embedMetadata(baseUrl: string, path: string = '/') {
11  return {
12    version: 'next',
13    imageUrl: baseUrl + '/image?path=' + encodeURIComponent(path),
14    button: {
15      title: name,
18        name: name,
19        url: baseUrl + path,
20        splashImageUrl: baseUrl + '/icon?rounded=1',
21        splashBackgroundColor: '#111111',
22      },
46        iconUrl: baseUrl + '/icon',
47        homeUrl: baseUrl,
48        splashImageUrl: baseUrl + '/icon?rounded=1',
49        splashBackgroundColor: '#111111',
50        primaryCategory: 'social',

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

3This is a lightweight SQLite Admin interface to view and debug your SQLite data.
4
5![Screenshot 2023-12-08 at 13.35.04.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/ee9a9237-96a0-4276-60b5-aa8c56e49800/public)
6
7It's currently super limited (no pagination, editing data, data-type specific viewers), and is just a couple dozens lines of code over a couple different vals. Forks encouraged! Just comment on the val if you add any features that you want to share.

4  await sqlite.execute({
5    sql: `UPDATE rsvps 
6SET imageb64blob = imageb64 
7WHERE rowid IN (
8  SELECT rowid FROM rsvps 
9  WHERE imageb64blob IS NULL 
10  LIMIT 1000
11);`,
22        status TEXT NOT NULL,
23        color TEXT NOT NULL,
24        imageb64 TEXT
25      )
26    `,
77        const status = formData.get("status") as string;
78        const color = formData.get("color") as string;
79        const image = formData.get("image") as File;
80        let imageb64;
81        if (image) {
82          const reader = new FileReader();
83          reader.readAsDataURL(image);
84          imageb64 = await new Promise<string>((resolve, reject) => {
85            reader.onload = () => resolve(reader.result as string);
86            reader.onerror = reject;
108          await sqlite.execute({
109            sql:
110              "UPDATE rsvps SET name = ?, email = ?, status = ?, color = ?, imageb64blob = ? WHERE email = ?",
111            args: [name, email, status, color, imageb64 ?? null, email],
112          });
113
120          await sqlite.execute({
121            sql:
122              "INSERT INTO rsvps (name, email, status, color, imageb64blob) VALUES (?, ?, ?, ?, ?)",
123            args: [name, email, status, color, imageb64 ?? null],
124          });
125
133        return new Response("Method Not Allowed", { status: 405 });
134      }
135    case "/image":
136      if (req.method === "GET") {
137        // the index of the image is in the query string as "index"
138        const index = Number(url.searchParams.get("index"));
139        const result = await sqlite.execute({
140          sql: "SELECT imageb64blob FROM rsvps LIMIT 1 OFFSET ?",
141          args: [index],
142        });
143        const image = result.rows[0][0] as string;
144
145        return new Response(image, {
146          headers: {
147            "Cache-Control": "public, max-age=31536000, immutable",
155          <body>
156            <a href="/rsvps">RSVPs</a>
157            <a href="/images">Images</a>
158          </body>
159        </html>