मेरा पहला ब्लॉग

समस्या विवरण:

प्लेटफ़ॉर्म के पास अभी कोई कंटेंट मार्केटिंग चैनल नहीं है। एक ब्लॉग प्रत्येक टेनेंट को यह सक्षम करेगा कि वे Strapi CMS में लिखे गए, SEO‑अनुकूलित, बहुभाषी लेख प्रकाशित कर सकें, जिन्हें SvelteKit ऐप में रेंडर किया जाए — जिससे ऑर्गेनिक ट्रैफ़िक बढ़े, प्राधिकरण स्थापित हो, और मौजूदा 13‑लोकैल i18n पाइपलाइन को मज़बूती मिले।

सफलता के मापदंड

• Strapi में लिखी गई ब्लॉग पोस्टें फ्रंटएंड पर टेनेंट की ब्रांडिंग के साथ रेंडर हों
• पोस्टें मौजूदा webhook पाइपलाइन के ज़रिए बिना किसी अनुवाद इंफ्रा बदलाव के सभी 13 लोकैल्स में अपने‑आप अनूदित हो जाएँ
• ब्लॉग पेज सर्च इंजनों में रैंक करें (structured data, sitemap, hreflang, og:article लागू हों)
• जिन टेनेंट्स के पास blog फीचर फ़्लैग नहीं है, उन्हें कोई ब्लॉग रूट न दिखे (404)

User Stories

• एक content author के रूप में, मैं Strapi में रिच मार्कडाउन, इमेज और वीडियो एम्बेड्स के साथ ब्लॉग पोस्ट लिखना चाहता/चाहती हूँ ताकि मैं बिना कोड छुए कंटेंट पब्लिश कर सकूँ।
• एक site visitor के रूप में, मैं ब्लॉग पोस्ट्स को कैटेगरी के हिसाब से फ़िल्टर करके ब्राउज़ करना चाहता/चाहती हूँ ताकि मुझे अपने लिए प्रासंगिक कंटेंट मिल सके।
• एक site visitor के रूप में, मैं लंबी पोस्ट्स पर एक टेबल ऑफ़ कंटेंट्स चाहता/चाहती हूँ ताकि मैं जल्दी‑से नेविगेट कर सकूँ।
• एक site visitor के रूप में, मैं पोस्ट्स को अपनी भाषा में पढ़ना चाहता/चाहती हूँ, जहाँ अंग्रेज़ी से ऑटोमैटिक ट्रांसलेशन हो।
• एक site visitor के रूप में, मैं पोस्ट्स को सोशल मीडिया पर शेयर करना चाहता/चाहती हूँ।
• एक site visitor के रूप में, मैं संबंधित पोस्ट्स खोज पाना और लेखक के बारे में जानना चाहता/चाहती हूँ।
• एक SEO manager के रूप में, मैं चाहता/चाहती हूँ कि हर पोस्ट में सही मेटा टैग्स, स्ट्रक्चर्ड डेटा और साइटमैप एंट्रीज़ हों।

---

Functional Requirements

Must Have (MVP)

