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.

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 Component Assembly

For the Blazor router to discover the blog components, you must add the Postnomic client assembly as an additional assembly. In your App.razor or wherever your Router is defined:

<Router AppAssembly="typeof(Program).Assembly"
        AdditionalAssemblies="new[] { typeof(Postnomic.Client.Blazor._Imports).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
    </Found>
    <NotFound>
        <PageTitle>Not Found</PageTitle>
        <p>Page not found.</p>
    </NotFound>
</Router>

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 routable components that render at the /blog path:

• Blog Index — Paginated post listing with cover images, excerpts, and metadata
• Post Detail — Full post content with author info, tags, categories, and threaded comments
• Author Profile — Author bio, social links, and their published posts

Configuration via appsettings.json

You can also bind configuration from appsettings.json:

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

builder.Services.AddPostnomicBlog(
    builder.Configuration.GetSection("PostnomicClient")
);

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()
    .AddAdditionalAssemblies(typeof(Postnomic.Client.Blazor._Imports).Assembly);

app.Run();

Next Steps

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