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

# Community Voices

> Platform for sharing personal stories, experiences, and perspectives from members of the Dzaleka refugee community

## Overview

Community Voices is a storytelling platform that amplifies the lived experiences, hopes, challenges, and triumphs of individuals in Dzaleka Refugee Camp. Through personal narratives, the platform humanizes refugee experiences, challenges stereotypes, and creates a digital archive of community history.

<Note>
  Community Voices focuses on first-person narratives that give agency to refugees to tell their own stories in their own words, countering mainstream media portrayals.
</Note>

## Purpose & Impact

### Why Community Voices Matters

<CardGroup cols={2}>
  <Card title="Dignity & Agency" icon="user">
    Refugees control their own narratives instead of being subjects of others' stories
  </Card>

  <Card title="Historical Archive" icon="archive">
    Preserves community memories and experiences for future generations
  </Card>

  <Card title="Advocacy Tool" icon="megaphone">
    Personal stories influence policy, challenge misconceptions, drive social change
  </Card>

  <Card title="Community Connection" icon="heart">
    Shared experiences build solidarity and mutual understanding within the camp
  </Card>
</CardGroup>

### Story Categories

* **Journey** - Migration stories, fleeing conflict, arriving in Malawi
* **Daily Life** - Experiences of camp life, challenges, routines
* **Education** - Pursuing learning despite obstacles
* **Entrepreneurship** - Starting businesses, economic resilience
* **Art & Culture** - Preserving heritage, creative expression
* **Advocacy** - Speaking out for refugee rights and dignity
* **Hope & Dreams** - Aspirations, future goals, resilience
* **Stories** - General personal narratives

## User Experience

### Reading Stories

<Steps>
  <Step title="Discover Stories">
    Browse featured stories on homepage or navigate to dedicated section (if implemented)
  </Step>

  <Step title="Immersive Reading">
    Full-screen article layout with hero image, title, and author introduction
  </Step>

  <Step title="Explore Related Stories">
    View 3 related stories from the same category at the bottom of each article
  </Step>

  <Step title="Share & Engage">
    Social sharing buttons (if implemented) to amplify voices beyond the platform
  </Step>
</Steps>

### Story Page Elements

Each story (`/community-voices/[slug]`) features:

