Configuration

This guide covers the main configuration files and options for Dzaleka Online Services.

Astro Configuration

The project uses Astro as its framework. Configuration is in astro.config.mjs.

Basic Settings

astro.config.mjs

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import mdx from '@astrojs/mdx';
import remarkToc from 'remark-toc';
import remarkSlug from 'remark-slug';
import node from '@astrojs/node';
import react from '@astrojs/react';
import netlify from '@astrojs/netlify';

export default defineConfig({
  site: 'https://services.dzaleka.com',
  output: 'static',
  adapter: process.env.NETLIFY
    ? netlify()
    : node({
      mode: 'standalone'
    }),
  integrations: [
    tailwind(),
    mdx(),
    react()
  ],
  markdown: {
    remarkPlugins: [remarkSlug, [remarkToc, { tight: true }]],
    shikiConfig: {
      theme: 'dracula',
      wrap: true
    },
    rehypePlugins: []
  }
});

Configuration Options

site

Type: string
Value: https://services.dzaleka.com The production URL of your site. Used for generating canonical URLs and sitemaps.

site: 'https://services.dzaleka.com'

output

Type: 'static' | 'server' | 'hybrid'
Value: static Defines the build output mode:

static: Pre-renders all pages at build time (current setting)
server: Renders pages on-demand
hybrid: Mix of static and server-rendered pages

output: 'static'

adapter

Type: AstroAdapter
Value: Dynamic (Netlify or Node.js) The adapter used depends on the environment:

Netlify: Automatically selected when NETLIFY env var is present
Node.js: Used for local development and self-hosted deployments

adapter: process.env.NETLIFY
  ? netlify()
  : node({ mode: 'standalone' })

Integrations

The project uses several Astro integrations defined in astro.config.mjs:20-24:

@astrojs/tailwind

Enables Tailwind CSS support. Configuration in tailwind.config.cjs.

import tailwind from '@astrojs/tailwind';

integrations: [tailwind()]

@astrojs/mdx

Enables MDX support for enhanced markdown with JSX components.

import mdx from '@astrojs/mdx';

integrations: [mdx()]

@astrojs/react

Enables React component support in Astro pages.

import react from '@astrojs/react';

integrations: [react()]

Markdown Configuration

Markdown processing is configured in astro.config.mjs:25-32:

markdown: {
  remarkPlugins: [remarkSlug, [remarkToc, { tight: true }]],
  shikiConfig: {
    theme: 'dracula',
    wrap: true
  },
  rehypePlugins: []
}

Remark Plugins:

remarkSlug: Adds IDs to headings for anchor links
remarkToc: Generates table of contents with compact spacing

Shiki Configuration:

theme: dracula - Syntax highlighting theme
wrap: true - Wraps long code lines

Tailwind CSS Configuration

Tailwind is configured in tailwind.config.cjs with custom theme extensions.

Content Sources

tailwind.config.cjs

content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}']

This tells Tailwind where to look for class names to include in the final CSS.

Custom Colors

The project defines custom color palettes reflecting Dzaleka’s cultural identity:

theme: {
  extend: {
    colors: {
      primary: {
        600: '#0284c7', // Brand Primary
        // ... other shades
      },
      terracotta: {
        500: '#de6449', // Rich earth tone
      },
      ochre: {
        500: '#eab308', // Warm yellow
      },
      earth: {
        600: '#4e6753', // Natural green
      },
      sand: {
        500: '#b8ad8d', // Neutral tone
      },
      vibrant: {
        500: '#9b5de5', // Purple
        600: '#f15bb5', // Pink
        700: '#00bbf9', // Cyan
      }
    }
  }
}

See the full color palette in tailwind.config.cjs:13-80.

Typography

Custom font families are defined in tailwind.config.cjs:81-84:

fontFamily: {
  'heading': ['Manrope', 'system-ui', 'sans-serif'],
  'body': ['Manrope', 'system-ui', 'sans-serif'],
}

Usage:

<h1 class="font-heading">Heading Text</h1>
<p class="font-body">Body text</p>

Custom Animations

Several custom animations are available in tailwind.config.cjs:85-108:

animation: {
  'fade-in': 'fadeIn 0.5s ease-out',
  'slide-up': 'slideUp 0.5s ease-out',
  'fade-in-up': 'fadeInUp 0.6s ease-out forwards',
  'reveal': 'revealOnScroll 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards',
}

Usage:

<div class="animate-fade-in">
  <h2 class="animate-slide-up">Animated content</h2>
</div>

Safelist

Dynamic classes that should always be included in tailwind.config.cjs:4-10:

safelist: [
  {
    pattern: /^(bg|text|border)-(terracotta|ochre|earth)(-50|-100|-200|-300|-400|-500|-600|-700|-800|-900)$/,
    variants: ['hover', 'focus', 'active', 'group-hover'],
  },
]

Safelisted classes are always included in the CSS output, even if not found during content scanning. Use sparingly to keep bundle size small.

Plugins

Tailwind plugins are configured in tailwind.config.cjs:111-115:

plugins: [
  require('@tailwindcss/typography'),
  require('@tailwindcss/forms'),
  require('@tailwindcss/aspect-ratio'),
]

@tailwindcss/typography: Prose styles for markdown content
@tailwindcss/forms: Better form element defaults
@tailwindcss/aspect-ratio: Aspect ratio utilities

Content Collections

Content collections organize structured content like events, stories, and jobs.

Available Collections

Based on the project structure, these collections are available:

events: Community events and activities
stories: Community narratives and histories
inspirational-stories: Personal success stories
jobs: Job opportunities
marketplace: Products and services for sale
services: Community services and organizations
stores: Local businesses
sites: Community locations and facilities
docs: Documentation pages
talents: Community talent profiles

Collection Schema Example

Content collections use frontmatter for metadata. Example from an event:

---
title: "Tumaini Festival 2025"
date: 2025-02-15
location: "Dzaleka Refugee Camp"
category: "Culture"
image: "/images/events/tumaini-2025.jpg"
excerpt: "Annual celebration of art, music, and culture"
---

Event content goes here...

Adding New Content

Create a new file

Create a new .md or .mdx file in the appropriate collection directory:

src/content/events/my-new-event.md

Add frontmatter

Include required metadata at the top:

---
title: "My Event"
date: 2026-01-15
category: "Education"
---

Write content

Add your markdown content below the frontmatter.

Build and preview

Run the development server to see your changes:

npm run dev

TypeScript Configuration

The project uses TypeScript for type safety. Dependencies include:

@types/node: Node.js type definitions
@types/react: React type definitions
@types/react-dom: React DOM type definitions
@types/leaflet: Leaflet map library types
@types/nodemailer: Nodemailer email library types

Setup

Hosting

Astro Configuration

Basic Settings

Configuration Options

site

output

adapter

Integrations

@astrojs/tailwind

@astrojs/mdx

@astrojs/react

Markdown Configuration

Tailwind CSS Configuration

Content Sources

Custom Colors

Typography

Custom Animations

Safelist

Plugins

Content Collections

Available Collections

Collection Schema Example

Adding New Content

TypeScript Configuration

Next Steps

Environment Variables

Netlify Deployment

Setup

Hosting

​Astro Configuration

​Basic Settings

​Configuration Options

​site

​output

​adapter

​Integrations

​@astrojs/tailwind

​@astrojs/mdx

​@astrojs/react

​Markdown Configuration

​Tailwind CSS Configuration

​Content Sources

​Custom Colors

​Typography

​Custom Animations

​Safelist

​Plugins

​Content Collections

​Available Collections

​Collection Schema Example

​Adding New Content

​TypeScript Configuration

​Next Steps

Environment Variables

Netlify Deployment

Astro Configuration

Basic Settings

Configuration Options

site

output

adapter

Integrations

@astrojs/tailwind

@astrojs/mdx

@astrojs/react

Markdown Configuration

Tailwind CSS Configuration

Content Sources

Custom Colors

Typography

Custom Animations

Safelist

Plugins

Content Collections

Available Collections

Collection Schema Example

Adding New Content

TypeScript Configuration

Next Steps