ContentRenderer

ContentRenderer renders the body of a content item and nothing else: no title, metadata or links. Use it when you lay out the header, sidebar and footer of an article yourself and only need the Markdown output in the middle.

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.Services
@using Osirion.Blazor.Cms.Web.Components
@inject IContentProviderManager ContentProviders

@* The item is a page of this site's own content. ContentRenderer writes only its body, so the page supplies the
   title. OmitLeadingTitle leaves out the body's own "# Title" line, which keeps this documentation page at one h1. *@
@if (item is not null)
{
    <div style="max-height: 24rem; overflow: auto; padding: 1rem; border: 1px solid var(--osirion-border-color, #d1d5db); border-radius: 0.5rem;"
         tabindex="0" role="region" aria-label="Body of the release notes page">
        <ContentRenderer Item="@item" OmitLeadingTitle="true" />
    </div>
}
else
{
    <p>The sample page was not found in the content provider.</p>
}

@code {
    private ContentItem? item;

    protected override async Task OnInitializedAsync()
    {
        var provider = ContentProviders.GetDefaultProvider();
        item = provider is null ? null : await provider.GetItemByUrlAsync("blog/osirion-blazor-v1-5-release-notes");
    }
}

The demo loads this site's own page for the 1.5 release notes and renders its body in a scrolling frame, with OmitLeadingTitle so the body's own title line is left out.

Usage

@using Osirion.Blazor.Cms.Web.Components

<ContentRenderer Item="@item" />

A custom article layout around it. The page shows the title itself, so OmitLeadingTitle leaves out the heading line the Markdown body starts with, and the page keeps a single h1:

@if (item is not null)
{
    <article class="post">
        <h1>@item.Title</h1>
        <p class="post-meta">@item.Author, @item.DateCreated.ToString("MMMM d, yyyy")</p>
        <ContentRenderer Item="@item" Class="post-body" OmitLeadingTitle />
    </article>
}

ContentRenderer does not load anything; get the item from IContentProviderManager or a page component first. ContentView leaves out the leading title itself, and so does ArticlePage while its hero or header shows the title.

Parameters

The Theme and Style rows come from the base class. ContentRenderer does not write them, or unmatched attributes, so only Class reaches the root element.

Behavior

• Rendering. The HTML is passed to OsirionHtmlRenderer with its default settings and rendered on the server under static SSR.
• Security. OsirionHtmlRenderer sanitizes the HTML with the registered IHtmlContentSanitizer before writing it, so script, event handler attributes, javascript: and data: URLs, forms, iframes and inline SVG never reach the page, whatever provider the item came from.
• Code blocks. When the HTML contains code blocks, the renderer adds Prism 1.29.0 from cdnjs (verified with Subresource Integrity) to highlight them. The code is readable without script; highlighting is an enhancement. Line numbers and the copy button are off. To change these settings, or to self-host Prism with PrismBaseUrl, use OsirionHtmlRenderer directly with HtmlContent="@item.Content".
• Live demos. The renderer's EnableDemos default is on, so a fenced demo block in the body whose text is a registered demo key renders the live demo, as on this site. See OsirionContentDemo.
• SEO. Nothing is written to the head.

Styling

The root element is a div with the class osirion-content-view (the same class as ContentView), containing osirion-content-body and the renderer's article. The body takes its line height and text color from the theme tokens --osirion-line-height-relaxed and --osirion-text-primary. The renderer links its own stylesheet, _content/Osirion.Blazor.Core/css/osirion-html-renderer.min.css, which is not scoped to a component and styles the body's headings, paragraphs, lists, blockquotes, tables, code and images; that is where the body's typography comes from. This component's own stylesheet sets only the body's line height, color and bottom margin: rules for the body's elements that it used to carry never matched, because the body's elements do not have the component's scope attribute.

Related

• CMS pages: the group overview
• ContentView: the body plus header, metadata and footer
• HTML renderer: highlighting options and Prism settings