Add HTMX Client Side Routing Optimization

2024-01-31 04:36:05 -08:00
parent d4e157f1fa
commit 6f3d9b4a19
3 changed files with 22 additions and 10 deletions
--- a/src/frontend/components/Header.tsx
+++ b/src/frontend/components/Header.tsx
@@ -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 />
--- a/src/frontend/index.tsx
+++ b/src/frontend/index.tsx
@@ -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 />