├── .eslintrc.cjs
├── .gitignore
├── .vscode
    └── settings.json
├── README.md
├── package.json
└── projects
    ├── basic
        ├── app
        │   ├── client.ts
        │   ├── islands
        │   │   └── counter.tsx
        │   ├── routes
        │   │   ├── _renderer.tsx
        │   │   └── index.tsx
        │   ├── server.ts
        │   └── style.css
        ├── package.json
        ├── public
        │   └── .assetsignore
        ├── tsconfig.json
        ├── vite.config.ts
        └── wrangler.jsonc
    ├── blog
        ├── app
        │   ├── client.ts
        │   ├── components
        │   │   ├── button.tsx
        │   │   ├── header.tsx
        │   │   ├── time.tsx
        │   │   └── title.tsx
        │   ├── db.ts
        │   ├── factory.ts
        │   ├── islands
        │   │   └── contentForm.tsx
        │   ├── routes
        │   │   ├── _404.tsx
        │   │   ├── _error.tsx
        │   │   ├── _renderer.tsx
        │   │   ├── articles
        │   │   │   ├── [id].tsx
        │   │   │   ├── create.tsx
        │   │   │   └── preview.tsx
        │   │   └── index.tsx
        │   ├── server.ts
        │   ├── style.css
        │   └── utils.ts
        ├── blog.sql
        ├── package.json
        ├── public
        │   ├── .assetsignore
        │   └── static
        │   │   └── style.css
        ├── tsconfig.json
        ├── vite.config.ts
        └── wrangler.jsonc
    ├── mdx
        ├── app
        │   ├── global.d.ts
        │   ├── routes
        │   │   ├── _renderer.tsx
        │   │   ├── index.tsx
        │   │   └── posts
        │   │   │   └── hello.mdx
        │   ├── server.ts
        │   └── types.ts
        ├── package.json
        ├── public
        │   └── static
        │   │   └── style.css
        ├── tsconfig.json
        ├── vite.config.ts
        └── wrangler.jsonc
    ├── react
        ├── app
        │   ├── client.ts
        │   ├── global.d.ts
        │   ├── islands
        │   │   └── counter.tsx
        │   ├── routes
        │   │   ├── _404.tsx
        │   │   ├── _error.tsx
        │   │   ├── _renderer.tsx
        │   │   └── index.tsx
        │   ├── server.ts
        │   └── style.css
        ├── package.json
        ├── public
        │   ├── .assetsignore
        │   └── favicon.ico
        ├── tsconfig.json
        ├── vite.config.ts
        └── wrangler.jsonc
    └── tailwind
        ├── app
            ├── client.ts
            ├── routes
            │   ├── _renderer.tsx
            │   └── index.tsx
            ├── server.ts
            └── style.css
        ├── package.json
        ├── public
            └── .assetsignore
        ├── tsconfig.json
        ├── vite.config.ts
        └── wrangler.jsonc


/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: ['@hono/eslint-config']
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | .wrangler
 3 | .mf
 4 | *.tgz
 5 | yarn.lock
 6 | dist
 7 | .hono
 8 | 
 9 | 
10 | package-lock.json
11 | 
12 | # Swap the comments on the following lines if you wish to use zero-installs
13 | # In that case, don't forget to run `yarn config set enableGlobalCache false`!
14 | # Documentation here: https://yarnpkg.com/features/caching#zero-installs
15 | 
16 | #!.yarn/cache
17 | .pnp.*
18 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "eslint.validate": [
 3 |     "javascript",
 4 |     "javascriptreact",
 5 |     "typescript",
 6 |     "typescriptreact"
 7 |   ],
 8 |   "editor.codeActionsOnSave": {
 9 |     "source.fixAll.eslint": "explicit"
10 |   },
11 |   "typescript.tsdk": "node_modules/typescript/lib"
12 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # HonoX Examples
 2 | 
 3 | This repository is containing examples using [HonoX](https://github.com/honojs/honox).
 4 | 
 5 | ## Included Examples
 6 | 
 7 | - [basic](./projects/basic/) - Basic example with an island.
 8 | - [blog](./projects/blog/) - Blog site using Cloudflare D1.
 9 | - [mdx](./projects/mdx/) - Simple blog using MDX markdown.
10 | - [tailwind](./projects/tailwind/) - Example using Tailwind CSS.
11 | 
12 | ## Author
13 | 
14 | Yusuke Wada <https://github.com/yusukebe>
15 | 
16 | ## License
17 | 
18 | MIT
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hono-x-examples",
 3 |   "workspaces": [
 4 |     "projects/basic",
 5 |     "projects/blog",
 6 |     "projects/mdx",
 7 |     "projects/tailwind"
 8 |   ],
 9 |   "devDependencies": {
10 |     "@cloudflare/workers-types": "^4.20250224.0",
11 |     "@hono/eslint-config": "^1.0.2",
12 |     "@hono/vite-build": "^1.3.0",
13 |     "@hono/vite-dev-server": "^0.18.2",
14 |     "eslint": "^9.21.0",
15 |     "typescript": "^5.7.3",
16 |     "wrangler": "^3.109.3"
17 |   },
18 |   "dependencies": {
19 |     "hono": "^4.7.2",
20 |     "honox": "^0.1.35",
21 |     "vite": "^6.2.0"
22 |   }
23 | }


--------------------------------------------------------------------------------
/projects/basic/app/client.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from 'honox/client'
2 | 
3 | createClient()
4 | 


--------------------------------------------------------------------------------
/projects/basic/app/islands/counter.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'hono/jsx'
 2 | 
 3 | export default function Counter() {
 4 |   const [count, setCount] = useState(0)
 5 |   return (
 6 |     <div>
 7 |       <p>{count}</p>
 8 |       <button onClick={() => setCount(count + 1)}>Increment</button>
 9 |     </div>
10 |   )
11 | }
12 | 


--------------------------------------------------------------------------------
/projects/basic/app/routes/_renderer.tsx:
--------------------------------------------------------------------------------
 1 | import { jsxRenderer } from 'hono/jsx-renderer'
 2 | import { Link, Script } from 'honox/server'
 3 | 
 4 | export default jsxRenderer(({ children }) => {
 5 |   return (
 6 |     <html lang="en">
 7 |       <head>
 8 |         <meta charset="utf-8" />
 9 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10 |         <Link href="/app/style.css" rel="stylesheet" />
11 |         <Script src="/app/client.ts" />
12 |       </head>
13 |       <body>{children}</body>
14 |     </html>
15 |   )
16 | })
17 | 


--------------------------------------------------------------------------------
/projects/basic/app/routes/index.tsx:
--------------------------------------------------------------------------------
 1 | import { createRoute } from 'honox/factory'
 2 | import Counter from '../islands/counter'
 3 | 
 4 | export default createRoute((c) => {
 5 |   const name = c.req.query('name') ?? 'no name'
 6 |   return c.render(
 7 |     <div>
 8 |       <title>{name}</title>
 9 |       <h1>Hello, {name}!</h1>
10 |       <Counter />
11 |     </div>
12 |   )
13 | })
14 | 


--------------------------------------------------------------------------------
/projects/basic/app/server.ts:
--------------------------------------------------------------------------------
1 | import { showRoutes } from 'hono/dev'
2 | import { createApp } from 'honox/server'
3 | 
4 | const app = createApp()
5 | 
6 | showRoutes(app)
7 | 
8 | export default app
9 | 


--------------------------------------------------------------------------------
/projects/basic/app/style.css:
--------------------------------------------------------------------------------
1 | html {
2 |   font-family: Arial, Helvetica, sans-serif;
3 | }
4 | 


--------------------------------------------------------------------------------
/projects/basic/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "basic",
 3 |   "type": "module",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vite build --mode client && vite build",
 7 |     "preview": "wrangler dev",
 8 |     "deploy": "npm run build && wrangler deploy"
 9 |   },
10 |   "private": true
11 | }


--------------------------------------------------------------------------------
/projects/basic/public/.assetsignore:
--------------------------------------------------------------------------------
1 | index.js
2 | .vite/


