Val Town Code SearchReturn to Val Town

79We rebuilt [Val Town Search](https://www.val.town/x/maxm/vtProjectSearch) for the multi-file vals. It's much faster and gives exact matches. (It runs on [Val Town SQLite](https://docs.val.town/std/sqlite/), and uses `like`.) It searches across public val source code, usernames, and our docs.
80
81<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/b29b046d-8662-48de-5d8f-a02f2795d700/public" style="max-width:80%; border: 1.5px solid #cfcfcf; padding-top:10px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; border-radius: 3px; margin-bottom:20px; display:block; margin-left: auto; margin-right: auto" />
82
83Search was built [100% open-source & in userspace](https://www.val.town/x/maxm/vtProjectSearch). With one-click, you can remix it to your account: it'll start reading from the public val firehose API, and index all public val code into your [Val Town SQLite](https://docs.val.town/std/sqlite/). If you want to make an improvement to search, or build something on top of that index, please do! The power of userspace 💪
154- [**cmknz**](https://www.val.town/u/cmknz) made [maine-bills-tax](https://www.val.town/x/cmknz/maine-bills-tax), which summarizes all of the current pending bills that could impact taxes in the State of Maine.
155- [**kamalnrf**](https://www.val.town/u/kamalnrf) made [MailGoat](https://www.val.town/x/kamalnrf/MailGoat), which automatically organizes your emails with custom labels.
156- [**Wolf**](https://www.val.town/u/wolf) made [instagramScraping](https://www.val.town/x/wolf/instagramScraping), which extracts image and caption data from Instagram posts.
157- [**colingourlay**](https://www.val.town/u/colingourlay) made [supernote-crosswords](https://www.val.town/x/colingourlay/supernote-crosswords), which uploads daily crosswords to your Supernote.
158- [**humbl**](https://www.val.town/u/humbl) made [figma-variables-manager](https://www.val.town/x/humbl/figma-variables-manager), a Figma plugin that syncs variables from external sources like Notion and Coda.

6---
7
8![street-blog-web.jpg](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4abb41d0-f710-46b4-523e-4440a252f400/public)
9
10We migrated our blog to Val Town 🥳
79## A fast migration
80
81How did we migrate 65 blog posts – with images, videos, and intricate formatting and styles – to an entirely new blog in a single day?
82
83We didn't. We left them where they are, and proxy to them.

3This val sends weekly messages about the change in user count in Clerk.
4
5![Screenshot 2025-07-08 at 14.33.09@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/abfd2d11-0c4b-48e9-b720-e50f72cd5000/public)
6
7## How it works

86    if (data.avatar !== undefined) {
87      // Handle avatar upload
88      if (data.avatar.startsWith("data:image")) {
89        // Extract base64 data
90        const base64Data = data.avatar.split(",")[1];
91        const imageData = atob(base64Data);
92        
93        // Save to blob storage
94        const avatarKey = `avatar_${user.id}_${Date.now()}.png`;
95        await blob.set(avatarKey, imageData);
96        
97        const avatarUrl = `https://toowired.val.run/blob/${avatarKey}`;

7your workspace.
8
9![test-message.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d10a52df-8920-4d46-1e03-fad0f847ae00/public)
10
11Read the full guide here: https://docs.val.town/integrations/slack/bot/

82      }
83      .grid-pattern {
84        background-image: linear-gradient(
85            rgba(0, 0, 0, 0.03) 1px,
86            transparent 1px

82      }
83      .grid-pattern {
84        background-image: linear-gradient(
85            rgba(0, 0, 0, 0.03) 1px,
86            transparent 1px

16  loginApiUrl: "https://example.com/api/login", // 登录接口的 URL
17  checkinApiUrl: "https://example.com/api/checkin", // 打卡接口的 URL
18  captchaImageUrl: "https://example.com/captcha.jpg", // 验证码图片的 URL (如果存在)
19  checkinSuccessText: "打卡成功", // 打卡成功的标志性文本
20};
53 */
54async function solveCaptcha() {
55  if (!config.captchaImageUrl) {
56    console.log("未配置验证码图片 URL, 跳过验证码识别.");
57    return null;
61    const solver = new TwoCaptcha.Solver(Deno.env.get("TWOCAPTCHA_API_KEY"));
62    console.log("正在识别验证码...");
63    const res = await solver.imageCaptcha({
64      body: await (await fetch(config.captchaImageUrl)).arrayBuffer(),
65    });
66    console.log(`验证码识别结果: ${res.data}`);

102        #god-ray-container { background: radial-gradient(circle, rgba(20,20,35,0.8) 0%, rgba(10,10,20,0.95) 60%); }
103        #god-ray-animator { position: relative; width: 1px; height: 1px; animation: rotate-container 20s linear infinite; }
104        .god-ray { position: absolute; top: 0; left: 0; width: 4px; height: 150vmax; transform-origin: top center; background-image: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0)); animation: ray-pulse 4s ease-in-out infinite alternate; }
105        @keyframes rotate-container { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
106        @keyframes ray-pulse {

3import { Link } from "react-router";
4import { PlusIcon, ArrowUpIcon, Square, XIcon } from "./icons.tsx";
5import { processFiles } from "../utils/images.ts";
6
7export function InputBox ({
12  running,
13  error,
14  images,
15  setImages,
16} : {
17  value: string;
21  running: boolean;
22  error: any;
23  images: (string|null)[];
24  setImages: (images: (string|null)[]) => void;
25}) {
26  const form = useRef(null);
62          />
63        </div>
64        <ImageRow images={images} setImages={setImages} />
65        <div className="toolbar">
66          <UploadButton
67            disabled={running}
68            images={images}
69            setImages={setImages}
70          />
71          <div className="spacer" />
94}
95
96export function ImageDropContainer ({
97  images,
98  setImages,
99  running,
100  children,
101}: {
102  images: (string|null)[];
103  setImages: (images: (string|null)[]) => void;
104  running: boolean;
105  children: React.ReactNode;
106}) {
107  const dragging = useImageDrop({ images, setImages, running });
108
109  return (
111      {children}
112      {dragging && (
113        <div className="image-drop-overlay">
114          <div className="image-drop-inner">
115            Drop images here to upload
116          </div>
117        </div>
121}
122
123export function useImageDrop ({ images, setImages, running }: {
124  images: (string|null)[];
125  setImages(images: (string|null)[]) => void;
126  running: boolean;
127}) {
149    setDragging(false);
150    if (e.dataTransfer?.files && !running) {
151      processFiles(Array.from(e.dataTransfer.files), images, setImages);
152    }
153  }
165      document.removeEventListener("drop", onDrop);
166    }
167  }, [images, setImages, running]);
168
169  return dragging;
170}
171
172function ImageRow ({ images, setImages }: {
173  images: (string|null)[];
174  setImages: (images: (string|null)[]) => void;
175}) {
176  return (
177    <div className="image-row">
178      {images.map((image, i) => (
179        <Thumbnail
180          key={i}
181          image={image}
182          onRemove={() => {
183            setImages([
184              ...images.slice(0, i),
185              ...images.slice(i + 1),
186            ]);
187          }}
192}
193
194function Thumbnail ({ image, onRemove }: {
195  image: string|null;
196  onRemove: () => void;
197}) {
198  if (!image) return null;
199
200  return (
201    <div className="input-image">
202      <img
203        src={image}
204        alt="User uploaded image"
205        className="image-thumbnail"
206      />
207      <button
208        type="button"
209        title="Remove image"
210        className="remove-image-button"
211        onClick={onRemove}
212      >
218
219function UploadButton ({
220  images,
221  setImages,
222  disabled,
223}: {
224  images: (string|null)[];
225  setImages: (images: (string|null)[]) => void;
226  disabled: boolean;
227}) {
232      <button
233        type="button"
234        title="Upload image"
235        disabled={disabled}
236        onClick={e => {
240        <PlusIcon />
241        <div className="sr-only">
242          Upload image
243        </div>
244      </button>
249        onChange={e => {
250          if (e.target.files) {
251            processFiles(Array.from(e.target.files), images, setImages);
252          }
253        }}