Val Town Code SearchReturn to Val Town

18});
19
20export function App() {
21  const [audio, setAudio] = useLocalStorage("AUDIO", false);
22  const user = useUser();

3const USER_ENDPOINT = "/api/user";
4
5export function useUser() {
6  const [data, setData] = useState<any>(null);
7  const [loading, setLoading] = useState(true);

4import { MessageContext } from  "./Messages.tsx";
5
6export function InlinePreview ({ part }) {
7  const project = useContext(ProjectContext);
8  const message = useContext(MessageContext);
73const SCREENSHOT_URL = "https://screenshots.valtown.net/screenshot.png";
74
75function getScreenshotURL ({
76  version,
77  endpoint,

19
20// alt single-column version of /chat route
21export function ChatRouteSingleColumn () {
22  const { projectId, branchId } = useParams() as {
23    projectId: string;
56}
57
58function Conversation ({
59  project,
60  files,
177}
178
179function shouldRefetch (message) {
180  for (let i = 0; i < message?.parts?.length; i++) {
181    let part = message.parts[i];

4
5- Ask clarifying questions when requirements are ambiguous
6- Provide complete, functional solutions rather than skeleton implementations
7- Test your logic against edge cases before presenting the final solution
8- Ensure all code follows Val Town's specific platform requirements
17- **Never bake in secrets into the code** - always use environment variables
18- Include comments explaining complex logic (avoid commenting obvious operations)
19- Follow modern ES6+ conventions and functional programming practices if possible
20
21## Types of triggers
28
29```ts
30export default async function (req: Request) {
31  return new Response("Hello World");
32}
42
43```ts
44export default async function () {
45  // Scheduled task code
46}
56
57```ts
58export default async function (email: Email) {
59  // Process email
60}
66## Val Town Standard Libraries
67
68Val Town provides several hosted services and utility functions.
69
70### Blob Storage
120```
121
122## Val Town Utility Functions
123
124Val Town provides several utility functions to help with common project tasks.
125
126### Importing Utilities
200│   ├── database/
201│   │   ├── migrations.ts    # Schema definitions
202│   │   ├── queries.ts       # DB query functions
203│   │   └── README.md
204│   └── routes/              # Route modules
219└── shared/
220    ├── README.md
221    └── utils.ts             # Shared types and functions
222```
223
226- Hono is the recommended API framework
227- Main entry point should be `backend/index.ts`
228- **Static asset serving:** Use the utility functions to read and serve project files:
229  ```ts
230  import { readFile, serveFile } from "https://esm.town/v/std/utils@85-main/index.ts";
260- Run migrations on startup or comment out for performance
261- Change table names when modifying schemas rather than altering
262- Export clear query functions with proper TypeScript typing
263
264## Common Gotchas and Solutions

507            <li><a href="#" class="text-gray-400 hover:text-white transition">Birthday Parties</a></li>
508            <li><a href="#" class="text-gray-400 hover:text-white transition">Private Events</a></li>
509            <li><a href="#" class="text-gray-400 hover:text-white transition">Corporate Functions</a></li>
510            <li><a href="#" class="text-gray-400 hover:text-white transition">Photography Services</a></li>
511            <li><a href="#" class="text-gray-400 hover:text-white transition">Catering Coordination</a></li>
527  <script>
528    // Booking form submission
529    document.getElementById('bookingForm').addEventListener('submit', async function(e) {
530      e.preventDefault();
531      
573    
574    // Contact form submission
575    document.getElementById('contactForm').addEventListener('submit', function(e) {
576      e.preventDefault();
577      
589    // Smooth scrolling for navigation links
590    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
591      anchor.addEventListener('click', function(e) {
592        e.preventDefault();
593        

react-router-data-mode-starterapi.tsx1 match

@jxnblk•Updated 2 days ago

1export default async function (req: Request): Promise<Response> {
2  // fake data API
3  return Response.json([

react-router-data-mode-starterroutes.tsx5 matches

@jxnblk•Updated 2 days ago

11const API_URL = "https://jxnblk--bc1e880c319511f0bf2d569c3dd06744.web.val.run";
12
13function HTML ({ children }: {
14  children: React.ReactNode;
15}) {
26}
27
28function Layout () {
29  return (
30    <HTML>
52}
53
54function Home () {
55  const [count, setCount] = React.useState(0);
56  return (
63}
64
65function About () {
66  const data = useLoaderData();
67  
74}
75
76async function catsLoader () {
77  const data = await fetch(API_URL)
78    .then(res => res.json());

369    <script>
370    document.addEventListener('DOMContentLoaded', () => {
371      // Tab switching functionality
372      const chatTab = document.getElementById('chat-tab');
373      const imageTab = document.getElementById('image-tab');
389      });
390      
391      // Chat functionality
392      const chatForm = document.getElementById('chat-form');
393      const userInput = document.getElementById('user-input');
394      const chatContainer = document.getElementById('chat-container');
395      
396      // Function to add a message to the chat
397      function addMessage(content, isUser = false) {
398        const messageDiv = document.createElement('div');
399        messageDiv.className = `message-bubble ${isUser ? 'user-message' : 'ai-message'} p-4 shadow-sm`;
403      }
404      
405      // Function to show loading indicator in chat
406      function showChatLoading() {
407        const loadingDiv = document.createElement('div');
408        loadingDiv.id = 'loading-indicator';
413      }
414      
415      // Function to remove loading indicator from chat
416      function hideChatLoading() {
417        const loadingIndicator = document.getElementById('loading-indicator');
418        if (loadingIndicator) {
463      });
464      
465      // Image Generator functionality
466      const imageForm = document.getElementById('image-form');
467      const imagePrompt = document.getElementById('image-prompt');
477      const errorTryAgain = document.getElementById('error-try-again');
478      
479      // Function to reset the image generator form
480      function resetImageGenerator() {
481        imageResult.style.display = 'none';
482        imageForm.style.display = 'block';
517            const img = new Image();
518            
519            img.onload = function() {
520              // Display the generated image
521              generatedImage.src = data.imageUrl;
528            };
529            
530            img.onerror = function() {
531              // Show error if image can't be loaded
532              imageLoading.style.display = 'none';

react-router-data-mode-starterhttp.tsx1 match

@jxnblk•Updated 2 days ago

11const CLIENT_MODULE = import.meta.resolve("./client.tsx");
12
13export default async function (req: Request): Promise<Response> {
14  const { query, dataRoutes } = createStaticHandler(routes);
15  const context = await query(req);