ฉันเพิ่มส่วนคอมเมนต์ Bluesky ลงในบล็อกของตัวเอง

• กรณีตัวอย่างของการทำให้เว็บไซต์แบบสแตติกสามารถแสดงคอมเมนต์ได้ด้วย Bluesky API
• Bluesky จัดการ การยืนยันตัวตนบัญชี, การจัดการสแปม, ที่เก็บข้อมูล, การมอดเดอเรชัน ให้ จึงไม่จำเป็นต้องดูแลเซิร์ฟเวอร์แยกต่างหาก
• การพัฒนาประกอบด้วยโค้ด TypeScript ราว 200 บรรทัด และใช้ @bluesky/api กับ Tanstack react-query
• คอมเมนต์จะแสดงในรูปแบบ อ่านอย่างเดียว โดยเชื่อม ID โพสต์ของ Bluesky ไว้ในเมทาดาทาของแต่ละบทความเพื่อโหลดอัตโนมัติ
• เป็นการทดลองที่แสดงให้เห็นถึง ความเป็นไปได้ในการผสานแพลตฟอร์มโซเชียลแบบเปิดเข้ากับบล็อกแบบสแตติก

---

ที่มาของการทำส่วนคอมเมนต์ด้วย Bluesky

• จุดเริ่มต้นมาจากข้อจำกัดที่ว่าเว็บไซต์แบบสร้างล่วงหน้าโฮสต์ฟังก์ชันคอมเมนต์เองได้ยาก
  • คอนเทนต์แบบสแตติกที่เผยแพร่ผ่าน CDN ไม่สามารถเก็บข้อมูลแบบไดนามิกได้
  • หากต้องดูแล VPS หรือบริการคลาวด์แยกเอง ก็มีทั้งค่าใช้จ่ายและภาระในการจัดการสูง
• Bluesky เป็น แพลตฟอร์มแบบเปิดบนพื้นฐานของ public API และ AT Protocol ซึ่งมีฟังก์ชันที่จำเป็นต่อการจัดการคอมเมนต์ให้อยู่แล้ว
  • Bluesky จัดการการยืนยันตัวตนบัญชี, การกรองสแปม, ที่เก็บข้อมูล และการมอดเดอเรชัน
  • ฝั่งบล็อกเพียงแค่เรียก API มาแสดงคอมเมนต์ก็พอ

ทางเลือกอื่นและเหตุผลที่เลือก Bluesky

• มีการพิจารณาทางเลือกอย่าง Twitter, Disqus, giscus (บนพื้นฐาน GitHub Discussions) เป็นต้น
• Bluesky สร้างอยู่บน AT Protocol แบบกระจายศูนย์ จึงมีความเสี่ยงจากการถูกควบคุมโดยบริษัทใดบริษัทหนึ่งน้อยกว่า
• เมื่อเทียบกับแพลตฟอร์มที่อิง GitHub แล้ว Bluesky เหมาะกับการโฮสต์คอมเมนต์มากกว่าในฐานะ แพลตฟอร์มที่เน้นบทสนทนา

วิธีการพัฒนา

• อ้างอิง แพ็กเกจ bluesky-comments ที่ Cory Zue เผยแพร่ไว้ แต่เลือกลงมือทำเอง
  • เขียนโค้ดเองเพื่อให้ปรับแต่งให้เข้ากับสไตล์ของเว็บไซต์และรองรับการขยายต่อในอนาคต
  • การพัฒนาทั้งหมด รวม UI คอมโพเนนต์และฟังก์ชัน API มีขนาดราว 200 บรรทัด
• ตอนแรกเคยพิจารณาเพิ่มฟังก์ชัน โพสต์ได้โดยตรง ผ่าน OAuth ด้วย แต่ตัดออกเพราะความซับซ้อนของ UI และข้อจำกัดด้านเวลา
  • ผลลัพธ์คือทำเฉพาะ ฟังก์ชันแสดงคอมเมนต์แบบอ่านอย่างเดียว

โครงสร้างทางเทคนิค

• เว็บไซต์สร้างด้วย React Server Components และ Parcel
  • คอนเทนต์เขียนด้วย MDX จึงสามารถใส่ JavaScript/JSX ได้โดยตรง
  • ในอ็อบเจ็กต์ metadata ของแต่ละบทความจะมี bskyPostId เพื่อเชื่อมกับโพสต์ของ Bluesky
• ใช้ Bluesky TypeScript SDK (@bluesky/api) เพื่อรับข้อมูลเธรดคอมเมนต์จาก เอนด์พอยต์ getPostThread
• คำขอ API ถูกจัดการด้วย Tanstack react-query
  • จัดการสถานะ error, loading และ retry ได้อัตโนมัติ

