@fullstackdatasolutions/articles 0.8.2 → 0.10.0

package/src/__tests__/AuthorCard.test.tsx

@@ -0,0 +1,98 @@
+import { render, screen } from '@testing-library/react'
+import type React from 'react'
+import { AuthorCard } from '../AuthorCard'
+
+jest.mock('next/link', () => ({
+  __esModule: true,
+  default: ({
+    href,
+    children,
+    ...rest
+  }: {
+    href: string
+    children: React.ReactNode
+    [key: string]: unknown
+  }) => (
+    <a href={href} {...rest}>
+      {children}
+    </a>
+  ),
+}))
+
+const author = {
+  name: 'Andrew Blase',
+  slug: 'andrew-blase',
+  bio: 'Writer focused on civic technology.',
+  social: {
+    github: 'blazestudios23',
+    website: 'https://fullstackdatasolutions.com',
+  },
+}
+
+describe('AuthorCard', () => {
+  it('renders author name as a link by default', () => {
+    render(<AuthorCard author={author} />)
+
+    expect(screen.getByRole('link', { name: 'Andrew Blase' })).toHaveAttribute(
+      'href',
+      '/articles/authors/andrew-blase'
+    )
+  })
+
+  it('can show bio and social links', () => {
+    render(<AuthorCard author={author} showBio showSocial />)
+
+    expect(screen.getByText('Writer focused on civic technology.')).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'Andrew Blase on GitHub' })).toHaveAttribute(
+      'href',
+      'https://github.com/blazestudios23'
+    )
+    expect(screen.getByRole('link', { name: 'Andrew Blase on Website' })).toHaveAttribute(
+      'href',
+      'https://fullstackdatasolutions.com'
+    )
+  })
+
+  it('only renders social links that are provided', () => {
+    render(
+      <AuthorCard
+        author={{
+          ...author,
+          social: {
+            facebook: 'andrew.blase',
+            linkedin: 'andrewblase',
+            instagram: '@andrewblase',
+            other: {
+              Podcast: 'https://example.com/podcast',
+            },
+          },
+        }}
+        showSocial
+      />
+    )
+
+    expect(screen.getByRole('link', { name: 'Andrew Blase on Facebook' })).toHaveAttribute(
+      'href',
+      'https://www.facebook.com/andrew.blase'
+    )
+    expect(screen.getByRole('link', { name: 'Andrew Blase on LinkedIn' })).toHaveAttribute(
+      'href',
+      'https://www.linkedin.com/in/andrewblase'
+    )
+    expect(screen.getByRole('link', { name: 'Andrew Blase on Instagram' })).toHaveAttribute(
+      'href',
+      'https://www.instagram.com/andrewblase'
+    )
+    expect(screen.getByRole('link', { name: 'Andrew Blase on Podcast' })).toHaveAttribute(
+      'href',
+      'https://example.com/podcast'
+    )
+    expect(screen.queryByRole('link', { name: 'Andrew Blase on GitHub' })).not.toBeInTheDocument()
+  })
+
+  it('does not render social links when no social fields are provided', () => {
+    render(<AuthorCard author={{ ...author, social: undefined }} showSocial />)
+
+    expect(screen.queryByLabelText(/Andrew Blase on/i)).not.toBeInTheDocument()
+  })
+})

package/src/__tests__/AuthorDetailHero.test.tsx

