@fullstackdatasolutions/articles 0.9.0 → 0.11.0

package/src/AuthorArticlesPage.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import Link from 'next/link'
+import { LatestArticles } from './LatestArticles'
+import { getAuthorAvatar, getAuthorSameAs, getAuthorUrl } from './authorUtils'
+import { DEFAULT_PAGE_SIZE } from './articlesConfig'
+import type { ArticlesConfig } from './articlesConfig'
+import type { Article, AuthorProfile } from './articleTypes'
+
+type AuthorArticlesPageProps = Readonly<{
+  author: AuthorProfile
+  articles: Article[]
+  config: ArticlesConfig
+}>
+
+function getPersonSchema(author: AuthorProfile, config: ArticlesConfig, articleCount: number) {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Person',
+    name: author.name,
+    description: author.bio,
+    url: author.url ?? getAuthorUrl(author),
+    ...(getAuthorAvatar(author, config) && { image: getAuthorAvatar(author, config) }),
+    ...(getAuthorSameAs(author).length > 0 && { sameAs: getAuthorSameAs(author) }),
+    knowsAbout: config.siteName,
+    mainEntityOfPage:
+      author.url ?? `${config.siteUrl.replace(/\/$/, '')}/articles/authors/${author.slug}`,
+    interactionStatistic: {
+      '@type': 'InteractionCounter',
+      interactionType: 'https://schema.org/WriteAction',
+      userInteractionCount: articleCount,
+    },
+  }
+}
+
+export function AuthorArticlesPage({ author, articles, config }: AuthorArticlesPageProps) {
+  const pageSize = config.pageSize ?? DEFAULT_PAGE_SIZE
+
+  return (
+    <div>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(getPersonSchema(author, config, articles.length)),
+        }}
+      />
+      <section className="bg-background py-16">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mb-8 flex items-center justify-between gap-4">
+            <Link href="/articles" className="text-sm text-primary hover:underline">
+              All Articles
+            </Link>
+            <p className="text-sm text-muted-foreground">Articles by {author.name}</p>
+          </div>
+          <LatestArticles articles={articles} pageSize={pageSize} />
+        </div>
+      </section>
+    </div>
+  )
+}

package/src/AuthorCard.tsx

@@ -0,0 +1,112 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import {
+  Facebook,
+  Github,
+  Globe,
+  Instagram,
+  Linkedin,
+  Mail,
+  MessageCircle,
+  Twitter,
+  Youtube,
+  type LucideIcon,
+} from 'lucide-react'
+import type { AuthorProfile } from './articleTypes'
+import { getAuthorAvatar, getAuthorSocialLinks, getAuthorUrl } from './authorUtils'
+
+type AuthorCardProps = Readonly<{
+  author: AuthorProfile
+  linkToPage?: boolean
+  showBio?: boolean
+  showSocial?: boolean
+}>
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part.charAt(0).toUpperCase())
+    .join('')
+}
+
+export function AuthorCard({
+  author,
+  linkToPage = true,
+  showBio = false,
+  showSocial = false,
+}: AuthorCardProps) {
+  const avatar = getAuthorAvatar(author)
+  const name = linkToPage ? (
+    <Link href={getAuthorUrl(author)} className="font-medium text-foreground hover:text-primary">
+      {author.name}
+    </Link>
+  ) : (
+    <span className="font-medium text-foreground">{author.name}</span>
+  )
+
+  return (
+    <div className="flex items-start gap-3 rounded-lg border border-border bg-card p-4 text-card-foreground">
+      {avatar ? (
+        <Image
+          src={avatar}
+          alt={author.name}
+          width={48}
+          height={48}
+          className="h-12 w-12 rounded-full object-cover"
+        />
+      ) : (
+        <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-muted text-sm font-semibold text-muted-foreground">
+          {getInitials(author.name)}
+        </div>
+      )}
+      <div className="min-w-0 flex-1">
+        {name}
+        {showBio && author.bio && (
+          <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">{author.bio}</p>
+        )}
+        {showSocial && <AuthorSocialLinks author={author} />}
+      </div>
+    </div>
+  )
+}
+
+const SOCIAL_ICONS: Record<string, LucideIcon> = {
+  Website: Globe,
+  Facebook: Facebook,
+  Twitter: Twitter,
+  X: Twitter,
+  LinkedIn: Linkedin,
+  Instagram: Instagram,
+  YouTube: Youtube,
+  GitHub: Github,
+  Newsletter: Mail,
+}
+
+function getSocialIcon(label: string): LucideIcon {
+  return SOCIAL_ICONS[label] ?? MessageCircle
+}
+
+export function AuthorSocialLinks({ author }: Readonly<{ author: AuthorProfile }>) {
+  const links = getAuthorSocialLinks(author)
+  if (links.length === 0) return null
+
+  return (
+    <div className="mt-3 flex items-center gap-2">
+      {links.map(({ href, label }) => {
+        const Icon = getSocialIcon(label)
+        return (
+          <Link
+            key={`${label}-${href}`}
+            href={href}
+            className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+            aria-label={`${author.name} on ${label}`}
+          >
+            <Icon className="h-4 w-4" />
+          </Link>
+        )
+      })}
+    </div>
+  )
+}

