- ระบบคอมเมนต์เดิม (Disqus, โฮสต์เอง, GitHub Issues ฯลฯ) มีปัญหาเรื่องความเร็ว, การติดตาม, ภาระการบำรุงรักษา และข้อจำกัดของผู้ใช้ จึงไม่เลือกใช้
- Bluesky เป็นตัวเลือกที่เหมาะกับคอมเมนต์ในบล็อก เพราะ ไม่ต้องดูแลโครงสร้างพื้นฐาน รองรับเนื้อหาหนาแน่น, บัญชีเชิงตัวตน, และ การสนทนาข้ามแพลตฟอร์ม
- วิธีการทำงานคือ โพสต์บทความบนบล็อก → แชร์ไปยัง Bluesky → เพิ่ม AT URI ใน metadata ของโพสต์บล็อก → โหลด thread ความคิดเห็นของโพสต์นั้นและแสดงผล
- แบ่งคอมโพเนนต์เป็น 3 ส่วน: แสดงคอมเมนต์ทั้งหมด, แสดงคอมเมนต์ + คอมเมนต์ย่อยรายตัว, และการประมวลผลการฝังเนื้อหา เช่น รูปภาพและลิงก์
- ใช้การเรนเดอร์แบบ recursive เพื่อแสดงคอมเมนต์ย่อยสูงสุด 5 ระดับ รองรับกริดภาพและมอดัล, การ์ดลิงก์, และเมื่อเป็นการฝังที่ไม่รองรับจะแสดงข้อความแทน
- ผสาน Astro + React และโหลดฝั่งไคลเอนต์ผ่าน
client:load โดยเพิ่ม DID และ postCid ใน frontmatter เพื่อเปิดใช้งานคอมเมนต์
- ใช้ TypeScript types ของ
@atcute/client เพื่อความเสถียรของประเภท และยังคงแสดงเนื้อหาได้ตามปกติแม้ปิด JavaScript ในโครงสร้าง Progressive Enhancement
- ใช้ Bluesky API และ CDN โดยไม่ต้องมีเซิร์ฟเวอร์หรือฐานข้อมูล ทำให้ได้ประสิทธิภาพดีขึ้น
- แนวทางนี้หลีกเลี่ยงการสร้างฟังก์ชันโซเชียลใหม่ในแต่ละไซต์ โดยเชื่อมต่อผู้ใช้กับแพลตฟอร์มที่เขาใช้อยู่แล้ว ทำให้ยืดหยุ่นและเป็นอิสระมากขึ้น
เหตุผลที่เลือก Bluesky เป็นระบบคอมเมนต์
- ไม่ต้องดูแลโครงสร้างพื้นฐาน
- รองรับเนื้อหาหนาแน่นเช่นรูปภาพ ลิงก์ และโพสต์ที่อ้างอิง
- ความน่าเชื่อถือและความรับผิดชอบจากบัญชี Bluesky
- ข้ามทราฟฟิกระหว่างบล็อกกับโซเชียลมีเดียได้
- แยกการเป็นเจ้าของเนื้อหา (โพสต์ในบล็อกเป็นของเรา ส่วนคอมเมนต์เป็นของผู้เขียนคอมเมนต์)
ทำความเข้าใจ AT Protocol
- DID: ตัวระบุผู้ใช้แบบกระจายอำนาจ
- CID: ตัวระบุเนื้อหา
- AT URI: รูปแบบที่อยู่
at://did:.../app.bsky.feed.post/...
- สามารถดึง thread คอมเมนต์ผ่านการเรียก API
getPostThread โดยไม่ต้องยืนยันตัวตน
โครงสร้างคอมโพเนนต์
- คอมโพเนนต์คอมเมนต์หลัก
- คอมโพเนนต์แสดงคอมเมนต์และคอมเมนต์ย่อยรายชิ้น
- คอมโพเนนต์จัดการเนื้อหาที่ฝังแบบรูปภาพ ลิงก์ ฯลฯ
การประมวลผลคอมเมนต์ซ้อน
- เรนเดอร์แบบ recursive และจำกัดความลึกสูงสุดที่ 5 ระดับ
- ใช้การเยื้องแบบสายตาเพื่อแสดงลำดับชั้น
การจัดการ rich content
- รูปภาพ: ใช้ CDN, จัดแสดงหลายรูปแบบ grid และ modal view
- ลิงก์ภายนอก: เรนเดอร์การ์ดพร้อม thumbnail และคำอธิบาย
- การฝังประเภทอื่น: แสดงข้อความสำรองแทน
การผสานกับ Astro
- ใช้ React components +
client:load
- เพิ่ม Bluesky DID และ postCid ใน frontmatter เพื่อเปิดคอมเมนต์
ประสบการณ์ในการพัฒนา
- ใช้ TypeScript type เพิ่มเสถียรภาพ
- ด้วย Progressive Enhancement บทความยังคงแสดงได้ปกติแม้ API ล่ม
- ใช้โครงสร้างพื้นฐานของ Bluesky โดยไม่ก่อภาระให้เซิร์ฟเวอร์/ฐานข้อมูล
บทสรุป
- เลี่ยงปัญหาจากระบบคอมเมนต์เดิม และเชื่อมต่อกับแพลตฟอร์มที่ผู้ใช้ใช้อยู่แล้ว
- เมื่อ Bluesky เติบโต จำนวนนักมีส่วนร่วมอาจเพิ่มขึ้น
- ด้วยพื้นฐาน ATProto จึงสามารถเปลี่ยนไปใช้ AppView อื่นหรือตัวรองรับที่พัฒนาขึ้นเองได้ง่าย
ยังไม่มีความคิดเห็น