* **Hero section**: Large featured image with gradient overlay
* **Title & excerpt**: Compelling headline and summary
* **Author byline**: Name and date published
* **Category badge**: Story classification
* **Full narrative**: Long-form content with rich formatting
* **Tags**: Keywords for discovery (#journey, #hope, #resilience)
* **Related stories**: 3 similar narratives from same category

<Warning>
  **Ethical Storytelling**: All stories require explicit consent from subjects. Authors have final approval over edits. Sensitive content is handled with care to protect dignity and safety.
</Warning>

## Content Schema

Stories stored in `src/content/community-voices/` as Markdown:

```yaml theme={null}
title: "Story Headline"                       # Required - compelling, descriptive
author: "Author Name"                         # Required - first-person narrator
date: "2021-12-06"                            # Required - publication date (YYYY-MM-DD)
category: "Stories"                           # Required - see categories above
excerpt: "Brief compelling summary..."        # Required - 1-2 sentences
image: "https://image-url.com/photo.jpg"     # Required - high-quality hero image
featured: true                                # Boolean - homepage highlight
tags: ["journey", "hope", "resilience"]       # Array - keywords for search
```

### Real Example from Source

From `divineirakoze.md`:

```yaml theme={null}
title: "Divine Irakoze on life inside Malawi's Dzaleka refugee camp and the issues facing youth in her community"
author: "Divine Irakoze"
date: "2021-12-06"
category: "Stories"
excerpt: "I normally tell people that being a refugee is not easy. You are fighting for space in a country that is not your own."
image: "https://blogger.googleusercontent.com/img/a/AVvXsEi4x1I7Om_G3Ee4q5-XHUs47kOECiIs9vsGss4L..."
featured: true
tags: ["journey", "hope", "resilience"]
```

With powerful markdown content:

```markdown theme={null}
### Divine is a refugee from Burundi living in Malawi.

I normally tell people that being a refugee is not easy. You are fighting for 
space in a country that is not your own. I mean no one wishes to be a refugee, 
it is very unfortunate and sad that many people end up being victims for freeing 
their country to look for refuge...

In Malawi, refugees are not allowed to work. This has left so many youths in 
the camp became unemployed. They are wasted away into drug abuse and other 
unhealthy habits...

My voice, your voice, his voice, her voice, their voice and everyone's voice 
matters the most...

I hope that one day I will be a strong advocate for refugees. My dream is to 
advocate for and empower refugees with skills for self-reliance...
```

<Accordion title="Read Divine's Full Story">
  Divine's story (24 lines total) discusses:

  * Challenges of refugee life in Dzaleka
  * Restrictions on work and movement
  * Impact on youth unemployment and mental health
  * Food insecurity and basic needs
  * Her advocacy dreams and hope for the future

  See full text in `src/content/community-voices/divineirakoze.md`
</Accordion>

## How to Submit a Story

<Steps>
  <Step title="Story Development">
    * Identify willing storyteller (must give informed consent)
    * Conduct interview or have person write their own story
    * Ensure storyteller understands how story will be used
    * Get explicit permission for any photos
  </Step>

  <Step title="Writing the Story">
    **First-person narrative** is most powerful:

    ```markdown theme={null}
    ❌ "She arrived in Dzaleka in 2018..."
    ✅ "I arrived in Dzaleka in 2018..."
    ```

    **Show, don't just tell:**

    ```markdown theme={null}
    ❌ "Life was hard."
    ✅ "I waited in line for three hours under the hot sun for a bag of 
        maize that would barely feed my family for a week."
    ```
  </Step>

  <Step title="Create Story File">
    ```bash theme={null}
    touch src/content/community-voices/firstname-lastname.md
    ```

    Use author's name as filename (lowercase, hyphens, no spaces).
  </Step>

  <Step title="Add Metadata & Content">
    ```yaml theme={null}
    ---
    title: "Finding Hope Through Music: Bakari's Journey"
    author: "Bakari Hassan"
    date: "2025-03-09"
    category: "Art & Culture"
    excerpt: "When I lost everything fleeing my homeland, I still had my voice and my music."
    image: "/images/stories/bakari-performing.jpg"
    featured: false
    tags: ["music", "resilience", "culture", "art"]
    ---

    ### Bakari is a musician from Somalia living in Dzaleka since 2019.

    When I lost everything fleeing my homeland, I still had my voice and my music...

    [Continue story...]
    ```
  </Step>

  <Step title="Review with Storyteller">
    **CRITICAL**: Show the final story to the author BEFORE publishing.

    * Read it aloud together
    * Verify accuracy of facts and quotes
    * Check that tone and message match their intent
    * Get written/recorded approval to publish
  </Step>

  <Step title="Publish">
    ```bash theme={null}
    npm run dev  # Preview locally
    # Visit: http://localhost:4321/community-voices/firstname-lastname

    git add .
    git commit -m "Add Bakari's story"
    git push
    ```
  </Step>
</Steps>

## Technical Implementation

### Story Detail Page

Dynamic routing with static generation:

```astro title="src/pages/community-voices/[slug].astro" theme={null}
export async function getStaticPaths() {
  const voices = await getCollection('community-voices');
  return voices.map(voice => ({
    params: { slug: voice.id },
    props: { voice },
  }));
}

const { voice } = Astro.props;
const { Content } = await render(voice);
```

### Related Stories Logic

Shows 3 stories from same category:

```typescript title="Related Stories Algorithm" theme={null}
const allVoices = await getCollection('community-voices');
const relatedStories = allVoices
  .filter(v => v.data.category === voice.data.category && v.id !== voice.id)
  .slice(0, 3);
```

### Hero Section with Image

Conditional rendering based on image availability:

```astro title="Hero Layout" theme={null}
{voice.data.image ? (
  <div class="relative h-[70vh] max-h-[800px]">
    <img 
      src={voice.data.image} 
      alt={voice.data.title}
      class="w-full h-full object-cover animate-fade-in"
    />
    <div class="absolute inset-0 bg-black/40">
      <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent">
        <div class="absolute bottom-0 left-0 right-0 p-8 md:p-12">
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
            {voice.data.title}
          </h1>
          <p class="text-xl md:text-2xl text-white/90">
            {voice.data.excerpt}
          </p>
          <div class="text-lg text-white/80">
            By {voice.data.author}
          </div>
        </div>
      </div>
    </div>
  </div>
) : (
  <!-- Fallback gradient background if no image -->
)}
```

### SEO & Social Sharing

Comprehensive metadata for social platforms:

```typescript title="OpenGraph & Twitter Metadata" theme={null}
const seo = {
  title: `${voice.data.title} - Community Voice | Dzaleka Online Services`,
  description: voice.data.excerpt,
  type: "article",
  openGraph: {
    title: voice.data.title,
    description: voice.data.excerpt,
    type: "article",
    image: {
      url: voice.data.image || "https://services.dzaleka.com/images/placeholder-voice.jpg",
      width: 1200,
      height: 630,
      alt: voice.data.title
    },
    article: {
      publishedTime: new Date(voice.data.date).toISOString(),
      author: voice.data.author,
      tags: voice.data.tags || [],
      section: voice.data.category
    }
  },
  twitter: {
    card: "summary_large_image",
    title: voice.data.title,
    description: voice.data.excerpt,
    image: voice.data.image
  }
};
```

### Schema.org Article Markup

```json title="Structured Data" theme={null}
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Divine Irakoze on life inside Malawi's Dzaleka refugee camp...",
  "description": "I normally tell people that being a refugee is not easy...",
  "image": {
    "@type": "ImageObject",
    "url": "https://blogger.googleusercontent.com/...",
    "width": 1200,
    "height": 630,
    "creditText": "Photo by Divine Irakoze"
  },
  "datePublished": "2021-12-06T00:00:00.000Z",
  "author": {
    "@type": "Person",
    "name": "Divine Irakoze"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Dzaleka Online Services",
    "logo": {
      "@type": "ImageObject",
      "url": "https://services.dzaleka.com/images/dzaleka-digital-heritage.png"
    }
  },
  "keywords": "journey, hope, resilience",
  "articleSection": "Stories"
}
```

## Storytelling Best Practices

<CardGroup cols={2}>
  <Card title="Center the Narrator" icon="user-circle">
    Use first-person voice. Let the person tell THEIR story, not your interpretation.
  </Card>

  <Card title="Respect & Dignity" icon="shield">
    Never sensationalize suffering. Focus on resilience, agency, and humanity.
  </Card>

  <Card title="Informed Consent" icon="file-signature">
    Explain how the story will be used. Get written permission. Allow opt-out anytime.
  </Card>

  <Card title="Safety First" icon="lock">
    Don't publish details that could endanger the storyteller or their family.
  </Card>
</CardGroup>

## Ethical Guidelines

<Accordion title="Do No Harm Principle">
  Before publishing, ask:

  * Could this story put the narrator or others at risk?
  * Does it reveal sensitive personal information?
  * Could it be used against them by authorities or others?
  * Does it perpetuate stereotypes or pity narratives?

  **When in doubt, don't publish.** Safety > story.
</Accordion>

<Accordion title="Avoiding Exploitation">
  Stories are not commodities. Don't:

  * Pay people for "sad stories"
  * Pressure vulnerable people to share trauma
  * Edit stories to make them more "dramatic"
  * Use stories without compensating the storyteller (if applicable)

  **Fair practices:**

  * Offer honorarium if budget allows
  * Give storyteller co-author credit
  * Share any revenue from story republishing
</Accordion>

<Accordion title="Representation & Balance">
  Ensure diversity in voices:

  * Different countries of origin
  * Various age groups (youth, elders)
  * Gender balance
  * Range of experiences (not just trauma)
  * Success stories alongside challenges
</Accordion>

## Image Guidelines

### Photo Requirements

* **Size**: Minimum 1200x630px (recommended 1920x1080px)
* **Format**: JPG or PNG
* **Quality**: High resolution, not blurry or pixelated
* **Composition**: Subject clearly visible, good lighting
* **Consent**: Explicit permission from everyone in photo

### Where to Get Images

1. **Personal photos** from storyteller (with permission)
2. **Community photographers** (credit them!)
3. **Free stock photos** (Unsplash, Pexels) as fallback
4. **Commissioned photography** (hire local photographers)

### Placeholder Images

If no image available, system uses:

* `/images/placeholder-voice.jpg` (default)
* Category-specific placeholders (if configured)

## Content Quality Checklist

Before publishing, verify:

* [ ] Story is in first-person voice
* [ ] Title is compelling and descriptive (not clickbait)
* [ ] Excerpt captures the essence in 1-2 sentences
* [ ] Category accurately reflects content
* [ ] Tags are relevant and searchable
* [ ] Image is high-quality with proper consent
* [ ] Markdown formatting is clean (headings, paragraphs)
* [ ] No spelling or grammar errors
* [ ] Facts are accurate and verified
* [ ] Storyteller has approved final version
* [ ] No sensitive information that could cause harm

## Troubleshooting

<Accordion title="Story not displaying on website">
  Check:

  1. File is in `src/content/community-voices/` directory
  2. Filename uses lowercase and hyphens (no spaces)
  3. YAML frontmatter is valid (proper indentation, quotes)
  4. Required fields are filled: title, author, date, category, excerpt
  5. Dev server restarted: `npm run dev`
</Accordion>

<Accordion title="Image not loading">
  Images can be:

  * **Local**: `/images/stories/photo.jpg` (in `public/images/stories/`)
  * **External**: Full HTTPS URL

  Verify:

  * URL is correct and accessible
  * Image file exists at specified path
  * Image is not too large (\< 5MB recommended)
</Accordion>

<Accordion title="Related stories not showing">
  Related stories appear only if:

  * At least 1 other story exists in the same category
  * Category names match exactly (case-sensitive)
  * Other stories are not the current story (filters out self)
</Accordion>

## Future Enhancements

Planned features:

* **Audio stories**: Voice recordings for those who prefer oral storytelling
* **Video testimonials**: Short documentary-style clips
* **Translation**: Stories in multiple languages (French, Swahili, Kirundi)
* **Comments**: Allow community dialogue (moderated)
* **Search**: Full-text search across all stories
* **Collections**: Curated story series on themes
* **Author pages**: Profile pages for prolific storytellers

## Related Features

<CardGroup cols={3}>
  <Card title="Events" href="/features/events" icon="calendar">
    Share event experiences
  </Card>

  <Card title="Services" href="/features/services" icon="building">
    Organizations' impact stories
  </Card>

  <Card title="E-Learning" href="/features/e-learning" icon="book">
    Educational journey narratives
  </Card>
</CardGroup>

***

<Note>
  **Remember**: Every story is a person's lived experience. Handle with care, respect, and dignity. These are not just content - they are human beings trusting us with their truth.
</Note>