Val Town Code SearchReturn to Val Town

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

17  let html = await readFile("/frontend/index.html", import.meta.url);
18
19  const response = await fetch(`/api/demo/${id}`);
20  const initialData = await response.json();
21
87// Client-side event recording
88window.recordClick = function (action) {
89  fetch(`/api/setAction`, {
90    method: "POST",
91    headers: { "Content-Type": "application/json" },
103
104```
105├── backend/                 # Server-side logic and API routes
106│   ├── controllers/         # Business logic for Notion integration
107│   ├── crons/              # Scheduled tasks for cache management
108│   ├── routes/             # HTTP route handlers
109│   │   ├── api/            # JSON API endpoints
110│   │   ├── tasks/          # Notion webhook handlers
111│   │   └── views/          # HTML page serving
121### Backend (`/backend`)
122
123Handles all server-side operations including API routes, Notion integration, and static file serving. Built with Hono for routing and includes authentication middleware.
124
125### Frontend (`/frontend`)
134
135- **Val Town & Deno**: Serverless runtime environment with TypeScript support
136- **Notion Client**: Official npm library for Notion API integration
137- **Hono**: Lightweight web framework for routing and middleware
138- **Blob Storage**: Val Town's built-in caching solution for performance optimization
170
171// Route modules
172app.route("/api", api); // JSON API endpoints
173app.route("/tasks", tasks); // Notion webhook handlers
174app.route("/demo", demo); // Demo page serving
175```
176
177#### API Routes (`/api`)
178
179Serve JSON data and handle CRUD operations for demo management, cobrowsing status, and user interactions.
241```typescript
242const notion = new Client({
243  auth: Deno.env.get("NOTION_API_KEY"),
244});
245
249Required environment variables:
250
251- `NOTION_API_KEY`: Notion integration token
252- `GLANCE_DEMOS_DB_ID`: Notion database ID for demo pages
253- `GLANCE_INTERACTIONS_DB_ID`: Notion database ID for interaction tracking
289Different route areas serve specific purposes:
290
291- `/api/*`: JSON data endpoints for frontend consumption
292- `/demo/*`: Personalized demo page serving with data injection
293- `/tasks/*`: Notion webhook processing and database updates

12
13      // check the boolean to see if a Glancer has enabled the link to start a cobrowsing session
14      const resp = await fetch("/api/cobrowse/" + window.__DEMO_ID__, {
15        method: "GET",
16        headers: {

7
8// Import route modules
9import api from "./routes/api/api.routes.ts";
10import auth from "./routes/auth.ts";
11import root from "./routes/root.routes.ts";
34
35// Mount route modules
36app.route("/api", api);
37app.route("/tasks", tasks);
38app.route("/demo", demo);

9    <script src="https://cdn.tailwindcss.com"></script>
10    <link
11      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
12      rel="stylesheet"
13    />

5// Initialize Notion client
6const notion = new Client({
7  auth: Deno.env.get("NOTION_API_KEY"),
8});
9
11  return {
12    status: "connected",
13    message: "Successfully connected to Notion API",
14    databases: response.results.map((db) => ({
15      title: db.title?.[0]?.plain_text || "Untitled",

6// Initialize Notion client
7const notion = new Client({
8  auth: Deno.env.get("NOTION_API_KEY"),
9});
10