Osirion.Blazor.Cms.Web 2.1.3

Osirion.Blazor.Cms.Web

Frontend components and web interfaces for the Osirion.Blazor CMS ecosystem, providing content display, navigation, and search capabilities.

Features

• Content Display Components: Render content items with rich formatting
• Navigation Components: Directory, category, and tag-based navigation
• Search Interface: Full-text content search with filtering
• SSR Compatible: Works with Server-Side Rendering and Static SSG
• Responsive Design: Mobile-friendly content display
• Metadata Rendering: SEO-optimized content rendering with OpenGraph support
• Content List Views: Customizable list displays for content collections
• User Interface Elements: User-friendly components for content consumption

Installation

dotnet add package Osirion.Blazor.Cms.Web

Usage

Basic Content Display

@using Osirion.Blazor.Cms.Web.Components


<ContentView Path="blog/my-post.md" />


<ContentList 
    Directory="blog" 
    SortBy="SortField.Date" 
    SortDirection="SortDirection.Descending" />


<SearchBox Placeholder="Search..." />


<DirectoryNavigation CurrentDirectory="blog" />


<CategoriesList />
<TagCloud MaxTags="20" />

Content View Customization

<ContentView 
    Path="blog/my-post.md"
    ShowTitle="true"
    ShowMetadata="true"
    ShowDate="true"
    ShowAuthor="true"
    ShowTags="true"
    ShowCategories="true"
    ShowImage="true"
    ImageClass="my-featured-image" />

Custom Content List Templates

<ContentList Directory="blog">
    <ItemTemplate>
        <div class="custom-content-card">
            <h2>@context.Title</h2>
            <p class="date">@context.Date?.ToString("MMMM d, yyyy")</p>
            <p class="author">By: @context.Author</p>
            <p class="description">@context.Description</p>
            <a href="@($"/content/{context.Path}")">Read more...</a>
        </div>
    </ItemTemplate>
</ContentList>

SEO Metadata

<SeoMetadataRenderer 
    Content="@currentContent" 
    SiteName="My Website" 
    BaseUrl="https://mysite.com" 
    DefaultImage="/images/default-social.jpg" />

Components

ContentView

The primary component for displaying a single content item.

<ContentView 
    Path="blog/my-post.md"
    ProviderId="github" 
    RenderOptions="@renderOptions" />

Parameters

ContentList

A component for displaying a list of content items.

<ContentList 
    Directory="blog" 
    SortBy="SortField.Date" 
    SortDirection="SortDirection.Descending" 
    Count="10" 
    ProviderId="github" />

Parameters

SearchBox

A component for searching content.

<SearchBox 
    Placeholder="Search..." 
    MinLength="3" 
    DebounceTime="300" 
    OnSearch="HandleSearch" />

Parameters

DirectoryNavigation

A component for navigating content directories.

<DirectoryNavigation 
    CurrentDirectory="blog" 
    ShowItemCount="true" 
    MaxDepth="2" />

Parameters

CategoriesList and TagCloud

Components for displaying content organization.

<CategoriesList 
    ShowItemCount="true" 
    ProviderId="github" />

<TagCloud 
    MaxTags="20" 
    ShowItemCount="true" 
    ProviderId="github" />

Service-Based Content Retrieval

For advanced scenarios, you can directly inject and use the content service:

@using Osirion.Blazor.Cms.Core.Providers
@using Osirion.Blazor.Cms.Core.Models
@inject IContentProvider ContentProvider

@code {
    private List<ContentItem> featuredContent = new();
    
    protected override async Task OnInitializedAsync()
    {
        var query = new ContentQuery
        {
            IsFeatured = true,
            SortBy = SortField.Date,
            SortDirection = SortDirection.Descending,
            Count = 5
        };
        
        var result = await ContentProvider.GetItemsByQueryAsync(query);
        featuredContent = result.ToList();
    }
}

License

This project is licensed under the MIT License - see the LICENSE file for details.