- Add complete dark mode system with theme context and toggle - Implement dark mode toggle component in navigation menu - Add client-side routing with SSR-safe signal handling - Fix language selector styling for better dark mode compatibility - Add documentation system with mdBook integration - Improve navigation menu with proper external/internal link handling - Add comprehensive project documentation and configuration - Enhance theme system with localStorage persistence - Fix arena panic issues during server-side rendering - Add proper TypeScript configuration and build optimizations 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
7.2 KiB
7.2 KiB
Rustelo Components
Welcome to the Rustelo Components documentation! This section covers all the built-in components and utilities available in the Rustelo framework.
📦 Available Components
Authentication Components
- Authentication System - User authentication, JWT tokens, and session management
- Login/Register forms
- Password reset functionality
- User profile management
- Role-based access control
Content Management
- Content System - Content creation, editing, and management
- Markdown rendering
- File uploads and media management
- Content versioning
- Search functionality
Email System
- Email Components - Email sending and template management
- SMTP configuration
- Email templates
- Queue management
- Notification system
Configuration
- Configuration System - Application configuration management
- Environment-based configs
- Feature toggles
- Runtime configuration
- Validation and schema
Templates & UI
- Template System - UI templates and components
- Responsive layouts
- Theme system
- Component library
- Style utilities
🎯 Component Architecture
Rustelo follows a modular component architecture where each component is:
- Self-contained - Each component manages its own state and dependencies
- Configurable - Components can be enabled/disabled via features
- Extensible - Easy to customize and extend for your needs
- Well-documented - Complete API documentation and examples
🚀 Getting Started
Enable Components
Components are enabled through Cargo features:
[dependencies]
server = { path = "../server", features = ["auth", "content-db", "email"] }
Basic Usage
use rustelo::components::{Auth, Content, Email};
// Initialize components
let auth = Auth::new(config.auth)?;
let content = Content::new(config.content)?;
let email = Email::new(config.email)?;
📋 Component Status
| Component | Status | Features | Documentation |
|---|---|---|---|
| Authentication | ✅ Complete | auth |
View |
| Content Management | ✅ Complete | content-db |
View |
| Email System | ✅ Complete | email |
View |
| Configuration | ✅ Complete | Always enabled | View |
| Templates | ✅ Complete | Always enabled | View |
🔧 Component Development
Creating Custom Components
use rustelo::Component;
pub struct MyComponent {
config: MyConfig,
}
impl Component for MyComponent {
type Config = MyConfig;
fn new(config: Self::Config) -> Result<Self, Error> {
Ok(Self { config })
}
fn initialize(&mut self) -> Result<(), Error> {
// Initialize component
Ok(())
}
}
Component Lifecycle
- Configuration - Load component configuration
- Initialization - Set up component state
- Registration - Register routes and handlers
- Runtime - Handle requests and events
- Cleanup - Graceful shutdown
🎨 Frontend Components
Leptos Components
use leptos::*;
use rustelo::components::*;
#[component]
pub fn App() -> impl IntoView {
view! {
<AuthProvider>
<ContentProvider>
<Router>
<Routes>
<Route path="/" view=HomePage/>
<Route path="/login" view=LoginPage/>
<Route path="/dashboard" view=DashboardPage/>
</Routes>
</Router>
</ContentProvider>
</AuthProvider>
}
}
Styling Components
use rustelo::ui::*;
#[component]
pub fn MyPage() -> impl IntoView {
view! {
<Page title="My Page">
<Card>
<CardHeader>
<h2>"Welcome"</h2>
</CardHeader>
<CardBody>
<p>"Content goes here"</p>
</CardBody>
</Card>
</Page>
}
}
🔍 Component APIs
Authentication API
// Check if user is authenticated
let is_authenticated = auth.is_authenticated(&request)?;
// Get current user
let user = auth.get_current_user(&request)?;
// Login user
let token = auth.login(&credentials)?;
Content API
// Create content
let content = content_manager.create(CreateContentRequest {
title: "My Article".to_string(),
body: "Article content...".to_string(),
content_type: ContentType::Article,
})?;
// Get content
let content = content_manager.get_by_id(content_id)?;
Email API
// Send email
email_service.send(SendEmailRequest {
to: "user@example.com".to_string(),
subject: "Welcome!".to_string(),
template: "welcome".to_string(),
data: serde_json::json!({
"name": "John Doe"
}),
})?;
📊 Performance Considerations
Component Optimization
- Lazy Loading - Components are initialized only when needed
- Caching - Built-in caching for frequently accessed data
- Connection Pooling - Efficient database and external service connections
- Async Operations - Non-blocking I/O operations
Resource Management
// Components automatically manage resources
impl Drop for MyComponent {
fn drop(&mut self) {
// Cleanup resources
self.cleanup();
}
}
🧪 Testing Components
Unit Tests
#[cfg(test)]
mod tests {
use super::*;
use rustelo::testing::*;
#[tokio::test]
async fn test_auth_component() {
let config = test_config();
let auth = Auth::new(config.auth).unwrap();
// Test authentication
assert!(auth.is_authenticated(&test_request()).is_ok());
}
}
Integration Tests
#[tokio::test]
async fn test_component_integration() {
let app = test_app().await;
// Test component interactions
let response = app.post("/api/auth/login")
.json(&login_request())
.send()
.await?;
assert_eq!(response.status(), 200);
}
🔐 Security
Security Best Practices
- Input Validation - All inputs are validated and sanitized
- Authentication - Secure token-based authentication
- Authorization - Role-based access control
- CSRF Protection - Built-in CSRF token validation
- Rate Limiting - Configurable rate limiting
Security Configuration
[security]
csrf_protection = true
rate_limiting = true
secure_cookies = true
https_only = true
📚 Next Steps
- Authentication Guide - Set up user authentication
- Content Management - Manage application content
- Email System - Configure email functionality
- Configuration - Understand configuration options
- Templates - Customize UI templates
🆘 Getting Help
- Common Issues - Solutions to common problems
- API Reference - Complete API documentation
- Examples - Real-world examples
- Community Support - Discord, GitHub Issues, Stack Overflow
Happy building with Rustelo components! 🦀✨