# Development Wiki Template Structure

This directory contains the modular template structure for the DocuPulse Development Wiki.

## Structure

```
templates/wiki/
├── base.html              # Main wiki template with tab navigation
├── tabs/                  # Individual tab content templates
│   ├── overview.html      # System overview and features
│   ├── architecture.html  # System architecture documentation
│   ├── models.html        # Database models and schema
│   ├── authentication.html # Authentication & security features
│   ├── file_management.html # File management system
│   ├── rooms.html         # Rooms & permissions system
│   ├── conversations.html # Conversations & messaging
│   ├── notifications.html # Notifications & events
│   ├── email.html         # Email templates & SMTP
│   ├── instances.html     # Instance management
│   ├── api.html          # API & integration
│   └── deployment.html   # Deployment & DevOps
└── README.md             # This file
```

## How to Use

1. **Main Template**: `base.html` contains the overall structure, navigation tabs, and includes all tab content
2. **Tab Templates**: Each tab has its own template file in the `tabs/` directory
3. **Adding Content**: To add content to a specific tab, edit the corresponding template file
4. **Adding New Tabs**: 
   - Add the tab button to `base.html`
   - Create a new template file in `templates/wiki/tabs/`
   - Include it in the tab content section

## Benefits

- **Modularity**: Each tab is a separate file, making maintenance easier
- **Reusability**: Tab content can be reused in other contexts if needed
- **Organization**: Clear separation of concerns
- **Scalability**: Easy to add new tabs or modify existing ones
- **Collaboration**: Multiple developers can work on different tabs simultaneously

## Route Configuration

The wiki is accessed via the `/development-wiki` route in `routes/main.py`, which renders `templates/wiki/base.html`.

## Styling

All templates use the existing CSS variables and Bootstrap classes for consistent styling:
- Primary color: `var(--primary-color)`
- Secondary color: `var(--secondary-color)`
- Background colors: `var(--primary-bg-light)`, `var(--secondary-bg-light)`
- Opacity classes: `var(--primary-opacity-15)`, `var(--secondary-opacity-15)`