package/src/AuthorDetailHero.tsx

@@ -0,0 +1,56 @@
+import Image from 'next/image'
+import type { AuthorProfile } from './articleTypes'
+import { AuthorSocialLinks } from './AuthorCard'
+import { getAuthorAvatar } from './authorUtils'
+
+type AuthorDetailHeroProps = Readonly<{
+  author: AuthorProfile
+  articleCount?: number
+}>
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part.charAt(0).toUpperCase())
+    .join('')
+}
+
+export function AuthorDetailHero({ author, articleCount }: AuthorDetailHeroProps) {
+  const avatar = getAuthorAvatar(author)
+
+  return (
+    <section className="bg-muted/40 py-16">
+      <div className="mx-auto flex max-w-4xl flex-col items-center gap-6 px-4 text-center sm:px-6 lg:px-8">
+        {avatar ? (
+          <Image
+            src={avatar}
+            alt={author.name}
+            width={120}
+            height={120}
+            className="h-28 w-28 rounded-full object-cover"
+            priority
+          />
+        ) : (
+          <div className="flex h-28 w-28 items-center justify-center rounded-full bg-card text-3xl font-semibold text-muted-foreground shadow-sm">
+            {getInitials(author.name)}
+          </div>
+        )}
+        <div>
+          <p className="mb-3 text-sm font-semibold uppercase tracking-widest text-muted-foreground">
+            Author
+          </p>
+          <h1 className="text-4xl font-bold text-foreground md:text-5xl">{author.name}</h1>
+          <p className="mx-auto mt-4 max-w-2xl text-lg text-muted-foreground">{author.bio}</p>
+          {typeof articleCount === 'number' && (
+            <p className="mt-3 text-sm text-muted-foreground">
+              {articleCount} article{articleCount === 1 ? '' : 's'}
+            </p>
+          )}
+        </div>
+        <AuthorSocialLinks author={author} />
+      </div>
+    </section>
+  )
+}

package/src/Breadcrumb.tsx

@@ -0,0 +1,78 @@
+import Link from 'next/link'
+import type { BreadcrumbItem } from './articleTypes'
+
+type BreadcrumbProps = Readonly<{
+  items: BreadcrumbItem[]
+  className?: string
+  showSchema?: boolean
+  separator?: string
+}>
+
+function buildBreadcrumbSchema(items: readonly BreadcrumbItem[]) {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: items.map((item, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      name: item.name,
+      ...(item.url && { item: item.url }),
+    })),
+  }
+}
+
+function getDisplayItems(items: readonly BreadcrumbItem[]): BreadcrumbItem[] {
+  if (items.length <= 4) return [...items]
+  return [items[0], { name: '...' }, ...items.slice(-2)]
+}
+
+export function Breadcrumb({
+  items,
+  className = '',
+  showSchema = true,
+  separator = '>',
+}: BreadcrumbProps) {
+  if (items.length === 0) return null
+
+  const displayItems = getDisplayItems(items)
+
+  return (
+    <>
+      <nav
+        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">
+          {displayItems.map((item, index) => {
+            const isLast = index === displayItems.length - 1
+            const key = `${item.name}-${index}`
+            return (
+              <li key={key} className="flex min-w-0 items-center gap-2">
+                {index > 0 && <span aria-hidden="true">{separator}</span>}
+                {item.url && !isLast ? (
+                  <Link href={item.url} className="truncate hover:text-foreground">
+                    {item.name}
+                  </Link>
+                ) : (
+                  <span className="truncate" aria-current={isLast ? 'page' : undefined}>
+                    {item.name}
+                  </span>
+                )}
+              </li>
+            )
+          })}
+        </ol>
+      </nav>
+      {showSchema && (
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(buildBreadcrumbSchema(items)) }}
+        />
+      )}
+    </>
+  )
+}
+
+export function BreadcrumbSchema({ items }: Readonly<{ items: BreadcrumbItem[] }>) {
+  return <Breadcrumb items={items} showSchema className="sr-only" />
+}

