Skip to content

Commit

Permalink
feat(blog): building a blog environment using honox
Browse files Browse the repository at this point in the history
  • Loading branch information
yossydev committed Mar 19, 2024
1 parent 84d2ff7 commit 702ecaf
Show file tree
Hide file tree
Showing 12 changed files with 632 additions and 80 deletions.
12 changes: 12 additions & 0 deletions blog/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
node_modules
dist
.wrangler
.dev.vars
.hono

# Change them to your taste:
wrangler.toml
package-lock.json
yarn.lock
pnpm-lock.yaml
bun.lockb
3 changes: 3 additions & 0 deletions blog/app/client.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { createClient } from 'honox/client'

createClient()
15 changes: 15 additions & 0 deletions blog/app/global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import {} from 'hono'

type Head = {
title?: string
}

declare module 'hono' {
interface Env {
Variables: {}
Bindings: {}
}
interface ContextRenderer {
(content: string | Promise<string>, head?: Head): Response | Promise<Response>
}
}
11 changes: 11 additions & 0 deletions blog/app/islands/counter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { useState } from 'hono/jsx'

export default function Counter() {
const [count, setCount] = useState(0)
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
)
}
18 changes: 18 additions & 0 deletions blog/app/routes/_renderer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { Style } from 'hono/css'
import { jsxRenderer } from 'hono/jsx-renderer'
import { Script } from 'honox/server'

export default jsxRenderer(({ children, title }) => {
return (
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<Script src="/app/client.ts" async />
<Style />
</head>
<body>{children}</body>
</html>
)
})
18 changes: 18 additions & 0 deletions blog/app/routes/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { css } from 'hono/css'
import { createRoute } from 'honox/factory'
import Counter from '../islands/counter'

const className = css`
font-family: sans-serif;
`

export default createRoute((c) => {
const name = c.req.query('name') ?? 'Hono'
return c.render(
<div class={className}>
<h1>Hello, {name}!</h1>
<Counter />
</div>,
{ title: name }
)
})
8 changes: 8 additions & 0 deletions blog/app/server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { showRoutes } from 'hono/dev'
import { createApp } from 'honox/server'

const app = createApp()

showRoutes(app)

export default app
20 changes: 20 additions & 0 deletions blog/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "blog",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build --mode client && vite build",
"preview": "wrangler pages dev ./dist",
"deploy": "$npm_execpath run build && wrangler pages deploy ./dist"
},
"dependencies": {
"hono": "^4.1.2",
"honox": "^0.1.9"
},
"devDependencies": {
"@cloudflare/workers-types": "^4.20240208.0",
"@hono/vite-cloudflare-pages": "^0.2.4",
"vite": "^5.0.12",
"wrangler": "^3.32.0"
}
}
12 changes: 12 additions & 0 deletions blog/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Bundler",
"strict": true,
"lib": ["ESNext", "DOM"],
"types": ["@cloudflare/workers-types"],
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx"
}
}
15 changes: 15 additions & 0 deletions blog/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import pages from "@hono/vite-cloudflare-pages";
import honox from "honox/vite";
import client from "honox/vite/client";
import { defineConfig } from "vite";

export default defineConfig(({ mode }) => {
if (mode === "client") {
return {
plugins: [client()],
};
}
return {
plugins: [honox(), pages()],
};
});
Loading

0 comments on commit 702ecaf

Please sign in to comment.