--------------------------------------------------------------------------------
/projects/basic/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Bundler",
 6 |     "strict": true,
 7 |     "types": [
 8 |       "vite/client"
 9 |     ],
10 |     "jsx": "react-jsx",
11 |     "jsxImportSource": "hono/jsx"
12 |   },
13 | }


--------------------------------------------------------------------------------
/projects/basic/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import build from '@hono/vite-build/cloudflare-workers'
 2 | import honox from 'honox/vite'
 3 | import adapter from '@hono/vite-dev-server/cloudflare'
 4 | import { defineConfig } from 'vite'
 5 | 
 6 | export default defineConfig({
 7 |   plugins: [
 8 |     honox({
 9 |       devServer: { adapter },
10 |       client: { input: ['./app/style.css'] }
11 |     }),
12 |     build()
13 |   ]
14 | })
15 | 


--------------------------------------------------------------------------------
/projects/basic/wrangler.jsonc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "../../node_modules/wrangler/config-schema.json",
 3 |   "name": "honox-examples-basic",
 4 |   "main": "./dist/index.js",
 5 |   "compatibility_date": "2024-04-01",
 6 |   "compatibility_flags": [
 7 |     "nodejs_compat"
 8 |   ],
 9 |   "assets": {
10 |     "directory": "./dist"
11 |   }
12 | }


--------------------------------------------------------------------------------
/projects/blog/app/client.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from 'honox/client'
2 | 
3 | createClient()
4 | 


--------------------------------------------------------------------------------
/projects/blog/app/components/button.tsx:
--------------------------------------------------------------------------------
 1 | import { css } from 'hono/css'
 2 | 
 3 | export const classButton = css`
 4 |   color: #fff;
 5 |   font-weight: 700;
 6 |   padding: 0.5rem 1rem;
 7 |   background-color: rgb(59 130 246);
 8 |   border-radius: 0.375rem;
 9 | `
10 | 


--------------------------------------------------------------------------------
/projects/blog/app/components/header.tsx:
--------------------------------------------------------------------------------
 1 | import { css } from 'hono/css'
 2 | import type { FC } from 'hono/jsx'
 3 | 
 4 | const headerClass = css`
 5 |   color: rgb(31 41 55);
 6 |   font-weight: 800;
 7 |   font-size: 3rem;
 8 |   line-height: 1;
 9 | `
10 | 
11 | const Header: FC = () => {
12 |   return (
13 |     <h1 class={headerClass}>
14 |       <a href="/">Hono Blog</a>
15 |     </h1>
16 |   )
17 | }
18 | 
19 | export default Header
20 | 


--------------------------------------------------------------------------------
/projects/blog/app/components/time.tsx:
--------------------------------------------------------------------------------
 1 | import { css } from 'hono/css'
 2 | import type { FC, PropsWithChildren } from 'hono/jsx'
 3 | 
 4 | const timeClass = css`
 5 |   color: rgb(107 114 128);
 6 |   font-size: 0.875rem;
 7 |   line-height: 1.25rem;
 8 | `
 9 | 
10 | const Time = ({ children, created_at }: PropsWithChildren<{ created_at: string }>) => {
11 |   return (
12 |     <time class={timeClass} dateTime={created_at}>
13 |       {children}
14 |     </time>
15 |   )
16 | }
17 | 
18 | export default Time
19 | 


--------------------------------------------------------------------------------
/projects/blog/app/components/title.tsx:
--------------------------------------------------------------------------------
 1 | import { css } from 'hono/css'
 2 | import type { FC } from 'hono/jsx'
 3 | 
 4 | const titleClass = css`
 5 |   color: rgb(31 41 55);
 6 |   font-weight: 700;
 7 |   font-size: 2.5rem;
 8 |   line-height: 2.5rem;
 9 |   padding: 1rem 0;
10 | `
11 | 
12 | const Title: FC = ({ children }) => {
13 |   return <h2 class={titleClass}>{children}</h2>
14 | }
15 | 
16 | export default Title
17 | 


--------------------------------------------------------------------------------
/projects/blog/app/db.ts:
--------------------------------------------------------------------------------
 1 | export type Article = {
 2 |   id: string
 3 |   title: string
 4 |   content: string
 5 |   created_at: string
 6 | }
 7 | 
 8 | export const findAllArticles = async (db: D1Database) => {
 9 |   const { results } = await db.prepare('SELECT * FROM articles ORDER BY created_at DESC').all<Article>()
10 |   const articles = results
11 |   return articles
12 | }
13 | 
14 | export const findArticleById = async (db: D1Database, id: string) => {
15 |   const article = await db.prepare('SELECT * FROM articles WHERE id = ?').bind(id).first<Article>()
16 |   return article
17 | }
18 | 
19 | export const createArticle = async (db: D1Database, article: Pick<Article, 'title' | 'content'>) => {
20 |   const id = crypto.randomUUID()
21 |   const { results } = await db
22 |     .prepare('INSERT INTO articles(id, title, content) VALUES(?, ?, ?)')
23 |     .bind(id, article.title, article.content)
24 |     .run()
25 |   const articles = results
26 |   return articles
27 | }
28 | 


--------------------------------------------------------------------------------
/projects/blog/app/factory.ts:
--------------------------------------------------------------------------------
 1 | import { createFactory } from 'hono/factory'
 2 | 
 3 | interface Env {
 4 |   Bindings: {
 5 |     DB: D1Database
 6 |   }
 7 | }
 8 | 
 9 | const factory = createFactory<Env>()
10 | export const createRoute = factory.createHandlers
11 | 


--------------------------------------------------------------------------------
/projects/blog/app/islands/contentForm.tsx:
--------------------------------------------------------------------------------
 1 | import { css } from 'hono/css'
 2 | import { useState } from 'hono/jsx'
 3 | import { parseMarkdown } from '../utils'
 4 | 
 5 | const grayColor = css`
 6 |   color: rgb(107 114 128);
 7 | `
 8 | 
 9 | const classContentTextarea = css`
10 |   padding: 0.5rem;
11 |   border-color: rgb(209 213 219);
12 |   border-width: 1px;
13 |   border-radius: 0.375rem;
14 |   width: 100%;
15 |   resize: vertical;
16 | `
17 | 
18 | interface Props {
19 |   initialValue?: string
20 | }
21 | 
22 | export default function ContentForm({ initialValue = '' }: Props) {
23 |   const [value, setValue] = useState(initialValue)
24 |   const [preview, setPreview] = useState(false)
25 | 
26 |   const handleChange = (e: Event) => {
27 |     const target = e.target as HTMLTextAreaElement
28 |     setValue(target.value)
29 |   }
30 | 
31 |   return (
32 |     <div>
33 |       <div
34 |         class={css`
35 |           justify-content: space-between;
36 |           display: flex;
37 |         `}
38 |       >
39 |         <label class={grayColor} htmlFor="content">
40 |           Content
41 |         </label>
42 |         <label class={grayColor}>
43 |           Preview
44 |           <input
45 |             type="checkbox"
46 |             id="preview"
47 |             class={css`
48 |               margin-left: 0.5rem;
49 |             `}
50 |             checked={preview}
51 |             onChange={() => setPreview((prev) => !prev)}
52 |           />
53 |         </label>
54 |       </div>
55 |       {preview ? (
56 |         <>
57 |           <div
58 |             id="contents"
59 |             dangerouslySetInnerHTML={{
60 |               __html: parseMarkdown(value)
61 |             }}
62 |           />
63 |           <input type="hidden" name="content" value={value} />
64 |         </>
65 |       ) : (
66 |         <textarea id="content" rows={10} class={classContentTextarea} name="content" onChange={handleChange}>
67 |           {value}
68 |         </textarea>
69 |       )}
70 |     </div>
71 |   )
72 | }
73 | 


--------------------------------------------------------------------------------
/projects/blog/app/routes/_404.tsx:
--------------------------------------------------------------------------------
1 | import type { NotFoundHandler } from 'hono'
2 | 
3 | const handler: NotFoundHandler = (c) => {
4 |   return c.render(<h1>Not Found!</h1>)
5 | }
6 | 
7 | export default handler
8 | 


