Val Town Code SearchReturn to Val Town

5## Structure
6
7- `index.ts` - Main entry point for the Hono API server
8- `database/` - Database setup and queries
9  - `migrations.ts` - Database schema definitions
10  - `queries.ts` - Database query functions
11
12## API Endpoints
13
14### Users
15
16- `GET /api/users` - Get all users
17- `POST /api/users` - Create a new user
18  - Body: `{ "username": "string" }`
19
20### Jobs
21
22- `GET /api/jobs` - Get all job listings
23- `POST /api/jobs` - Create a new job listing
24  - Body: 
25    ```json
36### Messages
37
38- `GET /api/messages` - Get chat messages
39  - Query params: `limit` (optional, default: 50)
40- `POST /api/messages` - Send a new chat message
41  - Body: `{ "content": "string", "username": "string" }`

81}
82
83// API calls
84async function fetchJobs() {
85  try {
86    const response = await fetch('/api/jobs');
87    if (!response.ok) throw new Error('Failed to fetch jobs');
88    
97async function fetchMessages(limit = 50) {
98  try {
99    const response = await fetch(`/api/messages?limit=${limit}`);
100    if (!response.ok) throw new Error('Failed to fetch messages');
101    
117async function createUser(username) {
118  try {
119    const response = await fetch('/api/users', {
120      method: 'POST',
121      headers: { 'Content-Type': 'application/json' },
136async function createJob(jobData) {
137  try {
138    const response = await fetch('/api/jobs', {
139      method: 'POST',
140      headers: { 'Content-Type': 'application/json' },
155async function sendMessage(content) {
156  try {
157    const response = await fetch('/api/messages', {
158      method: 'POST',
159      headers: { 'Content-Type': 'application/json' },

15## Project Structure
16
17- `/backend` - Hono API server and database logic
18- `/frontend` - HTML, CSS, and client-side JavaScript
19- `/shared` - Shared types and utilities

232    }
233    
234    // Function to capitalize first letter
235    function capitalize(word) {
236      return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
237    }
257        
258        // Format as Word99Word!
259        const formattedPassword = \`\${capitalize(word1)}99\${capitalize(word2)}!\`;
260        
261        // Update the password field

6
7- Generates passwords using the format: Word99Word!
8- Sources random words from the dinopass.com API
9- Extracts whole words from the dinopass response
10- Capitalizes the first letter of each word
11- Modern UI with a copy-to-clipboard function
12- Responsive design that works on all devices
161. When the "Generate Password" button is clicked, the app fetches a simple password from dinopass.com
172. It extracts two whole words from the response
183. It formats them as Word99Word! (with capitalized first letters)
194. The password is displayed in the input field
205. Users can copy the password to clipboard with the copy button
23
24- Built with vanilla JavaScript and Tailwind CSS
25- Uses the dinopass.com API to source random words
26- Implements a modern, accessible UI
27- Includes error handling for API failures
28- Provides visual feedback for copy operations
29

132      const startTime = Date.now();
133      
134      // Process the text - either via direct API or server proxy
135      let result;
136      let metadata = {
141      };
142      
143      // Check if we're using direct API connection
144      const apiKeyInput = document.getElementById("apiKey") as HTMLInputElement;
145      if (apiKeyInput && apiKeyInput.value && localStorage.getItem("useDirectApi") === "true") {
146        // Process directly with OpenAI API
147        const prompt = createPromptForScriptType(
148          text, 
163      } else {
164        // Use the server proxy
165        const response = await fetch("/api/process", {
166          method: "POST",
167          body: formData
319  const temperatureSlider = document.getElementById("temperature") as HTMLInputElement;
320  const temperatureValue = document.getElementById("temperatureValue") as HTMLSpanElement;
321  const apiKeyInput = document.getElementById("apiKey") as HTMLInputElement;
322  const useApiKeyBtn = document.getElementById("useApiKeyBtn") as HTMLButtonElement;
323  const showDebugConsoleCheckbox = document.getElementById("showDebugConsole") as HTMLInputElement;
324  const resetSettingsBtn = document.getElementById("resetSettingsBtn") as HTMLButtonElement;
325  
326  if (!advancedOptionsBtn || !advancedOptions || !temperatureSlider || !temperatureValue || 
327      !apiKeyInput || !useApiKeyBtn || !showDebugConsoleCheckbox || !resetSettingsBtn) {
328    console.error("Advanced options elements not found");
329    return;
340  });
341  
342  // Handle API key
343  useApiKeyBtn.addEventListener("click", () => {
344    const apiKey = apiKeyInput.value.trim();
345    
346    if (!apiKey) {
347      alert("Please enter an API key");
348      return;
349    }
350    
351    if (!apiKey.startsWith("sk-")) {
352      alert("Invalid API key format. OpenAI API keys start with 'sk-'");
353      return;
354    }
355    
356    try {
357      // Set the API key in the connector
358      openAIConnector.setApiKey(apiKey);
359      
360      // Store the preference (but not the key itself)
361      localStorage.setItem("useDirectApi", "true");
362      
363      useApiKeyBtn.textContent = "✓ Using Key";
364      useApiKeyBtn.classList.add("bg-green-50", "text-green-700", "border-green-300");
365      useApiKeyBtn.classList.remove("bg-white", "text-gray-700", "border-gray-300");
366      
367      setTimeout(() => {
368        useApiKeyBtn.textContent = "Use Key";
369        useApiKeyBtn.classList.remove("bg-green-50", "text-green-700", "border-green-300");
370        useApiKeyBtn.classList.add("bg-white", "text-gray-700", "border-gray-300");
371      }, 2000);
372    } catch (error) {
373      alert(`Error setting API key: ${error instanceof Error ? error.message : "Unknown error"}`);
374    }
375  });
376  
377  // Check if we have a stored preference
378  if (localStorage.getItem("useDirectApi") === "true") {
379    apiKeyInput.placeholder = "API key will be used if provided";
380  }
381  
391  // Reset settings
392  resetSettingsBtn.addEventListener("click", () => {
393    // Reset API key preference
394    localStorage.removeItem("useDirectApi");
395    apiKeyInput.value = "";
396    apiKeyInput.placeholder = "sk-...";
397    
398    // Reset temperature
727    
728    try {
729      const response = await fetch("/api/detect-type", {
730        method: "POST",
731        headers: {
757/**
758 * Create a prompt based on script type
759 * This is a duplicate of the server-side function to enable direct API calls
760 */
761function createPromptForScriptType(
1045      readabilityTarget: (document.getElementById("readabilityTarget") as HTMLSelectElement)?.value,
1046      toneAdjustment: (document.getElementById("toneAdjustment") as HTMLSelectElement)?.value,
1047      useDirectApi: localStorage.getItem("useDirectApi") === "true",
1048      timestamp: new Date().toISOString()
1049    };
1117          }
1118          
1119          if (settings.useDirectApi !== undefined) {
1120            localStorage.setItem("useDirectApi", settings.useDirectApi.toString());
1121          }
1122          

440
441function ProductCarousel({ children }: { children: React.ReactNode }) {
442  const [emblaRef, emblaApi] = useEmblaCarousel({
443    axis: "x",
444    loop: false,
465
466  useEffect(() => {
467    if (emblaApi) {
468      scrollByRef.current = (delta: number) => {
469        isScrollingRef.current = true;
470        const scrollResult = emblaApi.scrollTo(emblaApi.selectedScrollSnap() + Math.sign(delta));
471
472        if (scrollResult && typeof scrollResult.then === "function") {
479      };
480
481      const rootNode = emblaApi.rootNode();
482      rootNode.addEventListener("wheel", onWheel, { passive: false });
483      rootNode.style.overflowY = "auto";
488      };
489    }
490  }, [emblaApi, onWheel]);
491
492  return (
690
691    const script = document.createElement("script");
692    script.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyAOtUMb5jLTjTVM7iKzIx2SJ3HgMKNcM7U&libraries=places`;
693    script.async = true;
694    script.defer = true;
814          // Reverse geocode the coordinates to get an address
815          const response = await fetch(
816            `https://maps.googleapis.com/maps/api/geocode/json?latlng=${position.coords.latitude},${position.coords.longitude}&key=AIzaSyAOtUMb5jLTjTVM7iKzIx2SJ3HgMKNcM7U`,
817          );
818          const data = await response.json();
1184});
1185
1186app.post("/api", async (c) => {
1187  console.log(c.req.body);
1188  return c.json({ ok: true });

2import { readFile, serveFile, parseProject } from "https://esm.town/v/std/utils@85-main/index.ts";
3import { runMigrations } from "./database/migrations.ts";
4import apiRoutes from "./routes/api.ts";
5
6// Initialize the app
38});
39
40// API routes
41app.route("/api", apiRoutes);
42
43// Serve static files

