Val Town Code SearchReturn to Val Town

41    const fetchAttachments = async () => {
42      try {
43        const response = await fetch("/api/attachments");
44        if (!response.ok) {
45          throw new Error("Failed to fetch attachments");
166                  <div className="flex space-x-2">
167                    <a 
168                      href={`/api/attachments/${selectedAttachment}?download=true`}
169                      download
170                      className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 flex items-center"
198                </div>
199                <iframe 
200                  src={`/api/attachments/${selectedAttachment}`}
201                  className={`w-full ${isFullscreen ? 'h-[calc(100vh-60px)]' : 'h-[75vh]'} border-0`}
202                  title="Document Viewer"

1import { createRoute } from "https://esm.sh/@hono/zod-openapi@0.18.4";
2import { ErrorSchema, UpdateUserSchema, UserIdPathParamSchema, UserSchema } from "../schema.ts";
3

1import { z } from "https://esm.sh/@hono/zod-openapi@0.18.4";
2
3// Schema that defines presence of an ID in the path
6    .coerce
7    .number()
8    .openapi({ example: 1 }),
9});
10
12export const NewUserSchema = z
13  .object({
14    name: z.string().min(2).max(50).openapi({ example: "Mark Scout" }),
15    email: z.string().email().openapi({ example: "mark@lumen.co" }),
16    age: z.number().int().min(18).max(120).openapi({ example: 35 }),
17  }).openapi("NewUser");
18
19// Schema that defines the response of a request to get a user
21  .object({
22    id: z.number().int(),
23    name: z.string().openapi({ example: "Mark Scout" }),
24    email: z.string().email().openapi({ example: "mark@lumen.co" }),
25    age: z.number().int().openapi({ example: 35 }),
26  }).openapi("User");
27
28export const UpdateUserSchema = z
29  .object({
30    name: z.string().optional().openapi({
31      example: "Marcus Scoutius",
32    }),
33    age: z.number().int().optional().openapi({
34      example: 53,
35    }),
36  })
37  .openapi("UpdateUser");
38
39// Error schema

1**Example Hono-Zod-OpenAPI app with a Fiberplane API explorer.**
2
3> For an example with regular-old Hono, see: https://www.val.town/v/fiberplane/fiberplaneHonoStarter
8  ```
9
102. Expose your OpenAPI spec
11  ```ts
12  app.doc("/doc", {
13    openapi: "3.0.0",
14    info: {
15      title: "User Management API",
16      version: "v1.0.0",
17    },
19  ```
20
213. Mount the api explorer
22
23  This will mount it at the root `/*`, but you can mount it to another route, like `/fp/*` if you 
24  are using `/` for your main app. We recommend `/` if your Hono app is an API without a frontend.
25
26  ```ts  
28    "/*",
29    createFiberplane({
30      openapi: { url: "/doc" },
31    }),
32  );
33  ```
34
354. Visit your Val's root route to play with the API explorer!
36
37## How it Works
38
39`createFiberplane` mounts Fiberpalne at the root route (`/`), which can be used to explore the api's routes and make requests.
40Think of it like an embedded, lightweight postman.

1import { createRoute, z } from "https://esm.sh/@hono/zod-openapi@0.18.4";
2import { UserSchema } from "../schema.ts";
3

1import { createFiberplane } from "https://esm.sh/@fiberplane/hono@0.4.4";
2import { swaggerUI } from "https://esm.sh/@hono/swagger-ui@0.2.0";
3import { OpenAPIHono } from "https://esm.sh/@hono/zod-openapi@0.18.4";
4import { HTTPException } from "https://esm.sh/hono@4.7.0/http-exception";
5
6import { createUser, deleteUser, filterUsersByName, findUserById, updateUser } from "./helpers.ts";
7import { superProtectedApi } from "./protected/api.ts";
8import { createUserRoute } from "./routes/create-user.ts";
9import { deleteUserRoute } from "./routes/delete-user.ts";
14import type { AppType } from "./types.ts";
15
16const app = new OpenAPIHono<AppType>();
17
18app.openapi(getUserRoute, (c) => {
19  // This id is coerced to a number by the Zod schema for path parameters
20  // See: `UserIdPathParamSchema` in `schema.ts`
30});
31
32app.openapi(listUsersRoute, (c) => {
33  const { name } = c.req.valid("query");
34
38});
39
40app.openapi(createUserRoute, (c) => {
41  const { name, email, age } = c.req.valid("json");
42
46});
47
48app.openapi(updateUserRoute, (c) => {
49  const { id } = c.req.valid("param");
50  const { name, age } = c.req.valid("json");
59});
60
61app.openapi(deleteUserRoute, (c) => {
62  const { id } = c.req.valid("param");
63
73});
74
75// Mount an API with bearer auth
76app.route("/protected", superProtectedApi);
77
78// Create OpenAPI documentation
79app.doc("/openapi.json", {
80  openapi: "3.0.0",
81  info: {
82    title: "User Management API",
83    version: "v1.0.0",
84  },
86
87// Swagger UI
88app.get("/docs", swaggerUI({ url: "/openapi.json" }));
89
90// Mount the Fiberplane UI at the root to be able to test api endpoints
91app.use(
92  "/*",
93  createFiberplane({
94    openapi: { url: "/openapi.json" },
95  }),
96);

1import { z } from "https://esm.sh/@hono/zod-openapi@0.18.4";
2import { UserSchema } from "./schema.ts";
3

1import { createRoute } from "https://esm.sh/@hono/zod-openapi@0.18.4";
2import { ErrorSchema, UserIdPathParamSchema, UserSchema } from "../schema.ts";
3

1import { createRoute } from "https://esm.sh/@hono/zod-openapi@0.18.4";
2import { ErrorSchema, UserIdPathParamSchema } from "../schema.ts";
3

1import { createRoute } from "https://esm.sh/@hono/zod-openapi@0.18.4";
2import { ErrorSchema, NewUserSchema, UserIdPathParamSchema, UserSchema } from "../schema.ts";
3