তোমার নিজের সাইটে একটা Debaty পোস্ট

স্নিপেটটি

পোস্টটি যেখানে দেখাতে হবে সেখানে এটা পেস্ট করো। blockquote-টাই হলো কনটেন্ট নিজেই — সার্চ ইঞ্জিন, RSS রিডার আর স্ক্রিন রিডার এটা পড়তে পারে, JavaScript বন্ধ থাকলেও। স্ক্রিপ্ট এটাকে একটা জীবন্ত, নিজে নিজে আকার বদলানো কার্ড দিয়ে বদলে দেয়।

<blockquote class="debaty-embed" data-debaty-post="<post-id>">
  <p>De posttekst — leesbaar zonder JavaScript.</p>
  <p>— Naam (@handle) · <a href="https://debaty.com/nl/bubbel/<post-id>">https://debaty.com/nl/bubbel/<post-id></a></p>
</blockquote>
<script async src="https://debaty.com/embed.js" charset="utf-8"></script>

এটা তোমাকে কখনও হাতে বানাতে হয় না: প্রতিটি পোস্টের শেয়ার মেনুতে "এম্বেড করো" আছে, আর কোডটা তৈরি অবস্থায় বেরিয়ে আসে — blockquote-এ পোস্টের টেক্সট সহ।

একটি লাইভব্লগ এম্বেড করা

পোস্ট ছাড়াও তুমি একটি পুরো লাইভব্লগ এম্বেড করতে পারো: data-debaty-post-এর বদলে লাইভব্লগ id সহ data-debaty-liveblog ব্যবহার করো। কার্ডটি শিরোনাম, যে এটি চালাচ্ছে সেই ব্যক্তি, সবচেয়ে নতুন তিনটি আপডেট এবং পুরো বিবরণের একটি লিঙ্ক দেখায়, এবং লাইভব্লগ খোলা থাকা পর্যন্ত প্রতি ত্রিশ সেকেন্ডে নিজে থেকে রিফ্রেশ হয় — কোনো কুকি ছাড়া এবং কোনো তৃতীয় পক্ষের কাছে অনুরোধ না পাঠিয়ে। লাইভব্লগ বন্ধ হয়ে গেলেই রিফ্রেশ থেমে যায় এবং কার্ডটি সমাপনী সারসংক্ষেপ দেখায়।

<blockquote class="debaty-embed" data-debaty-liveblog="<liveblog-id>">
  <p><strong>De titel van het liveblog</strong></p>
  <p>De intro — leesbaar zonder JavaScript.</p>
  <p>— Naam (@handle) · <a href="https://debaty.com/nl/liveblog/<liveblog-id>">https://debaty.com/nl/liveblog/<liveblog-id></a></p>
</blockquote>
<script async src="https://debaty.com/embed.js" charset="utf-8"></script>

এটা কীভাবে কাজ করে

embed.js (±2 kB, কোনো ডিপেন্ডেন্সি ছাড়া) data-debaty-post যুক্ত blockquote খুঁজে বের করে আর সেগুলোকে ওই পোস্টের এম্বেড পেজের দিকে নির্দেশ করা একটা iframe দিয়ে বদলে দেয়। iframe নিজেই নিজেকে মাপে আর postMessage-এর মাধ্যমে তার উচ্চতা জানায়; embed.js এমন বার্তা শুধু আমাদের origin থেকেই আর শুধু সেই iframe-এর জন্যই গ্রহণ করে যেটা সে নিজে বসিয়েছে। কার্ডের লিংকগুলো একটা নতুন ট্যাবে Debaty খোলে।

থিম আর ভাষা

ডিফল্টভাবে কার্ডটা ভিজিটরের কালার স্কিম (লাইট/ডার্ক) অনুসরণ করে। blockquote-এ data-debaty-theme="light" বা "dark" দিয়ে এটা পিন করো; কার্ড-লেবেলের ভাষা তুমি data-debaty-lang="nl" বা "en" দিয়ে বেছে নাও।

oEmbed

যেসব CMS আর এডিটর oEmbed বোঝে (WordPress, Mastodon-জাতীয়, নোট অ্যাপ) তাদের জন্য oembed.com অনুযায়ী একটা এন্ডপয়েন্ট আছে: type rich, স্নিপেটটা html-এ। height হলো null — উচ্চতা তখনই জানা যায় যখন কনটেন্ট রেন্ডার হয়; embed.js এটা লাইভ মাপে। maxwidth মানা হয়, আমাদের সর্বোচ্চ সীমা 600 পর্যন্ত।

GET /api/oembed?url=https%3A%2F%2Fdebaty.com%2Fnl%2Fbubbel%2F<post-id>&format=json

{
  "version": "1.0",
  "type": "rich",
  "provider_name": "Debaty",
  "author_name": "…",
  "html": "<blockquote class=\"debaty-embed\" …>…</blockquote><script async src=\"…/embed.js\"></script>",
  "width": 600,
  "height": null
}

প্রতিটি পাবলিক পোস্ট পেজে ডিসকভারি লিংক থাকে (<link rel="alternate" type="application/json+oembed">), তাই একটি oEmbed কনজিউমারের জন্য সাধারণ পার্মালিংকই যথেষ্ট।

এগুলো দুটো আলাদা প্রোডাক্ট। পোস্ট এম্বেড (এই পেজ) একটি বিদ্যমান Debaty পোস্ট দেখায়, যেকোনো জায়গায় বসানো যায়, রেজিস্ট্রেশন ছাড়াই। পাবলিশার উইজেট হলো তোমার নিজের লেখার নিচে একটি কমেন্ট প্যানেল: তোমার পাঠকদের কমেন্ট, একটি মডারেশন সারি ও একটি ডোমেইন allowlist সহ, তোমার পাবলিশার অ্যাকাউন্ট দিয়ে পরিচালিত।