OsirionAnnouncementBar

OsirionAnnouncementBar shows a one-line announcement across the top of every page, such as a release or an event, with a close button. Closing posts a small form; an endpoint in your app remembers the choice in a cookie and redirects back, so it works under static SSR without script.

Package Osirion.Blazor.Core, namespace Osirion.Blazor.Components. Source on GitHub. Available from 4.0.

Working example

There is no live demo on this page, because closing the bar posts to an endpoint of the site that serves it and sets a real cookie there. This site shows the component itself: the announcement bar above the menu is an OsirionAnnouncementBar in the header of the page layout. Close it and it stays closed for 30 days, the default RememberDays, until the announcement gets a new Id.

Setup

Map the dismissal endpoint in Program.cs:

using Osirion.Blazor.Core.Extensions;

var app = builder.Build();

app.UseAntiforgery();
app.MapOsirionAnnouncements(); // POST /api/announcement/dismiss

The endpoint requires an antiforgery token, so app.UseAntiforgery() must run before the endpoints, as in the Blazor Web App template.

Usage

Put the bar at the top of a statically rendered layout:

@using Osirion.Blazor.Components

<OsirionAnnouncementBar Id="release-4-0">
    Osirion.Blazor 4.0 is out. <a href="/blog">Read what's new</a>
</OsirionAnnouncementBar>

With OsirionPageLayout, place it in the Header slot above your menu, so it scrolls away with the header:

<OsirionPageLayout>
    <Header>
        <OsirionAnnouncementBar Id="docs-survey" RememberDays="7" RegionLabel="Site notice">
            Tell us what is missing from the docs. <a href="/survey">Take the two-minute survey</a>
        </OsirionAnnouncementBar>
        <NavMenu />
    </Header>
    <Body>
        @Body
    </Body>
</OsirionPageLayout>

To announce something new, change Id. Visitors who closed the previous announcement then see the new one.

Parameters

Class and unmatched attributes go on the bar element.

An invalid Id throws ArgumentException, and a RememberDays outside 1 to 365 throws ArgumentOutOfRangeException, so a typo fails during development instead of writing a bad cookie name.

Behavior

• Closing without script. The close button submits a form with the ID, the lifetime and the current path. The endpoint sets the cookie osirion_announcement_{Id} and redirects back; the next render leaves the bar out.
• The cookie. HttpOnly, Secure, SameSite=Lax, path /. Browsers treat localhost as secure, so local development keeps the dismissal; another plain HTTP host drops it.
• Security. The form carries an antiforgery token. A post without a valid token or with an invalid ID gets 400, the lifetime is bounded to 365 days, and the endpoint redirects only to local paths.
• Rendering. The bar reads the cookie from the request, so it renders under static SSR and while prerendering. Without an HTTP request (an interactive render) it renders nothing rather than show a dismissed announcement again, so keep it in a statically rendered layout.
• Accessibility. The bar is a region named by RegionLabel. The close button has an accessible name from DismissText and a visible focus outline; its "x" glyph is hidden from assistive technology.
• Content. ChildContent is a normal Razor fragment and is encoded like any other Razor output.

Styling

The background is --osirion-action-primary and the text --osirion-action-primary-text, so the bar follows the theme and the CSS framework adapter. Override them on the bar to use other colors:

.osirion-announcement {
    --osirion-action-primary: #14532d;
    --osirion-action-primary-text: #ffffff;
}

Related

• OsirionCookieConsent
• OsirionPageLayout
• Forms and feedback