30    
31    try {
32      const response = await fetch(`/api/contacts/${contact.id}/interactions`);
33      const result = await response.json();
34      
54  const handleAddInteraction = async (interaction: Interaction) => {
55    try {
56      const response = await fetch("/api/interactions", {
57        method: "POST",
58        headers: { "Content-Type": "application/json" },
83    
84    try {
85      const response = await fetch(`/api/interactions/${id}`, {
86        method: "DELETE"
87      });
222                    <div>
223                      <div className="flex items-center">
224                        <span className="font-medium capitalize">
225                          {interaction.type}
226                        </span>

21    try {
22      const url = query 
23        ? `/api/contacts?q=${encodeURIComponent(query)}` 
24        : "/api/contacts";
25      
26      const response = await fetch(url);
64  const handleAddContact = async (contact: Contact) => {
65    try {
66      const response = await fetch("/api/contacts", {
67        method: "POST",
68        headers: { "Content-Type": "application/json" },
89    
90    try {
91      const response = await fetch(`/api/contacts/${contact.id}`, {
92        method: "PUT",
93        headers: { "Content-Type": "application/json" },
115    
116    try {
117      const response = await fetch(`/api/contacts/${id}`, {
118        method: "DELETE"
119      });
235                  // Refresh the selected contact
236                  if (selectedContact.id) {
237                    fetch(`/api/contacts/${selectedContact.id}`)
238                      .then(res => res.json())
239                      .then(result => {