> ## Documentation Index
> Fetch the complete documentation index at: https://dos.dzaleka.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuration

> Configure Astro, Tailwind CSS, and content collections for Dzaleka Online Services

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

```javascript title="astro.config.mjs" theme={null}
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.

```javascript theme={null}
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

```javascript theme={null}
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

```javascript theme={null}
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`.

```javascript theme={null}
import tailwind from '@astrojs/tailwind';

integrations: [tailwind()]
```

#### @astrojs/mdx

Enables MDX support for enhanced markdown with JSX components.

```javascript theme={null}
import mdx from '@astrojs/mdx';

integrations: [mdx()]
```

#### @astrojs/react

Enables React component support in Astro pages.

```javascript theme={null}
import react from '@astrojs/react';

integrations: [react()]
```

### Markdown Configuration

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

```javascript theme={null}
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

```javascript title="tailwind.config.cjs" theme={null}
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:

```javascript theme={null}
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`:

```javascript theme={null}
fontFamily: {
  'heading': ['Manrope', 'system-ui', 'sans-serif'],
  'body': ['Manrope', 'system-ui', 'sans-serif'],
}
```

Usage:

```html theme={null}
<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`:

```javascript theme={null}
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:

```html theme={null}
<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`:

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

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

### Plugins

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

```javascript theme={null}
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:

```markdown theme={null}
---
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

<Steps>
  ### Create a new file

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

  ```bash theme={null}
  src/content/events/my-new-event.md
  ```

  ### Add frontmatter

  Include required metadata at the top:

  ```markdown theme={null}
  ---
  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:

  ```bash theme={null}
  npm run dev
  ```
</Steps>

## 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

## Next Steps

<CardGroup cols={2}>
  <Card title="Environment Variables" icon="key" href="/deployment/environment-variables">
    Configure environment-specific settings
  </Card>

  <Card title="Netlify Deployment" icon="rocket" href="/deployment/netlify">
    Deploy your configured site to Netlify
  </Card>
</CardGroup>