--------------------------------------------------------------------------------
/projects/blog/app/routes/_error.tsx:
--------------------------------------------------------------------------------
1 | import type { ErrorHandler } from 'hono'
2 | 
3 | const handler: ErrorHandler = (e, c) => {
4 |   console.log(e.message)
5 |   return c.render(<h1>Error!</h1>)
6 | }
7 | 
8 | export default handler
9 | 


--------------------------------------------------------------------------------
/projects/blog/app/routes/_renderer.tsx:
--------------------------------------------------------------------------------
 1 | import { css, Style } from 'hono/css'
 2 | import { jsxRenderer } from 'hono/jsx-renderer'
 3 | import { Link, Script } from 'honox/server'
 4 | import Header from '../components/header'
 5 | 
 6 | const bodyClass = css`
 7 |   background-color: rgb(229 231 235);
 8 | `
 9 | 
10 | const containerClass = css`
11 |   max-width: 760px;
12 |   display: flex;
13 |   flex-direction: column;
14 |   margin: 0 auto;
15 |   padding-top: 3rem;
16 |   padding-bottom: 5rem;
17 | 
18 |   padding-left: 1rem;
19 |   padding-right: 1rem;
20 | 
21 |   @media (min-width: 640px) {
22 |     padding-left: 2rem;
23 |     padding-right: 2rem;
24 |   }
25 | `
26 | 
27 | export default jsxRenderer(({ children }) => {
28 |   return (
29 |     <html lang="en">
30 |       <head>
31 |         <meta charset="UTF-8" />
32 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
33 |         <Link href="/app/style.css" rel="stylesheet" />
34 |         <Style />
35 |         <Script src="/app/client.ts" />
36 |       </head>
37 |       <body class={bodyClass}>
38 |         <div class={containerClass}>
39 |           <Header />
40 |           {children}
41 |         </div>
42 |       </body>
43 |     </html>
44 |   )
45 | })
46 | 


--------------------------------------------------------------------------------
/projects/blog/app/routes/articles/[id].tsx:
--------------------------------------------------------------------------------
 1 | import dayjs from 'dayjs/esm'
 2 | import relativeTime from 'dayjs/esm/plugin/relativeTime'
 3 | import { css } from 'hono/css'
 4 | import { createRoute } from '../../factory'
 5 | import Time from '../../components/time'
 6 | import { findArticleById } from '../../db'
 7 | import { parseMarkdown } from '../../utils'
 8 | 
 9 | dayjs.extend(relativeTime)
10 | 
11 | const articleClass = css`
12 |   background-color: #fff;
13 |   padding: 1.5rem;
14 |   margin-bottom: 1rem;
15 |   border-radius: 0.5rem;
16 |   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
17 | `
18 | 
19 | const titleClass = css`
20 |   color: rgb(31 41 55);
21 |   font-weight: 800;
22 |   font-size: 2rem;
23 | `
24 | 
25 | export default createRoute(async (c) => {
26 |   const { id } = c.req.param<'/:id'>()
27 |   const article = await findArticleById(c.env.DB, id)
28 | 
29 |   if (!article) {
30 |     return c.notFound()
31 |   }
32 | 
33 |   const parsedContent = parseMarkdown(article.content)
34 | 
35 |   return c.render(
36 |     <div
37 |       class={css`
38 |         margin-top: 2rem;
39 |       `}
40 |     >
41 |       <article class={articleClass}>
42 |         <header>
43 |           <h2 class={titleClass}>{article.title}</h2>
44 |           <Time created_at={article.created_at}>{dayjs(article.created_at).format('YYYY-MM-DD HH:mm:ss')}</Time>
45 |         </header>
46 |         <section
47 |           class={css`
48 |             margin-top: 1.5rem;
49 |           `}
50 |         >
51 |           <div id="contents" dangerouslySetInnerHTML={{ __html: parsedContent }} />
52 |         </section>
53 |       </article>
54 |     </div>
55 |   )
56 | })
57 | 


--------------------------------------------------------------------------------
/projects/blog/app/routes/articles/create.tsx:
--------------------------------------------------------------------------------
  1 | import { zValidator } from '@hono/zod-validator'
  2 | import { css } from 'hono/css'
  3 | import type { FC } from 'hono/jsx'
  4 | import { createRoute } from '../../factory'
  5 | import { z } from 'zod'
  6 | import { classButton } from '../../components/button'
  7 | import Title from '../../components/title'
  8 | import { createArticle } from '../../db'
  9 | import ContentForm from '../../islands/contentForm'
 10 | 
 11 | type Data = {
 12 |   error?: Record<string, string[] | undefined>
 13 |   title?: string
 14 |   content?: string
 15 | }
 16 | 
 17 | const classForm = css`
 18 |   background-color: #fff;
 19 |   padding: 1.5rem;
 20 |   border-width: 1px;
 21 |   border-radius: 0.75rem;
 22 |   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
 23 |   margin-top: 1rem;
 24 | `
 25 | 
 26 | const classDivInputs = css`
 27 |   row-gap: 0.5rem;
 28 |   flex-direction: column;
 29 |   display: flex;
 30 | `
 31 | 
 32 | const classDivButton = css`
 33 |   justify-content: flex-end;
 34 |   display: flex;
 35 |   margin-top: 1rem;
 36 | `
 37 | 
 38 | const classInputTitle = css`
 39 |   padding: 0.5rem;
 40 |   border-color: rgb(209 213 219);
 41 |   border-width: 1px;
 42 |   border-radius: 0.375rem;
 43 |   width: 100%;
 44 | `
 45 | 
 46 | const grayColor = css`
 47 |   color: rgb(107 114 128);
 48 | `
 49 | 
 50 | const classTextRed = css`
 51 |   color: rgb(239 68 68);
 52 |   font-size: 0.875rem;
 53 |   line-height: 1.25rem;
 54 | `
 55 | 
 56 | const Page: FC<{ data?: Data }> = ({ data }) => {
 57 |   return (
 58 |     <div
 59 |       class={css`
 60 |         margin-top: 1rem;
 61 |       `}
 62 |     >
 63 |       <Title>Create Post</Title>
 64 |       <div x-data>
 65 |         <form class={classForm} method="post">
 66 |           <div class={classDivInputs}>
 67 |             <div>
 68 |               <label class={grayColor} htmlFor="title">
 69 |                 Title
 70 |               </label>
 71 |               <input id="title" class={classInputTitle} type="text" name="title" value={data?.title} />
 72 |               {data?.error?.title && <p class={classTextRed}>{data.error.title}</p>}
 73 |             </div>
 74 |             <div>
 75 |               <ContentForm initialValue={data?.content} />
 76 |               {data?.error?.content && <p class="text-red-500 text-sm">{data.error.content}</p>}
 77 |             </div>
 78 |           </div>
 79 |           <div class={classDivButton}>
 80 |             <button class={classButton} type="submit">
 81 |               Create
 82 |             </button>
 83 |           </div>
 84 |         </form>
 85 |       </div>
 86 |     </div>
 87 |   )
 88 | }
 89 | 
 90 | export default createRoute((c) => {
 91 |   return c.render(<Page />)
 92 | })
 93 | 
 94 | const schema = z.object({
 95 |   title: z.string().min(1),
 96 |   content: z.string().min(1)
 97 | })
 98 | 
 99 | export const POST = createRoute(
100 |   zValidator('form', schema, (result, c) => {
101 |     if (!result.success) {
102 |       const { title, content } = result.data
103 |       return c.render(<Page data={{ title, content, error: result.error.flatten().fieldErrors }} />)
104 |     }
105 |   }),
106 |   async (c) => {
107 |     const { title, content } = c.req.valid('form')
108 |     await createArticle(c.env.DB, {
109 |       title,
110 |       content
111 |     })
112 |     return c.redirect('/', 303)
113 |   }
114 | )
115 | 


--------------------------------------------------------------------------------
/projects/blog/app/routes/articles/preview.tsx:
--------------------------------------------------------------------------------
 1 | import { zValidator } from '@hono/zod-validator'
 2 | import { createRoute } from '../../factory'
 3 | import { z } from 'zod'
 4 | import { parseMarkdown } from '../../utils'
 5 | 
 6 | const schema = z.object({
 7 |   content: z.string()
 8 | })
 9 | 
