Osirion.Blazor 1.4.0

Osirion.Blazor

Modern, high-performance Blazor components and utilities that work with SSR, Server, and WebAssembly hosting models.

Features

• 🚀 SSR Compatible: Works with Server-Side Rendering
• 🔒 Zero-JS Dependencies: Core functionality without JavaScript interop
• 🎯 Multi-Platform: Supports .NET 8, .NET 9, and future versions
• 📊 Analytics Integration: Microsoft Clarity, Matomo
• 🧭 Enhanced Navigation: Improved scrolling behavior with ScrollToTop
• 📝 GitHub CMS: Markdown-based content management
• 🎨 Customizable Styling: CSS variables for easy theming

Installation

dotnet add package Osirion.Blazor

Getting Started

1. Add to your _Imports.razor:

@using Osirion.Blazor.Components.Navigation
@using Osirion.Blazor.Components.Analytics
@using Osirion.Blazor.Components.Analytics.Options
@using Osirion.Blazor.Components.GitHubCms
@using Osirion.Blazor.Services.GitHub
@using Osirion.Blazor.Models.Cms

2. Configure services in Program.cs:

using Osirion.Blazor.Extensions;

// GitHub CMS
builder.Services.AddGitHubCms(options =>
{
    options.Owner = "your-github-username";
    options.Repository = "your-content-repo";
    options.ContentPath = "content";
    options.Branch = "main";
});

// Navigation (optional)
builder.Services.AddScrollToTop(options => 
{
    options.Position = ButtonPosition.BottomRight;
    options.Behavior = ScrollBehavior.Smooth;
});

// Analytics (optional)
builder.Services.AddClarityTracker(builder.Configuration);
builder.Services.AddMatomoTracker(builder.Configuration);

3. Add styles and components to your application:

<link rel="stylesheet" href="_content/Osirion.Blazor/css/osirion-cms.css" />

<EnhancedNavigationInterceptor Behavior="ScrollBehavior.Smooth" />
<ScrollToTop />


<ContentList Directory="blog" />
<CategoriesList />
<TagCloud />
<SearchBox />

Styling Components

Osirion.Blazor components use CSS variables for easy styling customization:

<link rel="stylesheet" href="_content/Osirion.Blazor/css/osirion-cms.css" />


<style>
    :root {
        --osirion-primary-color: #0077cc;
        --osirion-border-radius: 0.25rem;
        --osirion-font-size: 1.1rem;
        
        /* ScrollToTop component variables */
        --osirion-scroll-background: #0077cc;
        --osirion-scroll-color: white;
    }
</style>

Alternatively, use the OsirionStyles component:

@using Osirion.Blazor.Components.GitHubCms
<OsirionStyles CustomVariables="--osirion-primary-color: #0077cc;" />

Documentation

• Navigation Components
• Analytics Components
• GitHub CMS Components
• Styling Guide
• Quick Reference
• Migration Guide

License

MIT License - see LICENSE

Contributing

We welcome contributions! Please see our contributing guidelines for details.