OsirionAuthorCard

OsirionAuthorCard introduces a person: an avatar (or their initials), the name, a role, a short bio and links to their profiles. Put it under an article or at the top of an author's page. It renders without script.

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

@using Osirion.Blazor.Components
@using Osirion.Blazor.Core.Models

<OsirionAuthorCard Name="Jane Developer"
                   Role="Principal engineer"
                   Bio="Writes about server-rendered Blazor and the sites built with it."
                   ProfileUrl="/blog"
                   Links="links" />

@code {
    private static readonly IReadOnlyList<AuthorLink> links =
    [
        new("GitHub", "https://github.com/demonjic/Osirion.Blazor"),
    ];
}

Usage

<OsirionAuthorCard Name="Jane Developer" />

With every detail, and links in an AuthorLink list:

@using Osirion.Blazor.Core.Models

<OsirionAuthorCard Name="Jane Developer"
                   Role="Principal engineer"
                   Bio="Writes about Blazor and the web platform."
                   AvatarUrl="/img/authors/jane.jpg"
                   ProfileUrl="/authors/jane-developer"
                   Links="links" />

@code {
    private readonly AuthorLink[] links =
    [
        new("GitHub", "https://github.com/jane"),
        new("Email", "mailto:[email protected]")
    ];
}

An author's page

With Osirion.Blazor.Cms.Web, combine the card with ContentList, which filters by the author front matter field (the whole name, ignoring case):

@page "/authors/jane-developer"
@using Osirion.Blazor.Cms.Web.Components

<OsirionAuthorCard Name="Jane Developer" Role="Principal engineer" />
<ContentList Author="Jane Developer" Directory="blog" />

To link bylines on article pages to that page, set AuthorUrlFormatter on ContentView; the author's name then links there with rel="author".

Parameters

AuthorLink is a record in Osirion.Blazor.Core.Models: AuthorLink(string Label, string Url). Unmatched attributes go on the card's root element.

Behavior

• URLs are checked before they are written. AvatarUrl, ProfileUrl and each link's Url are rendered only when they are a path on the site (starting with a single /) or an absolute http, https or mailto URL. Other schemes such as javascript: and data:, protocol-relative URLs (//host) and relative paths without a leading / are left out, so author details taken from content cannot inject script.
• The avatar is decorative (the name is next to it): it has an empty alt, a 64 by 64 size, lazy loading and async decoding. The initials are hidden from assistive technology for the same reason.
• rel="me" lets services that verify profile links, such as Mastodon, match the author's site to the profile.
• All text is HTML-encoded.

Styling

The card uses the classes osirion-author-card, osirion-author-card-avatar, osirion-author-card-initials, osirion-author-card-body, osirion-author-card-name, osirion-author-card-role, osirion-author-card-bio and osirion-author-card-links. It reads the theme tokens --osirion-border-color, --osirion-background-primary, --osirion-text-primary, --osirion-text-secondary, and --osirion-action-primary with --osirion-action-primary-text for the initials. On viewports 30rem wide or narrower the avatar stacks above the text.

Related

• Cards overview
• Article metadata
• CMS web components