Osirion.Blazor

Osirion.Blazor is an open-source (MIT) component library for Blazor sites built from content: blogs, documentation and marketing pages. It reads Markdown with front matter from a GitHub repository or a local folder and renders it as lists and articles. Every component renders its HTML on the server, so pages work under static server-side rendering and add script only where a component needs the browser.

What it does

• Content from Markdown. Lists with paging, sorting and filters by folder, category or tag; article pages with breadcrumbs, a table of contents and tags; search, a tag cloud and a category list. Localized content lives in language folders.
• SEO. Title, description, canonical URL, Open Graph and Twitter tags and schema.org structured data for each page, and a missing article answers with HTTP 404.
• Safe output. Rendered Markdown is cleaned with an allow-list, so script and event handler attributes in content never reach the page.
• Page building blocks. A page layout with header and footer, hero and other sections, cards, carousels, a contact form and a cookie consent banner.
• Navigation. Menus up to mega menus, scroll handling for Blazor's enhanced navigation and a scroll to top button.
• Analytics. Microsoft Clarity, Matomo, Google Analytics 4 and Yandex Metrica, optionally held back until the visitor accepts analytics cookies.
• Theming. Light and dark themes with a toggle, and adapters that make the components follow your CSS framework.

Packages

The CMS packages also bring in their layers (Cms.Domain, Cms.Application, Cms.Infrastructure and Cms.Core); the GitHub and local folder content providers live in Osirion.Blazor.Cms.Infrastructure.

Quick start

Add the package to a Blazor Web App:

dotnet add package Osirion.Blazor

Register it in Program.cs:

using Osirion.Blazor.Extensions;

builder.Services.AddOsirion(builder.Configuration);
builder.Services.AddJSComponents();

Point it at a folder of Markdown files in appsettings.json:

{
  "Osirion": {
    "Cms": {
      "Web": {
        "FileSystem": {
          "BasePath": "content",
          "IsDefault": true
        }
      }
    }
  }
}

Then put <OsirionStyles /> in your layout and list the posts in content/blog on a page:

@page "/blog"
@using Osirion.Blazor.Cms.Web.Components

<ContentList Directory="blog" ShowPagination />

Getting started walks through every step, including the article page and a GitHub repository as the source.

CSS frameworks

Set Osirion:Theming:Framework to Bootstrap, FluentUI, MudBlazor or Radzen and OsirionStyles loads an adapter that maps the framework's colors onto Osirion's, so the components match the rest of the site in light and dark mode. Your app still loads the framework itself. Without a framework, the components use Osirion's own palette.

The repository has complete example sites on Bootstrap, MudBlazor and Fluent UI.

Documentation

• Getting started
• Components overview
• CMS web components
• Core components
• Theming
• Blog

New in 4.0

Callouts, tabs, accordions and FAQ, steps, pricing tables, responsive images, video embeds, an announcement bar, a reading progress bar, a sitemap with RSS and Atom feeds, and Plausible and Umami analytics. The component showcase renders the new content components with static SSR.

Source

The source code, issues and examples are on GitHub, and the packages are on NuGet.