wip: New Application Architecture

Explore a new approach to clean up the implementation of an AppShell and individual pages. Will likely retire htmx for a lightweight custom page router.
2025-10-17 13:53:30 -07:00 · 2025-10-17 13:53:30 -07:00 · 16cf44b42d
commit 16cf44b42d
parent cc79afaea0
21 changed files with 129 additions and 260 deletions
--- a/bun.lock
+++ b/bun.lock
@ -9,7 +9,7 @@
        "elysia": "^1.4.11",
      },
      "devDependencies": {
-        "bun-types": "^1.3.0",
+        "@types/bun": "^1.3.0",
      },
    },
  },
@ -30,6 +30,8 @@

    "@tokenizer/token": ["@tokenizer/token@0.3.0", "", {}, "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="],

+    "@types/bun": ["@types/bun@1.3.0", "", { "dependencies": { "bun-types": "1.3.0" } }, "sha512-+lAGCYjXjip2qY375xX/scJeVRmZ5cY0wyHYyCYxNcdEXrQ4AOe3gACgd4iQ8ksOslJtW4VNxBJ8llUwc3a6AA=="],
+
    "@types/node": ["@types/node@24.7.2", "", { "dependencies": { "undici-types": "~7.14.0" } }, "sha512-/NbVmcGTP+lj5oa4yiYxxeBjRivKQ5Ns1eSZeB99ExsEQ6rX5XYU1Zy/gGxY/ilqtD4Etx9mKyrPxZRetiahhA=="],

    "@types/react": ["@types/react@19.2.2", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA=="],
--- a/index.tsx
+++ b/index.tsx
@ -0,0 +1,28 @@
+import { Elysia } from "elysia";
+import { html } from "@elysiajs/html";
+import { staticPlugin } from "@elysiajs/static";
+
+import { AppShell } from "./src/frontend/AppShell";
+import { app } from "./src/backend";
+
+const index = new Elysia()
+  .use(html())
+  .onRequest(({ request }) => {
+    console.log(`Request ${request.method} ${request.url}`);
+  })
+  .onAfterHandle(({ request, responseValue }) => {
+    if (request.headers.get("hx-request") === "true") {
+      return responseValue; // Return the <main> element if the request is an HTMX request
+    }
+    return AppShell(responseValue); // Return the <main> element wrapped by the AppShell
+  })
+  .use(staticPlugin({
+    assets: './src/public',
+    prefix: '/public'
+  }))
+  .use(app)
+  .listen(3000);
+ 
+console.log(
+  `🦊 Elysia is running at ${index.server?.hostname}:${index.server?.port}`
+);
--- a/package.json
+++ b/package.json
@ -3,7 +3,7 @@
  "version": "1.0.50",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "bun run --watch src/index.tsx"
+    "dev": "bun run --watch ./index.tsx"
  },
  "dependencies": {
    "@elysiajs/html": "1.4.0",
@ -11,7 +11,7 @@
    "elysia": "^1.4.11"
  },
  "devDependencies": {
-    "bun-types": "^1.3.0"
+    "@types/bun": "^1.3.0"
  },
  "module": "src/index.js"
 }