10 | export const POST = createRoute(zValidator('form', schema), (c) => {
11 |   const { content } = c.req.valid('form')
12 |   const parsedMarkdown = parseMarkdown(content)
13 |   const html = <div id="contents" dangerouslySetInnerHTML={{ __html: parsedMarkdown }}></div>
14 |   return c.text(html.toString())
15 | })
16 | 


--------------------------------------------------------------------------------
/projects/blog/app/routes/index.tsx:
--------------------------------------------------------------------------------
 1 | import dayjs from 'dayjs/esm'
 2 | import relativeTime from 'dayjs/esm/plugin/relativeTime'
 3 | import { css } from 'hono/css'
 4 | import type { FC } from 'hono/jsx'
 5 | import { createRoute } from '../factory'
 6 | import { classButton } from '../components/button'
 7 | import Time from '../components/time'
 8 | import Title from '../components/title'
 9 | import type { Article } from '../db'
10 | import { findAllArticles } from '../db'
11 | 
12 | dayjs.extend(relativeTime)
13 | 
14 | const ArticleList: FC<{ article: Article }> = ({ article }) => {
15 |   const listClass = css`
16 |     background-color: #fff;
17 |     padding: 1.5rem;
18 |     margin-bottom: 1rem;
19 |     border-radius: 0.5rem;
20 |     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
21 |   `
22 | 
23 |   const titleClass = css`
24 |     color: rgb(31 41 55);
25 |     font-weight: 700;
26 |     font-size: 1.5rem;
27 |     line-height: 2rem;
28 |     margin-bottom: 0.5rem;
29 |   `
30 | 
31 |   return (
32 |     <li class={listClass}>
33 |       <a href={`articles/${article.id}`}>
34 |         <h3 class={titleClass}>{article.title}</h3>
35 |         <Time created_at={article.created_at}>{dayjs(article.created_at).fromNow()}</Time>
36 |       </a>
37 |     </li>
38 |   )
39 | }
40 | 
41 | export const GET = createRoute(async (c) => {
42 |   const articles = await findAllArticles(c.env.DB)
43 | 
44 |   return c.render(
45 |     <>
46 |       <title>Hono Blog</title>
47 |       <section
48 |         class={css`
49 |           margin-top: 1rem;
50 |         `}
51 |       >
52 |         <div
53 |           class={css`
54 |             justify-content: space-between;
55 |             align-items: center;
56 |             display: flex;
57 |           `}
58 |         >
59 |           <Title>Posts</Title>
60 |           <a class={classButton} href="/articles/create">
61 |             Create Post
62 |           </a>
63 |         </div>
64 |         <ul>
65 |           {articles.map((article) => (
66 |             <ArticleList article={article} />
67 |           ))}
68 |         </ul>
69 |       </section>
70 |     </>
71 |   )
72 | })
73 | 


--------------------------------------------------------------------------------
/projects/blog/app/server.ts:
--------------------------------------------------------------------------------
1 | import { showRoutes } from 'hono/dev'
2 | import { createApp } from 'honox/server'
3 | 
4 | const app = createApp()
5 | 
6 | showRoutes(app)
7 | 
8 | export default app
9 | 


--------------------------------------------------------------------------------
/projects/blog/app/style.css:
--------------------------------------------------------------------------------
  1 | *,:before,:after {
  2 |   box-sizing: border-box;
  3 |   border-width: 0;
  4 |   border-style: solid;
  5 |   border-color: #e5e7eb
  6 | }
  7 | 
  8 | html {
  9 |   line-height: 1.5;
 10 |   -webkit-text-size-adjust: 100%;
 11 |   -moz-tab-size: 4;
 12 |   -o-tab-size: 4;
 13 |   tab-size: 4;
 14 |   font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
 15 |   font-feature-settings: normal;
 16 |   font-variation-settings: normal
 17 | }
 18 | 
 19 | body {
 20 |   margin: 0;
 21 |   line-height: inherit
 22 | }
 23 | 
 24 | hr {
 25 |   height: 0;
 26 |   color: inherit;
 27 |   border-top-width: 1px
 28 | }
 29 | 
 30 | abbr:where([title]) {
 31 |   -webkit-text-decoration: underline dotted;
 32 |   text-decoration: underline dotted
 33 | }
 34 | 
 35 | h1,h2,h3,h4,h5,h6 {
 36 |   font-size: inherit;
 37 |   font-weight: inherit
 38 | }
 39 | 
 40 | a {
 41 |   color: inherit;
 42 |   text-decoration: inherit
 43 | }
 44 | 
 45 | b,strong {
 46 |   font-weight: bolder
 47 | }
 48 | 
 49 | code,kbd,samp,pre {
 50 |   font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
 51 |   font-size: 1em
 52 | }
 53 | 
 54 | small {
 55 |   font-size: 80%
 56 | }
 57 | 
 58 | sub,sup {
 59 |   font-size: 75%;
 60 |   line-height: 0;
 61 |   position: relative;
 62 |   vertical-align: baseline
 63 | }
 64 | 
 65 | sub {
 66 |   bottom: -.25em
 67 | }
 68 | 
 69 | sup {
 70 |   top: -.5em
 71 | }
 72 | 
 73 | table {
 74 |   text-indent: 0;
 75 |   border-color: inherit;
 76 |   border-collapse: collapse
 77 | }
 78 | 
 79 | button,input,optgroup,select,textarea {
 80 |   font-family: inherit;
 81 |   font-feature-settings: inherit;
 82 |   font-variation-settings: inherit;
 83 |   font-size: 100%;
 84 |   font-weight: inherit;
 85 |   line-height: inherit;
 86 |   color: inherit;
 87 |   margin: 0;
 88 |   padding: 0
 89 | }
 90 | 
 91 | button,select {
 92 |   text-transform: none
 93 | }
 94 | 
 95 | button,[type=button],[type=reset],[type=submit] {
 96 |   background-color: transparent;
 97 |   background-image: none
 98 | }
 99 | 
