Val Town Code SearchReturn to Val Town

257We rob banks, but never get to keep the money.
258We steal money to buy coke, then sell the coke to make more money.
259Capital investment, man.
260Why bother? We could just steal it.
261No better way to steal than free enterprise.

230For what purpose?
231To go into business for ourselves.
232This ecto-containment system that Spengler and I have in mind is going to require a load of bread to capitalize. 
233Where are we going to get the money?
234I don't know.

1import { Hono } from "https://esm.sh/hono@3.11.7";
2import { getCreditAdditions } from "./api/credit-additions.ts";
3import { handleApiRequest } from "./api/index.ts";
4import { getInferenceCalls } from "./api/inference-calls.ts";
5import {
6  getInferenceCallsForRequest,
8  getRequestById,
9  getRequests,
10} from "./api/requests.ts";
11import { getUserSummary } from "./api/user-summary.ts";
12import { getValSummary } from "./api/val-summary.ts";
13import { basicAuthMiddleware } from "./auth.ts";
14import { renderCreditAdditions } from "./views/credit-additions.ts";
31});
32
33// API routes
34app.all("/api/*", async (c) => {
35  return handleApiRequest(c.req.raw);
36});
37

44);
45
46// token middleware for API requests
47app.all("/api/*", async (c, next) => {
48  if (c.req.path === "/api/stripe-webhook") {
49    return next();
50  }
58});
59
60app.route("/api", backend);
61
62app.get("/frontend/*", (c) => {

13- Generate code in TypeScript or TSX
14- Add appropriate TypeScript types and interfaces for all data structures
15- Prefer official SDKs or libraries than writing API calls directly
16- Ask the user to supply API or library documentation if you are at all unsure about it
17- **Never bake in secrets into the code** - always use environment variables
18- Include comments explaining complex logic (avoid commenting obvious operations)
23### 1. HTTP Trigger
24
25- Create web APIs and endpoints
26- Handle HTTP requests and responses
27- Example structure:
131Use GlobalRateLimitedChatOpenAI(model, requestsPerSecond) to enforce a global rate limit on chat completions, suitable for shared or public-facing endpoints.
132Val Town/Platform Notes
133Uses Val Town’s standard SQLite API for persistent storage.
134Designed for server-side use (no browser-specific code).
135No secrets are hardcoded; OpenAI API keys are managed by the OpenAI SDK/environment.
136
137### Email
200However, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.
201If you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page
202or by making an API request for it.
203
204## Val Town Platform Specifics
208- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
209- **Storage:** DO NOT use the Deno KV module for storage
210- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
211- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
212- **View Source:** Add a view source link by importing & using `import.meta.url.replace("ems.sh", "val.town)"` (or passing this data to the client) and include `target="_top"` attribute
213- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
214- **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
215- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys
216- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
217- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
251### Backend (Hono) Best Practices
252
253- Hono is the recommended API framework
254- Main entry point should be `backend/index.ts`
255- **Static asset serving:** Use the utility functions to read and serve project files:
275  });
276  ```
277- Create RESTful API routes for CRUD operations
278- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
279  ```ts
361   - For files in the project, use `readFile` helpers
362
3635. **API Design:**
364   - `fetch` handler is the entry point for HTTP vals
365   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

1import * as fs from "node:fs";
2import { AtpAgent, RichText } from "npm:@atproto/api";
3import { createClient } from "npm:@libsql/client";
4

18- Generate code in TypeScript or TSX
19- Add appropriate TypeScript types and interfaces for all data structures
20- Prefer official SDKs or libraries than writing API calls directly
21- Ask the user to supply API or library documentation if you are at all unsure about it
22- **Never bake in secrets into the code** - always use environment variables
23- Include comments explaining complex logic (avoid commenting obvious operations)
28### 1. HTTP Trigger
29
30- Create web APIs and endpoints
31- Handle HTTP requests and responses
32- Example structure:
163- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
164- **Storage:** DO NOT use the Deno KV module for storage
165- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
166- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
167- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
168- **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
169- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys
170- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
171- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
205### Backend (Hono) Best Practices
206
207- Hono is the recommended API framework
208- Main entry point should be `backend/index.ts`
209- Do NOT use Hono serveStatic middleware
230  });
231  ```
232- Create RESTful API routes for CRUD operations
233- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
234  ```ts
267   - For files in the project, use `readFile` helpers
268
2695. **API Design:**
270   - `fetch` handler is the entry point for HTTP vals
271   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