1. Strapi कंटेंट टाइप्स: blog-posts, blog-authors, blog-categories — इन सभी में tenant, locale, inherit फ़ील्ड हों
2. ब्लॉग लिस्टिंग पेज (/blog) — पोस्ट्स की पेजिनेटेड ग्रिड, क्वेरी पैराम के ज़रिए कैटेगरी फ़िल्टर
3. पोस्ट डिटेल पेज (/blog/[slug]) — पूरा markdown रेंडरिंग, ToC, ऑथर कार्ड, रिलेटेड पोस्ट्स, सोशल शेयर के साथ
4. कैटेगरी पेज (/blog/category/[slug]) — वही लिस्टिंग कॉम्पोनेंट्स री–यूज़ करके फ़िल्टर्ड लिस्टिंग
5. ऑथर पेज (/blog/author/[slug]) — ऑथर बायो + उनकी पोस्ट्स
6. टेबल ऑफ़ कंटेंट्स — h2/h3 हैडिंग्स से ऑटो–जेनरेटेड, डेस्कटॉप पर स्टिकी साइडबार, मोबाइल पर कोलैप्सिबल, Intersection Observer के ज़रिए ऐक्टिव हैडिंग हाइलाइट
7. YouTube/Vimeo एम्बेड्स — markdown में दी गई बेयर URLs अपने–आप responsive iframes में कन्वर्ट हों (प्राइवेसी के लिए youtube-nocookie.com)
8. रीड टाइम — वर्ड काउंट से server-side कैलकुलेटेड (Math.ceil(words / 200))
9. सोशल शेयर बटन — X, Facebook, LinkedIn, ईमेल, कॉपी–लिंक (जहाँ उपलब्ध हो वहाँ Web Share API का इस्तेमाल)
10. रिलेटेड पोस्ट्स — वही कैटेगरी, करंट पोस्ट को exclude करें, लिमिट 3, publishedAt desc के हिसाब से sort
11. RSS फ़ीड (/blog/rss.xml) — RSS 2.0, locale क्वेरी पैराम के ज़रिए
12. SEO — हर पोस्ट के लिए SeoComponent, og:article टैग्स, BlogPosting JSON-LD स्कीमा, canonical URLs
13. Sitemap — मौजूदा sitemap में dynamic ब्लॉग पोस्ट/कैटेगरी/ऑथर URLs add हों, hreflang के साथ
14. फ़ीचर फ्लैग — TenantConfig.features में blog: boolean, फ़ीचर डिसेबल होने पर layout guard 404 रिटर्न करे
15. i18n — सभी UI स्ट्रिंग्स (nav, लेबल्स, पेजिनेशन) के लिए Paraglide मैसेज कीज़, Strapi कंटेंट मौजूदा webhook के ज़रिए ऑटो–ट्रांसलेटेड
16. पेजिनेशन — Strapi की native पेजिनेशन के साथ page-based (प्रति पेज 9 पोस्ट्स)
17. फ़ीचर्ड पोस्ट — blog-posts पर boolean featured फ़्लैग; /blog लिस्टिंग पेज के टॉप पर फ़ीचर्ड पोस्ट एक hero कार्ड के रूप में दिखे (बड़ा कार्ड, फुल–विड्थ, ग्रिड के ऊपर)

Nice to Have (Post-MVP)

1. ब्लॉग पोस्ट्स पर फुल–टेक्स्ट सर्च
2. पोस्ट सीरीज़ / मल्टी–पार्ट आर्टिकल्स
3. रीडिंग प्रोग्रेस बार
4. कमेंट्स (संभावित रूप से थर्ड–पार्टी एम्बेड के ज़रिए)
5. पोस्ट्स के अंदर न्यूज़लेटर signup CTA
6. व्यू काउंट / एनालिटिक्स इंटीग्रेशन

Technical Requirements

Data Model (Strapi Content Types)

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

Field	Type	Localized	Notes
title	Text (required)	Yes	अनुवाद कॉन्फ़िग द्वारा मिलान किया गया
slug	UID (from title)	No	अनुवाद से बाहर रखा गया
excerpt	Text	Yes	कार्ड्स + मेटा डिस्क्रिप्शन के लिए
body	Rich Text (Markdown)	Yes	marked के ज़रिए रेंडर किया गया
featuredImage	Media (single)	No	URL + alternativeText
category	Relation (manyToOne -> blog-category)	No
author	Relation (manyToOne -> blog-author)	No
featured	Boolean (default false)	No	फ़ीचर्ड पोस्ट लिस्टिंग पर हीरो कार्ड के रूप में दिखाई जाएगी
seo	Component (shared.seo)	Yes	मौजूदा SeoComponent का पुन: उपयोग
tenant	Text	No	मानक tenant फ़िल्टर
inherit	Boolean (default true)	No	ऑटो‑ट्रांसलेशन फ़्लैग

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

Field	Type	Localized	Notes
name	Text (required)	Yes
slug	UID (from name)	No
bio	Rich Text (Markdown)	Yes
avatar	Media (single)	No
socialLinks	JSON	No	{ twitter?, linkedin?, website? }
tenant	Text	No
inherit	Boolean (default true)	No

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

