Val Town Code SearchReturn to Val Town

8import { type Memory } from "../../shared/types.ts";
9
10const API_BASE = "/api/memories";
11const MEMORIES_PER_PAGE = 20;
12
71    setError(null);
72    try {
73      const response = await fetch(API_BASE);
74      if (!response.ok) {
75        throw new Error(`HTTP error! status: ${response.status}`);
100
101    try {
102      const response = await fetch(API_BASE, {
103        method: "POST",
104        headers: { "Content-Type": "application/json" },
123
124    try {
125      const response = await fetch(`${API_BASE}/${id}`, {
126        method: "DELETE",
127      });
155
156    try {
157      const response = await fetch(`${API_BASE}/${editingMemory.id}`, {
158        method: "PUT",
159        headers: { "Content-Type": "application/json" },

18});
19
20// --- API Routes for Memories ---
21
22// GET /api/memories - Retrieve all memories
23app.get("/api/memories", async (c) => {
24  const memories = await getAllMemories();
25  return c.json(memories);
26});
27
28// POST /api/memories - Create a new memory
29app.post("/api/memories", async (c) => {
30  const body = await c.req.json<Omit<Memory, "id">>();
31  if (!body.text) {
36});
37
38// PUT /api/memories/:id - Update an existing memory
39app.put("/api/memories/:id", async (c) => {
40  const id = c.req.param("id");
41  const body = await c.req.json<Partial<Omit<Memory, "id">>>();
58});
59
60// DELETE /api/memories/:id - Delete a memory
61app.delete("/api/memories/:id", async (c) => {
62  const id = c.req.param("id");
63  try {
75// --- Blob Image Serving Routes ---
76
77// GET /api/images/:filename - Serve images from blob storage
78app.get("/api/images/:filename", async (c) => {
79  const filename = c.req.param("filename");
80

12      type="image/svg+xml"
13    />
14    <link rel="preconnect" href="https://fonts.googleapis.com" />
15    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
16    <link
17      href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap"
18      rel="stylesheet"
19    />

20### 2. HTTP Vals
21
22- Create web APIs and endpoints
23- Handle HTTP requests and responses
24- Example structure:
66- Generate code in TypeScript
67- Add appropriate TypeScript types and interfaces for all data structures
68- Prefer official SDKs or libraries than writing API calls directly
69- Ask the user to supply API or library documentation if you are at all unsure about it
70- **Never bake in secrets into the code** - always use environment variables
71- Include comments explaining complex logic (avoid commenting obvious operations)
190- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`
191- **Storage:** DO NOT use the Deno KV module for storage
192- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
193- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
194- **View Source:** Add a view source link with `import.meta.url.replace("esm.town", "val.town")` and include `target="_top"` attribute
195- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
196- **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
197- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys
198- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
199- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
230
231### Backend (Hono) Best Practices
232- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)
233- Main entry point should be `backend/index.ts`
234- **Static asset serving:** Use the utility functions to read and serve project files:
251  });
252  ```
253- Create RESTful API routes for CRUD operations
254- Be careful with error handling as Hono tends to swallow errors
255- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
268- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
269- Follow the React component pattern from the example project
270- Handle API calls properly with proper error catching
271
272### Database Patterns
299   - For files in the project, use `readFile` helpers
300
3015. **API Design:**
302   - `fetch` handler is the entry point for HTTP vals
303   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

10import { NotebookView } from "./NotebookView.tsx";
11
12const API_BASE = "/api/memories";
13const MEMORIES_PER_PAGE = 20; // Increased from 7 to 20 memories per page
14
90
91    // Fetch avatar image
92    fetch("/api/images/stevens.jpg")
93      .then((response) => {
94        if (response.ok) return response.blob();
104
105    // Fetch wood background
106    fetch("/api/images/wood.jpg")
107      .then((response) => {
108        if (response.ok) return response.blob();
133    setError(null);
134    try {
135      const response = await fetch(API_BASE);
136      if (!response.ok) {
137        throw new Error(`HTTP error! status: ${response.status}`);
176
177    try {
178      const response = await fetch(API_BASE, {
179        method: "POST",
180        headers: { "Content-Type": "application/json" },
199
200    try {
201      const response = await fetch(`${API_BASE}/${id}`, {
202        method: "DELETE",
203      });
231
232    try {
233      const response = await fetch(`${API_BASE}/${editingMemory.id}`, {
234        method: "PUT",
235        headers: { "Content-Type": "application/json" },
606    <div className="font-pixel text-[#f8f1e0]">
607      <style jsx>{`
608        @import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap");
609
610        @tailwind base;

109        path: "/docs",
110        method: "GET",
111        description: "Provides API documentation.",
112        response: "JSON object with details about available endpoints.",
113      },

1# Routes Directory
2
3This directory contains all the route handlers for the webhookAPI application. Each file exports a Hono app that handles a specific route or group of related routes.
4
5## Structure

4// Initialize Notion client
5const notion = new Client({
6  auth: Deno.env.get("NOTION_API_KEY"),
7});
8
37      // the block exists, so you can do the reset
38
39      // reset via the API
40      // this way we keep the notion data and the blob data (our cache) in sync
41      // the API resets the blocks on notion pages, and also knows what to do with the blob
42      // (note the x-blob-key header)
43      if (content != "default" && diffInMinutes > .5) {
48            "x-asking-for": "default",
49            "x-blob-key": item.key,
50            "x-api-key": Deno.env.get("X_API_KEY"),
51          },
52          body: JSON.stringify({

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

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