Move Hardcoded Heroes to Directus CMS & Implement endpoints

[Skoivumaki]

✨ Enhancement Description

Provide a brief description of the enhancement or improvement being suggested:

• What is it?: Move hardcoded heroes into Directus CMS by creating new models under the heroesPage folder. Replace the current hardcoded fetch logic with Directus endpoints and create a new heroApi.ts file based on HeroManager.ts to handle fetching data from Directus. Keep the frontend logic unchanged.
• In this issue we will only focus on getting the /heroes/[slug] page to function, to split the workload into multiple issues. For the reason why this page specifically: we are aiming to implement most of types and models in one issue to reduce complexity.
• Why improve it?: Currently, hero data is hardcoded, making it less maintainable and difficult to update. Moving this content into Directus will improve flexibility, scalability, and allow content editors to manage heroes without developer intervention.

---

🌟 Benefits of the Enhancement

Explain how this enhancement will improve the project or user experience:

• User Experience: Hero data can be dynamically managed and updated from Directus, allowing quicker updates and better consistency across environments.
• Project Impact: Improves maintainability, reduces technical debt, and standardizes how data is fetched by aligning with CMS-driven content practices.

---

🛠️ Proposed Implementation

Outline how the enhancement could be implemented, including any technical considerations:

• Technical Details:

  • Create new Directus models under heroesPage matching the current hero types.
  • Populate models with test data or optionally real hero data.
  • Add a new heroApi.ts file implementing Directus fetch logic based on HeroManager.ts. (for now, only add the endpoints relevant for /heroes/[slug])
  • Replace hardcoded fetch logic with Directus endpoints for page /heroes/[slug].
  • Ensure /en/heroes/(any hero) works correctly after migration.
  • Other hero-related pages can be migrated in separate issues.

• Implementation Plan:

  1. Define Directus models for heroes under heroesPage.
  2. Populate models with initial hero data.
  3. Implement heroApi.ts using Directus endpoints.
  4. Integrate heroApi.ts into existing fetch logic without altering frontend components.
  5. Test functionality by validating /en/heroes/researcher etc.
  6. Document changes for future migrations of other hero pages.

---

📎 Additional Information

Include any additional context, examples, or resources that could help in understanding or implementing the enhancement:

• Links & References:
  • Reference existing HeroManager.ts for API logic patterns and the type files.
  • For Directus credentials or additional questions, ask in dc.