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.

Available from 4.1.

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, SameSite=Lax, path /, and Secure when the request is HTTPS, so local development over HTTP also works.
• 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
• Popups overview