1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/** @jsxImportSource https://esm.sh/hono@3.9.2/jsx **/
import { Hono } from "https://esm.sh/hono@3.9.2";
import type { FC } from "https://esm.sh/hono@3.9.2/jsx";
const Layout: FC = (props) => {
return (
<html>
<head>
<style>
{`
.container {
container-type: inline-size;
}
main {
padding: 1rem;
}
article {
padding-bottom: 1rem;
font-size: 1rem;
}
@container (min-width: 60ch) {
article {
padding-bottom: 2rem;
font-size: 1.25rem;
}
}`}
</style>
</head>
<body>{props.children}</body>
</html>
);
};
const Top: FC<{ messages: string[] }> = (props: { messages: string[] }) => {
return (
<Layout>
<main class="container">
<article>
Fictum, deserunt mollit anim laborum astutumque! Quisque placerat facilisis egestas cillum dolore. Nec
dubitamus multa iter quae et nos invenerat. Contra legem facit qui id facit quod lex prohibet. Quam diu etiam
furor iste tuus nos eludet?
</article>
<article>
Phasellus laoreet lorem vel dolor tempus vehicula. Idque Caesaris facere voluntate liceret: sese habere. Ab
illo tempore, ab est sed immemorabili. Mercedem aut nummos unde unde extricat, amaras. Praeterea iter est
quasdam res quas ex communi.
</article>
<article>
Quisque ut dolor gravida, placerat libero vel, euismod. Ambitioni dedisse scripsisse iudicaretur. Donec sed
odio operae, eu vulputate felis rhoncus. Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
</article>
<h1 style={{ color: "red" }}>Hello Hono!</h1>
<ul>
{props.messages.map((message) => {
return <li>{message}!!</li>;
})}
</ul>
</main>
</Layout>
);
};
const app = new Hono();
app.get("/", (c) => {
const messages = ["Good Morning", "Good Evening", "Good Night"];
return c.html(<Top messages={messages} />);
});
export let honoJSX = app.fetch;