1import { createRoute } from "https://esm.sh/@hono/zod-openapi@0.18.4";
2import { ErrorSchema, NewUserSchema, 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, UserIdPathParamSchema, UserSchema } from "../schema.ts";
3
1import { createRoute, 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, UpdateUserSchema, UserIdPathParamSchema, UserSchema } from "../schema.ts";
3
fiberplaneHonoZodStarterschema.ts13 matches
1import { z } from "https://esm.sh/@hono/zod-openapi@0.18.4";
23// Schema that defines presence of an ID in the path
6.coerce
7.number()
8.openapi({ example: 1 }),
9});
1012export const NewUserSchema = z
13.object({
14name: z.string().min(2).max(50).openapi({ example: "Mark Scout" }),
15email: z.string().email().openapi({ example: "mark@lumen.co" }),
16age: z.number().int().min(18).max(120).openapi({ example: 35 }),
17}).openapi("NewUser");
1819// Schema that defines the response of a request to get a user
21.object({
22id: z.number().int(),
23name: z.string().openapi({ example: "Mark Scout" }),
24email: z.string().email().openapi({ example: "mark@lumen.co" }),
25age: z.number().int().openapi({ example: 35 }),
26}).openapi("User");
2728export const UpdateUserSchema = z
29.object({
30name: z.string().optional().openapi({
31example: "Marcus Scoutius",
32}),
33age: z.number().int().optional().openapi({
34example: 53,
35}),
36})
37.openapi("UpdateUser");
3839// Error schema
1import { z } from "https://esm.sh/@hono/zod-openapi@0.18.4";
2import { UserSchema } from "./schema.ts";
3
3This is a template for a [HONC](https://honc.dev) project inside ValTown. You should just be able to fork it and get going. It uses:
45- Hono for the API
6- Drizzle for the ORM
7- ValTown sqlite for the DB
8- ValTown as the Cloud
9- Fiberplane as the API Explorer
1011There's a list of example HONC apps for inspiration on GitHub: [here](https://github.com/fiberplane/awesome-honc) and [here](https://github.com/fiberplane/create-honc-app/tree/main/examples)
1import { createFiberplane, createOpenAPISpec } from "./deps/fiberplane.ts";
2import { Hono, HTTPException } from "./deps/hono.ts";
34import homePage from "./app/home.tsx";
5import type { AppType } from "./app/types.ts";
6import usersApi from "./app/users.ts";
7import { db } from "./db/client.ts";
8import { migrateDatabase } from "./db/migrate.ts";
22});
2324/** Mount the user management API at `/api/users` */
25app.route("/api/users", usersApi);
2627/** Render a Home page (example of using Hono with JSX) */
28app.route("/", homePage);
2930/** Create a simplified openapi spec that just lists the routes in our app */
31app.get("/openapi.json", async c => {
32return c.json(
33createOpenAPISpec(app, {
34openapi: "3.0.0",
35info: {
36title: "Honc D1 App",
4243/**
44* Mount the Fiberplane api playground
45* Visit /fp to view the UI
46*/
48"/fp/*",
49createFiberplane({
50openapi: { url: "/openapi.json" },
51}),
52);
63/**
64* Wrap the incoming request, inject the Deno env vars into the Hono app,
65* and then call the Hono api entrypoint (`app.fetch`)
66*/
67export default async function(req: Request): Promise<Response> {
68const env = Deno.env.toObject();
69// NOTE - Adding the entire env object will also expose the following values to your api handlers:
70//
71// * `valtown`
72// * `VAL_TOWN_API_KEY`
73// * `VALTOWN_API_URL`
74//
75// If you don't want those values, remove them from the env object
11},
12{
13"prompt": "weather dashboard for nyc using open-meteo API for NYC with icons",
14"title": "Weather App",
15"code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>NYC Weather</title>\n <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n <style>\n .weather-icon {\n font-size: 48px;\n margin-bottom: 16px;\n }\n </style>\n</head>\n<body class=\"h-screen bg-blue-100 flex justify-center items-center p-4\">\n <div class=\"bg-white p-8 rounded-md shadow-md w-full max-w-sm md:p-12 lg:p-16 xl:p-20\">\n <h1 class=\"text-2xl font-bold mb-4 text-center text-blue-500\">NYC Weather</h1>\n <div id=\"weather\" class=\"mb-4 p-4 text-center\">\n <div id=\"temperature\" class=\"text-4xl font-bold mb-4\"></div>\n <div id=\"condition\" class=\"text-xl font-medium mb-4\"></div>\n <div id=\"humidity\" class=\"text-lg font-light mb-2\">Humidity: <span id=\"humidity-value\"></span>%</div>\n <div id=\"wind\" class=\"text-lg font-light mb-2\">Wind: <span id=\"wind-value\"></span> mph</div>\n <i id=\"weather-icon\" class=\"weather-icon text-blue-500\"></i>\n </div>\n </div>\n <p class=\"fixed bottom-0 left-0 right-0 text-center p-4 text-gray-600 md:p-6 lg:p-8 xl:p-10\">\n Built on <a class=\"text-blue-600\" href=\"https://cerebrascoder.com\">Cerebras Coder</a>\n </p>\n\n <script>\n // Sample weather data\n const weatherData = {\n temperature: 75,\n condition: 'Sunny',\n humidity: 60,\n wind: 10,\n icon: 'sun'\n };\n\n document.getElementById('temperature').innerText = `${weatherData.temperature}°F`;\n document.getElementById('condition').innerText = weatherData.condition;\n document.getElementById('humidity-value').innerText = weatherData.humidity;\n document.getElementById('wind-value').innerText = weatherData.wind;\n\n // Map weather icon\n const weatherIcons = {\n 'sun': '☀',\n 'cloud': '☀',\n 'rain': '☃',\n 'snow': '☄'\n };\n\n document.getElementById('weather-icon').innerHTML = weatherIcons[weatherData.icon] || '';\n </script>\n</body>\n</html>",