Val Town Code SearchReturn to Val Town

20### 2. HTTP Vals
21
22- Create web APIs and endpoints
23- Handle HTTP requests and responses
24- Example structure:
66- Generate code in TypeScript
67- Add appropriate TypeScript types and interfaces for all data structures
68- Prefer official SDKs or libraries than writing API calls directly
69- Ask the user to supply API or library documentation if you are at all unsure about it
70- **Never bake in secrets into the code** - always use environment variables
71- Include comments explaining complex logic (avoid commenting obvious operations)
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
193- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
194- **View Source:** Add a view source link with `import.meta.url.replace("esm.town", "val.town")` and include `target="_top"` attribute
195- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
196- **Error Handling:** Only use try...catch when there's a clear local resolution; avoid catches that merely log or return 500s - let errors bubble up with full context
197- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys
198- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
199- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
230
231### Backend (Hono) Best Practices
232- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)
233- Main entry point should be `backend/index.ts`
234- **Static asset serving:** Use the utility functions to read and serve project files:
251  });
252  ```
253- Create RESTful API routes for CRUD operations
254- Be careful with error handling as Hono tends to swallow errors
255- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
268- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
269- Follow the React component pattern from the example project
270- Handle API calls properly with proper error catching
271
272### Database Patterns
299   - For files in the project, use `readFile` helpers
300
3015. **API Design:**
302   - `fetch` handler is the entry point for HTTP vals
303   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

10import { NotebookView } from "./NotebookView.tsx";
11
12const API_BASE = "/api/memories";
13const MEMORIES_PER_PAGE = 20; // Increased from 7 to 20 memories per page
14
90
91    // Fetch avatar image
92    fetch("/api/images/stevens.jpg")
93      .then((response) => {
94        if (response.ok) return response.blob();
104
105    // Fetch wood background
106    fetch("/api/images/wood.jpg")
107      .then((response) => {
108        if (response.ok) return response.blob();
133    setError(null);
134    try {
135      const response = await fetch(API_BASE);
136      if (!response.ok) {
137        throw new Error(`HTTP error! status: ${response.status}`);
176
177    try {
178      const response = await fetch(API_BASE, {
179        method: "POST",
180        headers: { "Content-Type": "application/json" },
199
200    try {
201      const response = await fetch(`${API_BASE}/${id}`, {
202        method: "DELETE",
203      });
231
232    try {
233      const response = await fetch(`${API_BASE}/${editingMemory.id}`, {
234        method: "PUT",
235        headers: { "Content-Type": "application/json" },
606    <div className="font-pixel text-[#f8f1e0]">
607      <style jsx>{`
608        @import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap");
609
610        @tailwind base;

30  // This is a no-op if nothing's changed
31  if (!isEndpointSet) {
32    await bot.api.setWebhook(req.url, {
33      secret_token: SECRET_TOKEN,
34    });

1/**
2 * Remote HTTP Model Context Protocol (MCP) Server
3 * Uses streamable HTTP transport with raw Web API
4 * Exposes prompts, S3 resources, and tools for DynamoDB/S3 operations
5 */
55}
56
57// Main request handler using raw Web API
58export default async function handler(request: Request): Promise<Response> {
59  const url = new URL(request.url);

1import { email } from "https://esm.town/v/std/email?v=13";
2import { sqlite } from "https://esm.town/v/std/sqlite2?v=1";
3import { AtpAgent, AtpSessionData, AtpSessionEvent } from "npm:@atproto/api";
4import diff from "npm:fast-diff@1.3.0";
5
26
27  // Supports up to 5,000 (100*50) follows, stopping there to try
28  // and avoid rate limits. These APIs have pretty low limits, sound off here
29  // https://github.com/bluesky-social/atproto/discussions/3356
30  outerLoop: for (let i = 0; i < 20; i++) {

18I was an avid user of [ThinkUp](https://www.thinkupapp.com/), a tool that connected to Twitter and sent me a daily email with profile updates from all the people I followed. I found it useful in work and for fun. Maybe one of my friends switched jobs or changed their username to something goofy or political. I want to know! In the distant past Facebook would include profile updates in the newsfeed: why not that for Twitter? ThinkUp did some other cool stuff, like providing full archives of Tweets in a more convenient format than Twitter did themselves.
19
20But Twitter [is bad now](https://macwright.com/2025/03/04/twitter-eol) and ThinkUp [shut down in 2016](https://www.thinkupapp.com/) because [the APIs that they were relying on from Twitter, Facebook, and Instagram were all locked down and limited](https://medium.com/@anildash/the-end-of-thinkup-e600bc46cc56). How disappointing.
21
22But there's a new social network in town, [Bluesky](https://bsky.app/), and it's ~~impossible~~ somewhat more difficult to corrupt and enshittify than those networks were, and it comes with a pretty good, if sometimes weird API that gives you access to everything you need.
23
24Could you build some of ThinkUp on Bluesky? Yes. This is it.

2import { parseFeed } from "https://deno.land/x/rss@1.1.2/mod.ts";
3
4const API_KEY = Deno.env.get("API_KEY");
5const DEFAULT_LOOKBACK_DAYS = 90; // 3 months
6const MILLISECONDS_PER_DAY = 24 * 60 * 60 * 1000;
29  switch (pathname) {
30    case "/add":
31      if (!validateApiKey(req)) {
32        return new Response("Unauthorized", { status: 401 });
33      }
34      return await handleAdd(feedUrl);
35    case "/delete":
36      if (!validateApiKey(req)) {
37        return new Response("Unauthorized", { status: 401 });
38      }
186}
187
188function validateApiKey(req: Request): boolean {
189  const authHeader = req.headers.get("Authorization");
190  return authHeader === `Bearer ${API_KEY}`;
191}
192

15    const checkAuthStatus = async () => {
16      try {
17        const response = await fetch("/api/me");
18        if (response.ok) {
19          const userData = await response.json();

26app.route("/", authRoutes);
27
28// Protected API route to get current user
29app.get("/api/me", githubAuthMiddleware, async (c) => {
30  const user = c.get("user");
31  if (!user) {

88
89    // Fetch user data from GitHub
90    const userResponse = await fetch("https://api.github.com/user", {
91      headers: {
92        "Authorization": `Bearer ${tokenData.access_token}`,
98
99    // Fetch user email (might be private)
100    const emailResponse = await fetch("https://api.github.com/user/emails", {
101      headers: {
102        "Authorization": `Bearer ${tokenData.access_token}`,