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 { 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()
.get("/", () => Index("/"))
.get("/blog", () => Index("/blog"))
.get("/projects", () => Index("/projects"))
.get("/", (context) => isHTMXResponse( context, "/"))
.get("/blog", (context) => isHTMXResponse( context, "/blog"))
.get("/projects", (context) => isHTMXResponse( context, "/projects"))
.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() {
return (
<div>
<header>
<header hx-boost="true">
<span>Caleb Braaten</span>
<nav>
<a href="/">Home</a>
<a href="/blog">Blog</a>
<a href="/projects">Projects</a>
<a hx-target="main" href="/">Home</a>
<a hx-target="main" href="/blog">Blog</a>
<a hx-target="main" href="/projects">Projects</a>
</nav>
</header>
<hr />

6
src/frontend/index.tsx
View File

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