feat(library): add multilingual author archives and linked bylines

www/src/layouts/BlogPostLayout.astro

@@ -6,10 +6,13 @@ import { getCollection, type CollectionEntry } from 'astro:content';
 import { getPublication } from '../utils/publication';
 import { blogPostingSchema, serializeJsonLd } from '../utils/structured-data';
 import site from '../data/site.json';
+import { createAuthorResolver } from '../utils/authors';
 interface Props { entry: CollectionEntry<'blog'> }
 const { entry } = Astro.props;
 const publication = await getPublication(Astro.url.pathname);
-const schema = blogPostingSchema(entry, publication, await getCollection('authors'), site.url);
+const authors = await getCollection('authors');
+const author = createAuthorResolver(authors)(entry.data.lang, entry.data.author);
+const schema = blogPostingSchema(entry, publication, authors, site.url);
 ---
 <BaseLayout title={entry.data.title} description={entry.data.description} image={entry.data.featuredImage} lang={entry.data.lang} type="article">
   {schema && <script slot="head" type="application/ld+json" is:inline set:html={serializeJsonLd(schema)} />}
@@ -17,8 +20,8 @@ const schema = blogPostingSchema(entry, publication, await getCollection('author
     <header class="article-header container">
       <h1>{entry.data.displayH1 ?? entry.data.title}</h1>
       <div class="article-byline">
-        <img src="/assets/images/rula-diab-avatar.jpg" alt="" />
-        <p><strong>Rula Diab, Clinical Director, M.Ed, BCBA, LBA</strong><br /><time datetime={entry.data.date.toISOString()}>{entry.data.date.toLocaleDateString(entry.data.lang, { day: '2-digit', month: 'long', year: 'numeric', timeZone: 'UTC' })}</time></p>
+        {author.avatar && <img src={author.avatar} alt="" />}
+        <p><strong><a class="author-byline" rel="author" href={author.archiveRoute}><bdi>{author.displayName}</bdi></a></strong><br /><time datetime={entry.data.date.toISOString()}>{entry.data.date.toLocaleDateString(entry.data.lang, { day: '2-digit', month: 'long', year: 'numeric', timeZone: 'UTC' })}</time></p>
       </div>
       {entry.data.featuredImage && <div class="article-featured"><img src={entry.data.featuredImage} alt={entry.data.alt || ''} /></div>}
     </header>
@@ -29,6 +32,9 @@ const schema = blogPostingSchema(entry, publication, await getCollection('author
 </BaseLayout>
 
 <style>
+  .author-byline { color: inherit; text-decoration: none; }
+  .author-byline:hover { text-decoration: underline; }
+  .author-byline:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
   .article-header { padding-block: 4.5rem 0; text-align: left; }
   .article-header h1 { font-size: clamp(2.3rem, 5vw, 3rem); max-width: 900px; }
   .article-byline { align-items: center; display: flex; font-size: .9rem; gap: 1rem; }