میرا پہلا بلاگ

مسئلہ کا بیان:

پلیٹ فارم میں اس وقت کوئی کنٹینٹ مارکیٹنگ چینل موجود نہیں۔ بلاگ کی موجودگی سے ہر ٹیننٹ کو یہ سہولت ملے گی کہ وہ Strapi CMS میں لکھے گئے، SEO کے لحاظ سے بہتر بنائے گئے، کثیر لسانی مضامین شائع کر سکے جو SvelteKit ایپ میں رینڈر ہوں — اس طرح قدرتی (آرگینک) ٹریفک بڑھے گی، اتھارٹی قائم ہوگی، اور موجودہ 13 زبانوں پر مشتمل i18n پائپ لائن کو تقویت ملے گی۔

کامیابی کے معیارات

• Strapi میں لکھی گئی بلاگ پوسٹس فرنٹ اینڈ پر ٹیننٹ کی برانڈنگ کے ساتھ رینڈر ہوں
• پوسٹس موجودہ ویب ہُک پائپ لائن کے ذریعے بغیر کسی ترجمہ انفرا میں تبدیلی کے خودکار طور پر تمام 13 مقامی زبانوں میں ترجمہ ہو جائیں
• بلاگ صفحات سرچ انجنز میں رینک کریں (structured data، sitemap، hreflang، og:article)
• جن ٹیننٹس کے پاس blog فیچر فلیگ نہیں ہے، وہ کسی بھی بلاگ روٹ پر 404 دیکھیں

---

User Stories

• بطور content author، میں Strapi میں رچ مارک ڈاؤن، تصاویر اور ویڈیو ایمبیڈز کے ساتھ بلاگ پوسٹس لکھ سکوں تاکہ کوڈ کو چھوئے بغیر مواد شائع کر سکوں۔
• بطور site visitor، میں بلاگ پوسٹس کو کیٹیگری کے لحاظ سے فلٹر کر کے براؤز کرنا چاہتا ہوں تاکہ مجھے اپنا متعلقہ مواد آسانی سے مل سکے۔
• بطور site visitor، میں چاہتا ہوں کہ لمبی پوسٹس پر ایک جدولِ مضامین (table of contents) ہو تاکہ میں تیزی سے نیویگیٹ کر سکوں۔
• بطور site visitor، میں چاہتا ہوں کہ میں پوسٹس اپنی زبان میں پڑھ سکوں، اور انگریزی سے خودکار ترجمہ موجود ہو۔
• بطور site visitor، میں پوسٹس کو سوشل میڈیا پر شیئر کرنا چاہتا ہوں۔
• بطور site visitor، میں متعلقہ پوسٹس دریافت کرنا اور مصنف کے بارے میں جاننا چاہتا ہوں۔
• بطور SEO manager، میں چاہتا ہوں کہ ہر پوسٹ کے ساتھ درست میٹا ٹیگز، structured data، اور sitemap اندراجات موجود ہوں۔

---

فَنکشنل ضروریات

لازمی فیچرز (MVP)

