refactor: multi-author support with stacked avatars and linkable names

src/lib/components/Article.svelte

@@ -2,50 +2,64 @@
     import Media from '$lib/UI/Media.svelte';
     import { formatDate } from '$lib/utils/date';
 
+    import type { AuthorInfo } from '$lib/utils/blog-authors';
+
     interface ArticleProps {
         title: string;
         cover: string;
         href: string;
         date: Date;
         timeToRead: number;
-        author: string;
-        avatar: string;
+        authors: AuthorInfo[];
+        avatars: string[];
     }
 
-    const { title, cover, href, date, timeToRead, author, avatar }: ArticleProps = $props();
+    const { title, cover, href, date, timeToRead, authors, avatars }: ArticleProps = $props();
+
+    const authorAvatarPairs = $derived(
+        avatars.map((avatar, i) => ({ avatar, author: authors[i] })).filter(({ avatar }) => avatar)
+    );
 </script>
 
 <li>
-    <a class="bg-transparent" {href}>
-        <div class="overflow-hidden rounded-lg">
-            <Media
-                src={cover}
-                class="aspect-video transition-transform duration-250 hover:scale-105"
-                alt={title}
-                autoplay
-                controls={false}
-            />
+    <a class="block overflow-hidden rounded-lg bg-transparent" {href}>
+        <Media
+            src={cover}
+            class="aspect-video transition-transform duration-250 hover:scale-105"
+            alt={title}
+            autoplay
+            controls={false}
+        />
+    </a>
+    <div class="flex flex-col gap-3 pt-6 pb-3">
+        <div class="text-caption text-secondary">
+            {formatDate(date)} - {timeToRead} min
         </div>
-        <div class="flex flex-col gap-3 pt-6 pb-3">
-            <h4 class="text-label font-aeonik-pro text-primary line-clamp-2">
+        <a {href} class="bg-transparent">
+            <h4 class="text-label font-aeonik-pro text-primary line-clamp-2 hover:underline">
                 {title}
             </h4>
-            <div class="flex w-full">
-                <div
-                    class="text-paragraph-md flex w-full flex-col items-center xl:flex-row xl:gap-2"
-                >
-                    <div class="flex items-center justify-center gap-2">
-                        <img class="size-5 rounded-full" loading="lazy" src={avatar} alt={author} />
-                        <h4 class="text-primary">{author}</h4>
-                    </div>
-                    <div class="text-secondary ml-7 flex xl:ml-0">
-                        <span>
-                            {formatDate(date)}
-                        </span>
-                        <span class="before:mx-1 xl:before:content-['-']">{timeToRead} min</span>
-                    </div>
-                </div>
+        </a>
+        <div class="text-paragraph-md flex flex-wrap items-center gap-2">
+            <div class="flex items-center">
+                {#each authorAvatarPairs as { avatar, author }, i}
+                    <img
+                        class="size-5 rounded-full ring-2 ring-[#19191c]"
+                        style="margin-inline-start: {i > 0
+                            ? '-4px'
+                            : '0'}; z-index: {authorAvatarPairs.length - i}"
+                        loading="lazy"
+                        src={avatar}
+                        alt={author?.name ?? ''}
+                    />
+                {/each}
             </div>