--- a/src/app.tsx
+++ b/src/app.tsx
@ -1,15 +0,0 @@
-import { Elysia } from "elysia";
-import { Index, selectPage } from "./frontend";
-
-export const app = new Elysia()
-    .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);
-}
--- a/src/backend/index.tsx
+++ b/src/backend/index.tsx
@ -0,0 +1,22 @@
+import { Html } from "@elysiajs/html";
+import { Elysia, NotFoundError } from "elysia";
+
+import { Home } from "../frontend/home";
+import { Blog } from "../frontend/blog";
+import { NotFound } from "../frontend/not-found";
+
+
+export const app = new Elysia()
+    .onError(({ error }) => {
+        if(error instanceof NotFoundError) {
+            return <NotFound />;
+        }
+        return error;
+    })
+    .get("/", () => { return <Home /> })
+    .get("/:path", ({ path }) => {
+        if(path === "/blog") {
+            return <Blog />;
+        }
+        throw new NotFoundError();
+    })
--- a/src/frontend/AppShell.tsx
+++ b/src/frontend/AppShell.tsx
@ -0,0 +1,44 @@
+import { Html } from "@elysiajs/html";
+
+const styles = Bun.file("./src/public/styles.css").text();
+const headScript = Bun.file("./src/public/head.js").text();
+const onLoadScript = Bun.file("./src/public/onLoad.js").text();
+
+export function AppShell(responseValue: any) {
+    return (
+        <html>
+            <head>
+                <title>Caleb's Blog</title>
+                <style>
+                    {styles}
+                </style>
+                <script>
+                    {headScript}
+                </script>
+                <script defer>
+                    {onLoadScript}
+                </script>
+                
+            </head>
+            <body>
+                {responseValue}
+                <aside>
+                    <h3>About Me</h3>
+                    <p>I'm a software engineer</p>
+                    <ul>
+                        <li>Twitter</li>
+                        <li>GitHub</li>
+                        <li>LinkedIn</li>
+                    </ul>
+                    <h3>Categories</h3>
+                    <ul>
+                        <li>Web Development</li>
+                        <li>UI/UX Design</li>
+                        <li>Productivity</li>
+                        <li>Career</li>
+                    </ul>
+                </aside>
+            </body>
+        </html>
+    )
+}
--- a/src/frontend/blog.tsx
+++ b/src/frontend/blog.tsx
@ -0,0 +1,9 @@
+import { Html } from "@elysiajs/html";
+
+export function Blog() {
+    return (
+        <main>
+            <h1>Blog</h1>
+        </main>
+    )
+}
--- a/src/frontend/components/Header.tsx
+++ b/src/frontend/components/Header.tsx
@ -1,15 +0,0 @@
-export function Header() {
-    return (
-        <div>
-            <header hx-boost="true">
-                <span>Caleb Braaten</span>
-                <nav>
-                    <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 />
-        </div>
-    )
-}
--- a/src/frontend/components/icons.tsx
+++ b/src/frontend/components/icons.tsx
@ -1,60 +0,0 @@
-export function GithubIcon(props: any) {
-    return (
-      <svg
-        {...props}
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
-        <path d="M9 18c-4.51 2-5-2-7-2" />
-      </svg>
-    )
-  }
-
-export function LinkedinIcon(props: any) {
-    return (
-      <svg
-        {...props}
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
-        <rect width="4" height="12" x="2" y="9" />
-        <circle cx="4" cy="4" r="2" />
-      </svg>
-    )
-  }
-
-export function XIcon(props: any) {
-    return (
-      <svg
-        {...props}
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 1200 1227"
-        preserveAspectRatio="none"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="black" />
-      </svg>
-    )
-  }
--- a/src/frontend/home.tsx
+++ b/src/frontend/home.tsx
@ -0,0 +1,9 @@
+import { Html } from "@elysiajs/html";
+
+export function Home() {
+    return (
+        <main>
+            <h1>Home</h1>
+        </main>
+    )
+}
--- a/src/frontend/index.tsx
+++ b/src/frontend/index.tsx
@ -1,35 +0,0 @@
-import { Header } from "./components/Header";
-import { Home } from "./pages/home";
-import { Blog } from "./pages/blog";
-import { Projects } from "./pages/projects";
-
-export function Index(path: string) {
-    return (
-        <html lang="en">
-            <head>
-                <meta charset="UTF-8" />
-                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-                <script defer src="./htmx.min.js"></script>
-                <title>Caleb's Blog</title>
-                <link rel="stylesheet" href="./styles.css" />
-            </head>
-            <body>
-                <Header />
-                <main>
-                    {selectPage(path)}
-                </main>
-            </body>
-        </html>
-    )
-}
-
-export function selectPage(path: string) {
-    switch (path) {
-        case '/':
-            return <Home />
-        case '/blog':
-            return <Blog />
-        case '/projects':
-            return <Projects />
-    }
-}
--- a/src/frontend/not-found.tsx
+++ b/src/frontend/not-found.tsx
@ -0,0 +1,9 @@
+import { Html } from "@elysiajs/html";
+
+export function NotFound() {
+    return (
+        <main>
+            <h1>404 Not Found</h1>
+        </main>
+    )
+}
--- a/src/frontend/pages/blog.tsx
+++ b/src/frontend/pages/blog.tsx
@ -1,50 +0,0 @@
-export function Blog(){
-    return (
-        <div>
-            <section>
-                <article>
-                    <h2>Blog Post Title</h2>
-                    <div>Posted on January 1, 2024</div>
-                    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
-                    <a href="/post/3">Read More</a>
-                </article>
-
-                <article>
-                    <h2>Another Blog Post Title</h2>
-                    <div>Posted on December 1, 2023</div>
-                    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
-                    <a href="/post/2">Read More</a>
-                </article>
-
-                <article>
-                    <h2>The First Blog Post</h2>
-                    <div>Posted on November 1, 2023</div>
-                    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
-                    <a href="/post/1">Read More</a> 
-                </article>
-            </section>
-            <aside>
-                <div>
-                    <h3>About Me</h3>
-                    <p>I'm a software engineer</p>
-                
-                    <h3>Connect with me</h3>
-                    <ul>
-                        <li>Twitter</li>
-                        <li>GitHub</li>
-                        <li>LinkedIn</li>
-                    </ul>
-                </div>
-                <div>
-                    <h3>Categories</h3>
-                    <ul>
-                        <li>Web Development</li>
-                        <li>UI/UX Design</li>
-                        <li>Productivity</li>
-                        <li>Career</li>
-                    </ul>
-                </div>
-            </aside>
-        </div>
-    )
-}
--- a/src/frontend/pages/home.tsx
+++ b/src/frontend/pages/home.tsx
@ -1,41 +0,0 @@
-import { GithubIcon, LinkedinIcon, XIcon } from "../components/icons"
-
-export function Home(){
-    return (
-        <div>
-            <article class="post-spotlight">
-                <h2>Most Recent Blog Post Title</h2>
-                <div>Posted on January 1, 2024</div>
-                <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
-                <a href="/post/3">Continue Reading...</a>
-            </article>
-            <hr />
-            <aside>
-                <div class="about">
-                    <h3>About Me</h3>
-                    <p>I'm a software engineer</p>
-                    <ul>
-                        <li>
-                            <a href=""><XIcon /></a>
-                        </li>
-                        <li>
-                            <a href=""><GithubIcon /></a>
-                        </li>
-                        <li>
-                            <a href=""><LinkedinIcon /></a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="content-categories">
-                    <h3>Categories</h3>
-                    <ul>
-                        <li>Web Development</li>
-                        <li>UI/UX Design</li>
-                        <li>Productivity</li>
-                        <li>Career</li>
-                    </ul>
-                </div>
-            </aside>
-        </div>
-    )
-}
--- a/src/frontend/pages/projects.tsx
+++ b/src/frontend/pages/projects.tsx
@ -1,18 +0,0 @@
-export function Projects(){
-    return (
-        <div class="projects">
-            <div>
-                <img src="https://via.placeholder.com/150" />
-                <h2>This Site</h2>
-                <p>Project 1 description</p>
-                <a href="/project/1">Git Repo</a>
-            </div>
-            <div>
-                <img src="https://via.placeholder.com/150" />
-                <h2>Home Server</h2>
-                <p>Project 1 description</p>
-                <a href="/project/1">Git Repo</a>
-            </div>
-        </div>
-    )
-}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,20 +0,0 @@
-import { Elysia } from "elysia";
-import { html } from "@elysiajs/html";
-import { staticPlugin } from "@elysiajs/static";
-import { app } from "./app";
-
-const index = new Elysia()
-  .use(html())
-  .use(staticPlugin({
-    assets: './src/frontend/public',
-    prefix: '/'
-  }))
-  .use(app)
-  .onRequest(({ request }) => {
-    console.log(`Request ${request.method} ${request.url}`);
-  })
-  .listen(3000);
- 
-console.log(
-  `🦊 Elysia is running at ${index.server?.hostname}:${index.server?.port}`
-);
--- a/src/public/head.js
+++ b/src/public/head.js
--- a/src/frontend/public/htmx.min.js
+++ b/src/frontend/public/htmx.min.js
--- a/src/public/onLoad.js
+++ b/src/public/onLoad.js
--- a/src/frontend/public/styles.css
+++ b/src/frontend/public/styles.css