Blazor Integration

Overview

The Postnomic.Client.Blazor NuGet package provides Blazor components for embedding your Postnomic blog in Blazor Server, Blazor WebAssembly, or hybrid (Server + WASM) applications. It handles routing, data fetching, and rendering of blog content through reusable components.

The client packages are open source under the MIT license. You can find the source code, report issues, and contribute at github.com/threeb-it/postnomic-dotnet.

Installation

Install the package via the .NET CLI:

dotnet add package Postnomic.Client.Blazor

Configuration

Register the Postnomic blog services in your Program.cs:

builder.Services.AddPostnomicBlog(options =>
{
    options.BaseUrl = "https://api.postnomic.com";
    options.ApiKey = "pk_your_blog_key_here";
    options.BlogSlug = "my-dev-blog";
});

Adding Your Own Routable Pages

The package ships rendering components, not routable pages. None of BlogPage, PostPage, or AuthorPage carries an @page directive, so registering the services alone leaves /blog returning a 404. You choose your own routes and wrap the components in your own pages — adding the package assembly to AdditionalAssemblies does nothing, because there are no routes in it to discover.

Create three pages in your app. Components/Pages/Blog.razor:

@page "/blog"
@rendermode InteractiveServer
@using Postnomic.Client.Blazor.Components.Pages

<BlogPage />

Components/Pages/BlogPost.razor:

@page "/blog/post/{PostSlug}"
@rendermode InteractiveServer
@using Postnomic.Client.Blazor.Components.Pages

<PostPage PostSlug="@PostSlug" />

@code {
    [Parameter]
    public string PostSlug { get; set; } = "";
}

Components/Pages/BlogAuthor.razor:

@page "/blog/author/{AuthorSlug}"
@rendermode InteractiveServer
@using Postnomic.Client.Blazor.Components.Pages

<AuthorPage AuthorSlug="@AuthorSlug" />

@code {
    [Parameter]
    public string AuthorSlug { get; set; } = "";
}

Because the routes are yours, the /blog prefix above is only a convention — mount the blog wherever suits your application. (PostnomicClientOptions.BasePath does not create routes in Blazor; it only tells the components which prefix to generate links against, so keep the two in step.)

Component Parameters

SEO Tags

BlogPage, PostPage, and AuthorPage emit their canonical, hreflang, OpenGraph, Twitter Card, and JSON-LD tags through <HeadContent>. The <HeadOutlet /> already present in the standard Blazor Web App template picks them up — no extra wiring needed.

Server + WASM Hybrid Support

Postnomic's Blazor integration supports the hybrid rendering model introduced in .NET 8+. Components can render on the server for fast initial loads and switch to WebAssembly for client-side interactivity.

For hybrid apps, register the services in both the server and client projects:

Server Program.cs:

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();

builder.Services.AddPostnomicBlog(options =>
{
    options.BaseUrl = "https://api.postnomic.com";
    options.ApiKey = "pk_your_blog_key_here";
    options.BlogSlug = "my-dev-blog";
});

Client Program.cs:

builder.Services.AddPostnomicBlog(options =>
{
    options.BaseUrl = "https://api.postnomic.com";
    options.ApiKey = "pk_your_blog_key_here";
    options.BlogSlug = "my-dev-blog";
});

Available Components

The Blazor package provides three page-level components for you to host at routes of your own choosing (see above), plus the sidebar components they compose:

• BlogPage — Paginated post listing with cover images, excerpts, and metadata
• PostPage — Full post content with author info, tags, categories, and threaded comments
• AuthorPage — Author bio, social links, and their published posts

Configuration via appsettings.json

You can also bind configuration from appsettings.json:

{
  "Postnomic": {
    "BaseUrl": "https://api.postnomic.com",
    "ApiKey": "pk_your_blog_key_here",
    "BlogSlug": "my-dev-blog"
  }
}

builder.Services.AddPostnomicBlog(options =>
    builder.Configuration.GetSection("Postnomic").Bind(options));

Complete Blazor Server Example

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

builder.Services.AddPostnomicBlog(options =>
{
    options.BaseUrl = "https://api.postnomic.com";
    options.ApiKey = "pk_your_blog_key_here";
    options.BlogSlug = "my-dev-blog";
});

var app = builder.Build();

app.UseStaticFiles();
app.UseAntiforgery();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

Next Steps

• See Configuration Options for all available settings
• See Customizing Layouts to style the blog to match your application