Training Materials

All content is managed through markdown (.md) files in the src/content/ directory. Each content type has specific frontmatter requirements.

Adding News Articles

1. Create a new file in src/content/news/
2. Add frontmatter with: title, description, date, category, featured, image, author, tags
3. Choose a category: business-spotlight, announcement, success-story, business-guide, news, or education
4. Write your content in markdown format

Adding Events

1. Create a new file in src/content/events/ or use the Event Submission Form
2. Required fields: title, description, date, location, category, organizer
3. Optional: endDate, image, registration details, panelists, contact info
4. Set status to "upcoming" or "past"

Adding Services

1. Create a new file in src/content/services/ or use the Service Registration Form
2. Required: title, description, category, location address
3. Optional: logo, contact info (email, phone, whatsapp), business hours, social media, coordinates
4. Add tags for better searchability

Adding Resources

1. Upload PDF/document to public/resources/pdf/
2. Create markdown file in src/content/resources/
3. Add: title, description, category, date, downloadUrl, fileType, fileSize
4. Optional: author, thumbnail, languages, tags

Adding Photos

1. Upload image to public/images/ or use Cloudinary
2. Create file in src/content/photos/ or use Photo Submission Form
3. Required: title, description, image URL, photographer name, date
4. Optional: photographer bio/social media, location, tags, featured flag

Adding Jobs

1. Create file in src/content/jobs/
2. Required: title, organization, location, type, category, skills, deadline, posted date, contact email
3. Choose type: full-time, part-time, contract, volunteer, or internship
4. Choose category: education, healthcare, technology, community, business, arts, services, or other

Adding Community Voices

1. Create file in src/content/community-voices/ or use Submission Form
2. Required: title, author, date, category, excerpt
3. Optional: image, featured flag, tags

Adding Talent Profiles

1. For skills exchange: Create file in src/content/profiles/
2. For artists/dancers/poets: Use respective directories in src/content/
3. Include: name, bio, profile image, contact info, skills/services offered
4. For paid services: Add rate and payment methods

Content Collections

The platform uses 13 different content collections to organize community content:

Core Collections

• src/content/news/ - News articles with categories: business-spotlight, announcement, success-story, business-guide, news, education
• src/content/events/ - Community events with registration, panelists, and calendar integration
• src/content/services/ - Organization and service directory with contact details, business hours, and location
• src/content/resources/ - Educational resources, PDFs, documents, and guides
• src/content/docs/ - Platform documentation and help guides

Community Content

• src/content/photos/ - Photo gallery with photographer credits and location data
• src/content/stories/ - Community stories and photo essays
• src/content/inspirational-stories/ - Personal success stories from community members
• src/content/community-voices/ - Community perspectives and opinions

Talent & Skills

• src/content/profiles/ - Skills exchange profiles with service offerings and payment methods
• src/content/talents/ - Showcase of community talents (artists, dancers, poets)
• src/content/jobs/ - Job opportunities with categories: education, healthcare, technology, community, business, arts

Additional Directories

• src/content/artists/ - Individual artist profiles and portfolios
• src/content/dancers/ - Dance performers and groups
• src/content/poets/ - Poets and spoken word artists
• src/content/projects/ - Community projects and initiatives
• src/content/sites/ - Site register and location information
• src/content/gallery/ - Visual content organization

Key Features

• News Publishing: Multi-category news system with business spotlights, announcements, and success stories
• Event Management: Full event lifecycle with registration, panelist management, and upcoming/past event filtering
• Service Directory: Comprehensive organization directory with 100+ services, search, filtering by category, and detailed contact information
• Job Board: Employment opportunities with categories, deadlines, and application tracking
• Photo Gallery: Professional photo archive with photographer credits, location tagging, and year-based organization
• Resource Library: 140+ educational resources, legal documents, reports, and guides with PDF downloads
• Skills Exchange: Community talent marketplace with profiles, service offerings, and payment integration
• Community Voices: Platform for community members to share perspectives and stories
• Cultural Showcase: Dedicated sections for artists, dancers, and poets
• Documentation System: Comprehensive help guides and platform documentation

Technical Features

• Search functionality across all content types
• Pagination for large content collections
• Category and tag-based filtering
• Responsive design with mobile-first approach
• SEO optimization with metadata for all pages
• Social media integration
• Contact forms with email notifications
• Event registration and tracking
• Google Maps integration for services
• Cloudinary image optimization

Core Technologies

• Astro 4.x - Static site generator with content collections
• Tailwind CSS - Utility-first CSS framework
• TypeScript - Type-safe JavaScript
• Markdown - Content authoring format

Integrations

• Cloudinary - Image hosting and optimization
• Blogger API - News publishing integration
• Google Forms - Form submissions and data collection
• Netlify - Hosting and deployment platform

Content Schema Validation

All content is validated using Zod schemas defined in src/content/config.ts. This ensures data consistency across the platform.

Content Guidelines

• Always verify information accuracy before publishing
• Use high-quality images (minimum 800x600px)
• Include proper attribution for photos and quotes
• Write descriptive titles and meta descriptions for SEO
• Add relevant tags to improve searchability
• Use inclusive and respectful language
• Proofread content before submission

Image Optimization

• Upload images to Cloudinary for automatic optimization
• Use descriptive filenames (e.g., dzaleka-art-festival-2024.jpg)
• Always include alt text for accessibility
• Prefer WebP format when possible
• Maximum file size: 2MB per image

SEO Best Practices

• Write unique meta descriptions (150-160 characters)
• Use descriptive headings (H1, H2, H3)
• Include keywords naturally in content
• Add internal links to related content
• Optimize images with descriptive alt text

Accessibility

• Use semantic HTML elements
• Ensure sufficient color contrast
• Provide alternative text for all images
• Use ARIA labels where appropriate
• Test with screen readers when possible

Automatic Deployment

The site is automatically deployed to Netlify when changes are pushed to the main branch on GitHub.

Deployment Steps

1. Make your changes locally or via GitHub
2. Test changes using npm run dev
3. Commit changes with descriptive message
4. Push to GitHub repository
5. Netlify automatically builds and deploys (5-10 minutes)
6. Check live site to verify changes

Build Commands

• npm run dev - Start local development server
• npm run build - Build for production
• npm run preview - Preview production build locally