Community Voices

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);

const allVoices = await getCollection('community-voices');
const relatedStories = allVoices
  .filter(v => v.data.category === voice.data.category && v.id !== voice.id)
  .slice(0, 3);

{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 -->
)}

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
  }
};

{
  "@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"
}