hono
hono copied to clipboard
honojs
Examples for SSG
I think the new SSG features are great. However, we need to understand real world use cases and find the missing features and bugs. It would be good to create some examples for this purpose.
@watany-dev or @nakasyou
If you have time, it would be helpful if you could make some examples of some patterns with SSG in your GitHub project!
Understood. However, I would like to prioritize creating the documentation for SSG first. As I won't be able to dedicate a substantial amount of time for a while, it might take some time to get started. But if this level is acceptable, I plan to upload it to GitHub once rc3 is released.
import { Hono } from 'hono';
import { serveStatic } from 'hono/bun';
const Layout = ({ title, children, timeLabel, time }) => (
<html>
<head>
<script src="https://unpkg.com/htmx.org"></script>
</head>
<body>
<h1>{title}</h1>
<p>{children}</p>
{time && <p>{timeLabel}: {time}</p>}
<BackToHomeLink />
</body>
</html>
);
const buttonStyle = {
display: 'inline-block',
margin: '5px',
padding: '10px',
backgroundColor: '#4CAF50',
color: 'white',
textDecoration: 'none',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
};
const BackToHomeLink = () => (
<a href="/" hx-get="/" hx-target="body" style={buttonStyle}>Back to Home</a>
);
const HomePage = () => (
<Layout title="Welcome to the Hono SSR/SSG Demo">
<a href="/ssr" hx-get="/ssr" hx-target="body" style={buttonStyle}>Go to SSR</a>
<a href="/ssg" hx-get="/ssg" hx-target="body" style={buttonStyle}>Go to SSG</a>
</Layout>
);
const SSRPage = () => {
const currentTime = new Date().toLocaleString();
return (
<Layout title="SSR Page" timeLabel="Current Time" time={currentTime}>
This page is server-side rendered.
</Layout>
);
};
const SSGPage = () => {
const buildTime = new Date().toLocaleString();
return (
<Layout title="SSG Page" timeLabel="Build Time" time={buildTime}>
This page is statically generated.
</Layout>
);
};
const app = new Hono();
app.use('*', serveStatic({ root: './static' }))
app.get('/', (c) => c.html(<HomePage />));
app.get('/ssr', (c) => c.html(<SSRPage />));
app.get('/ssg', (c) => c.html(<SSGPage />));
export default app;
