آپ کی اپنی سائٹ پر ایک 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 کی جگہ data-debaty-liveblog استعمال کریں اور اس میں لائیو بلاگ کی id دیں۔ کارڈ عنوان، اسے چلانے والے شخص، تین تازہ ترین اپڈیٹس اور مکمل رپورٹ کا لنک دکھاتا ہے، اور جب تک لائیو بلاگ کھلا رہتا ہے ہر تیس سیکنڈ بعد خود کو ریفریش کرتا رہتا ہے — بغیر کوکیز کے اور کسی تیسرے فریق کو درخواست بھیجے بغیر۔ جیسے ہی لائیو بلاگ بند ہوتا ہے، ریفریش ہونا رک جاتا ہے اور کارڈ اختتامی خلاصہ دکھاتا ہے۔

<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 کے ساتھ، آپ کے پبلشر اکاؤنٹ سے منظم۔