Field	Type	Localized	Notes
name	Text (required)	Yes
slug	UID (from name)	No
description	Text	Yes
color	Text	No	UI बैज के लिए हेक्स रंग
tenant	Text	No
inherit	Boolean (default true)	No

TypeScript Interfaces

BlogPost, BlogAuthor, BlogCategory के लिए src/lib/services/strapi-types.ts देखें।

Routes

सभी src/routes/(marketing)/blog/ के अंतर्गत:

Route	Server Load	Purpose
blog/+layout.server.ts	फ़ीचर गार्ड + कैटेगरीज़ लोड	गेट + नेव डेटा
blog/+page.server.ts	पेजिनेटेड पोस्ट्स, वैकल्पिक ?category= फ़िल्टर	लिस्टिंग
blog/[slug]/+page.server.ts	स्लग से पोस्ट + संबंधित पोस्ट्स + रीड टाइम कैलकुलेशन	डिटेल
blog/category/[slug]/+page.server.ts	कैटेगरी के आधार पर फ़िल्टर की गई पोस्ट्स	कैटेगरी लिस्टिंग
blog/author/[slug]/+page.server.ts	लेखक + उनकी पोस्ट्स	लेखक पेज
blog/rss.xml/+server.ts	RSS 2.0 XML, ?locale= पैरामीटर	फ़ीड

UI Components

सभी src/lib/components/blog/ में:

Component	Props	Notes
BlogPostCard.svelte	post: BlogPost	इमेज, कैटेगरी बैज, शीर्षक, एक्सरप्ट, लेखक, तारीख, रीड टाइम वाला कार्ड
BlogPostContent.svelte	body: string	marked के ज़रिए Markdown से HTML, वीडियो एंबेड एक्सटेंशन + हेडिंग IDs के साथ
TableOfContents.svelte	entries: TocEntry[]	स्टिकी साइडबार, एक्टिव स्टेट के लिए Intersection Observer, मोबाइल पर कोलेप्सिबल
AuthorCard.svelte	author: BlogAuthor	अवतार, नाम, बायो, सोशल लिंक्स
SocialShare.svelte	url: string, title: string	Web Share API फ़ॉलबैक के साथ शेयर बटन
RelatedPosts.svelte	posts: BlogPost[]	BlogPostCard की ग्रिड
BlogPagination.svelte	pagination: StrapiPagination, basePath: string	प्रीव/नेक्स्ट + पेज नंबर

सुरक्षा और ऑथ

• ब्लॉग पब्लिक है (कोई ऑथ ज़रूरी नहीं) — मार्केटिंग कंटेंट
• Strapi API रीड एक्सेस मौजूदा STRAPI_JWT टोकन के ज़रिए
• वीडियो एम्बेड्स GDPR अनुपालन के लिए youtube-nocookie.com का उपयोग करते हैं

किनारे के मामले (Edge Cases) और त्रुटि प्रबंधन (Error Handling)

• पोस्ट नहीं मिली: SvelteKit के जरिए 404 error()
• श्रेणी में कोई पोस्ट नहीं: खाली स्थिति, blog_no_posts संदेश के साथ
• फ़ीचर्ड इमेज गायब: कार्ड इमेज के बिना रेंडर होता है
• अनुवाद उपलब्ध नहीं: loadContentWithFallback() इंग्लिश पर फॉल्बैक करता है
• RTL भाषाएँ: लेआउट dir="rtl" (ar, he, ur) का सम्मान करता है

E2E टेस्ट प्लान

टेस्ट फाइलें tests/blog/ में हैं। मौजूदा पैटर्न का पालन करें: सभी viewports पर पैरामीटराइज़्ड, a11y के लिए Axe, networkidle Strapi कंटेंट के लिए वेट करता है।

Critical Path टेस्ट

