Article Details

المسار: /:lang/editorial/{slug}. تجربة قراءة المقالة. typography بنمط-المجلّة، تكافؤ Arabic RTL-أوّلاً، شريط جانبي sticky مع most-read + مشاركة، شريط cross-module connected-signals. كل قسم شرطي — الأقسام بلا بيانات تَختفي بدلاً من الرسم فارغاً.

ترتيب الأقسام (من الأعلى للأسفل)

1. A · Breadcrumb (Home → Editorial → الفئة → {العنوان})
2. B · header المقالة (chip النوع + شارة الفئة + شارات المواضيع + العنوان H1 + dek + صفّ byline)
3. C · الصورة المميَّزة (16:9، مع alt + caption + credit)
4. D · شريط تحكّمات-القراءة (share + save + حجم-الخط + تبديل-الترجمة عند الانطباق)
5. E · جسم المقالة (HTML مُعَقَّم، typography prose-editorial)
6. F · كرت المؤلِّف (avatar + الاسم + الدور + bio + رابط-صفحة-المؤلِّف + social)
7. G · صفّ الـ tags (chips المواضيع، توجيه لصفحات الموضوع)
8. H · الإشارات المنظومية المتّصلة (شريط cross-module — Founders، Startups، Opportunities، Files، Events، Coverage)
9. I · المقالات ذات الصلة (نفس الفئة + نفس الموضوع + اختيارات يدوية للمحرّر)
10. J · شريط جانبي most-read (sticky على سطح المكتب، inline-below على الموبايل)
11. K · كتلة النشرة (مُدركة-للسياق: تَختار مُسبَقاً فئة المقالة، تَتتبَّع article_id)
12. L · Footer (عام)

B · حقول Header

chip النوع

المصدر: EditorialArticle.type. العرض: chip أحرف-كبيرة صغير مع صبغة مُتَخَصِّصة-بالنوع. تسمية مُتَرجَمة عبر مفتاح i18n editorial.type.{type}.

شارة الفئة

المصدر: EditorialCategory.NameLang عبر FK CategoryId. يُوَجِّه لـ /:lang/editorial/categories/{categorySlug} عند النقر. متمايز عن chip النوع — الفئة هي الدلو التحريري، النوع هو صيغة المقالة.

العنوان (H1)

المصدر: EditorialArticleLang.Title. الـ H1 الوحيد على الصفحة. مقياس النوع: t-page-h1 (clamp 1.75rem → 2.5rem).

Dek (standfirst)

المصدر: EditorialArticleLang.Dek. 1-3 جمل. العرض: t-body-lg، صبغة muted-foreground. مطلوب: نعم.

صفّ byline

الحقول: avatar المؤلِّف (32×32) + اسم المؤلِّف (قابل-للنقر → صفحة المؤلِّف) + دور المؤلِّف + فاصل "·" + publishedAt (محلّي) + "·" + readingTimeMinutes ("{N} min read") + "·" + chip isUpdated حين updatedAt > publishedAt + 7 أيام.

C · قواعد الصورة المميَّزة

• نسبة العرض-إلى-الارتفاع: 16:9 سطح المكتب، 4:3 موبايل (عبر aspect-ratio CSS، ليس ارتفاعات pixel).
• المصدر: EditorialArticleImage.Url، AltLang، CaptionLang، Credit، DisplayOrder=0 (أول صورة هي المميَّزة).
• الاحتياطي حين لا صورة: SVG مُتولَّد علامي (عنوان المقالة + إيقونة الفئة مُركَّبة). أبداً ليس صندوقاً رمادياً فارغاً.
• الـ caption يُرسم كـ <figcaption> أسفل الصورة، مع بادئة نسبة-الـ-credit مائلة.
• Click-to-expand على الموبايل حين الصورة portrait-oriented (نادر للغلاف، شائع للـ figures inline).

E · جسم المقالة — عقد تجربة القراءة

• العرض الأقصى: 720px (هدف 66 حرف لكل سطر للإنجليزية، 60 حرف للعربية).
• Typography: class prose-editorial. font-size 18px سطح المكتب / 16px موبايل. line-height 1.7 LTR / 1.85 RTL (العربية تَحتاج leading أكثر للحركات).
• tags الجسم المسموحة (مُعَقَّمة): h2-h4 (h1 محجوز لعنوان المقالة)، p، ul، ol، li، blockquote، figure + figcaption، a، em، strong، code، pre.
• الـ Pull-quotes (سمة مُخَصَّصة data-pullquote="true" على <blockquote>) تُرسم بـ typography مميَّزة: أكبر، مُصبَّغة-primary، مائلة.
• الصور inline: 4:3 افتراضي، مع دعم figcaption، click-to-expand على الموبايل.
• الروابط inline: underline دائماً (ليس فقط عند hover)، مع صبغة primary. الروابط الخارجية تَفتح في tab جديد مع rel=noopener,noreferrer.

F · كرت المؤلِّف

• المصدر: EditorialAuthorLang عبر FK AuthorId. الحقول: avatar (64×64)، الاسم، الدور، bio قصير (max 200 حرف)، روابط social (LinkedIn، Twitter)، CTA "View all articles by {name}" → /:lang/editorial/authors/{authorSlug}.
• تصميم الكرت: متمايز عن جسم المقالة — panel بحدّ، صبغة خلفية خفيفة.

H · الإشارات المنظومية المتّصلة (شريط cross-module)

القسم الحرج استراتيجياً. يُبرز كل entity عبر Founders، Startups، Opportunities، Founder Files، Calendar Events، Coverage التي تَذكرها المقالة أو ذات-صلة-سياقياً. المصدر: EcosystemEntityLinks WHERE entityType='editorial' AND entityId=:articleId، مُكمَّل بـ mentionedFounderIds + mentionedStartupIds + mentionedEventIds + mentionedOpportunityIds المراجع الصريحة.

• لكل كرت إشارة: { sourceEntityType، sourceTitle، sourceCoverUrl?، reasonLang، sourceRoute، relationType، displayOrder }. reasonLang هو الشرح التحريري القصير.
• الحد: 8 كروت معروضة (scroll-snap أفقي على موبايل، شبكة 3-أعمدة على سطح المكتب). "See all connected signals →" حين يوجد أكثر.
• مقالات isPractical=true تَكتم شريط Files الفرعي (المقالة نفسها هي المرجع العملي).

I · المقالات ذات الصلة

• أولوية المصدر: (1) روابط يدوية عبر جدول EditorialArticleRelated (مُنَسَّق-من-المحرّر)؛ (2) نفس الفئة + نفس الموضوع، مفروز بـ publishedAt DESC؛ (3) نفس الموضوع عبر الفئات.
• حد 6 مقالات. العرض: <app-editorial-card variant="compact"> في شبكة 3-أعمدة.
• استثنِ النفس. القسم يَختفي حين 0 مقالات ذات صلة.