Val Town Code SearchReturn to Val Town

187## Val Town Platform Specifics
188- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
189- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
190- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`
191- **Storage:** DO NOT use the Deno KV module for storage
192- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods

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/`

10      href="/public/favicon.svg"
11      sizes="any"
12      type="image/svg+xml"
13    />
14    <link rel="preconnect" href="https://fonts.googleapis.com" />
36        height: 100%;
37        font-family: "Pixelify Sans", sans-serif;
38        image-rendering: pixelated;
39      }
40      body::before {
50      /* For pixel art aesthetic */
51      * {
52        image-rendering: pixelated;
53      }
54    </style>

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
87    if (document.body) {
88      document.body.style.backgroundColor = "#2D1700"; // Dark brown leather color
89    }
90
91    // Fetch avatar image
92    fetch("/api/images/stevens.jpg")
93      .then((response) => {
94        if (response.ok) return response.blob();
95        throw new Error("Failed to load avatar image");
96      })
97      .then((imageBlob) => {
98        const url = URL.createObjectURL(imageBlob);
99        setAvatarUrl(url);
100      })
104
105    // Fetch wood background
106    fetch("/api/images/wood.jpg")
107      .then((response) => {
108        if (response.ok) return response.blob();
109        throw new Error("Failed to load wood background");
110      })
111      .then((imageBlob) => {
112        const url = URL.createObjectURL(imageBlob);
113        setWoodUrl(url);
114
115        // Apply wood background to body
116        if (document.body) {
117          document.body.style.backgroundImage = `url(${url})`;
118        }
119      })
362      return {
363        position: SCENE_ELEMENTS.DESK_SITTING,
364        image: ASSETS.STEVENS_FRONT,
365        highlightElement: SCENE_ELEMENTS.DESK,
366        animationClass: "no-animation",
372      return {
373        position: SCENE_ELEMENTS.DESK_SITTING,
374        image: ASSETS.STEVENS_FRONT,
375        highlightElement: null,
376        animationClass: "no-animation",
387            y: SCENE_ELEMENTS.MAILBOX.y - 20,
388          },
389          image: ASSETS.STEVENS_BACK,
390          highlightElement: SCENE_ELEMENTS.MAILBOX,
391          animationClass: "walk-to-mailbox",
398            y: SCENE_ELEMENTS.CALENDAR.y + 30,
399          },
400          image: ASSETS.STEVENS_BACK,
401          highlightElement: SCENE_ELEMENTS.CALENDAR,
402          animationClass: "walk-to-calendar",
409            y: SCENE_ELEMENTS.TELEGRAM.y + 10,
410          },
411          image: ASSETS.STEVENS_BACK,
412          highlightElement: SCENE_ELEMENTS.TELEGRAM,
413          animationClass: "walk-to-telegram",
417        return {
418          position: SCENE_ELEMENTS.OUTSIDE,
419          image: ASSETS.STEVENS_FRONT,
420          highlightElement: null,
421          animationClass: "walk-to-outside",
425        return {
426          position: SCENE_ELEMENTS.DESK_SITTING,
427          image: ASSETS.STEVENS_FRONT,
428          highlightElement: SCENE_ELEMENTS.DESK,
429          animationClass: "walk-to-desk",
623          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4),
624            0 3px 8px rgba(0, 0, 0, 0.5);
625          image-rendering: pixelated;
626          cursor: pointer;
627          transition: transform 0.2s;
634        .notebook-pages {
635          background-color: #f8f1e0;
636          background-image: linear-gradient(#d6c6a5 1px, transparent 1px);
637          background-size: 100% 16px;
638          box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
639          image-rendering: pixelated;
640        }
641
652
653        .pixel-character {
654          image-rendering: pixelated;
655          position: absolute;
656          transition: left 0.7s ease-in-out, top 0.7s ease-in-out;
763          className="w-[512px] h-[512px] mx-auto relative"
764          style={{
765            backgroundImage: `url(${ASSETS.BACKGROUND})`,
766            backgroundSize: "cover",
767            backgroundPosition: "center",
768            imageRendering: "pixelated",
769          }}
770        >
799          {/* Stevens character */}
800          <img
801            src={stevensState.image}
802            alt="Stevens"
803            className={`pixel-character ${

2  // Background
3  BACKGROUND:
4    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8b501664-722e-4be8-cf71-83aab7756e00/public",
5
6  // Stevens
7  STEVENS_FRONT:
8    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8b8432bb-add2-44ad-bb12-44b8ea215500/public",
9  STEVENS_BACK:
10    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e28da8ab-7710-4b82-8e32-8fdf65c2ed00/public",
11  STEVENS_WALKING:
12    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/bd7b9997-09b2-4b35-6eb9-9975a85bb700/public",
13
14  // Mailman
15  MAILMAN_STANDING:
16    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/20a6493d-cc31-475e-aa83-ac97d317e400/public",
17  MAILMAN_WALKING:
18    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/61604576-8a83-4d85-d5e4-8e8e26641700/public",
19};
20

5import * as db from "./db.ts";
6import { embedMetadata, handleFarcasterEndpoints, name } from "./farcaster.ts";
7import { handleImageEndpoints } from "./image.tsx";
8
9const app = new Hono();
10
11handleImageEndpoints(app);
12handleFarcasterEndpoints(app);
13
44        <meta name="fc:frame" content={JSON.stringify(embedMetadata(baseUrl, path))} />
45        <link rel="icon" href={baseUrl + "/icon"} />
46        <meta property="og:image" content={baseUrl + "/image"} />
47      </head>
48      <body class="bg-white text-black dark:bg-black dark:text-white">

5import satori from "npm:satori";
6
7export function handleImageEndpoints(app: Hono) {
8  const headers = {
9    "Content-Type": "image/png",
10    "cache-control": "public, max-age=86400",
11  };
12  app.get("/image", async (c) => {
13    return c.body(await homeImage(), 200, headers);
14  });
15  app.get("/icon", async (c) => {
16    return c.body(await iconImage(), 200, headers);
17  });
18}
19
20export async function homeImage() {
21  return await ogImage(
22    <div tw="w-full h-full flex justify-start items-end text-[100px] bg-black text-white p-[50px]">
23      <div tw="flex flex-col items-start gap-[10px]">
31}
32
33export async function iconImage() {
34  return await ogImage(
35    <div tw="w-full h-full flex justify-center items-center text-[100px] bg-black text-white p-[50px]">
36      <img tw="w-[350px] h-[350px]" src={base64Icon(SquareDashed)} />
45//////////
46
47export async function ogImage(body, options = {}) {
48  const svg = await satori(
49    body,
57        if (code === "emoji") {
58          const unicode = segment.codePointAt(0).toString(16).toUpperCase();
59          return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode));
60        }
61        return "";
94  const base64 = Buffer.from(svg).toString("base64");
95  // console.log('getIconDataUrl', name, svg, base64)
96  return `data:image/svg+xml;base64,${base64}`;
97};

5export const name = "Mini App Starter";
6// export const iconUrl = "https://imgur.com/TrJLlwp.png";
7// export const ogImageUrl = "https://imgur.com/xKVOVUE.png";
8
9export function embedMetadata(baseUrl: string, path: string = "/") {
10  return {
11    version: "next",
12    imageUrl: baseUrl + "/image",
13    button: {
14      title: name,
17        name: name,
18        url: baseUrl + path,
19        splashImageUrl: baseUrl + "/icon",
20        splashBackgroundColor: "#111111",
21      },
55        "iconUrl": baseUrl + "/icon",
56        "homeUrl": baseUrl,
57        "splashImageUrl": baseUrl + "/icon",
58        "splashBackgroundColor": "#111111",
59        "primaryCategory": "developer-tools",

18      SUM(cache_write_tokens) as total_cache_write_tokens,
19      SUM(price) as total_price,
20      SUM(num_images) as total_images
21    FROM ${USAGE_TABLE}
22    WHERE our_api_token = 1
101          total_cache_write_tokens: userData.cache_write_tokens,
102          total_price: userData.price,
103          total_images: 0,
104          used_inference_data: true
105        });