Introduction

Welcome to the FiNAN Website Documentation! This comprehensive guide serves as your central resource for understanding, developing, and maintaining the FiNAN website.

What is FiNAN?

FiNAN (Filipino Nurses Association in the Nordic Region) is a professional non-profit organization that connects, supports, and advocates for Filipino nurses across the Nordic region.

The organization provides:

• Guidance on nursing licensing and certification
• Support for cultural integration in Nordic countries
• Professional development opportunities
• Networking and community building
• Advocacy for Filipino healthcare professionals

The FiNAN website serves as the digital hub for this organization, providing information about:

• Regional representation across 8 Nordic countries/regions (Denmark, Faroe Islands, Finland & Åland, Greenland, Iceland, Norway, Sweden)
• Working committee members and leadership
• News and blog content via Ghost CMS integration
• Events and gatherings (including the Triennial Gathering 2026)
• Membership information and registration
• Resources, guides, and FAQs for nurses

Who is This Documentation For?

This documentation serves two primary audiences:

For Developers

If you’re a developer joining the FiNAN website project, this documentation will help you:

• Understand the architecture and technology stack
• Set up your development environment
• Learn the component structure and patterns
• Work with the data layer and TypeScript configurations
• Implement new features and pages
• Follow code quality standards and best practices

Start here: Quick Start for Developers

For Content Editors

If you’re a content editor or non-technical team member, this documentation will help you:

• Update committee member information and photos
• Manage FAQ content
• Update event information
• Work with blog content and tags
• Find and edit text content
• Get help when needed

Start here: Quick Start for Editors

Technology Stack

The FiNAN website is built with modern web technologies optimized for performance, security, and developer experience:

Core Framework

• Astro 5.15.9 - Modern static site generator with “islands architecture” for optimal performance
  • Zero JavaScript by default
  • Partial hydration for interactive components
  • File-based routing
  • Built-in image optimization

Styling & UI

• Tailwind CSS 4.1.13 - Utility-first CSS framework
  • Responsive design system
  • Custom color schemes
  • Mobile-first approach
  • Automatic class sorting via Prettier

Type Safety

• TypeScript 5.9.2 - Full type safety across the codebase
  • Type-safe data configurations
  • Component prop typing
  • Build-time type checking

Code Quality Tools

• ESLint 9.36.0 - Linting with Astro-specific rules
• Prettier 3.6.2 - Code formatting with Astro and Tailwind plugins
  • Consistent code style
  • Automatic formatting
  • Tailwind class sorting

Third-Party Integrations

• Ghost CMS - Blog and news content management (via @ts-ghost/content-api)

  • Type-safe API client
  • Tag-based filtering for regional content
  • Hosted at puls.finan.eu.com

• PhotoSwipe 5.4.4 - Image gallery and lightbox

  • Touch-friendly mobile gestures
  • Keyboard navigation
  • Zoom and pan support

Security & SEO

• Comprehensive security headers (CSP, X-Frame-Options, etc.)
• Open Graph and Twitter Card meta tags
• Structured data for search engines
• Performance optimizations (CSS splitting, vendor chunking)

Documentation Structure

This documentation is organized into several sections:

Foundation (Start Here)

• Getting Started - Installation, quick starts, and project overview
• Core Concepts - Architecture, data patterns, and asset management
• Components - Component structure and API reference

Content Management (For Editors)

• Content Management - Committee, FAQ, events, and page content
• Integrations - Ghost CMS and PhotoSwipe usage
• Pages - Page structure and creating new pages

Advanced Topics (For Developers)

• SEO & Performance - Optimization and structured data
• Security - Security configuration and best practices
• Code Quality - Workflow, style guide, and testing

Reference & Support

• Deployment - Build process and deployment platforms
• Reference - Complete API and configuration reference
• Troubleshooting - Common issues and debugging
• Contributing - Guidelines for contributors

Key Features

The FiNAN website includes several notable features:

Regional Representation

• Dedicated pages for 8 Nordic countries/regions
• Committee member displays with photos and contact information
• Country-specific blog content filtering
• Photo galleries for community highlights

Event Management

• Event pages with countdown timers
• Interactive schedule accordions
• Registration sections
• Event hero sections

Content Integration

• Ghost CMS integration for blog posts
• Regional filtering via tags
• External blog linking with proper security

Interactive Components

• FAQ accordion with smooth animations
• Event schedule with collapsible days
• Photo galleries with PhotoSwipe lightbox
• Responsive navigation

SEO & Performance

• Comprehensive meta tag configuration
• Structured data (JSON-LD) for search engines
• Optimized image loading
• CSS code splitting
• Fast static site generation

Getting Help

If you need assistance:

• Search this documentation - Use the search bar at the top
• Check troubleshooting guides - See Troubleshooting
• Review the FAQ - See FAQ
• Contact the development team - Reach out via GitHub issues

Next Steps

Choose your path based on your role:

• Developers: Continue to Quick Start for Developers
• Content Editors: Continue to Quick Start for Editors
• Everyone: Learn about the Project Structure

Let’s get started!