1. Strapi content types: blog-posts، blog-authors، blog-categories — سب میں tenant، locale، inherit فیلڈز ہوں
2. Blog listing page (/blog) — پوسٹس کی paginated grid، category فلٹر query param کے ذریعے
3. Post detail page (/blog/[slug]) — مکمل markdown rendering کے ساتھ ToC، author card، related posts، social share
4. Category page (/blog/category/[slug]) — فلٹرڈ لسٹنگ جو وہی listing components دوبارہ استعمال کرے
5. Author page (/blog/author/[slug]) — author bio + اس کی پوسٹس
6. Table of Contents (ToC) — h2/h3 headings سے خودکار جنریشن، ڈیسک ٹاپ پر sticky sidebar، موبائل پر collapsible، Intersection Observer کے ذریعے active heading highlight
7. YouTube/Vimeo embeds — markdown میں bare URLs خودکار طور پر responsive iframes میں convert ہوں (privacy کے لیے youtube-nocookie.com)
8. Read time — word count سے server-side calculation (Math.ceil(words / 200))
9. Social share buttons — X، Facebook، LinkedIn، email، copy‑link (جہاں ممکن ہو Web Share API استعمال ہو)
10. Related posts — اسی category سے، موجودہ پوسٹ exclude، حد 3، publishedAt desc کے مطابق sort
11. RSS feed (/blog/rss.xml) — RSS 2.0، locale query param کے ذریعے
12. SEO — ہر پوسٹ کے لیے SeoComponent، og:article tags، BlogPosting JSON‑LD schema، canonical URLs
13. Sitemap — موجودہ sitemap میں dynamic blog post/category/author URLs کا اضافہ، hreflang کے ساتھ
14. Feature flag — TenantConfig.features میں blog: boolean، layout guard بند ہونے کی صورت میں 404 return کرے
15. i18n — تمام UI strings (nav، labels، pagination) کے لیے Paraglide message keys، Strapi content موجودہ webhook کے ذریعے auto‑translate ہو
16. Pagination — Strapi کی native pagination کے ساتھ page‑based (فی صفحہ 9 پوسٹس)
17. Featured post — blog-posts پر boolean featured flag؛ featured post کو /blog listing page کے اوپر hero card کے طور پر دکھایا جائے (بڑا card، full‑width، grid کے اوپر)

اچھا ہو اگر ہو (Post-MVP)

1. Blog posts پر full‑text search
2. Post series / multi‑part articles
3. Reading progress bar
4. Comments (امکاناً third‑party embed کے ذریعے)
5. Posts کے اندر newsletter signup CTA
6. View count / analytics integration

تکنیکی تقاضے

ڈیٹا ماڈل (Strapi کنٹنٹ ٹائپس)

blog-posts (api::blog-post.blog-post):

فیلڈ	قسم	لوکلائزڈ	نوٹس
title	ٹیکسٹ (ضروری)	ہاں	ترجمہ کنفیگریشن کے مطابق میچ ہوتا ہے
slug	UID (from title)	نہیں	ترجمہ سے خارج
excerpt	ٹیکسٹ	ہاں	کارڈز اور meta description کے لیے
body	رِچ ٹیکسٹ (Markdown)	ہاں	marked کے ذریعے رینڈر ہوتا ہے
featuredImage	میڈیا (سنگل)	نہیں	URL + alternativeText
category	ریلیشن (manyToOne -> blog-category)	نہیں
author	ریلیشن (manyToOne -> blog-author)	نہیں
featured	Boolean (ڈیفالٹ false)	نہیں	فیچرڈ پوسٹ لسٹنگ پر ہیرو کارڈ کی صورت میں دکھائی جاتی ہے
seo	کمپوننٹ (shared.seo)	ہاں	موجودہ SeoComponent دوبارہ استعمال کریں
tenant	ٹیکسٹ	نہیں	معیاری tenant فلٹر
inherit	Boolean (ڈیفالٹ true)	نہیں	آٹو ترجمہ فلیگ

blog-authors (api::blog-author.blog-author):

فیلڈ	قسم	لوکلائزڈ	نوٹس
name	ٹیکسٹ (ضروری)	ہاں
slug	UID (from name)	نہیں
bio	رِچ ٹیکسٹ (Markdown)	ہاں
avatar	میڈیا (سنگل)	نہیں
socialLinks	JSON	نہیں	{ twitter?, linkedin?, website? }
tenant	ٹیکسٹ	نہیں
inherit	Boolean (ڈیفالٹ true)	نہیں

blog-categories (api::blog-category.blog-category):

فیلڈ	قسم	لوکلائزڈ	نوٹس
name	ٹیکسٹ (ضروری)	ہاں
slug	UID (from name)	نہیں
description	ٹیکسٹ	ہاں
color	ٹیکسٹ	نہیں	UI بیجز کے لیے Hex کلر
tenant	ٹیکسٹ	نہیں
inherit	Boolean (ڈیفالٹ true)	نہیں

TypeScript انٹرفیسز

BlogPost، BlogAuthor، BlogCategory کے لیے src/lib/services/strapi-types.ts دیکھیں۔

روٹس

سب src/routes/(marketing)/blog/ کے تحت:

روٹ	سرور لوڈ	مقصد
blog/+layout.server.ts	فیچر گارڈ + کیٹیگریز لوڈ کرنا	گیٹ + نیوِگیشن ڈیٹا
blog/+page.server.ts	پیجینیٹڈ پوسٹس، اختیاری ?category= فلٹر	لسٹنگ
blog/[slug]/+page.server.ts	پوسٹ بائی slug + متعلقہ پوسٹس + read time کیلکولیشن	ڈیٹیل
blog/category/[slug]/+page.server.ts	کیٹیگری کے حساب سے فلٹر کی گئی پوسٹس	کیٹیگری لسٹنگ
blog/author/[slug]/+page.server.ts	مصنف + اس کی پوسٹس	مصنف صفحہ
blog/rss.xml/+server.ts	RSS 2.0 XML، ?locale= پیرامیٹر	فیڈ

UI کمپوننٹس

سب src/lib/components/blog/ میں:

کمپوننٹ	Props	نوٹس
BlogPostCard.svelte	post: BlogPost	کارڈ جس میں امیج، کیٹیگری بیج، ٹائٹل، excerpt، مصنف، تاریخ، read time
BlogPostContent.svelte	body: string	Markdown سے HTML میں marked کے ذریعے، ویڈیو ایمبیڈ ایکسٹینشن + ہیڈنگ IDs کے ساتھ
TableOfContents.svelte	entries: TocEntry[]	اسٹکی سائیڈ بار، active state کے لیے Intersection Observer، موبائل پر collapsible
AuthorCard.svelte	author: BlogAuthor	اوتار، نام، bio، سوشل لنکس
SocialShare.svelte	url: string, title: string	شیئر بٹنز، Web Share API fallback کے ساتھ
RelatedPosts.svelte	posts: BlogPost[]	BlogPostCard کی گرِڈ
BlogPagination.svelte	pagination: StrapiPagination, basePath: string	پچھلا/اگلا + پیج نمبرز

سیکیورٹی اور اوتھ

• بلاگ پبلک ہے (کسی اوتھ کی ضرورت نہیں) — مارکیٹنگ کونٹینٹ
• Strapi API ریڈ ایکسس موجودہ STRAPI_JWT ٹوکن کے ذریعے
• ویڈیو ایمبیڈز جی ڈی پی آر کمپلائنس کے لیے youtube-nocookie.com استعمال کرتے ہیں

کنارے کے کیسز اور ایرر ہینڈلنگ

• Post not found: 404 بذریعہ SvelteKit error()
• No posts in category: خالی اسٹیٹ، blog_no_posts پیغام کے ساتھ
• Missing featured image: کارڈ تصویر کے بغیر بھی رینڈر ہوتا ہے
• Translation not available: loadContentWithFallback() انگریزی پر واپس چلا جاتا ہے
• RTL languages: لے آؤٹ dir="rtl" (ar, he, ur) کا احترام کرتا ہے

E2E ٹیسٹ پلان

ٹیسٹ فائلیں tests/blog/ میں موجود ہیں۔ موجودہ پیٹرنز فالو کریں: ویوپورٹس کے لحاظ سے پیرا میٹرائزڈ، a11y کے لیے Axe، networkidle اس وقت تک ویٹ کرتا ہے جب تک Strapi کنٹینٹ لوڈ نہ ہو جائے۔

Critical Path Tests

