Skip to main content

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.

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

1
Create a new file
2
Create a new .md or .mdx file in the appropriate collection directory:
3
src/content/events/my-new-event.md
4
Add frontmatter
5
Include required metadata at the top:
6
---
title: "My Event"
date: 2026-01-15
category: "Education"
---
7
Write content
8
Add your markdown content below the frontmatter.
9
Build and preview
10
Run the development server to see your changes:
11
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

​
Next Steps

Environment Variables

Configure environment-specific settings

Netlify Deployment

Deploy your configured site to Netlify