+            <span class="text-primary">
+                {#each authors as author, i}
+                    <a href={author.href} class="hover:underline">{author.name}</a
+                    >{#if i < authors.length - 1},{' '}{/if}
+                {/each}
+            </span>
         </div>
-    </a>
+    </div>
 </li>

src/lib/components/blog/article.svelte

@@ -1,51 +1,67 @@
 <script lang="ts">
     import Media from '$lib/UI/Media.svelte';
     import { formatDate } from '$lib/utils/date';
+    import type { AuthorInfo } from '$lib/utils/blog-authors';
 
     interface Props {
         title: string;
         cover: string;
         href: string;
         date: Date;
         timeToRead: number;
-        author: string;
-        avatar: string;
+        authors: AuthorInfo[];
+        avatars: string[];
     }
 
-    const { title, cover, href, date, timeToRead, author, avatar }: Props = $props();
+    const { title, cover, href, date, timeToRead, authors, avatars }: Props = $props();
+
+    const authorAvatarPairs = $derived(
+        avatars.map((avatar, i) => ({ avatar, author: authors[i] })).filter(({ avatar }) => avatar)
+    );
 </script>
 
-<a class="group flex w-full flex-col gap-8 bg-transparent pb-3 transition" {href}>
-    <div class="overflow-hidden rounded-lg">
+<div class="group flex w-full flex-col gap-8 pb-3 transition">
+    <a class="block overflow-hidden rounded-lg bg-transparent" {href}>
         <Media
             src={cover}
             class="aspect-video transition duration-250 ease-in-out group-hover:scale-105"
             alt={title}
         />
-    </div>
+    </a>
     <div class="flex flex-col gap-5">
-        <h4 class="text-label text-primary line-clamp-2">
-            {title}
-        </h4>
+        <div class="text-caption text-secondary">
+            {formatDate(date)} - {timeToRead} min
+        </div>
+        <a {href} class="bg-transparent">
+            <h4 class="text-label text-primary line-clamp-2 hover:underline">
+                {title}
+            </h4>
+        </a>
 
         <div class="flex items-center gap-2">
-            <img
-                class="size-6 rounded-full"
-                loading="lazy"
-                src={avatar}
-                width="24"
-                height="24"
-                alt={author}
-            />
+            <div class="flex items-center">
+                {#each authorAvatarPairs as { avatar, author }, i}
+                    <img
+                        class="size-6 rounded-full ring-2 ring-[#19191c]"
+                        style="margin-inline-start: {i > 0
+                            ? '-8px'
+                            : '0'}; z-index: {authorAvatarPairs.length - i}"
+                        loading="lazy"
+                        src={avatar}
+                        width="24"
+                        height="24"
+                        alt={author?.name ?? ''}
+                    />
+                {/each}
+            </div>
             <div class="flex items-baseline gap-3">
-                <h4 class="text-sub-body text-primary">{author}</h4>
-                <ul class="text-caption flex items-center gap-2">
-                    <li>
-                        {formatDate(date)}
-                    </li>
-                    <li>{timeToRead} min</li>
-                </ul>
+                <h4 class="text-sub-body text-primary">
+                    {#each authors as author, i}
+                        <a href={author.href} class="web-link">{author.name}</a
+                        >{#if i < authors.length - 1},{' '}{/if}
+                    {/each}
+                </h4>
             </div>
         </div>
     </div>
-</a>
+</div>

src/lib/utils/blog-authors.ts

@@ -0,0 +1,53 @@
+import type { AuthorData } from '$routes/blog/content';
+
+export interface AuthorInfo {
+    name: string;
+    href: string;
+}
+
+/**
+ * Extracts author information from a post for use in Article components
+ */
+export function getPostAuthors(
+    postAuthor: string | string[],
+    allAuthors: AuthorData[]
+): {
+    postAuthors: AuthorInfo[];
+    authorAvatars: string[];
+    primaryAuthor: AuthorData | undefined;
+} {
+    const postAuthorSlugs = Array.isArray(postAuthor) ? postAuthor : [postAuthor];
+    if (postAuthorSlugs.length === 0) {
+        return {
+            postAuthors: [],
+            authorAvatars: [],
+            primaryAuthor: undefined
+        };
+    }
+
+    const authorsBySlug = new Map<string, AuthorData>();
+    for (const author of allAuthors) {
+        authorsBySlug.set(author.slug, author);
+    }
+
+    const postAuthors: AuthorInfo[] = [];
+    const authorAvatars: string[] = [];
+    let primaryAuthor: AuthorData | undefined;
+
+    for (const slug of postAuthorSlugs) {
+        const author = authorsBySlug.get(slug);
+        if (author) {
+            postAuthors.push({ name: author.name, href: author.href });
+            authorAvatars.push(author.avatar || '');
+            if (!primaryAuthor) {
+                primaryAuthor = author;
+            }
+        }
+    }
+
+    return {
+        postAuthors,
+        authorAvatars,
+        primaryAuthor
+    };
+}

src/markdoc/layouts/Author.svelte

@@ -6,6 +6,7 @@
     import { TITLE_SUFFIX } from '$routes/titles';
     import type { PostsData, AuthorData } from '$routes/blog/content';
     import { DEFAULT_HOST } from '$lib/utils/metadata';
+    import { getPostAuthors } from '$lib/utils/blog-authors';
     import FloatingHead from '$lib/components/FloatingHead.svelte';
 
     export let name: string;
@@ -170,23 +171,25 @@
                 <div class="mt-12">
                     <ul class="web-grid-articles">
                         {#each posts.filter( (p) => (Array.isArray(p.author) ? p.author.includes(author?.slug ?? '') : p.author === author?.slug) ) as post}
-                            {@const postAuthorSlugs = Array.isArray(post.author)
-                                ? post.author
-                                : [post.author]}
-                            {@const primaryAuthor =
-                                authors.find((a) => postAuthorSlugs.includes(a.slug)) ?? author}
-                            {@const authorNames = postAuthorSlugs
-                                .map((slug) => authors.find((a) => a.slug === slug)?.name)
-                                .filter(Boolean)
-                                .join(', ')}
+                            {@const authorData = getPostAuthors(post.author, authors)}
+                            {@const primaryAuthor = authorData.primaryAuthor ?? author}
                             <Article
                                 title={post.title}
                                 href={post.href}
                                 cover={post.cover}
                                 date={post.date}
                                 timeToRead={post.timeToRead}
-                                avatar={primaryAuthor?.avatar ?? avatar}
-                                author={authorNames || primaryAuthor?.name || name}
+                                avatars={authorData.authorAvatars.length > 0
+                                    ? authorData.authorAvatars
+                                    : [primaryAuthor?.avatar ?? avatar]}
+                                authors={authorData.postAuthors.length > 0
+                                    ? authorData.postAuthors
+                                    : [
+                                          {
+                                              name: primaryAuthor?.name || name,
+                                              href: primaryAuthor?.href || ''
+                                          }
+                                      ]}
                             />
                         {/each}
                     </ul>

src/markdoc/layouts/Category.svelte

@@ -3,6 +3,7 @@
     import { Article, FooterNav, MainFooter } from '$lib/components';
     import { Main } from '$lib/layouts';
     import { DEFAULT_HOST } from '$lib/utils/metadata';
+    import { getPostAuthors } from '$lib/utils/blog-authors';
     import type { AuthorData, PostsData } from '$routes/blog/content';
     import { TITLE_SUFFIX } from '$routes/titles';
     import { getContext } from 'svelte';
@@ -58,29 +59,19 @@
                 <div class="mt-12">
                     <ul class="web-grid-articles">
                         {#each posts as post}
-                            {@const postAuthorSlugs = Array.isArray(post.author)
-                                ? post.author
-                                : [post.author]}
-                            {@const primarySlug = postAuthorSlugs[0]}
-                            {@const author =
-                                authors.find((a) => a.slug === primarySlug) ||
-                                authors.find((a) => postAuthorSlugs.includes(a.slug))}
-                            {#if author}
-                                {@const authorNames = postAuthorSlugs
-                                    .map((slug) => authors.find((a) => a.slug === slug)?.name)
-                                    .filter(Boolean)}
-                                {@const authorLabel =
-                                    authorNames.length > 1
-                                        ? `${authorNames[0]} +${authorNames.length - 1}`
-                                        : authorNames[0] || author.name}
+                            {@const { postAuthors, authorAvatars, primaryAuthor } = getPostAuthors(
+                                post.author,
+                                authors
+                            )}
+                            {#if primaryAuthor}
                                 <Article
                                     title={post.title}
                                     href={post.href}
                                     cover={post.cover}
                                     date={post.date}
                                     timeToRead={post.timeToRead}
-                                    avatar={author.avatar}
-                                    author={authorLabel}
+                                    avatars={authorAvatars}
+                                    authors={postAuthors}
                                 />
                             {/if}
                         {/each}

src/markdoc/layouts/Post.svelte

@@ -20,6 +20,7 @@
     } from '$lib/utils/metadata';
     import { isAnnouncement, parseCategories } from '$lib/utils/blog-cta';
     import { prepareBlogCtaState, type BlogCallToActionInput } from '$lib/utils/blog-mid-cta';
+    import { getPostAuthors } from '$lib/utils/blog-authors';
     import type { AuthorData, PostsData } from '$routes/blog/content';
     import { TITLE_SUFFIX } from '$routes/titles';
     import { getContext, setContext } from 'svelte';
@@ -191,29 +192,19 @@
                 <section class="mt-8">
                     <div class="grid grid-cols-1 gap-12 md:grid-cols-3">
                         {#each posts.filter((p) => p.title !== title).slice(0, 3) as post}
-                            {@const postAuthorSlugs = Array.isArray(post.author)
-                                ? post.author
-                                : [post.author]}
-                            {@const primarySlug = postAuthorSlugs[0]}
-                            {@const postAuthor =
-                                authors.find((a) => a.slug === primarySlug) ||
-                                authors.find((a) => postAuthorSlugs.includes(a.slug))}
-                            {#if postAuthor}
-                                {@const authorNames = postAuthorSlugs
-                                    .map((slug) => authors.find((a) => a.slug === slug)?.name)
-                                    .filter(Boolean)}
-                                {@const authorLabel =
-                                    authorNames.length > 1
-                                        ? `${authorNames[0]} +${authorNames.length - 1}`
-                                        : authorNames[0] || postAuthor.name}
+                            {@const { postAuthors, authorAvatars, primaryAuthor } = getPostAuthors(
+                                post.author,
+                                authors
+                            )}
+                            {#if primaryAuthor}
                                 <Article
                                     title={post.title}
                                     href={post.href}
                                     cover={post.cover}
                                     date={post.date}
                                     timeToRead={post.timeToRead}
-                                    avatar={postAuthor.avatar}
-                                    author={authorLabel}
+                                    avatars={authorAvatars}
+                                    authors={postAuthors}
                                 />
                             {/if}
                         {/each}