การออกแบบ UI

• ดึงมาเฉพาะ เนื้อหาข้อความ จากผลลัพธ์ตอบกลับของ Bluesky แล้วแสดงเป็น UI คอมเมนต์แบบเรียบง่าย
• โครงสร้างเธรด แยกด้วยการย่อหน้าและเส้นขอบด้านซ้าย
  • รูปโปรไฟล์และวันที่โพสต์อ้างอิงดีไซน์ของ Bluesky
• ด้านบนเพิ่มลิงก์ไปยังโพสต์ต้นฉบับบน Bluesky เพื่อ กระตุ้นให้เข้าร่วมบทสนทนา
• ไม่มีฟังก์ชันเขียนคอมเมนต์ ผู้ใช้ต้องไปตอบกลับโดยตรงบน Bluesky

ความเป็นไปได้ในอนาคต

• หากจำเป็น การพัฒนานี้สามารถ เผยแพร่เป็นแพ็กเกจแยกอิสระ ได้
  • อย่างไรก็ตาม โค้ดปัจจุบันยังปรับให้เหมาะกับเว็บไซต์ส่วนตัว
  • เนื่องจากโครงสร้างไม่ซับซ้อน นักพัฒนาคนอื่นก็สามารถอ้างอิงซอร์สโค้ดแล้วทำตามได้ไม่ยาก
• การเชื่อมคอมเมนต์ผ่าน Bluesky จะช่วยเพิ่ม การมีส่วนร่วม ให้บล็อกได้จริงหรือไม่ ยังต้องรอดู

ปฏิกิริยาจากผู้ใช้ Bluesky

• ผู้ใช้ Bluesky หลายคนแสดงความเห็นเชิงบวก เช่น “ไอเดียดี”, “ตอบสนองเร็ว”, “เหมาะเป็นทางเลือกแทน Disqus”
• บางส่วนตั้งคำถามเกี่ยวกับ การจัดการสแปม, การจัดการคอมเมนต์แบบซ้อน, การรองรับไฟล์แนบ
• ผู้เขียนอธิบายว่าสามารถซ่อนคอมเมนต์บางรายการได้ด้วย ฟังก์ชันมอดเดอเรชันส่วนบุคคล ของ Bluesky

[GN⁺]

ความคิดเห็นจาก Hacker News

• ถ้าคุณเรนเดอร์บล็อกหรือเว็บไซต์ด้วย static site generator ก็มีข้อเสนอให้ดึงคอมเมนต์มาเป็นไฟล์คอนเทนต์แล้วรวมเข้าไปในขั้นตอน build

  1. รวบรวมคอมเมนต์ผ่านอีเมล, CGI script, โปรแกรมเซิร์ฟเวอร์ ฯลฯ
  2. ตรวจทานด้วยตนเองเพื่อลบสแปม
  3. บันทึกคอมเมนต์เป็นไฟล์ .md หรือ .html และ
  4. เรนเดอร์รวมไปพร้อมกันตอน build เว็บไซต์
     กระบวนการนี้ใช้แรงมาก แต่มีข้อดีคือ กันสแปม และ เป็นเจ้าของข้อมูลได้ทั้งหมด
  • ผมก็ทำระบบคล้ายกันแบบ อิงอีเมล ไว้เหมือนกัน รายละเอียดเขียนไว้ในบล็อกโพสต์ของผม
  • ถ้าเป็นเว็บไซต์เล็ก ๆ ก็ต้องดูแลคอมเมนต์ต่อวันไม่กี่อัน การตรวจด้วยมือจึงทำได้สบาย และยังทำให้อัตโนมัติได้ง่ายด้วยการ อัปเดตไฟล์ Markdown อัตโนมัติ
  • มีคนพูดติดตลกว่า “ฉันรับคอมเมนต์ทางแฟกซ์เท่านั้น ;)”
  • อีกคนตอบว่า “ฟังดูแย่มาก” และมองว่าไม่มีประสิทธิภาพ

• ถ้าไม่อยากใช้ React ก็ลองดู Bluesky comments web component ที่ผมทำไว้ได้
  ดูได้ที่ GitHub repository และ theme playground
  ปรับแต่ง ธีม ได้ง่ายมาก

• ผมนำไอเดียจากโพสต์ต้นฉบับไปทำเป็น ระบบคอมเมนต์บน Mastodon
  ดูรายละเอียดได้ในบล็อกโพสต์ของผม

  • จริง ๆ แล้วการ ผสานคอมเมนต์กับ Fediverse แบบนี้มีคนลองทำกับ Mastodon หรือ Bluesky มาตั้งนานแล้ว
    อ้างอิง: บล็อกโพสต์ที่เกี่ยวข้อง