@@ -0,0 +1,51 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render, screen } from '@testing-library/react'
+import { AuthorDetailHero } from '../AuthorDetailHero'
+import type { AuthorProfile } from '../articleTypes'
+
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: (props: React.ComponentProps<'img'>) => <img {...props} alt={props.alt ?? ''} />,
+}))
+
+const author: AuthorProfile = {
+  name: 'Andrew Blase',
+  slug: 'andrew-blase',
+  bio: 'Writer focused on civic technology.',
+  social: {
+    website: 'https://fullstackdatasolutions.com/',
+  },
+}
+
+describe('AuthorDetailHero', () => {
+  it('renders author details, plural article count, and social links', () => {
+    render(<AuthorDetailHero author={author} articleCount={2} />)
+
+    expect(screen.getByRole('heading', { name: 'Andrew Blase' })).toBeInTheDocument()
+    expect(screen.getByText('Writer focused on civic technology.')).toBeInTheDocument()
+    expect(screen.getByText('2 articles')).toBeInTheDocument()
+    expect(screen.getByRole('link', { name: 'Andrew Blase on Website' })).toHaveAttribute(
+      'href',
+      'https://fullstackdatasolutions.com/'
+    )
+  })
+
+  it('renders initials and singular article count when no avatar is configured', () => {
+    render(<AuthorDetailHero author={author} articleCount={1} />)
+
+    expect(screen.getByText('AB')).toBeInTheDocument()
+    expect(screen.getByText('1 article')).toBeInTheDocument()
+  })
+
+  it('renders the author avatar and hides count when articleCount is omitted', () => {
+    render(<AuthorDetailHero author={{ ...author, avatar: 'avatar.jpg' }} />)
+
+    expect(screen.getByAltText('Andrew Blase')).toHaveAttribute(
+      'src',
+      '/articles/authors/andrew-blase/avatar.jpg'
+    )
+    expect(screen.queryByText(/article/i)).not.toBeInTheDocument()
+  })
+})

package/src/__tests__/CategoryArticlesPage.test.tsx

@@ -41,10 +41,6 @@ jest.mock('../LatestArticles', () => ({
   ),
 }))
 
