Caleb Braaten
f46f4667a1
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.
104 lines
4.7 KiB
TypeScript
104 lines
4.7 KiB
TypeScript
import React from 'react';
|
|
import postArchiveScript from '../clientJS/post-archive' with { type: "text" };
|
|
import { minifyJS } from '../utils';
|
|
|
|
export function PostArchive() {
|
|
const archiveData = [
|
|
{
|
|
year: "2025",
|
|
count: "(8)",
|
|
months: [
|
|
{
|
|
name: "October",
|
|
count: "(3)",
|
|
posts: [
|
|
{ title: "Building a Modern Blog", href: "/blog/post-1" },
|
|
{ title: "TypeScript Tips & Tricks", href: "/blog/post-2" },
|
|
{ title: "Designing Better UIs", href: "/blog/post-3" }
|
|
]
|
|
},
|
|
{
|
|
name: "September",
|
|
count: "(5)",
|
|
posts: [
|
|
{ title: "Getting Started with Bun", href: "/blog/post-4" },
|
|
{ title: "Web Performance Optimization", href: "/blog/post-5" },
|
|
{ title: "CSS Grid vs Flexbox", href: "/blog/post-6" },
|
|
{ title: "JavaScript Best Practices", href: "/blog/post-7" },
|
|
{ title: "Accessibility Matters", href: "/blog/post-8" }
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
year: "2024",
|
|
count: "(12)",
|
|
months: [
|
|
{
|
|
name: "December",
|
|
count: "(4)",
|
|
posts: [
|
|
{ title: "Year in Review 2024", href: "/blog/post-9" },
|
|
{ title: "Holiday Coding Projects", href: "/blog/post-10" },
|
|
{ title: "New Year Resolutions", href: "/blog/post-11" },
|
|
{ title: "Reflecting on Growth", href: "/blog/post-12" }
|
|
]
|
|
},
|
|
{
|
|
name: "June",
|
|
count: "(8)",
|
|
posts: [
|
|
{ title: "Summer Tech Trends", href: "/blog/post-13" },
|
|
{ title: "Remote Work Tips", href: "/blog/post-14" },
|
|
{ title: "Learning Resources", href: "/blog/post-15" },
|
|
{ title: "Code Review Best Practices", href: "/blog/post-16" },
|
|
{ title: "Git Workflow Tips", href: "/blog/post-17" },
|
|
{ title: "Docker for Beginners", href: "/blog/post-18" },
|
|
{ title: "API Design Patterns", href: "/blog/post-19" },
|
|
{ title: "Testing Strategies", href: "/blog/post-20" }
|
|
]
|
|
}
|
|
]
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="postList sheet-background">
|
|
<h3>Posts</h3>
|
|
<ul className="post-archive">
|
|
{archiveData.map((yearData) => (
|
|
<li key={yearData.year}>
|
|
<div className="archive-year">
|
|
<span className="archive-toggle">▶</span>
|
|
<span>{yearData.year}</span>
|
|
<span className="post-count">{yearData.count}</span>
|
|
</div>
|
|
<div className="archive-content">
|
|
<ul className="archive-months">
|
|
{yearData.months.map((monthData) => (
|
|
<li key={monthData.name}>
|
|
<div className="archive-month">
|
|
<span className="archive-toggle">▶</span>
|
|
<span>{monthData.name}</span>
|
|
<span className="post-count">{monthData.count}</span>
|
|
</div>
|
|
<div className="archive-content">
|
|
<ul className="archive-posts">
|
|
{monthData.posts.map((post) => (
|
|
<li key={post.href} className="archive-post">
|
|
<a href={post.href}>{post.title}</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<script dangerouslySetInnerHTML={{ __html: minifyJS(postArchiveScript) }} />
|
|
</div>
|
|
)
|
|
} |