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

add pico, pico + reset to default layout

Browse Source
This commit is contained in:
Chris Wanstrath 2025-11-29 14:14:17 -08:00
parent 275527e30e
commit ebcce8dea1
4 changed files with 57 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
README.md
View File

@ -10,12 +10,16 @@
░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓████████▓▒░ ░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓████████▓▒░
░▒▓███████████████████████████████████████████████▓▒░ ░▒▓███████████████████████████████████████████████▓▒░
`hype` wraps `hono` with useful defaults: `hype` wraps `hono` with useful features for fast prototyping:
- HTTP logging (disable with `NO_HTTP_LOG` env variable) - HTTP logging (disable with `NO_HTTP_LOG` env variable)
- Static files served from `pub/` - Static files served from `pub/`
- Page-based routing to `.tsx` files that export a `JSX` function in `./src/pages` - Page-based routing to `.tsx` files that export a `JSX` function in `./src/pages`
- Transpile `.ts` files in `src/js/blah.ts` via `website.com/js/blah.ts` - Transpile `.ts` files in `src/js/blah.ts` via `website.com/js/blah.ts`
- Helpers like `css` and `js` template tags.
- Default, simple HTML5 layout with working frontend transpilation/bundling, or supply your own.
- Optional CSS reset.
- Optional pico.css.
## Overview ## Overview
@ -60,6 +64,9 @@ To put a file in `./src/pages` but prevent it from being server, preface it with
`hype` will wrap everything in a simple default layout unless `./src/pages/_layout.tsx` exists, `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. in which case it'll use the default export in that file.
Using the default layout, you can put TS in `./src/js/main.ts` and css in `./src/css/main.css`
and they'll automatically work in your app.
Here's a starting point: Here's a starting point:
```tsx ```tsx
@ -80,6 +87,22 @@ export default ({ children, title }: any) => (
) )
``` ```
### pico.css
To use pico.css with the default layout, create `Hype` with `{ pico: true }`:
`````typescript
import { Hype } from 'hype'
const app = new Hype({ pico: true })
```
You can also use pico in your custom layouts:
```html
<link href="/css/pico.css" rel="stylesheet" />
```
### css ### css
CSS can be accessed via `/css/main.css`: CSS can be accessed via `/css/main.css`:
@ -107,7 +130,15 @@ export default () => (
### css reset ### css reset
`hype` includes a css reset for your convenience:
To use reset.css with the default layout, create `Hype` with `{ reset: true }`:
````typescript
import { Hype } from 'hype'
const app = new Hype({ reset: true })
You can also use the css reset in your custom layouts:
```html ```html
<link href="/css/reset.css" rel="stylesheet" /> <link href="/css/reset.css" rel="stylesheet" />
@ -233,3 +264,4 @@ export default app.defaults
bun install bun install
bun test bun test
``` ```
`````

20
src/index.tsx
View File

@ -9,14 +9,23 @@ 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()
const PICO_CSS = await Bun.file(join(import.meta.dir, '/pico.css')).text()
export * from './utils' export * from './utils'
export type HypeProps = {
pico?: boolean
reset?: boolean
}
export class Hype extends Hono { export class Hype extends Hono {
routesRegistered = false routesRegistered = false
props: HypeProps = {}
constructor() { constructor(props?: HypeProps) {
super() super()
if (props) this.props = props
} }
registerRoutes() { registerRoutes() {
@ -55,9 +64,10 @@ export class Hype extends Hono {
} }
// css reset // css reset
this.get('/css/reset.css', async c => new Response(CSS_RESET, { this.get('/css/reset.css', async c => new Response(CSS_RESET, { headers: { 'Content-Type': 'text/css' } }))
headers: { 'Content-Type': 'text/css' }
})) // pico
this.get('/css/pico.css', async c => new Response(PICO_CSS, { headers: { 'Content-Type': 'text/css' } }))
// serve transpiled js // serve transpiled js
this.on('GET', ['/js/:path{.+}', '/shared/:path{.+}'], async c => { this.on('GET', ['/js/:path{.+}', '/shared/:path{.+}'], async c => {
@ -93,7 +103,7 @@ export class Hype extends Hono {
const page = await import(path + `?t=${Date.now()}`) const page = await import(path + `?t=${Date.now()}`)
const innerHTML = typeof page.default === 'function' ? <page.default req={c.req} /> : page.default const innerHTML = typeof page.default === 'function' ? <page.default req={c.req} /> : page.default
const withLayout = Layout ? <Layout>{innerHTML}</Layout> : innerHTML const withLayout = Layout ? <Layout props={this.props}>{innerHTML}</Layout> : innerHTML
return c.html(withLayout) return c.html(withLayout)
}) })
} }

5
src/layout.tsx
View File

@ -1,12 +1,15 @@
import { type FC } from 'hono/jsx' import { type FC } from 'hono/jsx'
const Layout: FC = ({ children, title }) => const Layout: FC = ({ children, title, props }) =>
<html lang="en"> <html lang="en">
<head> <head>
<title>{title ?? 'hype'}</title> <title>{title ?? 'hype'}</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
{props.reset && <link href="/css/reset.css" rel="stylesheet" />}
{props.pico && <link href="/css/pico.css" rel="stylesheet" />}
<link href="/css/main.css" rel="stylesheet" /> <link href="/css/main.css" rel="stylesheet" />
<script src="/js/main.ts" type="module"></script> <script src="/js/main.ts" type="module"></script>
</head> </head>

4
src/pico.css Normal file
View File

File diff suppressed because one or more lines are too long