Val Town Code SearchReturn to Val Town

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>

12}
13
14type ImageSummary = {
15  sender: string;
16  recipient: (typeof RECIPIENTS)[number] | "both" | "other";
22  anthropic: Anthropic,
23  htmlContent: string,
24  imageSummaries: ImageSummary[]
25) {
26  try {
36              text: `Analyze the following content from an email and provide a response as a JSON blob (only JSON, no other text) with two parts.
37
38                The email is from the USPS showing mail I'm receiving. Metadata about packages is stored directly in the email. Info about mail pieces is in images, so I've included summaries of those as well.
39
40                Your response should include:
66              And here is info about the mail pieces:
67
68              ${JSON.stringify(imageSummaries)}`,
69            },
70          ],
95  const anthropic = new Anthropic({ apiKey });
96
97  // Process each image attachment serially
98  const summaries = [];
99  for (const [index, attachment] of e.attachments.entries()) {
100    try {
101      const imageData = await attachment.arrayBuffer();
102      const base64Image = btoa(
103        String.fromCharCode(...new Uint8Array(imageData))
104      );
105
112            content: [
113              {
114                type: "image",
115                source: {
116                  type: "base64",
117                  media_type: attachment.type,
118                  data: base64Image,
119                },
120              },
148      summaries.push(parsedResponse);
149    } catch (error) {
150      console.error(`Image analysis error:`, error);
151      summaries.push({
152        sender: "Error",
153        recipient: "Error",
154        type: "error",
155        notes: `Image ${index + 1} Analysis Failed: ${error.message}`,
156      });
157    }

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

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

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 ${

381    "js": "application/javascript; charset=utf-8",
382    "json": "application/json; charset=utf-8",
383    "svg": "image/svg+xml",
384    "png": "image/png",
385    "jpg": "image/jpeg",
386    "jpeg": "image/jpeg",
387    "gif": "image/gif",
388    "ico": "image/x-icon",
389    "txt": "text/plain; charset=utf-8",
390    "md": "text/markdown; charset=utf-8",

30  - **`proxy.ts`**: Proxy to the old blog for legacy content
31  - **`rss.ts`**: RSS feed generation
32  - **`favicon.ts`** & **`og-image.ts`**: Asset routes
33- **`/utils/`**: Utility functions for post processing, caching, etc.
34- **`/posts/`**: Markdown files for blog posts
69- Tables
70- Lists
71- Images
72- And other standard markdown features
73
91- Efficient proxy for legacy content
92- Minimal CSS with no external frameworks
93- Optimized image handling
94
95## Deployment

4const LINE_HEIGHT = 72;
5
6export default function OGImage({
7  title = "Val Town Blog",
8  ...props

3import { Hono } from "https://esm.sh/hono@3.12.0";
4import { renderToStaticMarkup } from "https://esm.sh/react-dom@18.2.0/server";
5import OGImage from "../components/OGImage.tsx";
6
7const app = new Hono();
10  const title = c.req.query("title");
11  const format = c.req.query("format");
12  const svg = renderToStaticMarkup(<OGImage title={title} />);
13
14  if (format === "svg") {
15    return new Response(svg, {
16      headers: {
17        "Content-Type": "image/svg+xml",
18      },
19    });
24  return new Response(png, {
25    headers: {
26      "Content-Type": "image/png",
27      "Content-Length": png.length.toString(),
28    },

3import faviconRoute from "./routes/favicon.ts";
4import homeRoutes from "./routes/home.ts";
5import ogImageRoute from "./routes/og-image.ts";
6import proxyRoutes from "./routes/proxy.ts";
7import rssRoute from "./routes/rss.ts";
23app.route("/rss.xml", rssRoute);
24app.route("/favicon.svg", faviconRoute);
25app.route("/og-image.png", ogImageRoute);
26app.route("/", blogRoutes);
27