Val Town Code SearchReturn to Val Town

245                                    <li><i class="fas fa-check text-green-500 mr-2"></i> In-ground and above-ground options</li>
246                                    <li><i class="fas fa-check text-green-500 mr-2"></i> Various size and shape options</li>
247                                    <li><i class="fas fa-check text-green-500 mr-2"></i> Complete landscaping integration</li>
248                                </ul>
249                            </div>

130
131const loadEmoji = (code) => {
132  // const api = `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${code.toLowerCase()}.svg`
133  const api = `https://cdn.jsdelivr.net/gh/shuding/fluentui-emoji-unicode/assets/${code.toLowerCase()}_color.svg`
134  return fetch(api).then((r) => r.text())
135}
136

1# Image Self-Hosting Service
2
3This is a web application and API that allows you to host images in Val Town's blob storage, either by providing a URL or uploading directly from your device.
4
5## Features
8  - Upload images from a URL
9  - Upload images directly from your device
10- **API Access**:
11  - RESTful API for programmatic image hosting
12  - Comprehensive API documentation
13- **Image Management**:
14  - Permanent storage in Val Town's blob storage
253. **Access**:
26   - A permanent URL is generated for accessing the image
27   - The image can be embedded in websites, shared, or accessed via API
28
29## API Documentation
30
31### POST /api/upload
32
33Upload an image from a URL.
50```
51
52### GET /api/info
53
54Get information about a hosted image.

5  const path = url.pathname;
6  
7  // API endpoints
8  if (path.startsWith("/api/")) {
9    return handleApiRequest(req, path);
10  }
11  
12  // Documentation page
13  if (path === "/docs") {
14    return new Response(getApiDocsHtml(), {
15      headers: { "Content-Type": "text/html" }
16    });
97}
98
99// Handle API requests
100async function handleApiRequest(req: Request, path: string): Promise<Response> {
101  // API endpoint to upload image from URL
102  if (path === "/api/upload" && req.method === "POST") {
103    try {
104      const contentType = req.headers.get("Content-Type") || "";
119        
120        // Process the image URL
121        const result = await processImageUrlForApi(imageUrl);
122        return new Response(JSON.stringify(result), { 
123          status: result.success ? 200 : 400,
134      });
135    } catch (error) {
136      console.error("API error:", error);
137      return new Response(JSON.stringify({ 
138        success: false, 
145  }
146  
147  // API endpoint to get image info
148  if (path === "/api/info" && req.method === "GET") {
149    const url = new URL(req.url);
150    const key = url.searchParams.get("key");
185      });
186    } catch (error) {
187      console.error("API error:", error);
188      return new Response(JSON.stringify({ 
189        success: false, 
196  }
197  
198  // API endpoint not found
199  return new Response(JSON.stringify({ 
200    success: false, 
201    error: "API endpoint not found" 
202  }), { 
203    status: 404, 
242}
243
244// Process image URL and return API response
245async function processImageUrlForApi(imageUrl: string): Promise<any> {
246  try {
247    // Download the image
359    
360    <div class="mt-4 text-center">
361      <a href="/docs" class="text-blue-500 hover:underline">API Documentation</a>
362    </div>
363  </div>
421      
422      <div>
423        <h2 class="text-lg font-semibold mb-2">API Access</h2>
424        <div class="border border-gray-200 rounded-md p-2 break-all">
425          <code class="text-sm font-mono">GET /api/info?key=${hostedUrl.split('=')[1]}</code>
426        </div>
427        <a href="/docs" class="mt-2 text-blue-500 hover:underline text-sm">View API Documentation</a>
428      </div>
429    </div>
459}
460
461// HTML for the API documentation page
462function getApiDocsHtml(): string {
463  const baseUrl = new URL(import.meta.url).origin;
464  
468  <meta charset="UTF-8">
469  <meta name="viewport" content="width=device-width, initial-scale=1.0">
470  <title>Image Hosting API Documentation</title>
471  <script src="https://cdn.twind.style" crossorigin></script>
472  <script src="https://esm.town/v/std/catch"></script>
474<body class="bg-gray-100 min-h-screen p-4">
475  <div class="container mx-auto max-w-4xl bg-white p-8 rounded-lg shadow-md">
476    <h1 class="text-3xl font-bold mb-2">Image Hosting API Documentation</h1>
477    <p class="text-gray-600 mb-8">A simple API for hosting images in Val Town's blob storage</p>
478    
479    <div class="mb-8">
480      <h2 class="text-2xl font-bold mb-4">API Endpoints</h2>
481      
482      <div class="mb-8 border-b pb-8">
483        <div class="flex items-center mb-4">
484          <span class="bg-green-500 text-white px-3 py-1 rounded-md font-mono mr-3">POST</span>
485          <h3 class="text-xl font-semibold">/api/upload</h3>
486        </div>
487        
515        <div class="mb-4">
516          <h4 class="font-semibold mb-2">Example (cURL):</h4>
517          <pre class="bg-gray-100 p-4 rounded-md overflow-x-auto"><code>curl -X POST ${baseUrl}/api/upload \\
518  -H "Content-Type: application/json" \\
519  -d '{"url": "https://example.com/image.jpg"}'</code></pre>
524        <div class="flex items-center mb-4">
525          <span class="bg-blue-500 text-white px-3 py-1 rounded-md font-mono mr-3">GET</span>
526          <h3 class="text-xl font-semibold">/api/info</h3>
527        </div>
528        
557        <div class="mb-4">
558          <h4 class="font-semibold mb-2">Example (cURL):</h4>
559          <pre class="bg-gray-100 p-4 rounded-md overflow-x-auto"><code>curl "${baseUrl}/api/info?key=img_1234567890_abc123.jpg"</code></pre>
560        </div>
561      </div>

1export default async function() {
2  const res = await fetch(
3    "https://theavenuechurch.churchcenter.com/api/v1/registrations/opportunities?include=registration_forms,location",
4  );
5  const data = await res.json();

1# Framer Fetch: Basic
2
3A basic example of an API endpoint to use with Framer Fetch. 

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.

2
3/**
4 * Simple test to verify OpenAI API key is working
5 */
6export default async function(): Promise<Response> {
7  try {
8    // Check for OpenAI API key
9    const apiKey = Deno.env.get("OPENAI_API_KEY");
10    if (!apiKey) {
11      return new Response(JSON.stringify({
12        error: "OpenAI API key is missing",
13        message: "Please set the OPENAI_API_KEY environment variable in Val Town."
14      }), {
15        status: 500,
18    }
19
20    // Test OpenAI API
21    const openai = new OpenAI();
22    const completion = await openai.chat.completions.create({
30    return new Response(JSON.stringify({
31      success: true,
32      message: "OpenAI API key is working correctly",
33      response: completion.choices[0].message.content
34    }), {
37  } catch (error) {
38    return new Response(JSON.stringify({
39      error: "OpenAI API test failed",
40      message: error.message || "Unknown error"
41    }), {

13
14- `/course-generator.ts` - Core logic for generating course structures using OpenAI
15- `/frontend-handler.ts` - HTTP handler that serves the frontend and processes API requests
16- `/frontend/index.html` - Web interface for the course generator
17
254. View the generated course structure with modules and lessons
26
27### API Usage
28
29You can also use the course generator as an API:
30
31```javascript
32// Example API call
33const response = await fetch('YOUR_VAL_TOWN_URL', {
34  method: 'POST',
44## Response Format
45
46The API returns a JSON object with the following structure:
47
48```json
73## Requirements
74
75- OpenAI API key set as an environment variable in Val Town
76
77## Setup Instructions
78
791. In Val Town, go to your account settings
802. Add an environment variable named `OPENAI_API_KEY` with your OpenAI API key
813. Deploy both the course-generator.ts and frontend-handler.ts files with HTTP triggers
82
85If the application isn't generating any responses, check the following:
86
871. **OpenAI API Key**: Make sure you've set the `OPENAI_API_KEY` environment variable in Val Town
882. **Console Logs**: Check the Val Town logs for any error messages
893. **Browser Console**: Open your browser's developer tools to check for any JavaScript errors
904. **API Limits**: If you're using a free OpenAI API key, you might have hit your usage limits