1. Blog listing لوڈ ہو — /blog ایک گرڈ رینڈر کرے جس میں پوسٹ کارڈز ہوں، ہر ایک پر عنوان، اقتباس (excerpt)، category بیج، مصنف، تاریخ، اور read time ہو۔
2. Pagination کام کرے — /blog?page=2 رزلٹس کے دوسرے صفحے کو دکھائے؛ prev/next بٹن درست طور پر نیویگیٹ کریں؛ صفحہ 1 پر "Previous" بٹن نہ ہو۔
3. Category فلٹر — کسی category chip پر کلک کرنے سے پوسٹس فلٹر ہوں؛ URL ?category=<slug> پر اپڈیٹ ہو؛ "All" chip فلٹر کو کلئیر کر دے۔
4. Post detail رینڈر ہو — /blog/[slug] پر عنوان، featured image، فارمیٹ شدہ باڈی، author card، read time، اور published date نظر آئیں۔
5. Table of Contents — post detail پیج h2/h3 ہیڈنگز سے ToC جنریٹ کرے؛ ToC انٹری پر کلک کرنے سے متعلقہ ہیڈنگ تک اسکرول ہو۔
6. Related posts — post detail پیج پر اسی category سے زیادہ سے زیادہ 3 related posts دکھائی جائیں (موجودہ پوسٹ کے بغیر)۔
7. Category پیج — /blog/category/[slug] category کا نام، اس کی description، اور صرف اسی category کی پوسٹس دکھائے۔
8. Author پیج — /blog/author/[slug] پر author bio، اوتار، سوشل لنکس، اور اس کی پوسٹس نظر آئیں۔
9. Social share بٹن — post detail پر share بٹن نظر آئیں؛ "Copy link" URL کو کاپی کرے اور کنفرمیشن ٹیکسٹ دکھائے۔
10. RSS feed — GET /blog/rss.xml درست XML ریٹرن کرے جس میں Content-Type: application/rss+xml ہو اور پوسٹ انٹریز شامل ہوں۔
11. Navigation — سائٹ مینو میں blog لنک /blog پر نیویگیٹ کرے؛ breadcrumbs درست hierarchy دکھائیں۔
12. Featured post — /blog featured post کو نارمل گرڈ کے اوپر بڑے hero card کے طور پر دکھائے۔

Edge Case & Error Tests

13. Post not found — /blog/nonexistent-slug ایک 404 پیج ریٹرن کرے۔
14. خالی category — جس category میں کوئی پوسٹس نہیں، وہاں blog_no_posts والا empty state پیغام دکھے۔
15. Missing featured image — پوسٹ کارڈ امیج کے بغیر بھی خوبصورتی سے رینڈر ہو (کوئی ٹوٹی ہوئی <img> نہ ہو)۔
16. Missing author/category — جس پوسٹ میں author یا category نہ ہو وہ ان elements کے بغیر بھی رینڈر ہو (کوئی کریش نہ ہو)۔
17. Feature flag disable ہونے پر — جب blog: false ہو، تو /blog 404 ریٹرن کرے۔

Cross-Cutting Tests

18. i18n: locale سوئچ — /fr/blog پر نیویگیٹ کر کے چیک کریں کہ UI strings (page title، "Read more"، pagination labels) فرانسیسی میں ہوں؛ اگر پوسٹ کنٹینٹ کا ترجمہ نہ ہو تو وہ انگلش میں fallback کرے۔
19. i18n: RTL layout — /ar/blog اور /ar/blog/[slug] پر نیویگیٹ کریں، تصدیق کریں کہ dir="rtl" سیٹ ہو اور layout درست رینڈر ہو (ToC صحیح سائیڈ پر ہو)۔
20. SEO: meta tags — post detail پیج پر og:type=article، og:title، og:description، article:published_time، اور canonical لنک موجود ہوں۔
21. SEO: JSON-LD — post detail پیج پر <script type="application/ld+json"> موجود ہو جس میں @type: BlogPosting، headline، author، اور datePublished ہو۔
22. SEO: sitemap — /sitemap.xml میں blog post URLs شامل ہوں، ساتھ میں hreflang alternates بھی ہوں۔
23. Accessibility — /blog، /blog/[slug]، /blog/author/[slug] پر Axe audits چلائیں، موبائل اور ڈیسک ٹاپ دونوں ویوپورٹس پر (موجودہ a11y ٹیسٹ پیٹرن کے مطابق)۔
24. Keyboard navigation — ToC انٹریز اور pagination بٹن keyboard سے focusable اور activatable ہوں؛ focus indicators واضح طور پر نظر آئیں۔

دائرۂ کار سے باہر

• بلاگ پوسٹ کے تبصرے
• مکمل متن کی تلاش (Full-text search)
• پوسٹس کے اندر نیوز لیٹر انضمام
• اینالیٹکس / ویو کاؤنٹس
• ہر ٹیننٹ کے لیے کسٹم پوسٹ ٹیمپلیٹس