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

WIP: Architecture Refactor, add stub files and working blog post wrapped by AppShell

Browse Source
This commit is contained in:
Caleb Braaten
2025-12-28 00:21:13 -08:00
parent c34f11de00
commit 3abd97702d
15 changed files with 96 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/backend/index.tsx
View File

@@ -1,22 +0,0 @@
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();
})

45
src/frontend/AppShell.tsx
View File

@@ -1,7 +1,10 @@
import { Html } from "@elysiajs/html";
import React from 'react';
import styles from '../public/styles.css' with { type: "text" };
import headScript from '../public/head.js' with { type: "text" };
import onLoadScript from '../public/onLoad.js' with { type: "text" };
// Helper: Minify CSS using simple but effective regex
async function minifyCSS(css: string): Promise<string> {
function minifyCSS(css: string): string {
return css
.replace(/\/\*[\s\S]*?\*\//g, '') // Remove comments
.replace(/\s+/g, ' ') // Collapse whitespace
@@ -10,50 +13,30 @@ async function minifyCSS(css: string): Promise<string> {
}
// Helper: Minify JS/TS using Bun.Transpiler
async function minifyJS(code: string): Promise<string> {
function minifyJS(code: string): string {
const transpiler = new Bun.Transpiler({
loader: 'ts',
minifyWhitespace: true,
});
return transpiler.transformSync(code);
}
// Read and minify files at module load time (runs once)
console.log('[AppShell] Loading and minifying assets...');
const rawStyles = await Bun.file("./src/public/styles.css").text();
const rawHeadScript = await Bun.file("./src/public/head.ts").text();
const rawOnLoadScript = await Bun.file("./src/public/onLoad.ts").text();
// Minify all assets
const styles = await minifyCSS(rawStyles);
const headScript = await minifyJS(rawHeadScript);
const onLoadScript = await minifyJS(rawOnLoadScript);
console.log('[AppShell] Assets minified and cached in memory');
console.log(` CSS: ${rawStyles.length} → ${styles.length} bytes (-${Math.round((1 - styles.length / rawStyles.length) * 100)}%)`);
console.log(` head.ts: ${rawHeadScript.length} → ${headScript.length} bytes (-${Math.round((1 - headScript.length / rawHeadScript.length) * 100)}%)`);
console.log(` onLoad.ts: ${rawOnLoadScript.length} → ${onLoadScript.length} bytes (-${Math.round((1 - onLoadScript.length / rawOnLoadScript.length) * 100)}%)`);
export function AppShell(responseValue: any) {
return (
<html>
export function AppShell(props: { post: any }) {
return (
<html className={styles.root}>
<head>
<title>Caleb's Blog</title>
<style>
{styles}
</style>
<style>{minifyCSS(styles)}</style>
<script>
{headScript}
{minifyJS(headScript)}
</script>
<script defer>
{onLoadScript}
{minifyJS(onLoadScript)}
</script>
</head>
<body>
{responseValue}
<div dangerouslySetInnerHTML={{ __html: props.post }} />
<aside>
<h3>About Me</h3>
<p>I'm a software engineer</p>

4
src/frontend/blog.tsx
View File

@@ -1,4 +1,4 @@
import { Html } from "@elysiajs/html";
import React from 'react';
export function Blog() {
return (
@@ -7,4 +7,4 @@ export function Blog() {
<a href="/">Home</a>
</main>
)
}
}

0
src/frontend/components/post-archive.tsx Normal file
View File

0
src/frontend/components/profile-badge.tsx Normal file
View File

0
src/frontend/components/tag-picker.tsx Normal file
View File

13
src/frontend/components/theme-picker.tsx Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
export function ThemePicker() {
const randomNumber = Math.random();
return (
<div>
<h1>Sub Component!</h1>
<p>Some text here... maybe? with hot reloading! {randomNumber}</p>
</div>
)
}

4
src/frontend/home.tsx
View File

@@ -1,4 +1,4 @@
import { Html } from "@elysiajs/html";
import React from 'react';
export function Home() {
return (
@@ -7,4 +7,4 @@ export function Home() {
<a href="/blog">Blog</a>
</main>
)
}
}

4
src/frontend/not-found.tsx
View File

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

12
src/frontend/pages/blog.tsx Normal file
View File

@@ -0,0 +1,12 @@
import React from 'react';
import { ThemePicker } from "../components/theme-picker";
export function Blog() {
return (
<main>
<h1>Blog</h1>
<a href="/">Home</a>
<ThemePicker />
</main>
)
}

10
src/frontend/pages/home.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
export function Home() {
return (
<main>
<h1>Home!</h1>
<a href="/blog">Blog</a>
</main>
)
}

9
src/frontend/pages/not-found.tsx Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
export function NotFound() {
return (
<main>
<h1>404 Not Found</h1>
</main>
)
}

1
src/public/htmx.min.js vendored
View File

File diff suppressed because one or more lines are too long