www_ourworld_new/docs/adding-people.md

# Adding New People to the Team Page

This guide explains how to add new team members to the website. The system now features **automated discovery** of people components, so you no longer need to manually update imports!

## 🚀 Quick Start (Automated Workflow)

### 1. Create the Person's Component

Create a new file: `src/components/people/People_[Name].tsx`

Example for John Doe:
```typescript
import { PersonTemplate } from '@/components/PersonTemplate'

export const data = [
  {
    name: 'John Doe',
    role: 'Software Engineer',
    imageUrl: '/images/people/john_doe/john_doe.jpg',
    xUrl: '#',
    linkedinUrl: 'https://www.linkedin.com/in/johndoe/',
  },
]

const biography = `
  <p class="text-lg/7">
    John is a passionate software engineer with expertise in modern web technologies. 
    He specializes in building scalable applications and has a keen interest in user experience design.
  </p>
  <p class="mt-5 text-lg/7">
    With over 5 years of experience in the tech industry, John has worked on various projects 
    ranging from startups to enterprise applications. He believes in writing clean, maintainable code 
    and is always eager to learn new technologies.
  </p>
`

export function People_John() {
  return <PersonTemplate personData={data[0]} biography={biography} />
}
```

### 2. Create the Person's Page Route

Create a directory and page: `src/app/people/John_Doe/page.tsx`

```typescript
import { CallToAction } from '@/components/CallToAction'
import { Faqs } from '@/components/Faqs'
import { Footer } from '@/components/Footer'
import { Header_darkbg } from '@/components/Header_darkbg'
import { People_John } from '@/components/people/People_John'

export default function JohnDoePage() {
  return (
    <>
      <Header_darkbg />
      <main>
        <People_John />
        <CallToAction />
        <Faqs />
      </main>
      <Footer />
    </>
  )
}
```

### 3. Add Person's Images

Add the person's images to: `public/images/people/john_doe/`
- `john_doe.jpg` (or .png, .jpeg)

### 4. 🎉 Automatic Integration

**That's it!** The person will automatically appear on the people page when you build the project. The people data registry is automatically updated during the build process.

If you want to test locally during development, you can manually run:
```bash
npm run generate-people-data
```

## 🔧 How the Automation Works

The system now includes a Node.js script (`scripts/generate-people-data.js`) that:

1. **Scans** the `src/components/people/` directory for all `People_*.tsx` files
2. **Generates** the necessary imports and exports in `src/lib/peopleData.ts`
3. **Creates** both synchronous and asynchronous data loading functions
4. **Eliminates** the need for manual import management

### Available Commands

- `npm run generate-people-data` - Manually regenerate the people data registry (for development testing)
- `npm run dev` - Start the development server
- `npm run build` - Build for production (automatically runs people data generation first)

## 📁 File Structure

```
src/
├── components/people/
│   ├── People_Adnan.tsx      ✅ Auto-discovered
│   ├── People_Kristof.tsx    ✅ Auto-discovered
│   └── People_John.tsx       ✅ Auto-discovered (after running script)
├── app/people/
│   ├── Adnan_Fatayerji/page.tsx
│   ├── kristof_de_spiegeleer/page.tsx
│   └── John_Doe/page.tsx
├── lib/
│   └── peopleData.ts         🤖 Auto-generated
└── ...
```

## 🎯 Benefits of the New System

### ✅ **No Manual Imports**
- Add a new `People_*.tsx` file
- Run `npm run generate-people-data`
- Done! No need to edit `peopleData.ts` manually

### ✅ **Error Prevention**
- No more forgotten imports
- No more typos in import statements
- Automatic error handling for each component

### ✅ **Scalable**
- Add as many people as needed
- System automatically discovers all components
- Consistent naming convention enforced

### ✅ **Developer Friendly**
- Clear feedback when running the script
- Lists all discovered components
- Easy to debug and maintain

## 🔄 Migration from Manual System

If you have existing people components that were manually imported:

1. Ensure all components follow the `People_*.tsx` naming convention
2. Run `npm run generate-people-data`
3. The script will automatically discover and include all existing components

## 📋 Naming Conventions

- **Component files**: `People_[FirstName].tsx` (e.g., `People_John.tsx`)
- **Page directories**: `[First_Last]/page.tsx` (e.g., `John_Doe/page.tsx`)
- **Image directories**: `first_last/` (e.g., `john_doe/`)
- **Export function**: `People_[FirstName]` (e.g., `People_John`)

## 🚨 Important Notes

- **Data Structure**: Each person component must export a `data` array with the exact structure shown above
- **Biography Format**: Use HTML string for rich text formatting in the biography
- **Template Usage**: All person components should use `PersonTemplate` for consistency
- **Automatic Discovery**: Components are discovered by filename pattern `People_*.tsx`
- **Script Execution**: Always run `npm run generate-people-data` after adding new people
- **URL Structure**: Individual pages will be accessible at `/people/First_Last`

## 🎨 Template System Benefits

The system uses a **centralized template** (`PersonTemplate.tsx`) for all individual people pages:

- **Global Styling**: Change image size, layout, or styling in `PersonTemplate.tsx` and it applies to ALL people's profiles
- **Consistency**: All people pages have the same structure and design
- **Easy Maintenance**: Update the template once instead of editing each person's component individually
- **Responsive Design**: Template handles all responsive breakpoints uniformly

## 📊 Current Status

- ✅ **Adnan Fatayerji** - Complete (auto-discovered)
- ✅ **Kristof De Spiegeleer** - Complete (auto-discovered)
- ✅ **Automation System** - Active and ready for new additions

## 🔮 Future Enhancements

The automation system can be extended to:
- Auto-generate page routes
- Validate image file existence
- Check for required data fields
- Generate TypeScript types from component data
- Create development-time file watchers for instant updates

---

**🎉 The new automated system makes adding team members faster, safer, and more maintainable than ever before!**