-jest.mock('../ArticleSchemas', () => ({
-  BreadcrumbSchema: () => null,
-}))
-
 const baseConfig: ArticlesConfig = { siteUrl: 'https://example.com', siteName: 'Test Site' }
 
 const makeArticle = (overrides: Partial<Article> = {}): Article => ({
@@ -76,7 +72,37 @@ describe('CategoryArticlesPage', () => {
         config={baseConfig}
       />
     )
-    expect(screen.getByText('Campaigns')).toBeInTheDocument()
+    expect(screen.getAllByText('Campaigns').length).toBeGreaterThan(0)
+  })
+
+  it('renders visible breadcrumb navigation', () => {
+    render(
+      <CategoryArticlesPage
+        category="campaigns"
+        articles={[makeArticle({ category: 'Campaigns' })]}
+        config={baseConfig}
+      />
+    )
+    expect(screen.getByRole('navigation', { name: 'Breadcrumb' })).toBeInTheDocument()
+  })
+
+  it('renders custom category breadcrumb links from config', () => {
+    render(
+      <CategoryArticlesPage
+        category="campaigns"
+        articles={[makeArticle({ category: 'Campaigns' })]}
+        config={{
+          ...baseConfig,
+          breadcrumbs: {
+            category: ['home', { name: 'Resources', url: '/resources' }, 'category'],
+          },
+        }}
+      />
+    )
+    expect(screen.getByRole('link', { name: 'Resources' })).toHaveAttribute(
+      'href',
+      'https://example.com/resources'
+    )
   })
 
   it('renders plural article count in the hero', () => {

package/src/__tests__/authorUtils.test.ts

@@ -0,0 +1,89 @@
+import {
+  getAuthorAvatar,
+  getAuthorSameAs,
+  getAuthorSocialLinks,
+  getAuthorUrl,
+} from '../authorUtils'
+import type { AuthorProfile } from '../articleTypes'
+
+const author: AuthorProfile = {
+  name: 'Andrew Blase',
+  slug: 'andrew-blase',
+  bio: 'Writer.',
+}
+
+describe('authorUtils', () => {
+  it('builds author URLs and avatar URLs', () => {
+    expect(getAuthorUrl(author)).toBe('/articles/authors/andrew-blase')
+    expect(getAuthorUrl({ ...author, url: 'https://example.com/andrew' })).toBe(
+      'https://example.com/andrew'
+    )
+    expect(getAuthorAvatar(author)).toBeUndefined()
+    expect(getAuthorAvatar({ ...author, avatar: 'avatar.jpg' })).toBe(
+      '/articles/authors/andrew-blase/avatar.jpg'
+    )
+    expect(getAuthorAvatar({ ...author, avatar: '/avatar.jpg' })).toBe(
+      '/articles/authors/andrew-blase/avatar.jpg'
+    )
+    expect(getAuthorAvatar({ ...author, avatar: 'https://example.com/avatar.jpg' })).toBe(
+      'https://example.com/avatar.jpg'
+    )
+    expect(
+      getAuthorAvatar(
+        { ...author, avatar: 'avatar.jpg' },
+        { siteUrl: 'https://example.com/', siteName: 'Example' }
+      )
+    ).toBe('https://example.com/articles/authors/andrew-blase/avatar.jpg')
+  })
+
+  it('normalizes configured social links and sameAs URLs', () => {
+    const socialAuthor: AuthorProfile = {
+      ...author,
+      social: {
+        website: 'https://fullstackdatasolutions.com/',
+        facebook: 'andrew.blase',
+        twitter: '@andrewblase',
+        x: 'https://x.com/andrewblase',
+        linkedin: 'andrewobrigewitsch',
+        instagram: '@andrewblase',
+        youtube: '@andrewblase',
+        tiktok: '@andrewblase',
+        github: 'blazestudios23',
+        bluesky: 'andrewblase.bsky.social',
+        threads: '@andrewblase',
+        mastodon: 'https://mastodon.social/@andrewblase',
+        medium: '@andrewblase',
+        newsletter: 'https://example.com/newsletter',
+        other: {
+          Podcast: 'https://example.com/podcast',
+          Empty: '   ',
+        },
+      },
+    }
+
+    expect(getAuthorSocialLinks(socialAuthor)).toEqual([
+      { label: 'Website', href: 'https://fullstackdatasolutions.com/' },
+      { label: 'Facebook', href: 'https://www.facebook.com/andrew.blase' },
+      { label: 'Twitter', href: 'https://twitter.com/andrewblase' },
+      { label: 'X', href: 'https://x.com/andrewblase' },
+      { label: 'LinkedIn', href: 'https://www.linkedin.com/in/andrewobrigewitsch' },
+      { label: 'Instagram', href: 'https://www.instagram.com/andrewblase' },
+      { label: 'YouTube', href: 'https://www.youtube.com/andrewblase' },
+      { label: 'TikTok', href: 'https://www.tiktok.com/@andrewblase' },
+      { label: 'GitHub', href: 'https://github.com/blazestudios23' },
+      { label: 'Bluesky', href: 'https://bsky.app/profile/andrewblase.bsky.social' },
+      { label: 'Threads', href: 'https://www.threads.net/@andrewblase' },
+      { label: 'Mastodon', href: 'https://mastodon.social/@andrewblase' },
+      { label: 'Medium', href: 'https://medium.com/@andrewblase' },
+      { label: 'Newsletter', href: 'https://example.com/newsletter' },
+      { label: 'Podcast', href: 'https://example.com/podcast' },
+    ])
+    expect(getAuthorSameAs(socialAuthor)).toEqual(
+      getAuthorSocialLinks(socialAuthor).map((link) => link.href)
+    )
+  })
+
+  it('returns no social links when no social fields are configured', () => {
+    expect(getAuthorSocialLinks(author)).toEqual([])
+  })
+})

package/src/__tests__/markdown.test.ts

@@ -9,11 +9,16 @@ jest.mock('remark-github-blockquote-alert', () => () => () => {})
 jest.mock('remark-parse', () => () => () => {})
 jest.mock('remark-rehype', () => () => () => {})
 
+const mockRemarkUseCalls: unknown[][] = []
+
 // Mock remark() to return a chainable processor whose .process() resolves to ''
 jest.mock('remark', () => {
   const makeChain = (): Record<string, unknown> => {
     const chain: Record<string, unknown> = {
-      use: () => chain,
+      use: (...args: unknown[]) => {
+        mockRemarkUseCalls.push(args)
+        return chain
+      },
       process: async () => ({ toString: () => '' }),
     }
     return chain
@@ -80,8 +85,15 @@ function root(...nodes: HastElement[]): HastRoot {
   return { type: 'root', children: nodes }
 }
 
-function runRenderer(tree: HastRoot) {
-  const transform = (customRenderer as unknown as () => (tree: HastRoot) => void)()
+type LinkTargetOptions = Readonly<{
+  strategy?: 'external-new-tab' | 'all-new-tab' | 'same-tab'
+  siteUrl?: string
+}>
+
+function runRenderer(tree: HastRoot, options?: LinkTargetOptions) {
+  const transform = (
+    customRenderer as unknown as (options?: LinkTargetOptions) => (tree: HastRoot) => void
+  )(options)
   transform(tree)
 }
 
@@ -212,6 +224,13 @@ describe('customRenderer', () => {
       expect(node.properties.rel).toBe('noopener noreferrer')
     })
 
+    it('does NOT add target="_blank" to root-relative internal links by default', () => {
+      const node = el('a', { href: '/internal' })
+      runRenderer(root(node))
+      expect(node.properties.target).toBeUndefined()
+      expect(node.properties.rel).toBeUndefined()
+    })
+
     it('does NOT add target="_blank" to internal anchor links (#)', () => {
       const node = el('a', { href: '#section-id' })
       runRenderer(root(node))
@@ -225,6 +244,46 @@ describe('customRenderer', () => {
       expect(node.properties.target).toBeUndefined()
     })
 
+    it('does NOT add target="_blank" to same-origin absolute links', () => {
+      const node = el('a', { href: 'https://example.com/articles/internal' })
+      runRenderer(root(node), { siteUrl: 'https://example.com' })
+      expect(node.properties.target).toBeUndefined()
+      expect(node.properties.rel).toBeUndefined()
+    })
+
+    it('adds target="_blank" and rel to different-origin absolute links', () => {
+      const node = el('a', { href: 'https://different-site.com' })
+      runRenderer(root(node), { siteUrl: 'https://example.com' })
+      expect(node.properties.target).toBe('_blank')
+      expect(node.properties.rel).toBe('noopener noreferrer')
+    })
+
+    it('opens browser navigation links in a new tab when strategy is all-new-tab', () => {
+      const node = el('a', { href: '/internal' })
+      runRenderer(root(node), { strategy: 'all-new-tab', siteUrl: 'https://example.com' })
+      expect(node.properties.target).toBe('_blank')
+      expect(node.properties.rel).toBe('noopener noreferrer')
+    })
+
+    it('does not open links in a new tab when strategy is same-tab', () => {
+      const node = el('a', { href: 'https://different-site.com' })
+      runRenderer(root(node), { strategy: 'same-tab', siteUrl: 'https://example.com' })
+      expect(node.properties.target).toBeUndefined()
+      expect(node.properties.rel).toBeUndefined()
+    })
+
+    it('leaves mailto and tel links in the same tab', () => {
+      const nodes = [
+        el('a', { href: 'mailto:test@example.com' }),
+        el('a', { href: 'tel:+15555555555' }),
+      ]
+      runRenderer(root(...nodes), { strategy: 'all-new-tab', siteUrl: 'https://example.com' })
+      nodes.forEach((node) => {
+        expect(node.properties.target).toBeUndefined()
+        expect(node.properties.rel).toBeUndefined()
+      })
+    })
+
     it('applies link className to external anchors', () => {
       const node = el('a', { href: 'https://external.com' })
       runRenderer(root(node))
@@ -248,6 +307,10 @@ describe('customRenderer', () => {
 // ---------------------------------------------------------------------------
 
 describe('markdownToHtml', () => {
+  beforeEach(() => {
+    mockRemarkUseCalls.length = 0
+  })
+
   it('returns a string', async () => {
     const result = await markdownToHtml('# Hello')
     expect(typeof result).toBe('string')
@@ -260,6 +323,19 @@ describe('markdownToHtml', () => {
   it('resolves without throwing when articleSlug is provided', async () => {
     await expect(markdownToHtml('![alt](photo.png)', 'my-article')).resolves.toBeDefined()
   })
+
+  it('passes link target config to customRenderer', async () => {
+    await markdownToHtml('# Hello', 'my-article', {
+      siteUrl: 'https://example.com',
+      siteName: 'Example',
+      linkTargetStrategy: 'external-new-tab',
+    })
+
+    expect(mockRemarkUseCalls).toContainEqual([
+      customRenderer,
+      { strategy: 'external-new-tab', siteUrl: 'https://example.com' },
+    ])
+  })
 })
 
 // ---------------------------------------------------------------------------

package/src/__tests__/renderMdx.test.tsx

@@ -179,6 +179,28 @@ describe('renderMdxSource', () => {
       expect(container.querySelector('a[href="#section-one"]')).not.toBeNull()
       expect(container.querySelector('a[href="#section-two"]')).not.toBeNull()
     })
+
+    it('passes link target config into the markdown renderer plugin', async () => {
+      mockEvaluate.mockResolvedValue({
+        default: () => React.createElement('a', { href: 'https://external.com' }, 'External'),
+      })
+      Object.defineProperty(process.env, 'NODE_ENV', { value: 'production', writable: true })
+
+      const config = {
+        siteUrl: 'https://example.com',
+        siteName: 'Example',
+        linkTargetStrategy: 'external-new-tab' as const,
+      }
+      const { renderMdxSource } = await import('../renderMdx')
+      await renderMdxSource('[External](https://external.com)', '/articles/my-article', config)
+
+      const callArgs = mockEvaluate.mock.calls[0][1]
+      expect(callArgs.rehypePlugins).toEqual(
+        expect.arrayContaining([
+          [expect.any(Function), { strategy: 'external-new-tab', siteUrl: 'https://example.com' }],
+        ])
+      )
+    })
   })
 
   describe('basePath image resolution', () => {
@@ -261,6 +283,41 @@ describe('renderMdxSource', () => {
       expect(img?.getAttribute('src')).toBe('https://example.com/img.png')
     })
 
+    it('does not modify non-string img src values', async () => {
+      const imageBlob = new Blob(['image'])
+      let capturedSrc: unknown
+
+      mockEvaluate.mockResolvedValue({
+        default: ({
+          components,
+        }: {
+          components?: Record<string, React.ComponentType<unknown>>
+        }) => {
+          const Img = components?.img as React.ComponentType<{
+            alt: string
+            ref?: React.Ref<HTMLImageElement>
+            src: Blob | string
+          }>
+          return Img
+            ? React.createElement(Img, {
+                src: imageBlob,
+                alt: 'test',
+                ref: (node: HTMLImageElement | null) => {
+                  capturedSrc = node?.src
+                },
+              })
+            : React.createElement('img', { alt: 'test' })
+        },
+      })
+      Object.defineProperty(process.env, 'NODE_ENV', { value: 'production', writable: true })
+
+      const { renderMdxSource } = await import('../renderMdx')
+      const el = await renderMdxSource('![test](photo.png)', '/articles/my-article')
+      render(el as React.ReactElement)
+
+      expect(capturedSrc).not.toBe('/articles/my-article/[object Blob]')
+    })
+
     it('does not inject img component when basePath is not provided', async () => {
       let capturedComponents: Record<string, unknown> | undefined
       mockEvaluate.mockResolvedValue({

package/src/__tests__/seoUtils-authors.test.ts

@@ -0,0 +1,160 @@
+import {
+  buildArticleBreadcrumbs,
+  buildAuthorBreadcrumbs,
+  buildCategoryBreadcrumbs,
+  generateAuthorMetadata,
+  generateAuthorStaticParams,
+} from '../seoUtils'
+
+jest.mock('react', () => ({ cache: (fn: Function) => fn }))
+jest.mock('../markdown', () => ({
+  markdownToHtml: jest.fn(async () => '<p>content</p>'),
+  extractToc: jest.fn(async () => []),
+}))
+
+const config = {
+  siteUrl: 'https://example.com',
+  siteName: 'Example',
+  authors: {
+    'andrew-blase': {
+      name: 'Andrew Blase',
+      slug: 'andrew-blase',
+      bio: 'Writer.',
+      social: { website: 'https://fullstackdatasolutions.com' },
+    },
+  },
+}
+
+describe('breadcrumb builders', () => {
+  it('builds article breadcrumbs with a primary category', () => {
+    expect(
+      buildArticleBreadcrumbs(
+        { slug: 'guides/test-article', title: 'Test Article', category: 'Civic Tech' },
+        config
+      )
+    ).toEqual([
+      { name: 'Home', url: 'https://example.com' },
+      { name: 'Articles', url: 'https://example.com/articles' },
+      { name: 'Civic Tech', url: 'https://example.com/articles/category/civic-tech' },
+      { name: 'Test Article' },
+    ])
+  })
+
+  it('builds configured article breadcrumbs from category, folder path, and title', () => {
+    expect(
+      buildArticleBreadcrumbs(
+        { slug: 'guides/field/test-article', title: 'Test Article', category: 'Civic Tech' },
+        {
+          ...config,
+          breadcrumbs: {
+            article: ['primaryCategory', 'folderPath', 'articleTitle'],
+          },
+        }
+      )
+    ).toEqual([
+      { name: 'Civic Tech', url: 'https://example.com/articles/category/civic-tech' },
+      { name: 'Guides', url: 'https://example.com/articles/guides' },
+      { name: 'Field', url: 'https://example.com/articles/guides/field' },
+      { name: 'Test Article' },
+    ])
+  })
+
+  it('supports custom URL entries anywhere in article breadcrumbs', () => {
+    expect(
+      buildArticleBreadcrumbs(
+        { slug: 'guides/test-article', title: 'Test Article', category: 'Civic Tech' },
+        {
+          ...config,
+          breadcrumbs: {
+            article: [
+              { name: 'Resources', url: '/resources' },
+              'primaryCategory',
+              { name: 'External Docs', url: 'https://docs.example.com' },
+              'articleTitle',
+            ],
+          },
+        }
+      )
+    ).toEqual([
+      { name: 'Resources', url: 'https://example.com/resources' },
+      { name: 'Civic Tech', url: 'https://example.com/articles/category/civic-tech' },
+      { name: 'External Docs', url: 'https://docs.example.com' },
+      { name: 'Test Article' },
+    ])
+  })
+
+  it('returns no breadcrumbs when breadcrumbs are disabled', () => {
+    expect(
+      buildArticleBreadcrumbs(
+        { slug: 'test-article', title: 'Test Article', category: 'Civic Tech' },
+        { ...config, breadcrumbs: false }
+      )
+    ).toEqual([])
+  })
+
+  it('builds category and author breadcrumbs', () => {
+    expect(buildCategoryBreadcrumbs('civic-tech', config)).toEqual([
+      { name: 'Home', url: 'https://example.com' },
+      { name: 'Articles', url: 'https://example.com/articles' },
+      { name: 'Civic Tech' },
+    ])
+    expect(buildAuthorBreadcrumbs(config.authors['andrew-blase'], config)).toEqual([
+      { name: 'Home', url: 'https://example.com' },
+      { name: 'Articles', url: 'https://example.com/articles' },
+      { name: 'Authors', url: 'https://example.com/articles/authors' },
+      { name: 'Andrew Blase' },
+    ])
+  })
+
+  it('supports custom URL entries in category and author breadcrumbs', () => {
+    expect(
+      buildCategoryBreadcrumbs('civic-tech', {
+        ...config,
+        breadcrumbs: {
+          category: ['home', { name: 'Knowledge Base', url: '/knowledge' }, 'category'],
+        },
+      })
+    ).toEqual([
+      { name: 'Home', url: 'https://example.com' },
+      { name: 'Knowledge Base', url: 'https://example.com/knowledge' },
+      { name: 'Civic Tech' },
+    ])
+
+    expect(
+      buildAuthorBreadcrumbs(config.authors['andrew-blase'], {
+        ...config,
+        breadcrumbs: {
+          author: [
+            { name: 'Team', url: '/team' },
+            { name: 'Editorial', url: 'https://example.org/editorial' },
+            'authorName',
+          ],
+        },
+      })
+    ).toEqual([
+      { name: 'Team', url: 'https://example.com/team' },
+      { name: 'Editorial', url: 'https://example.org/editorial' },
+      { name: 'Andrew Blase' },
+    ])
+  })
+})
+
+describe('author metadata utilities', () => {
+  it('generates author static params from configured authors', () => {
+    expect(generateAuthorStaticParams(config)).toEqual([{ author: 'andrew-blase' }])
+  })
+
+  it('returns no author static params when author pages are disabled', () => {
+    expect(generateAuthorStaticParams({ ...config, showAuthorPage: false })).toEqual([])
+  })
+
+  it('generates author metadata', async () => {
+    await expect(generateAuthorMetadata('andrew-blase', config)).resolves.toMatchObject({
+      title: 'Andrew Blase Articles | Example',
+      description: 'Writer.',
+      alternates: {
+        canonical: 'https://example.com/articles/authors/andrew-blase',
+      },
+    })
+  })
+})