@fullstackdatasolutions/articles 1.0.0 → 1.2.0

package/package.json

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

package/src/ArticleCard.tsx

@@ -32,11 +32,11 @@ export function ArticleCard({ article, config }: ArticleCardProps) {
             {article.category}
           </span>
         </div>
-        <h3 className="text-lg font-semibold leading-none tracking-tight mb-2">
-          <Link
-            href={`/articles/${article.slug}`}
-            className="hover:text-indigo-600 transition-colors"
-          >
+        <h3
+          className="text-lg font-semibold leading-none tracking-tight mb-2"
+          style={{ fontFamily: config?.theme?.headerFontFamily }}
+        >
+          <Link href={`/articles/${article.slug}`} className="hover:text-primary transition-colors">
             {article.title}
           </Link>
         </h3>

package/src/ArticleDetailHero.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { Calendar, Clock, User } from 'lucide-react'
 import type { Article, AuthorProfile } from './articleTypes'
+import type { ArticlesConfig } from './articlesConfig'
 
 type ArticleDetailHeroProps = Readonly<{
   article: Article
@@ -10,6 +11,8 @@ type ArticleDetailHeroProps = Readonly<{
   showDate?: boolean
   showAuthor?: boolean
   authors?: AuthorProfile[]
+  /** Optional - when `config.theme.headerFontFamily` is set, applies it to the title. */
+  config?: ArticlesConfig
 }>
 
 function toSlug(cat: string): string {
@@ -19,12 +22,23 @@ 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',
   showDate = false,
   showAuthor = true,
   authors = [],
+  config,
 }: ArticleDetailHeroProps) {
   const showConfiguredAuthors = showAuthor && authors.length > 0
   const showLegacyAuthor = showAuthor && authors.length === 0 && article.author.trim().length > 0
@@ -98,7 +112,12 @@ export function ArticleDetailHero({
             )}
           </div>
         )}
-        <h1 className="text-4xl md:text-5xl font-bold mb-4">{article.title}</h1>
+        <h1
+          className="text-4xl md:text-5xl font-bold mb-4"
+          style={{ fontFamily: config?.theme?.headerFontFamily }}
+        >
+          {article.title}
+        </h1>
         <div
           style={{
             display: 'flex',
@@ -119,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/ArticlesPage.tsx

@@ -36,6 +36,7 @@ function buildThemeVars(theme?: ArticlesTheme): React.CSSProperties {
   if (!theme) return {}
   const vars: Record<string, string> = {}
   if (theme.fontFamily) vars['--articles-font-family'] = theme.fontFamily
+  if (theme.headerFontFamily) vars['--articles-header-font-family'] = theme.headerFontFamily
   if (theme.headerColor) vars['--articles-header-color'] = theme.headerColor
   if (theme.textColor) vars['--articles-text-color'] = theme.textColor
   if (theme.backgroundColor) vars['--articles-bg-color'] = theme.backgroundColor

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/RelatedArticlesSection.tsx

@@ -29,7 +29,10 @@ export function RelatedArticlesSection({
 
   return (
     <section className="mt-12 pt-8 border-t border-border" aria-label="Related articles">
-      <h2 className="text-xl font-semibold text-foreground mb-6">
+      <h2
+        className="text-xl font-semibold text-foreground mb-6"
+        style={{ fontFamily: config?.theme?.headerFontFamily }}
+      >
         {heading ?? `More in ${category}`}
       </h2>
       <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">

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()
+    })
+  })
 })

package/src/articlesConfig.ts

@@ -18,6 +18,14 @@ export type ArticlesSection =
 export interface ArticlesTheme {
   /** Font family for the articles section. Example: `"'Inter', sans-serif"` */
   fontFamily?: string
+  /**
+   * Font family for headings only (article title, card titles, section
+   * headings) - falls back to `fontFamily` when omitted. Lets a site use a
+   * distinct display face for headings (e.g. a serif) while keeping a
+   * separate body font, without hardcoding either into the package.
+   * Example: `"'Cinzel', serif"`
+   */
+  headerFontFamily?: string
   /** Color for article card titles and section headings. Example: `'#111827'` */
   headerColor?: string
   /** Color for body and excerpt text. Example: `'#6b7280'` */