ContentSeriesNavigation

ContentSeriesNavigation shows where an item stands in a series ("Part 2 of 5"), lists every part and links the previous and next part. Use it on multi-part tutorials and article series. The series comes from front matter, so adding a part is a matter of writing its Markdown file.

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

This page has no live demo. The component reads the parts of a series from the content provider, and no content on this site has series front matter, so it would render nothing.

Usage

Give every part the same series name and number it with series_order:

---
title: "Deploy the blog"
series: "Build a blog with Osirion"
series_order: 3
---

Then render the component with the item being shown:

@using Osirion.Blazor.Cms.Web.Components

<ContentSeriesNavigation Item="@Item" />

With three published parts of that series, on the third part it renders like this (abridged):

<nav class="osirion-series-nav" aria-label="Build a blog with Osirion: Part 3 of 3">
  <p class="osirion-series-nav-heading">
    <span class="osirion-series-nav-position">Part 3 of 3</span>
    <span class="osirion-series-nav-name">Build a blog with Osirion</span>
  </p>
  <ol class="osirion-series-nav-parts"> ...one li per part, the current one with aria-current="page"... </ol>
  <div class="osirion-series-nav-pager">
    <a class="osirion-series-nav-previous" href="/blog/part-two" rel="prev">...</a>
  </div>
</nav>

A tutorial page that shows the position and part list at the top and only the previous and next links at the bottom, with its own wording:

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

<ContentSeriesNavigation Item="@Item" PositionFormat="Lesson {0} of {1}" />

@* the article body *@

<ContentSeriesNavigation Item="@Item"
                         ShowPartList="false"
                         PositionFormat="Lesson {0} of {1}"
                         PreviousText="Previous lesson"
                         NextText="Next lesson" />

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

Parameters

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

Behavior

• The parts are the published items in the item's locale whose series matches, ignoring case. They are ordered by series_order; parts without a number come after the numbered ones, oldest first.
• Nothing renders when the item has no series, when the series has only one published part, or when the item itself is not among the parts. The content is queried only for items with a series, and only again when the item or its series changes.
• If the content provider fails, the error is logged through ILogger and the component renders nothing, so the article still shows.
• The nav is labelled with the series name and position, for example "Build a blog with Osirion: Part 3 of 5". The current part in the list carries aria-current="page", and the previous and next links carry rel="prev" and rel="next".
• Titles and the series name are written as text, so they are HTML-encoded. The links are plain anchors, so it works under static SSR without script.
• The built-in ArticlePage renders it when its ShowSeriesNavigation is on, which is the default.

Styling

The box uses --osirion-border-color and --osirion-background-secondary; text uses --osirion-text-primary and --osirion-text-secondary.

Related

• OsirionContentNavigation, previous and next links by directory order
• Content List
• CMS navigation components