Source News Carousel Content from Directus

[patinen]

✨ Enhancement Description

• What is it?: Add Directus-managed content sourcing for the News carousel. Carousel items should be created and maintained in Directus and fetched by the frontend for the News page carousel component.
• Why improve it?: The carousel should not rely on hard-coded frontend content. Managing its content through Directus allows updates without code changes and keeps News-related content centralized in the existing CMS.

---

🌟 Benefits of the Enhancement

• User Experience: Carousel content can be kept current and relevant without requiring frontend deployments for every content update.
• Project Impact: Improves maintainability by separating carousel content from the UI implementation and reusing the project's existing Directus-based content workflow.

---

🛠️ Proposed Implementation

• Technical Details:

  • Create a news_carousel collection in Directus.
  • Each carousel item should support:
    • Text content
    • Optional image
    • Sort/order value
    • Status for controlling public visibility
  • Store carousel text in a JSON field suitable for the supported languages.
  • Add an optional relation to a Directus image/file.
  • Configure frontend/public read permissions for published carousel items.
  • Add the required frontend types and Directus query.
  • Only fetch carousel items intended for public display.
  • Sort returned items using the configured order.
  • Map Directus image IDs to asset URLs before passing the data to the carousel component.
  • Missing images should be handled as optional data.

• Implementation Plan:

  1. Create the news_carousel collection and required fields in Directus.
  2. Configure the optional image relation, status and ordering.
  3. Add frontend types for carousel data.
  4. Add a Directus query for fetching carousel items.
  5. Normalize the returned text for the current language.
  6. Connect the fetched data to the News carousel component.
  7. Verify that unpublished items are excluded and items without images work correctly.

---

📎 Additional Information

• Links & References:

  • Parent issue: Add News Carousel Component
  • News API: src/entities/NewsV2/Api/newsApi.ts
  • News types: src/entities/NewsV2/model/types/types.ts
  • Directus documentation: https://directus.io/docs/

• Mockups/Examples:

  • The carousel UI itself is handled by the parent issue.
  • This sub-issue is limited to Directus schema, data fetching and integration with the carousel component.