diff --git a/README.md b/README.md index cbc35a67..af52b4ba 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@
- Hono + Hono
@@ -14,12 +14,12 @@
[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/honojs/hono/ci)](https://github.com/honojs/hono/actions) -[![GitHub](https://img.shields.io/github/license/honojs/hono)](https://github.com/honojs/hono/blob/master/LICENSE) +[![GitHub](https://img.shields.io/github/license/honojs/hono)](https://github.com/honojs/hono/blob/main/LICENSE) [![npm](https://img.shields.io/npm/v/hono)](https://www.npmjs.com/package/hono) [![npm](https://img.shields.io/npm/dm/hono)](https://www.npmjs.com/package/hono) [![npm type definitions](https://img.shields.io/npm/types/hono)](https://www.npmjs.com/package/hono) [![GitHub commit activity](https://img.shields.io/github/commit-activity/m/honojs/hono)](https://github.com/honojs/hono/pulse) -[![GitHub last commit](https://img.shields.io/github/last-commit/honojs/hono)](https://github.com/honojs/hono/commits/master) +[![GitHub last commit](https://img.shields.io/github/last-commit/honojs/hono)](https://github.com/honojs/hono/commits/main) [![Deno badge](https://img.shields.io/endpoint?url=https%3A%2F%2Fdeno-visualizer.danopia.net%2Fshields%2Flatest-version%2Fx%2Fhono%2Fmod.ts)](https://doc.deno.land/https/deno.land/x/hono/mod.ts) Hono - _**[η‚Ž] means flameπŸ”₯ in Japanese**_ - is a small, simple, and ultrafast web framework for Cloudflare Workers, Deno, Bun, and others. diff --git a/src/middleware/basic-auth/README.md b/src/middleware/basic-auth/README.md deleted file mode 100644 index 624b4e9c..00000000 --- a/src/middleware/basic-auth/README.md +++ /dev/null @@ -1,47 +0,0 @@ -# Basic Auth Middleware - -## Usage - -```js -import { Hono } from 'hono' -import { basicAuth } from 'hono/basic-auth' - -const app = new Hono() - -app.use( - '/auth/*', - basicAuth({ - username: 'hono', - password: 'acoolproject', - }) -) - -app.get('/auth/page', (c) => { - return c.text('You are authorized') -}) - -app.fire() -``` - -For Fastly Compute@Edge, polyfill `crypto` or use `crypto-js`. - -Install: - -``` -npm i crypto-js -``` - -Override `hashFunction`: - -```js -import { SHA256 } from 'crypto-js' - -app.use( - '/auth/*', - basicAuth({ - username: 'hono', - password: 'acoolproject', - hashFunction: (d: string) => SHA256(d).toString(), // <--- - }) -) -``` diff --git a/src/middleware/bearer-auth/README.md b/src/middleware/bearer-auth/README.md deleted file mode 100644 index f785b2d4..00000000 --- a/src/middleware/bearer-auth/README.md +++ /dev/null @@ -1,34 +0,0 @@ -# Bearer Auth Middleware - -## Usage - -```ts -import { Hono } from 'hono' -import { bearerAuth } from 'hono/bearer-auth' - -const app = new Hono() - -const token = 'honoisacool' - -app.use('/auth/*', bearerAuth({ token })) - -app.get('/auth/page', (c) => { - return c.text('You are authorized') -}) - -app.fire() -``` - -## Options - -```ts -app.use( - '/auth/*', - bearerAuth({ - token: 'honoisacool', // Required - realm: 'example.com', - prefix: 'Bot' - hashFunction: (d: string) => SHA256(d).toString(), // For Fastly Compute@Edge - }) -) -``` diff --git a/src/middleware/cors/README.md b/src/middleware/cors/README.md deleted file mode 100644 index 654b69a1..00000000 --- a/src/middleware/cors/README.md +++ /dev/null @@ -1,29 +0,0 @@ -# CORS Middleware - -## Usage - -index.js: - -```js -const app = new Hono() - -app.use('/api/*', cors()) -app.use( - '/api2/*', - cors({ - origin: 'http://example.com', - allowHeaders: ['X-Custom-Header', 'Upgrade-Insecure-Requests'], - allowMethods: ['POST', 'GET', 'OPTIONS'], - exposeHeaders: ['Content-Length', 'X-Kuma-Revision'], - maxAge: 600, - credentials: true, - }) -) - -app.all('/api/abc', (c) => { - return c.json({ success: true }) -}) -app.all('/api2/abc', (c) => { - return c.json({ success: true }) -}) -``` diff --git a/src/middleware/etag/README.md b/src/middleware/etag/README.md deleted file mode 100644 index 071dab54..00000000 --- a/src/middleware/etag/README.md +++ /dev/null @@ -1,16 +0,0 @@ -# ETag Middleware - -## Usage - -index.js: - -```js -const app = new Hono() - -app.use('/etag/*', etag()) -app.get('/etag/abc', (c) => { - return c.text('Hono is cool') -}) - -app.fire() -``` diff --git a/src/middleware/html/README.md b/src/middleware/html/README.md deleted file mode 100644 index 2a386522..00000000 --- a/src/middleware/html/README.md +++ /dev/null @@ -1,153 +0,0 @@ -# html Middleware - -html Middleware provides `html` method for building HTML. - -## Usage - -index.ts: - -```ts -import { Hono } from 'hono' -import { html } from 'hono/html' - -const app = new Hono() - -app.get('/:username', (c) => { - const { username } = c.req.param() - return c.html( - html` -

Hello! ${username}!

` - ) -}) - -app.fire() -``` - -### Insert snippet into JSX - -```typescript -const snippet = html` - - -` - -app.get('/', (c) => { - return c.render( - - - Test Site - {snippet} - - Hello! - - ) -}) -``` - -### Insert inline script into JSX - -```typescript -app.get('/', (c) => { - return c.render( - - - Test Site - {html` - - `} - - Hello! - - ) -}) -``` - -### Act as functional component - -Since `html` returns an HtmlEscapedString, it can act as a fully functional component without using JSX. - -#### Use `html` to speed up the process instead of `memo` - -```typescript -const Footer = () => html` - -` -``` - -### Receives props and embeds values - -```typescript -interface SiteData { - title: string - description: string - image: string - children?: any -} -const Layout = (props: SiteData) => html` - - - - ${props.title} - - - - - - - - - ${props.children} - - -` - -const Content = (props: { siteData: SiteData; name: string }) => ( - -

Hello {props.name}

- -) - -app.get('/', (c) => { - const props = { - name: 'World', - siteData: { - title: 'Hello <> World', - description: 'This is a description', - image: 'https://example.com/image.png', - }, - } - return c.render() -}) -``` - -## raw - -Using `raw`, the content will be rendered as is. You have to escape these strings by yourself. - -```ts -import { html, raw } from 'hono/html' - -app.get('/', (c) => { - const name = 'John "Johnny" Smith' - return c.html(html`

I'm ${raw(name)}.

`) -}) -``` - -## Tips - -Thanks to these libraries, Visual Studio Code and vim also interprets template literals as HTML, allowing syntax highlighting and formatting to be applied. - -- -- diff --git a/src/middleware/jsx/README.md b/src/middleware/jsx/README.md deleted file mode 100644 index d6f2fb04..00000000 --- a/src/middleware/jsx/README.md +++ /dev/null @@ -1,170 +0,0 @@ -# JSX Middleware - -JSX Middleware enable rendering HTML with JSX syntax. -It's just for Sever-Side-Rendering. No virtual DOM. -This middleware is only for writing with TypeScript. - -## Settings - -tsconfig.json: - -```json -{ - "compilerOptions": { - "jsx": "react", - "jsxFactory": "jsx", - "jsxFragmentFactory": "Fragment" - } -} -``` - -## Usage - -index.tsx: - -```tsx -import { Hono } from 'hono' -import { jsx } from 'hono/jsx' - -const app = new Hono() - -const Layout = (props: { children?: string }) => { - return ( - - {props.children} - - ) -} - -const Top = (props: { messages: string[] }) => { - return ( - -

Hello Hono!

-
    - {props.messages.map((message) => { - return
  • {message}!!
    • - })} -
- - ) -} - -app.get('/', (c) => { - const messages = ['Good Morning', 'Good Evening', 'Good Night'] - return c.html() -}) - -app.fire() -``` - -## dangerouslySetInnerHTML - -`dangerouslySetInnerHTML` allows you to set HTML directly. - -```tsx -app.get('/foo', (c) => { - const inner = { __html: 'JSX · SSR' } - const Div =
-}) -``` - -## memo - -You can memorize calculated strings of the component with `memo`. - -```tsx -import { jsx, memo } from 'hono/jsx' - -const Header = memo(() =>
Welcome to Hono
) -const Footer = memo(() =>
Powered by Hono
) -const Layout = ( -
-
-

Hono is cool!

-
-
-) -``` - -## Fragment - -```tsx -import { jsx, Fragment } from 'hono/jsx' - -const List = () => ( - -

first child

-

second child

-

third child

- -) -``` - -## With html Middleware - -It's powerful to use JSX middleware with html middleware. -For more information, see [html middleware docs](https://github.com/honojs/hono/tree/master/src/middleware/html). - -```tsx -import { Hono } from 'hono' -import { html } from 'hono/html' -import { jsx } from 'hono/jsx' - -const app = new Hono() - -interface SiteData { - title: string - children?: any -} - -const Layout = (props: SiteData) => html` - - - ${props.title} - - - ${props.children} - - ` - -const Content = (props: { siteData: SiteData; name: string }) => ( - -

Hello {props.name}

- -) - -app.get('/:name', (c) => { - const { name } = c.req.param() - const props = { - name: name, - siteData: { - title: 'JSX with html sample', - }, - } - return c.html() -}) - -app.fire() -``` - -## Tips for Cloudflare Workers - -It's useful to use Miniflare's`live-reload` option for developing. - -package.json: - -```json -{ - "scripts": { - "build": "esbuild --bundle --outdir=dist ./src/index.tsx", - "dev": "miniflare --live-reload --debug" - } -} -``` - -wrangler.toml: - -```toml -[build] -command = "yarn build" -``` diff --git a/src/middleware/jwt/README.md b/src/middleware/jwt/README.md deleted file mode 100644 index e9927366..00000000 --- a/src/middleware/jwt/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# JWT Middleware - -## Usage - -```js -import { Hono } from 'hono' -import { jwt } from 'hono/jwt' - -const app = new Hono() - -app.use( - '/auth/*', - jwt({ - secret: 'it-is-very-secret' - }) -) - -app.get('/auth/page', (c) => { - return c.text('You are authorized') -}) - -app.fire() -``` diff --git a/src/middleware/logger/README.md b/src/middleware/logger/README.md deleted file mode 100644 index 37fc6ee0..00000000 --- a/src/middleware/logger/README.md +++ /dev/null @@ -1,17 +0,0 @@ -# Logger Middleware - -## Usage - -index.js: - -```js -import { Hono } from 'hono' -import { logger } from 'hono/logger' - -export const app = new Hono() - -app.use('*', logger()) -app.get('/', (c) => c.text('Hello Hono!')) - -app.fire() -``` diff --git a/src/middleware/serve-static/README.md b/src/middleware/serve-static/README.md deleted file mode 100644 index d7e1e9dd..00000000 --- a/src/middleware/serve-static/README.md +++ /dev/null @@ -1,56 +0,0 @@ -# Serve Static Middleware - -Serve Static Middleware is available only on Cloudflare Workers. - -## Usage - -index.ts: - -```ts -import { Hono } from 'hono' -import { serveStatic } from 'hono/serve-static' - -const app = new Hono() - -app.use('/static/*', serveStatic({ root: './' })) -app.get('/', (c) => c.text('This is Home! You can access: /static/hello.txt')) -app.get('*', serveStatic({ path: './static/fallback.txt' })) - -app.fire() -``` - -In Module Worker mode: - -```ts -import { Hono } from 'hono' -import { serveStatic } from 'hono/serve-static.module' // <--- - -const app = new Hono() -//... - -export default app -``` - -wrangler.toml: - -```toml -[site] -bucket = "./assets" -``` - -Asset files: - -``` -./assets -└── static - β”œβ”€β”€ demo - β”‚Β Β  └── index.html - β”œβ”€β”€ hello.txt - β”œβ”€β”€ fallback.txt - └── images - └── dinotocat.png -``` - -## Example - -