Article Details

Route: /:lang/editorial/{slug}. The article reading experience. Magazine-style typography, Arabic RTL-first parity, sticky sidebar with most-read + share, cross-module connected-signals rail. Each section is conditional — sections with no data hide rather than rendering empty.

Section order (top → bottom)

1. A · Breadcrumb (Home → Editorial → Category → {title})
2. B · Article header (type chip + category badge + topic badges + H1 title + dek + byline row)
3. C · Featured image (16:9, with alt + caption + credit)
4. D · Reading-controls bar (share + save + font-size + translation switch when applicable)
5. E · Article body (sanitised HTML, prose-editorial typography)
6. F · Author card (avatar + name + role + bio + author-page link + social)
7. G · Tags row (topic chips, routing to topic pages)
8. H · Connected ecosystem signals (cross-module rail — Founders, Startups, Opportunities, Files, Events, Coverage)
9. I · Related articles (same category + same topic + manual editor picks)
10. J · Most-read sidebar (sticky on desktop, inline-below on mobile)
11. K · Newsletter block (context-aware: preselects article category, tracks article_id)
12. L · Footer (global)

B · Header fields

Type chip

Source: EditorialArticle.type. Display: small uppercase chip with type-specific tint (news=red/news, analysis=blue, commentary=amber, interview=green, profile=purple, guide=primary). Translated label via i18n key editorial.type.{type}.

Category badge

Source: EditorialCategory.NameLang via CategoryId FK. Routes to /:lang/editorial/categories/{categorySlug} on click. Distinct from type chip — category is the editorial bucket, type is the article format.

Title (H1)

Source: EditorialArticleLang.Title. ONLY H1 on the page. Type scale: t-page-h1 (clamp 1.75rem → 2.5rem).

Dek (standfirst)

Source: EditorialArticleLang.Dek. 1-3 sentences. Display: t-body-lg, muted-foreground tint. Required: yes.

Byline row

Fields: author avatar (32×32) + author name (clickable → author page) + author role + "·" separator + publishedAt (localised) + "·" + readingTimeMinutes ("{N} min read") + "·" + isUpdated chip when updatedAt > publishedAt + 7 days.

C · Featured image rules

• Aspect ratio: 16:9 desktop, 4:3 mobile (via aspect-ratio CSS, not pixel heights).
• Source: EditorialArticleImage.Url, AltLang, CaptionLang, Credit, DisplayOrder=0 (the first image is the featured one).
• Fallback when no image: generated branded SVG (article title + category icon composite). NEVER an empty grey box.
• Caption rendered as <figcaption> below image, with credit attribution prefix italicised.
• Click-to-expand on mobile when image is portrait-oriented (rare for cover, common for inline figures).

E · Article body — reading experience contract

• Max-width: 720px (66 chars per line target for English, 60 chars for Arabic).
• Typography: prose-editorial class. font-size 18px desktop / 16px mobile. line-height 1.7 LTR / 1.85 RTL (Arabic needs more leading for diacritics).
• Allowed body tags (sanitised): h2-h4 (h1 is reserved for article title), p, ul, ol, li, blockquote, figure + figcaption, a, em, strong, code, pre.
• Pull-quotes (custom data-pullquote="true" attribute on <blockquote>) render with distinct typography: larger, primary-tinted, italic.
• Inline images: 4:3 default, with figcaption support, click-to-expand on mobile.
• Inline links: underline always (not just on hover), with primary tint. External links open in new tab with rel=noopener,noreferrer.

F · Author card

• Source: EditorialAuthorLang via AuthorId FK. Fields: avatar (64×64), name, role, short bio (max 200 chars), social links (LinkedIn, Twitter), "View all articles by {name}" CTA → /:lang/editorial/authors/{authorSlug}.
• Card design: distinct from article body — bordered panel, slight background tint.

H · Connected ecosystem signals (cross-module rail)

The strategically critical section. Surfaces every entity across Founders, Startups, Opportunities, Founder Files, Calendar Events, Coverage that the article mentions OR is contextually relevant to. Source: EcosystemEntityLinks WHERE entityType='editorial' AND entityId=:articleId, supplemented by mentionedFounderIds + mentionedStartupIds + mentionedEventIds + mentionedOpportunityIds explicit references.

• Per signal card: { sourceEntityType, sourceTitle, sourceCoverUrl?, reasonLang, sourceRoute, relationType, displayOrder }. reasonLang is the short editorial explanation — "Founder mentioned in this story" / "Funding opportunity for this sector" / "Recent event covering this topic".
• Cap: 8 cards displayed (horizontal scroll-snap on mobile, 3-col grid on desktop). "See all connected signals →" when more exist.
• isPractical=true articles SUPPRESS the Files sub-rail (the article itself IS the practical reference).

I · Related articles

• Sourcing priority: (1) Manual links via EditorialArticleRelated table (editor-curated); (2) Same category + same topic, sorted by publishedAt DESC; (3) Same topic across categories.
• Cap 6 articles. Display: <app-editorial-card variant="compact"> in 3-col grid.
• Exclude self. Section hides when 0 related articles.