100 | :-moz-focusring {
101 |   outline: auto
102 | }
103 | 
104 | :-moz-ui-invalid {
105 |   box-shadow: none
106 | }
107 | 
108 | progress {
109 |   vertical-align: baseline
110 | }
111 | 
112 | ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
113 |   height: auto
114 | }
115 | 
116 | [type=search] {
117 |   outline-offset: -2px
118 | }
119 | 
120 | ::-webkit-search-decoration {
121 |   -webkit-appearance: none
122 | }
123 | 
124 | ::-webkit-file-upload-button {
125 |   -webkit-appearance: button;
126 |   font: inherit
127 | }
128 | 
129 | summary {
130 |   display: list-item
131 | }
132 | 
133 | blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre {
134 |   margin: 0
135 | }
136 | 
137 | fieldset {
138 |   margin: 0;
139 |   padding: 0
140 | }
141 | 
142 | legend {
143 |   padding: 0
144 | }
145 | 
146 | ol,ul,menu {
147 |   list-style: none;
148 |   margin: 0;
149 |   padding: 0
150 | }
151 | 
152 | dialog {
153 |   padding: 0
154 | }
155 | 
156 | textarea {
157 |   resize: vertical
158 | }
159 | 
160 | input::-moz-placeholder,textarea::-moz-placeholder {
161 |   opacity: 1;
162 |   color: #9ca3af
163 | }
164 | 
165 | input::placeholder,textarea::placeholder {
166 |   opacity: 1;
167 |   color: #9ca3af
168 | }
169 | 
170 | button,[role=button] {
171 |   cursor: pointer
172 | }
173 | 
174 | :disabled {
175 |   cursor: default
176 | }
177 | 
178 | img,svg,video,canvas,audio,iframe,embed,object {
179 |   display: block;
180 | }
181 | 
182 | img,video {
183 |   max-width: 100%;
184 |   height: auto
185 | }
186 | 
187 | [hidden] {
188 |   display: none
189 | }
190 | 
191 | /** Markdown Contents */
192 | 
193 | #contents {
194 |   font-size: 16px;
195 |   color: #1f2937;
196 | }
197 | 
198 | #contents h1 {
199 |   font-size: 3.0rem;
200 |   font-weight: 700;
201 |   border-bottom: 1px solid  #ddd;
202 |   padding-bottom: 0.1rem;
203 |   margin-bottom: 1.1rem;
204 | 
205 | }
206 | 
207 | #contents h2 {
208 |   font-size: 2.25em;
209 |   font-weight: 700;
210 |   border-bottom: 1px solid #ddd;
211 |   padding-bottom: 0.1rem;
212 |   margin-bottom: 1.1rem;
213 | }
214 | 
215 | #contents h3 {
216 |   font-size: 1.875rem;
217 |   font-weight: 700;
218 |   padding-bottom: 0.1rem;
219 |   margin-bottom: 1.1rem;
220 | }
221 | 
222 | #contents h4 {
223 |   font-size: 1.5rem;
224 |   padding-bottom: 0.1rem;
225 |   margin-bottom: 1.1rem;
226 | }
227 | 
228 | #contents h5 {
229 |   font-size: 1.25rem;
230 | }
231 | 
232 | #contents h6 {
233 |   font-size: 1.125rem;
234 | }
235 | 
236 | #contents ul {
237 |   list-style-type: disc;
238 | }
239 | 
240 | #contents ol {
241 |   list-style-type: decimal;
242 | }
243 | 
244 | #contents ul,
245 | #contents ol {
246 |   padding-left: 1.5em;
247 |   margin: 1.5em 0;
248 |   line-height: 1.9;
249 | }
250 | 
251 | #contents blockquote {
252 |   border-left: 5px solid #ddd;
253 |   font-weight: 100;
254 |   padding: 1rem;
255 |   padding-right: 0;
256 |   margin: 1.5rem 0;
257 | }
258 | 
259 | #contents p {
260 |   margin: 0 0 1.125rem 0;
261 |   line-height: 1.9;
262 | }
263 | 
264 | #contents img {
265 |   margin: 1.5rem auto;
266 | }
267 | 
268 | #contents a {
269 |   color: #0f83fd;
270 | }
271 | 
272 | #contents a:hover {
273 |   text-decoration: underline;
274 | }
275 | 
276 | #contents table {
277 |   margin: 1.2rem auto;
278 |   width: auto;
279 |   border-collapse: collapse;
280 |   font-size: .95em;
281 |   line-height: 1.5;
282 |   word-break: normal;
283 |   display: block;
284 |   overflow: auto;
285 |   -webkit-overflow-scrolling: touch;
286 | }
287 | 
288 | #contents th {
289 |   font-weight: 700;
290 |   color: black;
291 |   padding: .5rem;
292 |   border: 1px solid #cfdce6;
293 |   background: #edf2f7;
294 | }
295 | 
296 | #contents td {
297 |   padding: .5rem;
298 |   border: 1px solid #cfdce6;
299 | }
300 | 
301 | #contents code:not([class*="language-"]) {
302 |   background-color: #eee;
303 |   color: #333;
304 |   padding: 0.1em 0.4em;
305 | }
306 | 
307 | /** Alpine.js **/
308 | [x-cloak] { display: none !important; }


--------------------------------------------------------------------------------
/projects/blog/app/utils.ts:
--------------------------------------------------------------------------------
1 | import Markdoc from '@markdoc/markdoc'
2 | 
3 | export const parseMarkdown = (markdown: string) => {
4 |   const ast = Markdoc.parse(markdown)
5 |   const content = Markdoc.transform(ast)
6 |   const html = Markdoc.renderers.html(content)
7 |   return html
8 | }
9 | 


--------------------------------------------------------------------------------
/projects/blog/blog.sql:
--------------------------------------------------------------------------------
1 | CREATE TABLE articles (
2 |   id TEXT PRIMARY KEY,
3 |   created_at TEXT DEFAULT (datetime('now')),
4 |   title TEXT,
5 |   content TEXT
6 | );


--------------------------------------------------------------------------------
/projects/blog/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "blog",
 3 |   "type": "module",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vite build --mode client && vite build",
 7 |     "preview": "wrangler dev",
 8 |     "deploy": "$npm_execpath run build && wrangler deploy"
 9 |   },
10 |   "private": true,
11 |   "dependencies": {
12 |     "@hono/zod-validator": "^0.1.11",
13 |     "@markdoc/markdoc": "^0.4.0",
14 |     "dayjs": "^1.11.10",
15 |     "zod": "^3.22.4"
16 |   }
17 | }


--------------------------------------------------------------------------------
/projects/blog/public/.assetsignore:
--------------------------------------------------------------------------------
1 | index.js
2 | .vite/


--------------------------------------------------------------------------------
/projects/blog/public/static/style.css:
--------------------------------------------------------------------------------
  1 | *,:before,:after {
  2 |   box-sizing: border-box;
  3 |   border-width: 0;
  4 |   border-style: solid;
  5 |   border-color: #e5e7eb
  6 | }
  7 | 
  8 | html {
  9 |   line-height: 1.5;
 10 |   -webkit-text-size-adjust: 100%;
 11 |   -moz-tab-size: 4;
 12 |   -o-tab-size: 4;
 13 |   tab-size: 4;
 14 |   font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
 15 |   font-feature-settings: normal;
 16 |   font-variation-settings: normal
 17 | }
 18 | 
 19 | body {
 20 |   margin: 0;
 21 |   line-height: inherit
 22 | }
 23 | 
 24 | hr {
 25 |   height: 0;
 26 |   color: inherit;
 27 |   border-top-width: 1px
 28 | }
 29 | 
 30 | abbr:where([title]) {
 31 |   -webkit-text-decoration: underline dotted;
 32 |   text-decoration: underline dotted
 33 | }
 34 | 
 35 | h1,h2,h3,h4,h5,h6 {
 36 |   font-size: inherit;
 37 |   font-weight: inherit
 38 | }
 39 | 
 40 | a {
 41 |   color: inherit;
 42 |   text-decoration: inherit
 43 | }
 44 | 
 45 | b,strong {
 46 |   font-weight: bolder
 47 | }
 48 | 
 49 | code,kbd,samp,pre {
 50 |   font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
 51 |   font-size: 1em
 52 | }
 53 | 
 54 | small {
 55 |   font-size: 80%
 56 | }
 57 | 
 58 | sub,sup {
 59 |   font-size: 75%;
 60 |   line-height: 0;
 61 |   position: relative;
 62 |   vertical-align: baseline
 63 | }
 64 | 
 65 | sub {
 66 |   bottom: -.25em
 67 | }
 68 | 
 69 | sup {
 70 |   top: -.5em
 71 | }
 72 | 
 73 | table {
 74 |   text-indent: 0;
 75 |   border-color: inherit;
 76 |   border-collapse: collapse
 77 | }
 78 | 
 79 | button,input,optgroup,select,textarea {
 80 |   font-family: inherit;
 81 |   font-feature-settings: inherit;
 82 |   font-variation-settings: inherit;
 83 |   font-size: 100%;
 84 |   font-weight: inherit;
 85 |   line-height: inherit;
 86 |   color: inherit;
 87 |   margin: 0;
 88 |   padding: 0
 89 | }
 90 | 
 91 | button,select {
 92 |   text-transform: none
 93 | }
 94 | 
 95 | button,[type=button],[type=reset],[type=submit] {
 96 |   background-color: transparent;
 97 |   background-image: none
 98 | }
 99 | 