309    <div className="bg-white rounded-lg shadow-sm p-6">
310      <h2 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
311        🔍 Raw API Responses
312      </h2>
313      <p className="text-gray-600 mb-4 text-sm">
314        Click on any section below to view the raw JSON response from GitHub's API
315      </p>
316      <div className="space-y-4">
321              className="w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 rounded-t-lg flex items-center justify-between transition-colors"
322            >
323              <span className="font-semibold text-gray-700 capitalize">
324                {key} API Response ({key === 'user' ? '1 object' : `${Array.isArray(data) ? data.length : 1} items`})
325              </span>
326              <span className="text-gray-500">
339      </div>
340      <div className="mt-4 p-3 bg-blue-50 rounded-lg text-sm text-blue-800">
341        <strong>💡 API Information:</strong> This data is fetched from GitHub's REST API v3. 
342        The APIs used are: <code>/users/{`{username}`}</code>, <code>/users/{`{username}`}/repos</code>, 
343        and <code>/users/{`{username}`}/events/public</code>.
344      </div>
362
363    try {
364      const response = await fetch(`/api/user/${encodeURIComponent(searchUsername.trim())}`);
365      const data = await response.json();
366

18});
19
20// GitHub API interfaces
21interface GitHubUser {
22  login: string;
75}
76
77// Helper function to make GitHub API requests
78async function fetchGitHubAPI(endpoint: string): Promise<any> {
79  const headers: Record<string, string> = {
80    'Accept': 'application/vnd.github.v3+json',
88  }
89
90  const response = await fetch(`https://api.github.com${endpoint}`, {
91    headers
92  });
101      if (rateLimitRemaining === '0') {
102        const resetTime = rateLimitReset ? new Date(parseInt(rateLimitReset) * 1000).toLocaleTimeString() : 'unknown';
103        throw new Error(`GitHub API rate limit exceeded. Resets at ${resetTime}. Consider adding a GITHUB_TOKEN environment variable for higher limits.`);
104      }
105      throw new Error('GitHub API access forbidden. This might be due to rate limiting.');
106    }
107    throw new Error(`GitHub API error: ${response.status} ${response.statusText}`);
108  }
109
111}
112
113// API endpoint to fetch GitHub user profile data
114app.get("/api/user/:username", async c => {
115  try {
116    const username = c.req.param("username");
121
122    // Fetch user data
123    const userResponse = await fetchGitHubAPI(`/users/${username}`);
124    
125    // Fetch user's repositories (latest 10, sorted by updated)
126    const reposResponse = await fetchGitHubAPI(`/users/${username}/repos?sort=updated&per_page=10`);
127    
128    // Fetch user's recent public events (latest 10)
129    const eventsResponse = await fetchGitHubAPI(`/users/${username}/events/public?per_page=10`);
130
131    const profileData: GitHubProfileData = {
155});
156
157// Demo data for when API is rate limited
158function getDemoData(): GitHubProfileData {
159  const demoUser = {
189      updated_at: "2023-12-07T21:00:00Z",
190      created_at: "2011-01-26T19:01:12Z",
191      topics: ["octocat", "atom", "electron", "api"]
192    },
193    {
213      repo: {
214        name: "octocat/Hello-World",
215        url: "https://api.github.com/repos/octocat/Hello-World"
216      },
217      payload: {
229      repo: {
230        name: "github/docs",
231        url: "https://api.github.com/repos/github/docs"
232      },
233      payload: {}
240    events: demoEvents,
241    rawResponses: {
242      user: { ...demoUser, _note: "Demo data - API rate limited" },
243      repos: [...demoRepos],
244      events: [...demoEvents]
248
249// Health check endpoint
250app.get("/api/health", c => {
251  return c.json({ status: "ok", timestamp: new Date().toISOString() });
252});

1# GitHub User Profile Viewer
2
3A web application that displays comprehensive GitHub user profiles with detailed information cards and raw API responses.
4
5## Features
8- **Statistics**: Shows followers, following, public repos, and gists
9- **Activity Data**: Recent repositories and contribution stats
10- **Raw API Responses**: Shows all GitHub API responses used to build the profile
11- **Responsive Design**: Works on desktop and mobile devices
12
15```
16├── backend/
17│   └── index.ts          # Main API server with GitHub data fetching
18├── frontend/
19│   ├── index.html        # Main HTML template
23```
24
25## GitHub APIs Used
26
27- **User API**: `/users/{username}` - Basic user information
28- **User Repos API**: `/users/{username}/repos` - User's repositories
29- **User Events API**: `/users/{username}/events/public` - Recent activity
30
31## Usage
331. Enter a GitHub username in the search field
342. View the formatted profile card with user details
353. Scroll down to see raw API responses for transparency
36
37## Tech Stack
38
39- **Backend**: Hono (TypeScript API framework)
40- **Frontend**: React with TypeScript
41- **Styling**: TailwindCSS
42- **APIs**: GitHub REST API v4