\n {children}\n

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

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

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

\n \n

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

Test Page

,\n );\n});\n\nexport default app.fetch;","deleted","label",[99],"permalink","https://www.val.town/x/saolsen/htmx_hono_layout/code/main.tsx","extension","actionData","errors"]