add comment

src/components/posts.ts

@@ -1,6 +1,8 @@
 import type { BlogPost } from '../types.js'
 import { putRecord } from '../lib/auth.js'
 import { renderMarkdown } from '../lib/markdown.js'
+import { escapeHtml } from '../lib/utils.js'
+import { renderDiscussionLink, loadDiscussionPosts, getAppUrl } from './discussion.js'
 
 function formatDate(dateStr: string): string {
   const date = new Date(dateStr)
@@ -11,14 +13,6 @@ function formatDate(dateStr: string): string {
   })
 }
 
-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>'
@@ -40,9 +34,11 @@ export function mountPostList(container: HTMLElement, posts: BlogPost[]): void {
   container.innerHTML = `<ul class="post-list">${html}</ul>`
 }
 
-export function mountPostDetail(container: HTMLElement, post: BlogPost, handle: string, collection: string, canEdit: boolean = false): void {
+export function mountPostDetail(container: HTMLElement, post: BlogPost, handle: string, collection: string, canEdit: boolean = false, siteUrl?: string, network: string = 'bsky.social'): void {
   const rkey = post.uri.split('/').pop() || ''
   const jsonUrl = `/at/${handle}/${collection}/${rkey}`
+  const postUrl = siteUrl ? `${siteUrl}/post/${rkey}` : `${window.location.origin}/post/${rkey}`
+  const appUrl = getAppUrl(network)
 
   const editBtn = canEdit ? `<button class="edit-btn" id="edit-btn">edit</button>` : ''
 
@@ -59,6 +55,8 @@ export function mountPostDetail(container: HTMLElement, post: BlogPost, handle:
       <div class="post-content" id="post-content">${renderMarkdown(post.content)}</div>
     </article>
 
+    ${renderDiscussionLink(postUrl, appUrl)}
+
     <div class="edit-form-container" id="edit-form-container" style="display: none;">
       <h3>Edit Post</h3>
       <form class="edit-form" id="edit-form">
@@ -72,6 +70,9 @@ export function mountPostDetail(container: HTMLElement, post: BlogPost, handle:
     </div>
   `
 
+  // Load discussion posts
+  loadDiscussionPosts(container, postUrl)
+
   if (canEdit) {
     const editBtnEl = document.getElementById('edit-btn')
     const editFormContainer = document.getElementById('edit-form-container')