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

Complete WIP: Architecture refactor.

Browse Source 
Mount JSX server side templating for blog posts. Send AppShell conditionally. Maintain support for HMR via HTMLbundles using Bun's native fullstack dev server under an /hmr path. This is only mounted in development and is supported by the onImport Bun plugin. Add DB creation on startup and load pages based on those records.
This commit is contained in:
Caleb Braaten
2026-01-08 05:13:48 -08:00
parent 3abd97702d
commit f46f4667a1
32 changed files with 2779 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/frontend/AppShell.tsx
View File

@@ -1,59 +1,33 @@
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" };
import React, { ReactNode } from 'react';
import { minifyCSS, minifyJS } from './utils';
// Helper: Minify CSS using simple but effective regex
function minifyCSS(css: string): string {
return css
.replace(/\/\*[\s\S]*?\*\//g, '') // Remove comments
.replace(/\s+/g, ' ') // Collapse whitespace
.replace(/\s*([{}:;,])\s*/g, '$1') // Remove space around delimiters
.trim();
}
import styles from './styles.css' with { type: "text" };
import headScript from './onLoad' with { type: "text" };
// Helper: Minify JS/TS using Bun.Transpiler
function minifyJS(code: string): string {
const transpiler = new Bun.Transpiler({
loader: 'ts',
minifyWhitespace: true,
});
import { ThemePicker } from './components/theme-picker';
import { ProfileBadge } from './components/profile-badge';
import { TagPicker } from './components/tag-picker';
import { PostArchive } from './components/post-archive';
return transpiler.transformSync(code);
}
export function AppShell(props: { post: any }) {
export function AppShell({ children }: { children: ReactNode }) {
return (
<html className={styles.root}>
<html lang="en">
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Caleb's Blog</title>
<style>{minifyCSS(styles)}</style>
<script>
{minifyJS(headScript)}
</script>
<script defer>
{minifyJS(onLoadScript)}
</script>
<style dangerouslySetInnerHTML={{ __html: minifyCSS(styles) }} />
</head>
<body>
<div dangerouslySetInnerHTML={{ __html: props.post }} />
{children}
<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>
<ThemePicker />
<ProfileBadge />
<TagPicker />
<PostArchive />
</aside>
</body>
<script dangerouslySetInnerHTML={{ __html: minifyJS(headScript) }} />
</html>
)
}