OsirionContentNavigation

OsirionContentNavigation renders a pair of links to the previous and next item, for example at the end of an article or a documentation page. Give it the current item and it finds the neighbours in the same directory, or pass the neighbours yourself.

Package Osirion.Blazor.Cms.Web, namespace Osirion.Blazor.Cms.Web.Components. Source on GitHub.

@using Osirion.Blazor.Cms.Domain.Entities
@using Osirion.Blazor.Cms.Domain.Enums
@using Osirion.Blazor.Cms.Domain.Repositories
@using Osirion.Blazor.Cms.Domain.Services
@using Osirion.Blazor.Cms.Web.Components
@inject IContentProviderManager Content

@* The post is picked from this site's own blog, and the component finds its neighbours in the same directory *@
@if (post is not null)
{
    <OsirionContentNavigation Item="@post"
                              Variant="ContentNavigationVariant.Card"
                              ShowDescription="true"
                              PreviousLabel="Previous post"
                              NextLabel="Next post"
                              AriaLabel="Blog posts"
                              UrlGenerator="@(item => "/" + item.Url.TrimStart('/'))" />
}

@code {
    private ContentItem? post;

    protected override async Task OnInitializedAsync()
    {
        var posts = (await Content.GetContentByQueryAsync(new ContentQuery
        {
            Locale = "en",
            Directory = "blog",
            SortBy = SortField.Order,
            SortDirection = SortDirection.Ascending
        })).Where(item => !item.Path.EndsWith("_index.md", StringComparison.OrdinalIgnoreCase)).ToList();

        // The second post has a neighbour on each side
        post = posts.Count > 2 ? posts[1] : null;
    }
}

The demo takes the second blog post of this site's own content, so it has a neighbour on each side, and shows the card layout with descriptions.

Usage

@using Osirion.Blazor.Cms.Web.Components

<OsirionContentNavigation Item="@Item" />

The built-in ArticlePage uses <OsirionContentNavigation Item="Item" ShowDescription ShowPlaceholder />. A documentation page with card links, root-relative URLs and its own labels:

@using Osirion.Blazor.Cms.Domain.Entities
@using Osirion.Blazor.Cms.Web.Components

<OsirionContentNavigation Item="@Item"
                          Variant="ContentNavigationVariant.Card"
                          ShowDescription="true"
                          PreviousLabel="Previous page"
                          NextLabel="Next page"
                          AriaLabel="Documentation pages"
                          UrlGenerator="@(item => $"/{item.Url.TrimStart('/')}")" />

@code {
    [Parameter]
    public ContentItem? Item { get; set; }
}

Parameters

ContentNavigationVariant has Default, Compact and Card. Class goes on the nav, and other attributes on the tag are added to it, Theme included. Style is accepted but not written.

Behavior

• When a neighbour is missing, the component queries the published items with the same locale whose directory has the same name as Item.Directory, sorted by the order front matter ascending. The items right before and after Item (matched by path) become the neighbours. An item without a directory is compared with all items of its locale. Give the items of a directory distinct order values so the sequence is predictable.
• Looked-up neighbours are kept inside the component, not in PreviousItem and NextItem. When Item changes the lookup runs again, and a neighbour you stop passing falls back to the lookup.
• The nav renders only when Item is set and at least one neighbour exists. With one neighbour it gets the osirion-content-navigation-single class.
• If the lookup fails, the error is logged through ILogger and only the neighbours you passed are shown.
• An item's Url is a path without a leading slash, so the default link is relative to the page's base address. Set UrlGenerator, as the example does, to make it root-relative.
• Titles and descriptions are written as text, so they are HTML-encoded. The links are plain anchors and need no script.

Styling

The links use --osirion-border-color, --osirion-background-primary, --osirion-text-primary and --osirion-action-primary, with --osirion-focus-ring-color for keyboard focus. The card variant uses --osirion-card-background, --osirion-card-border-color and --osirion-card-shadow.

Related

• ContentSeriesNavigation, previous and next links inside a series
• ContentBreadcrumbs
• CMS navigation components