Post Archive v1: a first pass at a functional post-archive

src/frontend/components/post-archive.tsx

@@ -1,92 +1,49 @@
 import React from 'react';
 import postArchiveScript from '../clientJS/post-archive' with { type: "text" };
+import { getPostsByYearAndMonth } from '../../db';
 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" }
-                    ]
-                }
-            ]
+// Read posts from database once and store in a closure
+const getArchiveData = (() => {
+    let cachedData: ReturnType<typeof getPostsByYearAndMonth> | null = null;
+    
+    return () => {
+        if (!cachedData) {
+            cachedData = getPostsByYearAndMonth();
         }
-    ];
+        return cachedData;
+    };
+})();
 
+
+export function PostArchive() {
+    const archiveData = getArchiveData();
+    
     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>
+                        <div className="archive-year" tabIndex={0} role="button" aria-expanded="true">
+                            <span className="archive-toggle expanded">▼</span>
                             <span>{yearData.year}</span>
                             <span className="post-count">{yearData.count}</span>
                         </div>
-                        <div className="archive-content">
+                        <div className="archive-content expanded">
                             <ul className="archive-months">
                                 {yearData.months.map((monthData) => (
                                     <li key={monthData.name}>
-                                        <div className="archive-month">
-                                            <span className="archive-toggle">▶</span>
+                                        <div className="archive-month" tabIndex={0} role="button" aria-expanded="true">
+                                            <span className="archive-toggle expanded">▼</span>
                                             <span>{monthData.name}</span>
                                             <span className="post-count">{monthData.count}</span>
                                         </div>
-                                        <div className="archive-content">
+                                        <div className="archive-content expanded">
                                             <ul className="archive-posts">
                                                 {monthData.posts.map((post) => (
                                                     <li key={post.href} className="archive-post">
-                                                        <a href={post.href}>{post.title}</a>
+                                                        <a href={post.href} tabIndex={-1}>{post.title}</a>
                                                     </li>
                                                 ))}
                                             </ul>
@@ -101,4 +58,4 @@ export function PostArchive() {
             <script dangerouslySetInnerHTML={{ __html: minifyJS(postArchiveScript) }} />
         </div>
     )
-}
+}