100 | :-moz-focusring {
101 |   outline: auto
102 | }
103 | 
104 | :-moz-ui-invalid {
105 |   box-shadow: none
106 | }
107 | 
108 | progress {
109 |   vertical-align: baseline
110 | }
111 | 
112 | ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
113 |   height: auto
114 | }
115 | 
116 | [type=search] {
117 |   outline-offset: -2px
118 | }
119 | 
120 | ::-webkit-search-decoration {
121 |   -webkit-appearance: none
122 | }
123 | 
124 | ::-webkit-file-upload-button {
125 |   -webkit-appearance: button;
126 |   font: inherit
127 | }
128 | 
129 | summary {
130 |   display: list-item
131 | }
132 | 
133 | blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre {
134 |   margin: 0
135 | }
136 | 
137 | fieldset {
138 |   margin: 0;
139 |   padding: 0
140 | }
141 | 
142 | legend {
143 |   padding: 0
144 | }
145 | 
146 | ol,ul,menu {
147 |   list-style: none;
148 |   margin: 0;
149 |   padding: 0
150 | }
151 | 
152 | dialog {
153 |   padding: 0
154 | }
155 | 
156 | textarea {
157 |   resize: vertical
158 | }
159 | 
160 | input::-moz-placeholder,textarea::-moz-placeholder {
161 |   opacity: 1;
162 |   color: #9ca3af
163 | }
164 | 
165 | input::placeholder,textarea::placeholder {
166 |   opacity: 1;
167 |   color: #9ca3af
168 | }
169 | 
170 | button,[role=button] {
171 |   cursor: pointer
172 | }
173 | 
174 | :disabled {
175 |   cursor: default
176 | }
177 | 
178 | img,svg,video,canvas,audio,iframe,embed,object {
179 |   display: block;
180 | }
181 | 
182 | img,video {
183 |   max-width: 100%;
184 |   height: auto
185 | }
186 | 
187 | [hidden] {
188 |   display: none
189 | }
190 | 
191 | /** Markdown Contents */
192 | 
193 | #contents {
194 |   font-size: 16px;
195 |   color: #1f2937;
196 | }
197 | 
198 | #contents h1 {
199 |   font-size: 3.0rem;
200 |   font-weight: 700;
201 |   border-bottom: 1px solid  #ddd;
202 |   padding-bottom: 0.1rem;
203 |   margin-bottom: 1.1rem;
204 | 
205 | }
206 | 
207 | #contents h2 {
208 |   font-size: 2.25em;
209 |   font-weight: 700;
210 |   border-bottom: 1px solid #ddd;
211 |   padding-bottom: 0.1rem;
212 |   margin-bottom: 1.1rem;
213 | }
214 | 
215 | #contents h3 {
216 |   font-size: 1.875rem;
217 |   font-weight: 700;
218 |   padding-bottom: 0.1rem;
219 |   margin-bottom: 1.1rem;
220 | }
221 | 
222 | #contents h4 {
223 |   font-size: 1.5rem;
224 |   padding-bottom: 0.1rem;
225 |   margin-bottom: 1.1rem;
226 | }
227 | 
228 | #contents h5 {
229 |   font-size: 1.25rem;
230 | }
231 | 
232 | #contents h6 {
233 |   font-size: 1.125rem;
234 | }
235 | 
236 | #contents ul {
237 |   list-style-type: disc;
238 | }
239 | 
240 | #contents ol {
241 |   list-style-type: decimal;
242 | }
243 | 
244 | #contents ul,
245 | #contents ol {
246 |   padding-left: 1.5em;
247 |   margin: 1.5em 0;
248 |   line-height: 1.9;
249 | }
250 | 
251 | #contents blockquote {
252 |   border-left: 5px solid #ddd;
253 |   font-weight: 100;
254 |   padding: 1rem;
255 |   padding-right: 0;
256 |   margin: 1.5rem 0;
257 | }
258 | 
259 | #contents p {
260 |   margin: 0 0 1.125rem 0;
261 |   line-height: 1.9;
262 | }
263 | 
264 | #contents img {
265 |   margin: 1.5rem auto;
266 | }
267 | 
268 | #contents a {
269 |   color: #0f83fd;
270 | }
271 | 
272 | #contents a:hover {
273 |   text-decoration: underline;
274 | }
275 | 
276 | #contents table {
277 |   margin: 1.2rem auto;
278 |   width: auto;
279 |   border-collapse: collapse;
280 |   font-size: .95em;
281 |   line-height: 1.5;
282 |   word-break: normal;
283 |   display: block;
284 |   overflow: auto;
285 |   -webkit-overflow-scrolling: touch;
286 | }
287 | 
288 | #contents th {
289 |   font-weight: 700;
290 |   color: black;
291 |   padding: .5rem;
292 |   border: 1px solid #cfdce6;
293 |   background: #edf2f7;
294 | }
295 | 
296 | #contents td {
297 |   padding: .5rem;
298 |   border: 1px solid #cfdce6;
299 | }
300 | 
301 | #contents code:not([class*="language-"]) {
302 |   background-color: #eee;
303 |   color: #333;
304 |   padding: 0.1em 0.4em;
305 | }
306 | 
307 | /** Alpine.js **/
308 | [x-cloak] { display: none !important; }


--------------------------------------------------------------------------------
/projects/blog/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "node",
 6 |     "esModuleInterop": true,
 7 |     "strict": true,
 8 |     "lib": [
 9 |       "esnext",
10 |       "DOM"
11 |     ],
12 |     "types": [
13 |       "vite/client",
14 |       "@cloudflare/workers-types"
15 |     ],
16 |     "jsx": "react-jsx",
17 |     "jsxImportSource": "hono/jsx"
18 |   },
19 | }


--------------------------------------------------------------------------------
/projects/blog/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import build from '@hono/vite-build/cloudflare-workers'
 2 | import honox from 'honox/vite'
 3 | import adapter from '@hono/vite-dev-server/cloudflare'
 4 | import { defineConfig } from 'vite'
 5 | 
 6 | export default defineConfig({
 7 |   plugins: [
 8 |     honox({
 9 |       devServer: { adapter },
10 |       client: { input: ['./app/style.css'] }
11 |     }),
12 |     build()
13 |   ]
14 | })
15 | 


--------------------------------------------------------------------------------
/projects/blog/wrangler.jsonc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "../../node_modules/wrangler/config-schema.json",
 3 |   "name": "honox-examples-blog",
 4 |   "main": "./dist/index.js",
 5 |   "compatibility_date": "2024-04-01",
 6 |   "compatibility_flags": [
 7 |     "nodejs_compat"
 8 |   ],
 9 |   "assets": {
10 |     "directory": "./dist"
11 |   },
12 |   "d1_databases": [
13 |     {
14 |       "binding": "DB",
15 |       "database_name": "hono-blog-demo",
16 |       "database_id": "c1ec051a-3e19-4c89-92fa-bdc2b3f69e1c"
17 |     }
18 |   ]
19 | }


--------------------------------------------------------------------------------
/projects/mdx/app/global.d.ts:
--------------------------------------------------------------------------------
 1 | import {} from 'hono'
 2 | import type { Meta } from './types'
 3 | 
 4 | declare module 'hono' {
 5 |   interface ContextRenderer {
 6 |     (
 7 |       content: string | Promise<string>,
 8 |       meta?: Meta & { frontmatter: Meta }
 9 |     ): Response | Promise<Response>
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/projects/mdx/app/routes/_renderer.tsx:
--------------------------------------------------------------------------------
 1 | import { jsxRenderer } from 'hono/jsx-renderer'
 2 | 
 3 | export default jsxRenderer(({ children, title, frontmatter }) => {
 4 |   return (
 5 |     <html lang='en'>
 6 |       <head>
 7 |         <meta charset='UTF-8' />
 8 |         <meta name='viewport' content='width=device-width, initial-scale=1.0' />
 9 |         {<title>{title ?? frontmatter?.title ?? 'My Blog'}</title>}
10 |         <link rel='stylesheet' href='/static/style.css' />
11 |       </head>
12 |       <body>
13 |         <header>
14 |           <h1>
15 |             <a href='/'>My Blog</a>
16 |           </h1>
17 |         </header>
18 |         <main>
19 |           <article>{children}</article>
20 |         </main>
21 |         <footer>
22 |           <p>&copy; 2024 My Blog. All rights reserved.</p>
23 |         </footer>
24 |       </body>
25 |     </html>
26 |   )
27 | })
28 | 


--------------------------------------------------------------------------------
/projects/mdx/app/routes/index.tsx:
--------------------------------------------------------------------------------
 1 | import type { Meta } from '../types'
 2 | 
 3 | export default function Top() {
 4 |   const posts = import.meta.glob<{ frontmatter: Meta }>('./posts/*.mdx', {
 5 |     eager: true,
 6 |   })
 7 |   return (
 8 |     <div>
 9 |       <h2>Posts</h2>
10 |       <ul class='article-list'>
11 |         {Object.entries(posts).map(([id, module]) => {
12 |           if (module.frontmatter) {
13 |             return (
14 |               <li>
15 |                 <a href={`${id.replace(/\.mdx$/, '')}`}>{module.frontmatter.title}</a>
16 |               </li>
17 |             )
18 |           }
19 |         })}
20 |       </ul>
21 |     </div>
22 |   )
23 | }
24 | 


--------------------------------------------------------------------------------
/projects/mdx/app/routes/posts/hello.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: Hello World
3 | ---
4 | 
5 | ## Hollo World
6 | 
7 | This is a test
8 | 


--------------------------------------------------------------------------------
/projects/mdx/app/server.ts:
--------------------------------------------------------------------------------
1 | import { showRoutes } from 'hono/dev'
2 | import { createApp } from 'honox/server'
3 | 
4 | const app = createApp()
5 | 
6 | showRoutes(app)
7 | 
8 | export default app
9 | 


--------------------------------------------------------------------------------
/projects/mdx/app/types.ts:
--------------------------------------------------------------------------------
1 | export type Meta = {
2 |   title: string
3 | }
4 | 


--------------------------------------------------------------------------------
/projects/mdx/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mdx",
 3 |   "type": "module",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vite build",
 7 |     "preview": "wrangler dev",
 8 |     "deploy": "$npm_execpath run build && wrangler deploy"
 9 |   },
10 |   "private": true,
11 |   "devDependencies": {
12 |     "@hono/vite-ssg": "^0.1.0",
13 |     "@mdx-js/rollup": "^3.0.0",
14 |     "remark-frontmatter": "^5.0.0",
15 |     "remark-mdx-frontmatter": "^4.0.0"
16 |   }
17 | }