• มีคนพูดกันว่าเพราะกฎหมาย คำพูดแสดงความเกลียดชัง ของ EU ถ้าเจ้าของเว็บไม่กรองคอมเมนต์อาจโดนลงโทษ เลยสงสัยว่าจริง ๆ แล้วเป็นอย่างไร
  เพราะงั้นผมเลยปิดฟีเจอร์คอมเมนต์ไปเลย

  • ผมไม่ใช่ผู้เชี่ยวชาญด้านกฎหมาย แต่ความเสี่ยงแบบนี้มักถูกขยายเกินจริงด้วย เจตนาทางการเมือง กฎหมายของ EU คำนึงถึงขนาดและวัตถุประสงค์ของเว็บไซต์ด้วย และผมไม่เคยได้ยินกรณีที่เว็บส่วนตัวเล็ก ๆ ถูกลงโทษ
  • ถ้าใช้ moderation labeler ของ Bluesky ก็สามารถกรองล่วงหน้าได้ แม้จะยังไม่มีตัวที่ตรงตามเกณฑ์ EU แต่ก็สร้าง labeler เองเพื่อกรองเฉพาะคอมเมนต์มีปัญหาได้
  • ต่อให้ไม่มีกฎหมาย ผมก็ไม่อยากให้มี คำพูดแสดงความเกลียดชัง โผล่บนเว็บไซต์ที่ใช้ชื่อผมอยู่ดี

• บล็อกของผมเป็นโครงสร้าง static ล้วน และใช้ Cloudflare Worker script แค่ 50 บรรทัด รับคอมเมนต์แล้วเพิ่มลง Markdown โดยตรง
  ทำได้โดยไม่ต้อง embed ฟีเจอร์คอมเมนต์เลย

  • น่าจะสนุกดีถ้าทำให้คอมเมนต์ถูก commit อัตโนมัติเป็น Pull Request แล้วใช้ PR เป็นเครื่องมือตรวจทานคอมเมนต์
  • มีคนแซวว่า “ถ้านั่นเป็น ColdFusion แท้ ๆ คงเจ๋งกว่านี้อีก”
  • และก็มีคนถามว่า “ช่วยแชร์ลิงก์หรือรายละเอียดการทำได้ไหม”

• ใช้ Bluesky API เพื่อค้นหาโพสต์แรกที่มีลิงก์บล็อกนั้นโดยอัตโนมัติ แล้วเอามาเชื่อมเป็นคอมเมนต์ก็สามารถ ทำให้เป็นอัตโนมัติ ได้

• ดูเหมือนจะช่วยให้ Bluesky เติบโตได้ด้วย เลยลองสร้างแอ็กเคานต์ไว้ทดสอบ มันดูเป็น ไอเดีย growth hacking ที่ค่อนข้างสนุก

  • แต่ผมคิดว่า โซเชียลเน็ตเวิร์กเชิงพาณิชย์ สุดท้ายก็จะกลายเป็นแบบ Twitter
    ในอุดมคติแล้ว ระบบคอมเมนต์แบบ self-hosted หรือ อิง Fediverse น่าจะยั่งยืนกว่า
  • อีกความเห็นหนึ่งบอกว่า แค่มีข้อความว่า “เราไม่ใช่แพลตฟอร์มเจ้าเดิม” อย่างเดียวคงยากจะประสบความสำเร็จ

• บล็อกของผมไม่ได้ดังมาก แต่เมื่อก่อนเคยเจอ นรกของสแปมกับคอมเมนต์เกลียดชัง
  เพราะงั้นผมจะไม่เปิดคอมเมนต์ในบล็อกส่วนตัวอีกแล้ว

• ต่อให้เป็นระบบบน Bluesky ก็ยังเพิ่ม labeler ของตัวเองเพื่อกรองคอมเมนต์ที่ติดบาง label ได้ เป็น การกลั่นกรองด้วยตัวเอง แบบหนึ่ง

• ผมก็ทำอะไรคล้ายกัน โดยนอกจากบล็อกของตัวเองแล้ว ยังเพิ่ม ฟีเจอร์คอมเมนต์ตามสถานที่ใน OSM บน cartes.app ด้วย
  สามารถรีวิวด้วยบัญชี ATproto ได้ และข้อมูลถูกเก็บใน PDS ในรูปแบบ JSON ที่ผู้ใช้เป็นเจ้าของ

  • มีคอมเมนต์ถามว่า “เจ๋งมาก คุณรวบรวมข้อมูลนั้นยังไง หรือว่าใช้วิธีฟัง Bluesky firehose?”