Contributing Guide

dos/
├── src/
│   ├── components/     # Reusable UI components
│   ├── content/        # Content collections (services, events, etc.)
│   ├── layouts/        # Page layouts
│   ├── pages/          # Route pages
│   ├── styles/         # Global styles
│   └── utils/          # Utility functions
├── public/             # Static assets
├── astro.config.mjs    # Astro configuration
└── tailwind.config.cjs # Tailwind CSS configuration

// Good: Properly typed function
interface Service {
  id: string;
  name: string;
  description: string;
}

function getService(id: string): Service | null {
  // Implementation
  return null;
}

// Bad: Using 'any' type
function getService(id: any): any {
  // Avoid this
}

---
// Component logic
interface Props {
  title: string;
  description?: string;
}

const { title, description } = Astro.props;
---

<div class="card">
  <h2>{title}</h2>
  {description && <p>{description}</p>}
</div>

import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
}

export const Button: React.FC<ButtonProps> = ({ 
  label, 
  onClick, 
  variant = 'primary' 
}) => {
  return (
    <button 
      onClick={onClick}
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  );
};

<!-- Good: Organized class names -->
<div class="flex items-center justify-between p-4 bg-white rounded-lg shadow-sm">
  <h3 class="text-xl font-bold text-gray-900">Title</h3>
</div>

<!-- Good: Using custom CSS when needed -->
<div class="pattern-mudcloth opacity-[0.03]">
  <!-- Content -->
</div>

# Test development build
npm run dev

# Test production build
npm run build
npm run preview