deno-hono

📁 intellicode/skills 📅 11 days ago

总安装量

周安装量

#59778

全站排名

安装命令

npx skills add https://github.com/intellicode/skills --skill deno-hono

Agent 安装分布

opencode 3

antigravity 3

claude-code 3

github-copilot 3

codex 3

kimi-cli 3

Skill 文档

Deno Hono

Quick Start

deno task dev    # Start dev server with file watching
deno fmt        # Format code
deno lint        # Check for issues

Project Structure

src/
âââ index.tsx        # Main entry - all routes defined here
âââ components/     # Reusable UI components (LayoutV2, Markdown, etc.)
âââ app/            # Page components and content
â   âââ tools/      # Tool implementations (improve-text, is-site-down, etc.)
â   âââ wiki/      # Wiki-style content
â   âââ [topics]/  # Content areas (web, react, python, etc.)
âââ tools/          # Tool utilities

Routing Pattern

Routes live in src/index.tsx:

import { Hono } from "hono";
import { YourComponent } from "./app/your-component.tsx";

const app = new Hono();

app.get("/path", (c) => c.html(<YourComponent />));

Route with Title

const servePage = (component: Child, title?: string) => (c: Context) =>
  c.html(<LayoutV2 title={title}>{component}</LayoutV2>);

app.get("/about", servePage(<About />, "About"));

GET/POST Pattern for Forms

app.get("/tool", (c) => c.html(<ToolForm />));
app.post("/tool", async (c) => {
  const formData = await c.req.parseBody();
  // process data
  return c.html(<ToolResult data={result} />);
});

Component Structure

Use interface Props for component props:

import { PropsWithChildren } from "hono/jsx";

interface YourComponentProps {
  title?: string;
  items: string[];
}

export function YourComponent(
  { title, items }: YourComponentProps,
) {
  return (
    <div>
      {title && <h1>{title}</h1>}
      <ul>
        {items.map((item) => <li>{item}</li>)}
      </ul>
    </div>
  );
}

Layout Component Pattern

interface LayoutProps extends PropsWithChildren {
  title?: string;
  description?: string;
}

export function Layout({ children, title, description }: LayoutProps) {
  const pageTitle = title ? `${title} // SITE NAME` : "SITE NAME";

  return (
    <html lang="en">
      <head>
        <title>{pageTitle}</title>
        {description && <meta name="description" content={description} />}
        {/* other meta tags */}
      </head>
      <body>{children}</body>
    </html>
  );
}

Middleware

Logger Middleware

app.use("*", async (c, next) => {
  const start = Date.now();
  await next();
  const end = Date.now();
  console.log(`${c.req.method} ${c.req.url} - ${c.res.status} ${end - start}ms`);
});

Error Handling

app.onError((err, c) => {
  console.error(`Error: ${err.message}`);
  return c.html(<ErrorPage message={err.message} />);
});

404 Handler

app.notFound((c) => {
  c.status(404);
  return c.html(<NotFoundPage />);
});

Key Conventions

No client-side React – All rendering is server-side
CSS – Define outside components using Hono’s css helper or Tailwind
TypeScript – Use interface for props, not inline types
Function declarations – Prefer function over const for components
Dependencies – Prefer built-in Deno/web APIs; add deps only for code > 20 lines

Common Issues

Route not matching: Check route order – more specific routes must come first
Context errors: Ensure c is passed correctly in middleware chain
JSX not rendering: Verify hono/jsx is imported and .tsx extension used

References

Hono Documentation – Official Hono docs
Deno Docs – Deno runtime documentation
Markdown Rendering – Using the Markdown component
Tool Development – Creating interactive tools

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台