Caleb/Blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add HTMX Client Side Routing Optimization

Browse Source
This commit is contained in:
Caleb Braaten 2024-01-31 04:36:05 -08:00
parent d4e157f1fa
commit 6f3d9b4a19
3 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app.tsx
View File

@ -1,8 +1,18 @@
import { Elysia } from "elysia"; import { Elysia } from "elysia";
import { Index } from "./frontend"; import { Index, selectPage } from "./frontend";
import { Home } from "./frontend/pages/home";
import { Blog } from "./frontend/pages/blog";
import { Projects } from "./frontend/pages/projects";
export const app = new Elysia() export const app = new Elysia()
.get("/", () => Index("/")) .get("/", (context) => isHTMXResponse( context, "/"))
.get("/blog", () => Index("/blog")) .get("/blog", (context) => isHTMXResponse( context, "/blog"))
.get("/projects", () => Index("/projects")) .get("/projects", (context) => isHTMXResponse( context, "/projects"))
.get("/content/post", () => "I'm from the server") .get("/content/post", () => "I'm from the server")
function isHTMXResponse ( context: any, path: string) {
if (context.headers["hx-request"] === "true") {
return selectPage(path);
}
return Index(path);
}

8
src/frontend/components/Header.tsx
View File

@ -1,12 +1,12 @@
export function Header() { export function Header() {
return ( return (
<div> <div>
<header> <header hx-boost="true">
<span>Caleb Braaten</span> <span>Caleb Braaten</span>
<nav> <nav>
<a href="/">Home</a> <a hx-target="main" href="/">Home</a>
<a href="/blog">Blog</a> <a hx-target="main" href="/blog">Blog</a>
<a href="/projects">Projects</a> <a hx-target="main" href="/projects">Projects</a>
</nav> </nav>
</header> </header>
<hr /> <hr />

6
src/frontend/index.tsx
View File

@ -15,7 +15,9 @@ export function Index(path: string) {
</head> </head>
<body> <body>
<Header /> <Header />
{page(path)} <main>
{selectPage(path)}
</main>
<h1>Hello</h1> <h1>Hello</h1>
<button hx-get="/content/post">Click Me</button> <button hx-get="/content/post">Click Me</button>
</body> </body>
@ -23,7 +25,7 @@ export function Index(path: string) {
) )
} }
function page(path: string) { export function selectPage(path: string) {
switch (path) { switch (path) {
case '/': case '/':
return <Home /> return <Home />