Admin Logo Configuration
Comprehensive logo configuration capabilities for the admin dashboard
Admin Logo Configuration
🎨 Logo Management in Admin Dashboard
The admin dashboard now includes comprehensive logo configuration capabilities, allowing you to customize your documentation's visual identity at both global and project levels.
📋 Accessing Logo Configuration
Admin Config Editor
- Navigate to
/admin/config - Authenticate with admin credentials
- Select "Global Configuration" for site-wide logo settings
- Select any project for project-specific logo overrides
🌍 Global Logo Configuration
Available Settings
- Logo Image: Emoji or icon (e.g., 🚀, 📚, ⚡)
- Logo Text: Brand name or title
- Image Size: CSS size value (1.2em - 2.2em recommended)
- Text Size: CSS size value (0.9rem - 1.3rem recommended)
- Logo Link: Navigation destination when clicked
- Alt Text: Accessibility description
Live Preview
The admin interface includes a real-time preview showing exactly how your logo will appear in the sidebar.
🎯 Project-Specific Logo Overrides
Smart Fallback System
- Project Override: Custom logo for specific projects
- Global Fallback: Uses global configuration when project fields are empty
- Intelligent Merging: Project settings override only specified properties
Use Cases
- Multi-Brand Documentation: Different logos for different products
- Client Projects: Custom branding per client
- Department Separation: Distinct visual identity per team
🎨 Logo Configuration Examples
Global Default
{
"logo": {
"image": "🚀",
"text": "GoGrab Space Docs",
"imageSize": "1.5em",
"textSize": "1rem",
"link": "/",
"alt": "GoGrab Space Documentation"
}
}
Project Override
{
"logo": {
"image": "🎵",
"text": "GoGrab Pulse",
"imageSize": "1.8em",
"textSize": "1.1rem",
"link": "/GoGrab-Pulse",
"alt": "GoGrab Pulse Documentation"
}
}
⚙️ Configuration Management
Form Features
- Help System: Detailed tooltips and explanations
- Live Preview: Real-time visual feedback
- Validation: Ensures proper configuration format
- Auto-Save: Tracks unsaved changes
Admin Actions
- Backup Creation: Download current configuration
- Change Tracking: Visual indicators for unsaved changes
- Form Validation: Prevents invalid configurations
🎯 Best Practices
Visual Design
- Consistency: Maintain visual harmony between image and text sizes
- Accessibility: Always provide meaningful alt text
- Responsiveness: Use relative units (em, rem) for scalability
Brand Guidelines
- Recognition: Choose distinctive, memorable imagery
- Simplicity: Avoid complex or detailed images
- Context: Ensure logo fits the documentation's purpose
🔧 Technical Integration
Service Integration
The logo configuration integrates seamlessly with the existing LogoService:
- Reactive Updates: Changes reflect immediately
- Project Detection: Automatic project-specific loading
- Fallback Logic: Intelligent default handling
File Structure
docs-folders-config.json
├── globalConfig.logo (site-wide defaults)
└── folders[].config.logo (project overrides)
🚀 Advanced Features
Coming Soon
- Font Awesome Support: Icon library integration
- Image Upload: Custom image file support
- Brand Templates: Pre-designed logo combinations
- Export/Import: Logo configuration sharing
Cloud Mode Enhancement
When cloud mode is enabled, additional features will include:
- Real-time Collaboration: Multi-user logo editing
- Version History: Logo change tracking
- Asset Management: Centralized image storage
- Brand Guidelines: Automated consistency checking
💡 Tips & Tricks
Emoji Selection
- Tech Projects: 🚀 ⚡ 💻 🔧 ⚙️
- Documentation: 📚 📖 📝 📄 📋
- Creative Projects: 🎨 ✨ 🎭 🎪 🌟
- Business: 💼 📊 📈 🏢 💡
Size Guidelines
- Compact: 1.2em image, 0.9rem text
- Standard: 1.5em image, 1rem text
- Prominent: 1.8em image, 1.1rem text
- Bold: 2.2em image, 1.3rem text