@fullstackdatasolutions/articles 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fullstackdatasolutions/articles",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": false,
   "license": "MIT",
   "funding": {

package/src/ArticleDetailHero.tsx

@@ -22,6 +22,16 @@ function toSlug(cat: string): string {
     .replaceAll(/[^a-z0-9-]/g, '')
 }
 
+function resolveAvatarUrl(author: AuthorProfile, config?: ArticlesConfig): string | null {
+  if (!author.avatar) return null
+  if (author.avatar.startsWith('http://') || author.avatar.startsWith('https://')) {
+    return author.avatar
+  }
+  if (!config?.siteUrl) return null
+  const siteUrl = config.siteUrl.replace(/\/$/, '')
+  return `${siteUrl}/articles/authors/${author.slug}/${author.avatar.replace(/^\/+/, '')}`
+}
+
 export function ArticleDetailHero({
   article,
   categoryBasePath = '/articles/category',
@@ -128,25 +138,40 @@ export function ArticleDetailHero({
             <Clock className="h-4 w-4" />
             <span>{article.readTime}</span>
           </div>
-          {showConfiguredAuthors && (
-            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
-              <User className="h-4 w-4" />
-              <span>
-                By{' '}
-                {authors.map((author, index) => (
-                  <Fragment key={author.slug}>
-                    {index > 0 && ', '}
-                    <Link
-                      href={`/articles/authors/${author.slug}`}
-                      className="font-medium text-white underline-offset-4 hover:underline"
-                    >
-                      {author.name}
-                    </Link>
-                  </Fragment>
-                ))}
-              </span>
-            </div>
-          )}
+          {showConfiguredAuthors &&
+            (() => {
+              const singleAvatarUrl =
+                authors.length === 1 ? resolveAvatarUrl(authors[0], config) : null
+              return (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                  {singleAvatarUrl ? (
+                    <Image
+                      src={singleAvatarUrl}
+                      alt=""
+                      width={20}
+                      height={20}
+                      className="h-5 w-5 rounded-full object-cover"
+                    />
+                  ) : (
+                    <User className="h-4 w-4" />
+                  )}
+                  <span>
+                    By{' '}
+                    {authors.map((author, index) => (
+                      <Fragment key={author.slug}>
+                        {index > 0 && ', '}
+                        <Link
+                          href={`/articles/authors/${author.slug}`}
+                          className="font-medium text-white underline-offset-4 hover:underline"
+                        >
+                          {author.name}
+                        </Link>
+                      </Fragment>
+                    ))}
+                  </span>
+                </div>
+              )
+            })()}
           {showLegacyAuthor && (
             <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
               <User className="h-4 w-4" />

package/src/Breadcrumb.tsx

@@ -4,6 +4,8 @@ import type { BreadcrumbItem } from './articleTypes'
 type BreadcrumbProps = Readonly<{
   items: BreadcrumbItem[]
   className?: string
+  /** Max-width utility class applied to the breadcrumb list. Default: 'max-w-7xl'. */
+  containerClassName?: string
   showSchema?: boolean
   separator?: string
 }>
@@ -29,6 +31,7 @@ function getDisplayItems(items: readonly BreadcrumbItem[]): BreadcrumbItem[] {
 export function Breadcrumb({
   items,
   className = '',
+  containerClassName = 'max-w-7xl',
   showSchema = true,
   separator = '>',
 }: BreadcrumbProps) {
@@ -42,7 +45,7 @@ export function Breadcrumb({
         aria-label="Breadcrumb"
         className={`border-b border-border bg-background/80 px-4 py-3 text-sm text-muted-foreground ${className}`}
       >
-        <ol className="mx-auto flex max-w-7xl items-center gap-2 overflow-hidden">
+        <ol className={`mx-auto flex items-center gap-2 overflow-hidden ${containerClassName}`}>
           {displayItems.map((item, index) => {
             const isLast = index === displayItems.length - 1
             const key = `${item.name}-${index}`

package/src/__tests__/ArticleDetailHero.test.tsx

@@ -193,4 +193,61 @@ describe('ArticleDetailHero', () => {
       ).not.toBeInTheDocument()
     })
   })
+
+  describe('byline author avatar', () => {
+    const authorWithAvatar: AuthorProfile = { ...configuredAuthor, avatar: 'andrew-blase.webp' }
+
+    it('renders the resolved avatar image for a single configured author with an avatar and config.siteUrl', () => {
+      const { container } = render(
+        <ArticleDetailHero
+          article={baseArticle}
+          authors={[authorWithAvatar]}
+          config={{ siteUrl: 'https://example.com', siteName: 'Test Site' }}
+        />
+      )
+      const img = container.querySelector('img.rounded-full')
+      expect(img).toHaveAttribute(
+        'src',
+        'https://example.com/articles/authors/andrew-blase/andrew-blase.webp'
+      )
+    })
+
+    it('renders an already-absolute avatar URL unchanged, without needing config', () => {
+      const authorWithAbsoluteAvatar: AuthorProfile = {
+        ...configuredAuthor,
+        avatar: 'https://cdn.example.com/andrew-blase.webp',
+      }
+      const { container } = render(
+        <ArticleDetailHero article={baseArticle} authors={[authorWithAbsoluteAvatar]} />
+      )
+      const img = container.querySelector('img.rounded-full')
+      expect(img).toHaveAttribute('src', 'https://cdn.example.com/andrew-blase.webp')
+    })
+
+    it('falls back to the icon when the author has no avatar', () => {
+      const { container } = render(
+        <ArticleDetailHero article={baseArticle} authors={[configuredAuthor]} />
+      )
+      expect(container.querySelector('img.rounded-full')).not.toBeInTheDocument()
+    })
+
+    it('falls back to the icon when a relative avatar is set but config.siteUrl is missing', () => {
+      const { container } = render(
+        <ArticleDetailHero article={baseArticle} authors={[authorWithAvatar]} />
+      )
+      expect(container.querySelector('img.rounded-full')).not.toBeInTheDocument()
+    })
+
+    it('falls back to the icon when multiple authors are configured, even if one has an avatar', () => {
+      const secondAuthor: AuthorProfile = { name: 'Jamie Rivera', slug: 'jamie-rivera', bio: '' }
+      const { container } = render(
+        <ArticleDetailHero
+          article={baseArticle}
+          authors={[authorWithAvatar, secondAuthor]}
+          config={{ siteUrl: 'https://example.com', siteName: 'Test Site' }}
+        />
+      )
+      expect(container.querySelector('img.rounded-full')).not.toBeInTheDocument()
+    })
+  })
 })