Complete WIP: Architecture refactor.
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:
45
src/frontend/pages/post.tsx
Normal file
45
src/frontend/pages/post.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
|
||||
interface PostProps {
|
||||
// HTML string for the blog post body
|
||||
children: string;
|
||||
meta: {
|
||||
title: string;
|
||||
date: Date;
|
||||
readingTime: string;
|
||||
};
|
||||
}
|
||||
|
||||
export function Post({ children, meta }: PostProps) {
|
||||
return (
|
||||
<main>
|
||||
<article className="blog-post">
|
||||
<header className="post-header">
|
||||
<h1>{meta.title}</h1>
|
||||
<div className="post-meta">
|
||||
{meta.date && meta.date instanceof Date &&
|
||||
<>
|
||||
|
||||
<time dateTime={meta.date.toISOString()}>
|
||||
{meta.date.toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</time>
|
||||
</>
|
||||
}
|
||||
|
||||
{meta.readingTime &&
|
||||
<>
|
||||
<span className="meta-separator">•</span>
|
||||
<span>{meta.readingTime}</span>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</header>
|
||||
<div className="post-content" dangerouslySetInnerHTML={{ __html: children }} />
|
||||
</article>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user