Val Town Code SearchReturn to Val Town

34  const useMiddleware = Array.isArray(opts); // for backwards compat
35  const options: ReactStreamOptions = !Array.isArray(opts) ? opts : {};
36  const { api, getInitialProps } = options;
37
38  if (typeof document !== "undefined" && module) {
48      // DEPRECATED (for backwards compat)
49      options.robots && robots(options.robots),
50      options.api && deprecatedCustomAPI(options.api),
51      options.getInitialProps && deprecatedGetInitiaProps(options.getInitialProps),
52      // New custom middleware
127// DEPRECATED
128// DEPRECATE (for backwards compat)
129const deprecatedCustomAPI = (api?: RequestHandler): Middleware => async (req, res, next) => {
130  if (!api) return next();
131  if (req.method === "GET") return next();
132  return api(req);
133};
134const deprecatedGetInitiaProps = (getProps: DataFetcher<any>): Middleware => async (req, res, next) => {
142  /** DEPRECATED: Optional text response for robots.txt */
143  robots?: string;
144  /** DEPRECATED: Optional API request handler for all non-GET methods */
145  api?: RequestHandler;
146  /** DEPRECATED: data fetcher to set initial props based on request */
147  getInitialProps?: DataFetcher<any>;

7```
8├── backend/
9│   └── index.ts             # Main API entry point using Hono
10├── frontend/
11│   ├── index.html           # Main HTML template
26  - Accessibility options
27  - "Find Hotels" button
28- API endpoints for:
29  - Hotel data
30  - Special offers
37- **Frontend**: HTML, CSS, and vanilla JavaScript
38- **Styling**: Custom CSS with responsive design
39- **API**: RESTful endpoints for data
40
41## How to Use
442. The application serves the frontend/index.html file at the root URL
453. Static assets are served from the /static route
464. API endpoints are available at /api/hotels and /api/offers
47
48## Development
532. Update styles in frontend/style.css
543. Modify JavaScript functionality in frontend/index.js
554. Extend the API by adding new endpoints in backend/index.ts
56
57## Notes

17});
18
19// API endpoint for hotel data
20app.get("/api/hotels", (c) => {
21  return c.json([
22    { id: 1, name: "Disneyland Hotel", price: 450 },
27});
28
29// API endpoint for offers
30app.get("/api/offers", (c) => {
31  return c.json([
32    { 

74    
75    try {
76      const response = await fetch('/api/hotels');
77      const hotels = await response.json();
78      
102  getOfferDetailsBtn.addEventListener('click', async () => {
103    try {
104      const response = await fetch('/api/offers');
105      const offers = await response.json();
106      const mainOffer = offers[0]; // Get the first offer (Anniversary offer)
114  viewAllOffersBtn.addEventListener('click', async () => {
115    try {
116      const response = await fetch('/api/offers');
117      const offers = await response.json();
118      

98- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`
99- **Storage:** DO NOT use the Deno KV module for storage
100- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
101- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
102- **View Source:** Add a view source link with `import.meta.url.replace("esm.town", "val.town")` and include `target="_top"` attribute
103- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
104- **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
105- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys
106- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
107- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
188
189### Backend (Hono) Best Practices
190- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)
191- Main entry point should be `backend/index.ts`
192- **Static asset serving:** Use the utility functions to read and serve project files:
209  });
210  ```
211- Create RESTful API routes for CRUD operations
212- Be careful with error handling as Hono tends to swallow errors
213- Consider re-throwing errors to see full stack traces:
226- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
227- Follow the React component pattern from the example project
228- Handle API calls properly with proper error catching
229
230### Database Patterns
257   - For files in the project, use `readFile` helpers
258
2595. **API Design:**
260   - `fetch` handler is the entry point for HTTP vals
261   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

4
5/**
6 * Plays a bell sound notification using the Web Audio API
7 * @returns A Promise that resolves when the sound has started playing
8 */
13      const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
14      if (!AudioContext) {
15        console.warn("Web Audio API not supported in this browser");
16        resolve();
17        return;
65
66/**
67 * Plays a simple notification sound using the Web Audio API
68 * This is a simpler, shorter bell sound
69 * @returns A Promise that resolves when the sound has started playing
75      const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
76      if (!AudioContext) {
77        console.warn("Web Audio API not supported in this browser");
78        resolve();
79        return;

43    
44    try {
45      const response = await fetch("/api/create-branch", {
46        method: "POST",
47        headers: {

37      setIsLoadingBranches(true);
38      try {
39        const response = await fetch(`/api/project-branches?projectId=${projectId}`, {
40          headers: {
41            "Authorization": `Bearer ${bearerToken}`,
107      const fetchBranches = async () => {
108        try {
109          const response = await fetch(`/api/project-branches?projectId=${projectId}`, {
110            headers: {
111              "Authorization": `Bearer ${bearerToken}`,

21});
22
23// API endpoint to crawl a website
24app.post("/api/crawl", async c => {
25  try {
26    const { url, depth = 3 } = await c.req.json();

14    
15    try {
16      const response = await fetch("/api/crawl", {
17        method: "POST",
18        headers: {