add people
This commit is contained in:
@@ -1,14 +1,8 @@
|
||||
# Adding New People to the Team Page
|
||||
|
||||
This guide explains how to add new team members to the website. The system is designed to automatically display people based on existing component files.
|
||||
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!
|
||||
|
||||
## Current System
|
||||
|
||||
Currently, only **Adnan Fatayerji** appears on the people page because only his component exists in `src/components/people/People_Adnan.tsx`.
|
||||
|
||||
## How to Add a New Person
|
||||
|
||||
To add a new team member, follow these steps:
|
||||
## 🚀 Quick Start (Automated Workflow)
|
||||
|
||||
### 1. Create the Person's Component
|
||||
|
||||
@@ -71,73 +65,122 @@ export default function JohnDoePage() {
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Update the People Data Registry
|
||||
|
||||
Add the new person's data import to `src/lib/peopleData.ts`:
|
||||
|
||||
```typescript
|
||||
// Add import
|
||||
import { data as johnData } from '@/components/people/People_John'
|
||||
|
||||
// Add to getAllPeopleData function
|
||||
export function getAllPeopleData(): PersonData[] {
|
||||
const allPeopleData: PersonData[] = []
|
||||
|
||||
try {
|
||||
allPeopleData.push(...adnanData)
|
||||
allPeopleData.push(...johnData) // Add this line
|
||||
} catch (error) {
|
||||
console.error('Error loading people data:', error)
|
||||
}
|
||||
|
||||
return allPeopleData
|
||||
}
|
||||
```
|
||||
|
||||
### 4. Add Person's Images
|
||||
### 3. Add Person's Images
|
||||
|
||||
Add the person's images to: `public/images/people/john_doe/`
|
||||
- `john_doe.jpg` (or .png, .jpeg)
|
||||
|
||||
## Template System Benefits
|
||||
### 4. 🎉 Automatic Integration
|
||||
|
||||
The system now uses a **centralized template** (`PersonTemplate.tsx`) for all individual people pages. This means:
|
||||
**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
|
||||
|
||||
### Customizing the Template
|
||||
## 📊 Current Status
|
||||
|
||||
To change styling for all people pages (like image size), edit `src/components/PersonTemplate.tsx`:
|
||||
- ✅ **Adnan Fatayerji** - Complete (auto-discovered)
|
||||
- ✅ **Kristof De Spiegeleer** - Complete (auto-discovered)
|
||||
- ✅ **Automation System** - Active and ready for new additions
|
||||
|
||||
```typescript
|
||||
// Example: To change image aspect ratio for all people
|
||||
<img
|
||||
alt={personData.name}
|
||||
src={personData.imageUrl}
|
||||
width={1184}
|
||||
height={1376}
|
||||
className="aspect-square w-full rounded-lg object-cover shadow-lg lg:aspect-auto" // Changed from aspect-12/7 to aspect-square
|
||||
/>
|
||||
```
|
||||
## 🔮 Future Enhancements
|
||||
|
||||
## Important Notes
|
||||
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
|
||||
|
||||
- **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
|
||||
- **Naming Convention**:
|
||||
- Component files: `People_[FirstName].tsx`
|
||||
- Page directories: `[First_Last]/page.tsx`
|
||||
- Image directories: `first_last/`
|
||||
- **Automatic Display**: Once all steps are completed, the person will automatically appear on the main people page
|
||||
- **URL Structure**: Individual pages will be accessible at `/people/First_Last`
|
||||
---
|
||||
|
||||
## Current Status
|
||||
|
||||
- ✅ Adnan Fatayerji - Complete (component, page, images)
|
||||
- ❌ All other team members - Need to be added following the steps above
|
||||
|
||||
The system is designed to be scalable - each new person added will automatically appear on the team page without needing to modify the main PeopleHero component.
|
||||
**🎉 The new automated system makes adding team members faster, safer, and more maintainable than ever before!**
|
||||
|
||||
Reference in New Issue
Block a user