Val Town Code SearchReturn to Val Town

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        }}

44  user: {
45    username: string;
46    profileImageUrl: string | null;
47  };
48  project: any;
50  return (
51    <div className="card">
52      {project.imageUrl ? (
53        <img src={project.imageUrl} className="card-image" />
54      ) : user.profileImageUrl ? (
55        <div className="card-image">
56          <img
57            src={user.profileImageUrl}
58            width="48"
59            height="48"
62        </div>
63      ) : (
64        <div className="card-image placeholder" />
65      )}
66      <div className="card-body">

73
74function Avatar ({ user }) {
75  if (!user?.profileImageUrl) {
76    return (
77      <div className="avatar" />
81  return (
82    <img
83      src={user.profileImageUrl}
84      alt={user.username}
85      width="32"