/* @jsxImportSource https://esm.sh/hono/jsx */ import { Hono } from "npm:hono"; import { html } from "npm:hono/html"; import type { Child, FC } from "npm:hono/jsx"; import { jsxRenderer, useRequestContext } from "npm:hono/jsx-renderer"; const app = new Hono(); // Components /** * Nav component that uses `hx-boost` toplevel links targeting `main`. * * @remarks * hx-boost links targeting `main` are handled automatically by the * layout middleware. */ const Nav: FC = () => { return ( ); }; // Layout /** * Layout component that wraps children in a `main` tag. */ const Main: FC<{ children: Child }> = ({ children }) => { return (

{children}

); }; /** * Layout component that wraps children in a full html page. */ const Page: FC<{ children: Child }> = ({ children }) => { return (

); }; /** * Conditional layout component based on the hx-target header. * * @remarks * Check the `hx-target` header to see if htmx made the request and is * expecting a partial to swap in. * This app uses boosted links that target `main`. That way we can keep all * the javascript and the nav bar loaded. The `main` target is handled here. * If the `hx-target` is anything else we return the inner content. * If there is no `hx-target` header then this is a fresh page load and we * return the whole layout. */ const Layout: FC<{ children: Child }> = ({ children }) => { const c = useRequestContext(); const hx_target = c.req.header("hx-target"); switch (hx_target) { case undefined: { return ; } case "main": { return

; } default: { return <>{children}; } } }; app.use("*", jsxRenderer(({ children }) => )); app.get("/", (c) => { return c.render(

, ); }); app.get("/test_page", (c) => { return c.render(

Test Page

, ); }); export default app.fetch;

htmx_hono_layout