--------------------------------------------------------------------------------
/projects/mdx/public/static/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   font-family: Arial, sans-serif;
 3 |   line-height: 1.6;
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   background: #f4f4f4;
 7 |   color: #333;
 8 | }
 9 | 
10 | a:link, a:visited {
11 |   color: #333;
12 |   text-decoration: none;
13 | }
14 | 
15 | header, nav, main, footer {
16 |   padding: 20px;
17 | }
18 | 
19 | header {
20 |   text-align: center;
21 | }
22 | 
23 | article {
24 |   background: #fff;
25 |   padding: 20px;
26 |   margin-bottom: 20px;
27 | }
28 | 
29 | footer {
30 |   text-align: center;
31 | }
32 | 
33 | .article-list li {
34 |   margin: 10px 0;
35 | }
36 | 
37 | .article-list li a {
38 |   text-decoration: none;
39 |   color: #333;
40 | }
41 | 
42 | .article-list li a:hover {
43 |   color: #0275d8;
44 | }


--------------------------------------------------------------------------------
/projects/mdx/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Bundler",
 6 |     "esModuleInterop": true,
 7 |     "strict": true,
 8 |     "lib": [
 9 |       "DOM",
10 |       "ESNext"
11 |     ],
12 |     "types": [
13 |       "vite/client"
14 |     ],
15 |     "jsx": "react-jsx",
16 |     "jsxImportSource": "hono/jsx"
17 |   },
18 | }


--------------------------------------------------------------------------------
/projects/mdx/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import ssg from '@hono/vite-ssg'
 2 | import mdx from '@mdx-js/rollup'
 3 | import honox from 'honox/vite'
 4 | import remarkFrontmatter from 'remark-frontmatter'
 5 | import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
 6 | import { defineConfig } from 'vite'
 7 | 
 8 | const entry = './app/server.ts'
 9 | 
10 | export default defineConfig(() => {
11 |   return {
12 |     plugins: [
13 |       honox(),
14 |       ssg({ entry }),
15 |       mdx({
16 |         jsxImportSource: 'hono/jsx',
17 |         remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter]
18 |       })
19 |     ]
20 |   }
21 | })
22 | 


--------------------------------------------------------------------------------
/projects/mdx/wrangler.jsonc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "../../node_modules/wrangler/config-schema.json",
 3 |   "name": "honox-examples-mdx",
 4 |   "compatibility_date": "2024-04-01",
 5 |   "compatibility_flags": [
 6 |     "nodejs_compat"
 7 |   ],
 8 |   "assets": {
 9 |     "directory": "./dist"
10 |   }
11 | }


