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

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>