Modules Documentation
Page specifications
Page-by-page specification using the standard template.
Complete
Per-page specifications follow the documentation template: purpose · target users · business value · page sections · fields displayed · actions · data source · validation · empty / loading / error states · SEO/AEO · analytics · responsive · QC · future.
Editorial listing page
- Hero
- Title "Editorial" / "تحرير", lede paragraph, type filter pill row, count summary.
- Filter row
- Type (news/analysis/commentary/interview/profile/guide) · Sector · Country · Sort (latest / popular). Filter state persists in URL query params.
- Grid
- `<app-editorial-card *ngFor="…">` 3-up on desktop, 2-up tablet, 1-up mobile.
- Empty state
- When filter combination yields zero results: empty-state component with "Clear filters" button + suggestion to try a broader filter.
Editorial article detail page
- Hero header
- Type eyebrow with orange dot · headline (clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem)) · dek (1.0625rem) · author + date + reading time strip on a border-bound row.
- Article body
- HTML rendered via [innerHTML] piped through SafeHtmlPipe. `prose-editorial` class for typography rhythm. `max-w-3xl` reading column.
- Related Ecosystem Signals
- `<app-related-ecosystem-signals [block]="signalsBlock()" />`. Block produced by EcosystemSignalsService for `("editorial", article.id)`.
- Inline Signal CTA
- `<app-inline-signal-cta context="editorial" />`. Subscribe block; routes to weekly editorial digest.