package/src/CategoryArticlesPage.tsx

@@ -2,10 +2,17 @@
 
 import Image from 'next/image'
 import Link from 'next/link'
-import { BreadcrumbSchema } from './ArticleSchemas'
+import { Breadcrumb } from './Breadcrumb'
 import { LatestArticles } from './LatestArticles'
-import { ArticlesConfig, DEFAULT_PAGE_SIZE } from './articlesConfig'
-import type { Article } from './articleTypes'
+import {
+  breadcrumbsAreEnabled,
+  getBreadcrumbsConfig,
+  ArticlesConfig,
+  DEFAULT_PAGE_SIZE,
+  type CategoryBreadcrumbEntry,
+  type CustomBreadcrumbItem,
+} from './articlesConfig'
+import type { Article, BreadcrumbItem } from './articleTypes'
 
 function getCategoryDescription(
   config: ArticlesConfig,
@@ -24,6 +31,49 @@ type CategoryArticlesPageProps = Readonly<{
   config: ArticlesConfig
 }>
 
+function buildCategoryBreadcrumbItems(
+  config: ArticlesConfig,
+  categoryName: string
+): BreadcrumbItem[] {
+  const siteUrl = config.siteUrl.replace(/\/$/, '')
+  const breadcrumbConfig = getBreadcrumbsConfig(config)
+  const trail = breadcrumbConfig.category ?? ['home', 'articles', 'category']
+  return trail.flatMap((entry): BreadcrumbItem[] =>
+    buildCategoryBreadcrumbEntry(entry, {
+      categoryName,
+      siteUrl,
+      labels: breadcrumbConfig.labels ?? {},
+    })
+  )
+}
+
+function isCustomBreadcrumbItem(entry: unknown): entry is CustomBreadcrumbItem {
+  return typeof entry === 'object' && entry !== null && 'name' in entry && 'url' in entry
+}
+
+function resolveCustomBreadcrumbItem(item: CustomBreadcrumbItem, siteUrl: string): BreadcrumbItem {
+  if (item.url.startsWith('/')) return { name: item.name, url: `${siteUrl}${item.url}` }
+  return { name: item.name, url: item.url }
+}
+
+function buildCategoryBreadcrumbEntry(
+  entry: CategoryBreadcrumbEntry,
+  context: Readonly<{
+    categoryName: string
+    siteUrl: string
+    labels: NonNullable<ReturnType<typeof getBreadcrumbsConfig>['labels']>
+  }>
+): BreadcrumbItem[] {
+  if (isCustomBreadcrumbItem(entry)) {
+    return [resolveCustomBreadcrumbItem(entry, context.siteUrl)]
+  }
+  if (entry === 'home') return [{ name: context.labels.home ?? 'Home', url: context.siteUrl }]
+  if (entry === 'articles') {
+    return [{ name: context.labels.articles ?? 'Articles', url: `${context.siteUrl}/articles` }]
+  }
+  return [{ name: context.categoryName }]
+}
+
 export function CategoryArticlesPage({ category, articles, config }: CategoryArticlesPageProps) {
   if (articles.length === 0) return null
 
@@ -31,17 +81,18 @@ export function CategoryArticlesPage({ category, articles, config }: CategoryArt
   const heroImage = articles[0].featuredImage
   const description = getCategoryDescription(config, category, categoryName)
   const pageSize = config.pageSize ?? DEFAULT_PAGE_SIZE
-  const siteUrl = config.siteUrl.replace(/\/$/, '')
+  const breadcrumbConfig = getBreadcrumbsConfig(config)
+  const breadcrumbItems = buildCategoryBreadcrumbItems(config, categoryName)
 
   return (
     <div>
-      <BreadcrumbSchema
-        items={[
-          { name: 'Home', url: siteUrl },
-          { name: 'Articles', url: `${siteUrl}/articles` },
-          { name: categoryName, url: `${siteUrl}/articles/category/${category}` },
-        ]}
-      />
+      {breadcrumbsAreEnabled(config) && (
+        <Breadcrumb
+          items={breadcrumbItems}
+          separator={breadcrumbConfig.separator}
+          showSchema={breadcrumbConfig.showSchema !== false}
+        />
+      )}
       {/* Hero */}
       <section
         style={{

package/src/__tests__/ArticleDetailHero.test.tsx

@@ -3,7 +3,7 @@
  */
 import React from 'react'
 import { render, screen } from '@testing-library/react'
-import type { Article } from '../articleTypes'
+import type { Article, AuthorProfile } from '../articleTypes'
 import { ArticleDetailHero } from '../ArticleDetailHero'
 
 jest.mock('next/link', () => ({
@@ -39,6 +39,12 @@ const articleWith3Categories: Article = {
   categories: ['Politics', 'Elections', 'Voting'],
 }
 
+const configuredAuthor: AuthorProfile = {
+  name: 'Andrew Blase',
+  slug: 'andrew-blase',
+  bio: 'Author bio',
+}
+
 describe('ArticleDetailHero', () => {
   describe('category cap at 4', () => {
     it('renders at most 4 category tags when the article has more than 4 categories', () => {
@@ -138,6 +144,20 @@ describe('ArticleDetailHero', () => {
       expect(screen.getByText('By Jane Doe')).toBeInTheDocument()
     })
 
+    it('renders configured authors in the byline', () => {
+      render(<ArticleDetailHero article={baseArticle} authors={[configuredAuthor]} />)
+      expect(screen.getByText(/^By$/)).toBeInTheDocument()
+      expect(screen.getByRole('link', { name: 'Andrew Blase' })).toHaveAttribute(
+        'href',
+        '/articles/authors/andrew-blase'
+      )
+    })
+
+    it('does not render an empty legacy author byline', () => {
+      render(<ArticleDetailHero article={{ ...baseArticle, author: '' }} />)
+      expect(screen.queryByText('By')).not.toBeInTheDocument()
+    })
+
     it('hides the author when showAuthor is false', () => {
       render(<ArticleDetailHero article={baseArticle} showAuthor={false} />)
       expect(screen.queryByText('By Jane Doe')).not.toBeInTheDocument()

package/src/__tests__/ArticleSchemas.test.tsx

@@ -7,6 +7,7 @@ import {
   CollectionPageSchema,
   FAQPageSchema,
 } from '../ArticleSchemas'
+import { Breadcrumb } from '../Breadcrumb'
 
 const mockArticle: Article = {
   slug: 'test-article',
@@ -56,7 +57,7 @@ describe('ArticleSchema', () => {
     expect(schema['@type']).toBe('Article')
     expect(schema.headline).toBe('Test Article')
     expect(schema.description).toBe('A test excerpt.')
-    expect(schema.author.name).toBe('Jane Doe')
+    expect(schema.author[0].name).toBe('Jane Doe')
     expect(schema.publisher.name).toBe('Example Site')
     expect(schema.mainEntityOfPage['@id']).toBe('https://example.com/articles/test-article')
   })
@@ -123,6 +124,23 @@ describe('BreadcrumbSchema', () => {
   })
 })
 
+describe('Breadcrumb', () => {
+  const items = [
+    { name: 'Home', url: 'https://example.com' },
+    { name: 'Articles', url: 'https://example.com/articles' },
+    { name: 'Test Article' },
+  ]
+
+  it('renders visible breadcrumb navigation and marks the current page', () => {
+    const { container, getByRole, getByText } = render(<Breadcrumb items={items} />)
+
+    expect(getByRole('navigation', { name: 'Breadcrumb' })).toBeInTheDocument()
+    expect(getByRole('link', { name: 'Home' })).toHaveAttribute('href', 'https://example.com')
+    expect(getByText('Test Article')).toHaveAttribute('aria-current', 'page')
+    expect(container.querySelector('script[type="application/ld+json"]')).not.toBeNull()
+  })
+})
+
 describe('CollectionPageSchema', () => {
   it('renders a ld+json script tag', () => {
     const { container } = render(
@@ -203,7 +221,7 @@ describe('ArticleSEO', () => {
     expect(article).toBeDefined()
     expect(article.headline).toBe('Test Article')
     expect(article.description).toBe('A test excerpt.')
-    expect(article.author.name).toBe('Jane Doe')
+    expect(article.author[0].name).toBe('Jane Doe')
     expect(article.publisher.name).toBe('Example Site')
     expect(article.mainEntityOfPage['@id']).toBe('https://example.com/articles/test-article')
     expect(article.datePublished).toBe(new Date('2025-03-01').toISOString())
@@ -224,6 +242,33 @@ describe('ArticleSEO', () => {
     expect(article.author).toBeUndefined()
   })
 
+  it('renders configured author Person schema fields', () => {
+    const { container } = render(
+      <ArticleSEO
+        article={{ ...baseArticle, author: 'andrew-blase' }}
+        articleUrl="https://example.com/articles/test-article"
+        siteName="Example Site"
+        authors={[
+          {
+            name: 'Andrew Blase',
+            slug: 'andrew-blase',
+            bio: 'Writer.',
+            url: 'https://example.com/articles/authors/andrew-blase',
+            social: { github: 'blazestudios23' },
+          },
+        ]}
+      />
+    )
+    const schemas = parseAllSchemaScripts(container)
+    const article = schemas.find((s) => s['@type'] === 'Article')
+    expect(article.author[0]).toEqual({
+      '@type': 'Person',
+      name: 'Andrew Blase',
+      url: 'https://example.com/articles/authors/andrew-blase',
+      sameAs: ['https://github.com/blazestudios23'],
+    })
+  })
+
   it('uses articleType when provided', () => {
     const { container } = render(
       <ArticleSEO

package/src/__tests__/AuthorArticlesPage.test.tsx

@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react'
+import type React from 'react'
+import { AuthorArticlesPage } from '../AuthorArticlesPage'
+
+jest.mock('next/link', () => ({
+  __esModule: true,
+  default: ({ href, children }: { href: string; children: React.ReactNode }) => (
+    <a href={href}>{children}</a>
+  ),
+}))
+
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: ({ alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
+    <img alt={alt} {...props} />
+  ),
+}))
+
+function parseSchemaScript(container: HTMLElement) {
+  const scripts = container.querySelectorAll('script[type="application/ld+json"]')
+  return Array.from(scripts).map((script) => JSON.parse(script.innerHTML))
+}
+
+const author = {
+  name: 'Andrew Blase',
+  slug: 'andrew-blase',
+  bio: 'Writer focused on civic technology.',
+  social: {
+    website: 'https://fullstackdatasolutions.com',
+  },
+}
+
+const config = {
+  siteUrl: 'https://example.com',
+  siteName: 'Example',
+  pageSize: 6,
+}
+
+const articles = [
+  {
+    slug: 'test-article',
+    title: 'Test Article',
+    excerpt: 'Excerpt.',
+    author: 'Andrew Blase',
+    category: 'Campaigns',
+    categories: ['Campaigns'],
+    readTime: '3 min read',
+    featuredImage: '/image.jpg',
+  },
+]
+
+describe('AuthorArticlesPage', () => {
+  it('renders articles and Person schema', () => {
+    const { container } = render(
+      <AuthorArticlesPage author={author} articles={articles} config={config} />
+    )
+
+    expect(screen.getByText('Articles by Andrew Blase')).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'Test Article' })).toHaveAttribute(
+      'href',
+      '/articles/test-article'
+    )
+
+    const schemas = parseSchemaScript(container)
+    const person = schemas.find((schema) => schema['@type'] === 'Person')
+    expect(person).toEqual(
+      expect.objectContaining({
+        name: 'Andrew Blase',
+        description: 'Writer focused on civic technology.',
+        sameAs: ['https://fullstackdatasolutions.com'],
+      })
+    )
+  })
+})