simple new blog

src/components/posts.ts

@@ -0,0 +1,54 @@
+import type { BlogPost } from '../types.js'
+
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('ja-JP', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  })
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+export function mountPostList(container: HTMLElement, posts: BlogPost[]): void {
+  if (posts.length === 0) {
+    container.innerHTML = '<p class="no-posts">No posts yet</p>'
+    return
+  }
+
+  const html = posts.map(post => {
+    const rkey = post.uri.split('/').pop()
+    return `
+      <li class="post-item">
+        <a href="?rkey=${rkey}" class="post-link">
+          <span class="post-title">${escapeHtml(post.title)}</span>
+          <span class="post-date">${formatDate(post.createdAt)}</span>
+        </a>
+      </li>
+    `
+  }).join('')
+
+  container.innerHTML = `<ul class="post-list">${html}</ul>`
+}
+
+export function mountPostDetail(container: HTMLElement, post: BlogPost, handle: string): void {
+  container.innerHTML = `
+    <article class="post-detail">
+      <header class="post-header">
+        <h1 class="post-title">${escapeHtml(post.title)}</h1>
+        <time class="post-date">${formatDate(post.createdAt)}</time>
+      </header>
+      <div class="post-content">${escapeHtml(post.content)}</div>
+      <footer class="post-footer">
+        <a href="?handle=${handle}" class="back-link">← Back to posts</a>
+      </footer>
+    </article>
+  `
+}