defunkt/hype
2
0
Fork 0
Code Issues Pull Requests Activity

default layout

Browse Source
This commit is contained in:
Chris Wanstrath 2025-11-29 13:06:19 -08:00
parent b27d0223ee
commit 09f91f5ba8
3 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -53,7 +53,14 @@ The `req` JSX prop will be given the `Hono` request:
export default ({ req }) => `Query Param 'id': ${req.query('id')}` export default ({ req }) => `Query Param 'id': ${req.query('id')}`
If `_layout.tsx` exists, your pages will automatically be wrapped in it: To put a file in `./src/pages` but prevent it from being server, preface it with `_`.
### Layout
`hype` will wrap everything in a simple default layout unless `./src/pages/_layout.tsx` exists,
in which case it'll use the default export in that file.
Here's a starting point:
```tsx ```tsx
export default ({ children, title }: any) => ( export default ({ children, title }: any) => (
@ -73,8 +80,6 @@ export default ({ children, title }: any) => (
) )
``` ```
(Files starting with `_` don't get served directly.)
### css ### css
CSS can be accessed via `/css/main.css`: CSS can be accessed via `/css/main.css`:

3
src/index.tsx
View File

@ -4,6 +4,7 @@ import { serveStatic } from 'hono/bun'
import color from 'kleur' import color from 'kleur'
import { transpile } from './utils' import { transpile } from './utils'
import defaultLayout from './layout'
const SHOW_HTTP_LOG = true const SHOW_HTTP_LOG = true
const CSS_RESET = await Bun.file(join(import.meta.dir, '/reset.css')).text() const CSS_RESET = await Bun.file(join(import.meta.dir, '/reset.css')).text()
@ -70,7 +71,7 @@ export class Hype extends Hono {
return render404(c) return render404(c)
const layoutPath = join(process.env.PWD ?? '.', `./src/pages/_layout.tsx`) const layoutPath = join(process.env.PWD ?? '.', `./src/pages/_layout.tsx`)
let Layout let Layout = defaultLayout
if (await Bun.file(layoutPath).exists()) if (await Bun.file(layoutPath).exists())
Layout = (await import(layoutPath + `?t=${Date.now()}`)).default Layout = (await import(layoutPath + `?t=${Date.now()}`)).default

20
src/layout.tsx Normal file
View File

@ -0,0 +1,20 @@
import { type FC } from 'hono/jsx'
const Layout: FC = ({ children, title }) =>
<html lang="en">
<head>
<title>{title ?? 'hype'}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/css/main.css" rel="stylesheet" />
<script src="/js/main.ts" type="module"></script>
</head>
<body>
<main>
{children}
</main>
</body>
</html>
export default Layout