1. Blog listing लोड होती है — /blog एक ग्रिड रेंडर करता है जिसमें पोस्ट कार्ड्स पर शीर्षक, अंश (excerpt), कैटेगरी बैज, लेखक, तारीख और पढ़ने का समय दिखता है।
2. Pagination काम करती है — /blog?page=2 रिज़ल्ट की दूसरी पेज दिखाता है; prev/next बटन सही तरह से नेविगेट करते हैं; पेज 1 पर "Previous" बटन नहीं होता।
3. Category फ़िल्टर — किसी कैटेगरी चिप पर क्लिक करने से पोस्ट फ़िल्टर होते हैं; URL ?category=<slug> पर अपडेट होता है; "All" चिप फ़िल्टर साफ कर देता है।
4. Post detail रेंडर होता है — /blog/[slug] में शीर्षक, फीचर्ड इमेज, फ़ॉर्मैटेड बॉडी, ऑथर कार्ड, पढ़ने का समय और पब्लिश्ड डेट दिखाई देती है।
5. Table of Contents — पोस्ट डिटेल पेज h2/h3 headings से ToC जेनरेट करता है; ToC एंट्री पर क्लिक करने से उस heading तक स्क्रॉल होता है।
6. Related posts — पोस्ट डिटेल में उसी कैटेगरी के अधिकतम 3 related posts दिखते हैं (current पोस्ट को छोड़कर)।
7. Category पेज — /blog/category/[slug] कैटेगरी का नाम, विवरण, और केवल उसी कैटेगरी की पोस्ट्स दिखाता है।
8. Author पेज — /blog/author/[slug] में लेखक की बायो, अवतार, सोशल लिंक, और उनकी पोस्ट्स दिखती हैं।
9. Social share बटन — पोस्ट डिटेल पर 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 फीचर्ड पोस्ट को रेगुलर ग्रिड के ऊपर एक बड़े hero कार्ड के रूप में दिखाता है।

Edge Case और Error टेस्ट

13. Post not found — /blog/nonexistent-slug एक 404 पेज लौटाता है।
14. खाली category — जिस कैटेगरी में कोई पोस्ट नहीं है, वहाँ blog_no_posts वाला empty state मैसेज दिखता है।
15. Missing featured image — पोस्ट कार्ड बिना इमेज के भी ग्रेसफुली रेंडर होता है (कोई टूटा हुआ <img> नहीं दिखता)।
16. Missing author/category — बिना लेखक या कैटेगरी वाली पोस्ट उन एलिमेंट्स के बिना रेंडर होती है (क्रैश नहीं होना चाहिए)।
17. Feature flag disabled — जब blog: false, /blog 404 लौटाता है।

Cross-Cutting टेस्ट

18. i18n: locale स्विच — /fr/blog पर नेविगेट करें, वेरिफ़ाई करें कि UI strings (पेज टाइटल, "Read more", pagination लेबल्स) फ़्रेंच में हैं; अगर पोस्ट कंटेंट अनुवादित नहीं है तो वह English में फॉल बैक होता है।
19. i18n: RTL layout — /ar/blog और /ar/blog/[slug] पर नेविगेट करें, वेरिफ़ाई करें कि dir="rtl" सेट है और layout सही तरह रेंडर होता है (ToC सही साइड पर है)।
20. SEO: meta tags — पोस्ट डिटेल पेज में og:type=article, og:title, og:description, article:published_time और canonical link मौजूद हैं।
21. SEO: JSON-LD — पोस्ट डिटेल पेज में @type: BlogPosting, headline, author, datePublished के साथ एक <script type="application/ld+json"> मौजूद है।
22. SEO: sitemap — /sitemap.xml में blog पोस्ट URLs शामिल हैं, जिन पर hreflang alternates सेट हैं।
23. Accessibility — /blog, /blog/[slug], /blog/author/[slug] पर मोबाइल और डेस्कटॉप दोनों viewports में Axe audits चलाएँ (मौजूदा a11y टेस्ट पैटर्न का पालन करें)।
24. Keyboard navigation — ToC एंट्रीज़ और pagination बटन कीबोर्ड से focusable और activatable हैं; focus indicators विज़िबल हैं।

दायरे से बाहर

• ब्लॉग पोस्ट टिप्पणियाँ
• फुल-टेक्स्ट सर्च
• पोस्ट के भीतर न्यूज़लेटर इंटीग्रेशन
• एनालिटिक्स/व्यू काउंट्स
• प्रति टेनेंट कस्टम पोस्ट टेम्पलेट्स