--------------------------------------------------------------------------------
/projects/react/app/client.ts:
--------------------------------------------------------------------------------
 1 | // app/client.ts
 2 | import { createClient } from 'honox/client'
 3 | 
 4 | createClient({
 5 |   hydrate: async (elem, root) => {
 6 |     const { hydrateRoot } = await import('react-dom/client')
 7 |     // @ts-expect-error elem is not typed correctly
 8 |     hydrateRoot(root, elem)
 9 |   },
10 |   // @ts-expect-error createElement is not typed correctly
11 |   createElement: async (type: any, props: any) => {
12 |     const { createElement } = await import('react')
13 |     return createElement(type, props)
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/projects/react/app/global.d.ts:
--------------------------------------------------------------------------------
1 | import type {} from 'hono'
2 | 
3 | declare module 'hono' {
4 |   interface Env {
5 |     Variables: {}
6 |     Bindings: {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/projects/react/app/islands/counter.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | 
 3 | export default function Counter() {
 4 |   const [count, setCount] = useState(0)
 5 |   return (
 6 |     <div>
 7 |       <p className="py-2 text-2xl">{count}</p>
 8 |       <button className="px-4 py-2 bg-orange-400 text-white rounded cursor-pointer" onClick={() => setCount(count + 1)}>
 9 |         Increment
10 |       </button>
11 |     </div>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/projects/react/app/routes/_404.tsx:
--------------------------------------------------------------------------------
1 | import type { NotFoundHandler } from 'hono'
2 | 
3 | const handler: NotFoundHandler = (c) => {
4 |   c.status(404)
5 |   return c.render(<>404 Not Found</>)
6 | }
7 | 
8 | export default handler
9 | 


--------------------------------------------------------------------------------
/projects/react/app/routes/_error.tsx:
--------------------------------------------------------------------------------
 1 | import type { ErrorHandler } from 'hono'
 2 | 
 3 | const handler: ErrorHandler = (e, c) => {
 4 |   if ('getResponse' in e) {
 5 |     return e.getResponse()
 6 |   }
 7 |   console.error(e.message)
 8 |   c.status(500)
 9 |   return c.render(<>Internal Server Error</>)
10 | }
11 | 
12 | export default handler
13 | 


--------------------------------------------------------------------------------
/projects/react/app/routes/_renderer.tsx:
--------------------------------------------------------------------------------
 1 | // app/routes/_renderer.tsx
 2 | import { reactRenderer } from '@hono/react-renderer'
 3 | 
 4 | export default reactRenderer(({ children }) => {
 5 |   return (
 6 |     <html lang="en">
 7 |       <head>
 8 |         <meta charSet="UTF-8" />
 9 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10 |         {import.meta.env.PROD ? (
11 |           <>
12 |             <script type="module" src="/static/client.js"></script>
13 |             <link href="/static/assets/style.css" rel="stylesheet" />
14 |           </>
15 |         ) : (
16 |           <>
17 |             <script type="module" src="/app/client.ts"></script>
18 |             <link href="/app/style.css" rel="stylesheet" />
19 |           </>
20 |         )}
21 |       </head>
22 |       <body>{children}</body>
23 |     </html>
24 |   )
25 | })
26 | 


--------------------------------------------------------------------------------
/projects/react/app/routes/index.tsx:
--------------------------------------------------------------------------------
 1 | import { createRoute } from 'honox/factory'
 2 | import Counter from '../islands/counter'
 3 | 
 4 | export default createRoute((c) => {
 5 |   const name = c.req.query('name') ?? 'Hono'
 6 |   return c.render(
 7 |     <div className="py-8 text-center">
 8 |       <title>{name}</title>
 9 |       <h1 className="text-3xl font-bold">Hello, {name}!</h1>
10 |       <Counter />
11 |     </div>
12 |   )
13 | })
14 | 


--------------------------------------------------------------------------------
/projects/react/app/server.ts:
--------------------------------------------------------------------------------
1 | import { showRoutes } from 'hono/dev'
2 | import { createApp } from 'honox/server'
3 | 
4 | const app = createApp()
5 | 
6 | showRoutes(app)
7 | 
8 | export default app
9 | 


--------------------------------------------------------------------------------
/projects/react/app/style.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss' source('../app');
2 | 


--------------------------------------------------------------------------------
/projects/react/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react",
 3 |   "type": "module",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vite build --mode client && vite build",
 7 |     "preview": "wrangler dev",
 8 |     "deploy": "bun run build && wrangler deploy"
 9 |   },
10 |   "private": true,
11 |   "dependencies": {
12 |     "@hono/react-renderer": "^0.3.0",
13 |     "hono": "^4.7.4",
14 |     "honox": "^0.1.38",
15 |     "react": "^19.0.0",
16 |     "react-dom": "^19.0.0"
17 |   },
18 |   "devDependencies": {
19 |     "@cloudflare/workers-types": "^4.20250214.0",
20 |     "@hono/vite-build": "^1.3.0",
21 |     "@hono/vite-dev-server": "^0.18.2",
22 |     "@tailwindcss/vite": "^4.0.9",
23 |     "@types/react": "^19.0.10",
24 |     "@types/react-dom": "^19.0.4",
25 |     "tailwindcss": "^4.0.9",
26 |     "vite": "^6.2.1",
27 |     "wrangler": "^3.109.2"
28 |   }
29 | }


--------------------------------------------------------------------------------
/projects/react/public/.assetsignore:
--------------------------------------------------------------------------------
1 | index.js
2 | .vite/


--------------------------------------------------------------------------------
/projects/react/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yusukebe/honox-examples/2ee31d3509d474bbe9c1d90731a8f9a29132d36d/projects/react/public/favicon.ico


--------------------------------------------------------------------------------
/projects/react/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Bundler",
 6 |     "esModuleInterop": true,
 7 |     "strict": true,
 8 |     "lib": [
 9 |       "DOM",
10 |       "ESNext"
11 |     ],
12 |     "types": [
13 |       "vite/client"
14 |     ],
15 |     "jsx": "react-jsx",
16 |     "jsxImportSource": "react",
17 |   },
18 | }


--------------------------------------------------------------------------------
/projects/react/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import build from '@hono/vite-build/cloudflare-workers'
 2 | import adapter from '@hono/vite-dev-server/cloudflare'
 3 | import tailwindcss from '@tailwindcss/vite'
 4 | import honox from 'honox/vite'
 5 | import { defineConfig } from 'vite'
 6 | 
 7 | export default defineConfig(({ mode }) => {
 8 |   if (mode === 'client') {
 9 |     return {
10 |       build: {
11 |         rollupOptions: {
12 |           input: ['./app/client.ts', './app/style.css'],
13 |           output: {
14 |             entryFileNames: 'static/client.js',
15 |             chunkFileNames: 'static/assets/[name]-[hash].js',
16 |             assetFileNames: 'static/assets/[name].[ext]'
17 |           }
18 |         },
19 |         emptyOutDir: false
20 |       },
21 |       plugins: [tailwindcss()]
22 |     }
23 |   } else {
24 |     return {
25 |       ssr: {
26 |         external: ['react', 'react-dom']
27 |       },
28 |       plugins: [
29 |         honox({
30 |           devServer: { adapter },
31 |           client: { input: ['./app/style.css'] }
32 |         }),
33 |         tailwindcss(),
34 |         build()
35 |       ]
36 |     }
37 |   }
38 | })
39 | 


--------------------------------------------------------------------------------
/projects/react/wrangler.jsonc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "../../node_modules/wrangler/config-schema.json",
 3 |   "name": "honox-examples-react",
 4 |   "main": "./dist/index.js",
 5 |   "compatibility_date": "2024-04-01",
 6 |   "compatibility_flags": [
 7 |     "nodejs_compat"
 8 |   ],
 9 |   "assets": {
10 |     "directory": "./dist"
11 |   }
12 | }


--------------------------------------------------------------------------------
/projects/tailwind/app/client.ts:
--------------------------------------------------------------------------------
1 | import { createClient } from 'honox/client'
2 | 
3 | createClient()
4 | 


--------------------------------------------------------------------------------
/projects/tailwind/app/routes/_renderer.tsx:
--------------------------------------------------------------------------------
 1 | import { jsxRenderer } from 'hono/jsx-renderer'
 2 | import { Link } from 'honox/server'
 3 | 
 4 | export default jsxRenderer(({ children }) => {
 5 |   return (
 6 |     <html lang="en">
 7 |       <head>
 8 |         <meta charset="UTF-8" />
 9 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10 |         <Link rel="stylesheet" href="/app/style.css" />
11 |       </head>
12 |       <body>{children}</body>
13 |     </html>
14 |   )
15 | })
16 | 


--------------------------------------------------------------------------------
/projects/tailwind/app/routes/index.tsx:
--------------------------------------------------------------------------------
 1 | import { createRoute } from 'honox/factory'
 2 | 
 3 | export default createRoute((c) => {
 4 |   return c.render(
 5 |     <div>
 6 |       <h1 class="text-3xl font-bold underline">Hello!</h1>
 7 |     </div>
 8 |   )
 9 | })
10 | 


--------------------------------------------------------------------------------
/projects/tailwind/app/server.ts:
--------------------------------------------------------------------------------
1 | import { showRoutes } from 'hono/dev'
2 | import { createApp } from 'honox/server'
3 | 
4 | const app = createApp()
5 | 
6 | showRoutes(app)
7 | 
8 | export default app
9 | 


--------------------------------------------------------------------------------
/projects/tailwind/app/style.css:
--------------------------------------------------------------------------------
1 | @import 'tailwindcss' source('../app');
2 | 


--------------------------------------------------------------------------------
/projects/tailwind/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwind",
 3 |   "type": "module",
 4 |   "scripts": {
 5 |     "dev": "vite",
 6 |     "build": "vite build --mode client && vite build",
 7 |     "preview": "wrangler dev",
 8 |     "deploy": "$npm_execpath run build && wrangler deploy"
 9 |   },
10 |   "private": true,
11 |   "devDependencies": {
12 |     "@tailwindcss/vite": "^4.0.9",
13 |     "tailwindcss": "^4.0.9"
14 |   }
15 | }


--------------------------------------------------------------------------------
/projects/tailwind/public/.assetsignore:
--------------------------------------------------------------------------------
1 | index.js
2 | .vite/


--------------------------------------------------------------------------------
/projects/tailwind/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "bundler",
 6 |     "esModuleInterop": true,
 7 |     "strict": true,
 8 |     "lib": [
 9 |       "esnext"
10 |     ],
11 |     "types": [
12 |       "vite/client"
13 |     ],
14 |     "jsx": "react-jsx",
15 |     "jsxImportSource": "hono/jsx"
16 |   },
17 | }


--------------------------------------------------------------------------------
/projects/tailwind/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import build from '@hono/vite-build/cloudflare-workers'
 2 | import honox from 'honox/vite'
 3 | import { defineConfig } from 'vite'
 4 | import tailwindcss from '@tailwindcss/vite'
 5 | 
 6 | export default defineConfig({
 7 |   plugins: [
 8 |     tailwindcss(),
 9 |     honox({
10 |       client: {
11 |         input: ['./app/style.css']
12 |       }
13 |     }),
14 |     build()
15 |   ]
16 | })
17 | 


--------------------------------------------------------------------------------
/projects/tailwind/wrangler.jsonc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "../../node_modules/wrangler/config-schema.json",
 3 |   "name": "honox-examples-tailwind",
 4 |   "main": "./dist/index.js",
 5 |   "compatibility_date": "2024-04-01",
 6 |   "compatibility_flags": [
 7 |     "nodejs_compat"
 8 |   ],
 9 |   "assets": {
10 |     "directory": "./dist"
11 |   }
12 | }


--------------------------------------------------------------------------------