CMS Web Components
The CMS Web Components collection provides specialized Blazor components designed for web-based content management scenarios. These components integrate seamlessly with the Osirion CMS system to deliver rich content display, navigation, and management capabilities.
Overview
This module contains components specifically tailored for web applications that need sophisticated content management features. From content rendering and navigation to SEO optimization and multi-language support, these components provide everything needed to build modern, content-driven web applications.
Key Features
- Content Display: Advanced content rendering with metadata and styling
- Navigation Systems: Hierarchical navigation, breadcrumbs, and table of contents
- SEO Optimization: Comprehensive SEO metadata and structured data rendering
- Multi-Language Support: Localization and internationalization capabilities
- Content Management: Admin interfaces for content creation and editing
- Responsive Design: Mobile-first components with flexible layouts
Component Categories
Core Components
Essential content display and management components:
- ContentView - Complete content display with metadata
- ContentRenderer - Simple content rendering wrapper
- LocalizedContentView - Multi-language content display
- ContentPage - Full page content layout
- ContentList - List display for multiple content items
Navigation Components
Advanced navigation and content organization:
- TableOfContents - Hierarchical content navigation
- DirectoryNavigation - File system-style navigation
- ContentBreadcrumbs - Contextual breadcrumb navigation
- LocalizedNavigation - Multi-language navigation
- OsirionContentNavigation - Previous/next content navigation
Admin Components
Content management and administrative interfaces:
- Admin Dashboard - Central content management interface
- Content Editor - Rich text content editing
- Media Manager - File and image management
- User Management - User roles and permissions
- Settings Panel - System configuration interface
Content Management
Specialized content handling components:
- Dynamic Content Loader - Lazy loading for large content sets
- Content Search - Full-text search with filtering
- Content Categories - Taxonomy and categorization
- Content Tags - Tag-based organization
- Content Analytics - Performance and usage tracking
SEO and Metadata
Search engine optimization and structured data:
- SEOMetadataRenderer - Comprehensive SEO metadata
- Schema.org Markup - Structured data for search engines
- Open Graph Tags - Social media optimization
- Twitter Cards - Twitter-specific metadata
- Canonical URLs - URL canonicalization
Quick Start
Installation
dotnet add package Osirion.Blazor.Cms.Web
Basic Setup
// Program.cs
builder.Services.AddOsirionCmsWeb(options =>
{
options.ContentProvider = "YourContentProvider";
options.EnableSEO = true;
options.EnableLocalization = true;
});
Basic Usage
@using Osirion.Blazor.Cms.Web.Components
@* Display content with full features *@
<ContentView ContentId="@contentId"
ShowMetadata="true"
EnableSEO="true" />
@* Simple content rendering *@
<ContentRenderer Content="@content" />
@* Navigation with breadcrumbs *@
<ContentBreadcrumbs CurrentPath="@currentPath" />
Integration Patterns
CMS Integration
The components integrate with various CMS backends:
// Configure CMS provider
services.AddOsirionCms(options =>
{
options.Provider = CmsProvider.Headless;
options.ApiEndpoint = "https://api.yourcms.com";
options.ApiKey = "your-api-key";
});
Multi-Language Setup
Enable internationalization across components:
// Configure localization
services.AddOsirionLocalization(options =>
{
options.SupportedCultures = new[] { "en", "es", "fr", "de" };
options.DefaultCulture = "en";
options.FallbackCulture = "en";
});
SEO Configuration
Optimize search engine visibility:
// Configure SEO
services.AddOsirionSEO(options =>
{
options.EnableOpenGraph = true;
options.EnableTwitterCards = true;
options.EnableJsonLd = true;
options.DefaultImageUrl = "https://yoursite.com/default-image.jpg";
});
Best Practices
Performance Optimization
- Use lazy loading for large content sets
- Implement caching strategies for frequently accessed content
- Optimize images and media delivery
- Use progressive enhancement for JavaScript features
SEO Best Practices
- Implement proper heading hierarchy (H1-H6)
- Use semantic HTML markup
- Include structured data for rich snippets
- Optimize meta descriptions and titles
Accessibility Guidelines
- Ensure keyboard navigation support
- Use proper ARIA labels and roles
- Maintain sufficient color contrast
- Support screen readers with descriptive text
Security Considerations
- Sanitize user-generated content
- Implement proper authentication for admin features
- Use HTTPS for all content delivery
- Validate and escape dynamic content
Component Architecture
Design Principles
- Modularity: Each component has a single responsibility
- Composability: Components work together seamlessly
- Flexibility: Extensive customization options
- Performance: Optimized for web delivery
- Accessibility: Built-in accessibility features
Data Flow
Content Provider → CMS Service → Components → UI Rendering
State Management
Components use a combination of:
- Local component state for UI interactions
- Shared services for content data
- Event callbacks for component communication
- Dependency injection for service access
Advanced Features
Custom Content Types
Extend the system with custom content structures:
public class CustomContentType : ContentItem
{
public string CustomProperty { get; set; }
public List<CustomMetadata> CustomData { get; set; }
}
Plugin Architecture
The system supports custom plugins and extensions:
services.AddOsirionPlugin<YourCustomPlugin>(options =>
{
options.Configuration = yourPluginConfig;
});
API Integration
Connect to external APIs and services:
services.AddOsirionApiIntegration(options =>
{
options.ExternalApis.Add("analytics", "https://analytics-api.com");
options.ExternalApis.Add("search", "https://search-api.com");
});
Browser Support
- Modern Browsers: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- Mobile Browsers: iOS Safari 14+, Chrome Mobile 90+
- Legacy Support: Internet Explorer 11 (with polyfills)
Getting Help
- Documentation: Full component documentation
- Examples: Live examples and demos
- Community: GitHub Discussions
- Support: Professional support options
The CMS Web Components provide a comprehensive foundation for building sophisticated, content-driven web applications with Blazor and the Osirion CMS system.