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.
This commit is contained in:
Caleb Braaten 2025-10-17 13:53:30 -07:00
parent cc79afaea0
commit 16cf44b42d
21 changed files with 129 additions and 260 deletions

View File

@ -9,7 +9,7 @@
"elysia": "^1.4.11", "elysia": "^1.4.11",
}, },
"devDependencies": { "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=="], "@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/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=="], "@types/react": ["@types/react@19.2.2", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA=="],

28
index.tsx Normal file
View File

@ -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}`
);

View File

@ -3,7 +3,7 @@
"version": "1.0.50", "version": "1.0.50",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"dev": "bun run --watch src/index.tsx" "dev": "bun run --watch ./index.tsx"
}, },
"dependencies": { "dependencies": {
"@elysiajs/html": "1.4.0", "@elysiajs/html": "1.4.0",
@ -11,7 +11,7 @@
"elysia": "^1.4.11" "elysia": "^1.4.11"
}, },
"devDependencies": { "devDependencies": {
"bun-types": "^1.3.0" "@types/bun": "^1.3.0"
}, },
"module": "src/index.js" "module": "src/index.js"
} }

View File

@ -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);
}

22
src/backend/index.tsx Normal file
View File

@ -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();
})

44
src/frontend/AppShell.tsx Normal file
View File

@ -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>
)
}

9
src/frontend/blog.tsx Normal file
View File

@ -0,0 +1,9 @@
import { Html } from "@elysiajs/html";
export function Blog() {
return (
<main>
<h1>Blog</h1>
</main>
)
}

View File

@ -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>
)
}

View File

@ -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>
)
}

9
src/frontend/home.tsx Normal file
View File

@ -0,0 +1,9 @@
import { Html } from "@elysiajs/html";
export function Home() {
return (
<main>
<h1>Home</h1>
</main>
)
}

View File

@ -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 />
}
}

View File

@ -0,0 +1,9 @@
import { Html } from "@elysiajs/html";
export function NotFound() {
return (
<main>
<h1>404 Not Found</h1>
</main>
)
}

View File

@ -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>
)
}

View File

@ -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>
)
}

View File

@ -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>
)
}

View File

@ -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}`
);

0
src/public/head.js Normal file
View File

0
src/public/onLoad.js Normal file
View File

View File

@ -13,11 +13,11 @@
/* Language and Environment */ /* Language and Environment */
"target": "ES2021", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ "target": "ES2021", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
"jsx": "react", /* Specify what JSX code is generated. */ "jsx": "react", /* Specify what JSX code is generated. */
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
"jsxFactory": "Html.createElement", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ "jsxFactory": "Html.createElement", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
"jsxFragmentFactory": "Html.Fragment", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ "jsxFragmentFactory": "Html.Fragment", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */