Val Town Code SearchReturn to Val Town

8  username: z.string(),
9  description: z.string().nullable(),
10  image_url: z.string().nullable(),
11  forked_branch_id: z.string().nullable(),
12  updated_at: z.string().datetime(),
36  username: string;
37  project_url: string;
38  image_url?: string | null;
39};
40
47  username: string | null;
48  bio: string | null;
49  profile_image_url: string | null;
50  url: string;
51  updated_at: string;
131  username: string;
132  url: string;
133  profile_image_url: string | null;
134  projectCount: number;
135};
139  username: string;
140  url: string;
141  image_url: string | null;
142  updated_at: string;
143};
165  project_url: string;
166  project_description: string | null;
167  user_profile_image_url: string | null;
168  update_count: number;
169  featured?: boolean; // For marking vals to be featured in newsletter
176  url: string;
177  description: string | null;
178  image_url: string | null;
179  user_profile_image_url: string | null;
180  edit_sessions: number; // Number of distinct edit sessions (grouped by timestamp)
181  file_count: number;

178
179- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
180- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
181- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
182- **Storage:** DO NOT use the Deno KV module for storage
183- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods

8import { fetchUsersById } from './neynar.ts'
9
10export function handleImageEndpoints(app: Hono) {
11  const headers = {
12    'Content-Type': 'image/png',
13    'cache-control': 'public, max-age=3600', // 86400
14  }
15  app.get('/image', async (c) => {
16    const channel = c.req.query('channel')
17    if (channel) return c.body(await spaceImage(channel), 200, headers)
18    return c.body(await homeImage(), 200, headers)
19  })
20  app.get('/icon', async (c) => {
21    const rounded = !!c.req.query('rounded')
22    return c.body(await iconImage(rounded), 200, headers)
23  })
24}
25
26export async function homeImage() {
27  return await ogImage(
28    <div tw="w-full h-full flex justify-start items-end text-[100px] bg-black text-white p-[50px]">
29      <div tw="flex flex-col items-start">
37}
38
39export async function spaceImage(channel: string) {
40  const space = await fetchSpace(channel)
41  if (!space) return await homeImage()
42
43  const users = await fetchUsersById([space.created_by, ...space.hosts, ...space.speakers].join(','))
48  const speakers = users?.filter((u) => speakerFids.includes(u.fid))
49
50  return await ogImage(
51    <div tw="w-full h-full flex justify-start items-start text-[100px] bg-black text-white p-[50px]">
52      <div tw="flex flex-col items-start ">
84}
85
86export async function iconImage(rounded = false) {
87  const roundedClass = rounded ? 'rounded-[96px]' : ''
88  return await ogImage(
89    <div tw={`w-full h-full flex justify-center items-center text-[100px] bg-[#7c65c1] text-white p-[50px] ${roundedClass}`}>
90      <img tw="w-[350px] h-[350px]" src={base64Icon(Mic)} />
99//////////
100
101export async function ogImage(body, options = {}) {
102  const svg = await satori(body, {
103    width: 945,
109      if (code === 'emoji') {
110        const unicode = segment.codePointAt(0).toString(16).toUpperCase()
111        return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode))
112      }
113      return ''
145  const base64 = Buffer.from(svg).toString('base64')
146  // console.log('getIconDataUrl', name, svg, base64)
147  return `data:image/svg+xml;base64,${base64}`
148}
149

5export const name = 'Spaces'
6// export const iconUrl = "https://imgur.com/FgHOubn.png";
7// export const ogImageUrl = "https://imgur.com/oLCWKFI.png";
8
9export function embedMetadata(baseUrl: string, path: string = '/') {
11  return {
12    version: 'next',
13    imageUrl: baseUrl + '/image' + (channel ? '?channel=' + channel : ''),
14    button: {
15      title: name,
18        name: name,
19        url: baseUrl + path,
20        splashImageUrl: baseUrl + '/icon',
21        splashBackgroundColor: '#111111',
22      },
47        iconUrl: baseUrl + '/icon',
48        homeUrl: baseUrl,
49        splashImageUrl: baseUrl + '/icon?rounded=1',
50        splashBackgroundColor: '#111111',
51        subtitle: 'Live audio conversations',

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    const rounded = !!c.req.query('rounded')
17    return c.body(await iconImage(rounded), 200, headers)
18  })
19}
20
21export async function homeImage() {
22  return await ogImage(
23    <div tw="w-full h-full flex justify-start items-end text-[100px] bg-black text-white p-[50px]">
24      <div tw="flex flex-col items-start">
32}
33
34export async function iconImage(rounded = false) {
35  const roundedClass = rounded ? 'rounded-[96px]' : ''
36  return await ogImage(
37    <div
38      tw={`w-full h-full flex justify-center items-center text-[100px] bg-[#7c65c1] text-white p-[50px] ${roundedClass}`}
49//////////
50
51export async function ogImage(body, options = {}) {
52  const svg = await satori(body, {
53    width: 945,
59      if (code === 'emoji') {
60        const unicode = segment.codePointAt(0).toString(16).toUpperCase()
61        return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode))
62      }
63      return ''
95  const base64 = Buffer.from(svg).toString('base64')
96  // console.log('getIconDataUrl', name, svg, base64)
97  return `data:image/svg+xml;base64,${base64}`
98}
99

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?rounded=1",
58        "splashBackgroundColor": "#111111",
59        "primaryCategory": "developer-tools",

7  return (
8    <div className="no-internet-container">
9      <img src="https://i.postimg.cc/t4q16WRj/images.png" alt="No Internet" />
10      <div className="no-internet-message">
11        No internet connection
20}
21
22function Slideshow({ images }) {
23  useEffect(() => {
24    let currentSlideIndex = 0;
70      slides[0].style.left = "0%";
71    }
72  }, []); // images dependency removed to run once, assuming images don't change post-mount
73
74  return (
75    <div className="slideshow-container">
76      {images.map((src, index) => (
77        <img key={index} className={`mySlides ${index === 0 ? "visible" : ""}`} src={src} alt={`Slide ${index + 1}`} />
78      ))}
593  }
594
595  const slideshowImages = [
596    "https://i.postimg.cc/KvSbQsgQ/download-4.png",
597    "https://i.postimg.cc/NMzVyLRp/download-5.png",
662          </div>
663        </div>
664        <Slideshow images={slideshowImages} />
665        <Card {...loginCardData} />
666        <Card {...scanCodeCardData} />

11## Example
12This val tracks mentions of "Val Town" on Hacker News and sends updates to a Discord webhook.
13![Screenshot 2025-01-12 at 10.57.48 AM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/5f26e9b0-cc80-473e-1e1d-db12ae487900/public)
14
15---
19### 1. Fork this Val
20To start using this template, fork this val by clicking the fork button at the top-right corner of the page.
21![Screenshot 2025-01-10 at 1.22.10 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c4ae349d-7e28-4378-8646-21c8958e1f00/public)
22
23---
24### 2. View Source Code
25<em>The `CODE` box shows you the the full source code of this val, you may need to scroll down to see it.</em>
26![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6a4dabb4-3b27-4cea-fce3-95a1a1c3cd00/public)
27
28---

15  price: number; // Price in Indian Rupees
16  description: string;
17  image_url: string;
18  duration: string;
19  highlights: string[];

5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>TravelEase - Your Ultimate Travel Companion</title>
7    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>✈️</text></svg>">
8    
9    <!-- TailwindCSS -->
51        
52        .travel-bg {
53            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23667eea' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
54        }
55    </style>