@fullstackdatasolutions/articles 0.3.0 → 0.4.3

package/src/__tests__/ArticleSocialShare.test.tsx

@@ -0,0 +1,187 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { ArticleSocialShare } from '../ArticleSocialShare'
+
+const mockOpen = jest.fn()
+const mockWriteText = jest.fn()
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  window.open = mockOpen
+  Object.defineProperty(navigator, 'clipboard', {
+    value: { writeText: mockWriteText },
+    writable: true,
+    configurable: true,
+  })
+  mockWriteText.mockResolvedValue(undefined)
+})
+
+const defaultProps = {
+  title: 'My Test Article',
+  url: 'https://example.com/articles/my-test-article',
+  excerpt: 'A short excerpt.',
+}
+
+describe('ArticleSocialShare', () => {
+  describe('rendering', () => {
+    it('renders the "Share this article" heading', () => {
+      render(<ArticleSocialShare {...defaultProps} />)
+      expect(screen.getByText('Share this article')).toBeInTheDocument()
+    })
+
+    it('renders all 8 share buttons', () => {
+      render(<ArticleSocialShare {...defaultProps} />)
+      expect(screen.getByRole('button', { name: /linkedin/i })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /facebook/i })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /twitter/i })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /reddit/i })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /whatsapp/i })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /telegram/i })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /email/i })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /copy link/i })).toBeInTheDocument()
+    })
+  })
+
+  describe('share window buttons', () => {
+    it('clicking LinkedIn calls window.open with the correct LinkedIn URL', () => {
+      render(<ArticleSocialShare {...defaultProps} />)
+      fireEvent.click(screen.getByRole('button', { name: /linkedin/i }))
+      const encodedUrl = encodeURIComponent(defaultProps.url)
+      expect(mockOpen).toHaveBeenCalledWith(
+        `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
+        '_blank',
+        'width=600,height=400,scrollbars=yes,resizable=yes'
+      )
+    })
+
+    it('clicking Facebook calls window.open with the correct Facebook URL', () => {
+      render(<ArticleSocialShare {...defaultProps} />)
+      fireEvent.click(screen.getByRole('button', { name: /facebook/i }))
+      const encodedUrl = encodeURIComponent(defaultProps.url)
+      expect(mockOpen).toHaveBeenCalledWith(
+        `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
+        '_blank',
+        'width=600,height=400,scrollbars=yes,resizable=yes'
+      )
+    })
+
+    it('clicking Twitter calls window.open with correct URL and encoded title', () => {
+      render(<ArticleSocialShare {...defaultProps} />)
+      fireEvent.click(screen.getByRole('button', { name: /twitter/i }))
+      const encodedTitle = encodeURIComponent(defaultProps.title)
+      const encodedUrl = encodeURIComponent(defaultProps.url)
+      expect(mockOpen).toHaveBeenCalledWith(
+        `https://twitter.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`,
+        '_blank',
+        'width=600,height=400,scrollbars=yes,resizable=yes'
+      )
+    })
+
+    it('clicking Reddit calls window.open with correct URL and encoded title', () => {
+      render(<ArticleSocialShare {...defaultProps} />)
+      fireEvent.click(screen.getByRole('button', { name: /reddit/i }))
+      const encodedTitle = encodeURIComponent(defaultProps.title)
+      const encodedUrl = encodeURIComponent(defaultProps.url)
+      expect(mockOpen).toHaveBeenCalledWith(
+        `https://reddit.com/submit?url=${encodedUrl}&title=${encodedTitle}`,
+        '_blank',
+        'width=600,height=400,scrollbars=yes,resizable=yes'
+      )
+    })
+
+    it('clicking WhatsApp calls window.open with the correct WhatsApp URL', () => {
+      render(<ArticleSocialShare {...defaultProps} />)
+      fireEvent.click(screen.getByRole('button', { name: /whatsapp/i }))
+      const encodedTitle = encodeURIComponent(defaultProps.title)
+      const encodedUrl = encodeURIComponent(defaultProps.url)
+      expect(mockOpen).toHaveBeenCalledWith(
+        `https://wa.me/?text=${encodedTitle}%20${encodedUrl}`,
+        '_blank',
+        'width=600,height=400,scrollbars=yes,resizable=yes'
+      )
+    })
+
+    it('clicking Telegram calls window.open with the correct Telegram URL', () => {
+      render(<ArticleSocialShare {...defaultProps} />)
+      fireEvent.click(screen.getByRole('button', { name: /telegram/i }))
+      const encodedTitle = encodeURIComponent(defaultProps.title)
+      const encodedUrl = encodeURIComponent(defaultProps.url)
+      expect(mockOpen).toHaveBeenCalledWith(
+        `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`,
+        '_blank',
+        'width=600,height=400,scrollbars=yes,resizable=yes'
+      )
+    })
+  })
+
+  describe('Copy Link button', () => {
+    it('clicking Copy Link calls navigator.clipboard.writeText with the URL', async () => {
+      render(<ArticleSocialShare {...defaultProps} />)
+      fireEvent.click(screen.getByRole('button', { name: /copy link/i }))
+      await waitFor(() => {
+        expect(mockWriteText).toHaveBeenCalledWith(defaultProps.url)
+      })
+    })
+
+    it('shows "Copied!" text after clicking Copy Link', async () => {
+      render(<ArticleSocialShare {...defaultProps} />)
+      fireEvent.click(screen.getByRole('button', { name: /copy link/i }))
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /copied!/i })).toBeInTheDocument()
+      })
+    })
+
+    it('does not throw when clipboard.writeText rejects', async () => {
+      mockWriteText.mockRejectedValueOnce(new Error('not allowed'))
+      render(<ArticleSocialShare {...defaultProps} />)
+      // should not throw - catch block silently swallows the error
+      expect(() =>
+        fireEvent.click(screen.getByRole('button', { name: /copy link/i }))
+      ).not.toThrow()
+      // Copy Link label is still present (did not toggle to Copied!)
+      await waitFor(() =>
+        expect(screen.getByRole('button', { name: /copy link/i })).toBeInTheDocument()
+      )
+    })
+  })
+
+  describe('Email button', () => {
+    it('clicking Email sets location.href to a mailto link', () => {
+      const originalLocation = globalThis.location
+      delete (globalThis as Record<string, unknown>).location
+      ;(globalThis as Record<string, unknown>).location = { href: '' }
+
+      render(<ArticleSocialShare {...defaultProps} />)
+      fireEvent.click(screen.getByRole('button', { name: /email/i }))
+
+      expect((globalThis.location as { href: string }).href).toContain('mailto:')
+      expect((globalThis.location as { href: string }).href).toContain(
+        encodeURIComponent(defaultProps.title)
+      )
+      ;(globalThis as Record<string, unknown>).location = originalLocation
+    })
+  })
+
+  describe('shareMessage prop', () => {
+    it('renders shareMessage as a paragraph when provided', () => {
+      render(<ArticleSocialShare {...defaultProps} shareMessage="Help spread the word!" />)
+      expect(screen.getByText('Help spread the word!')).toBeInTheDocument()
+    })
+
+    it('does not render a shareMessage paragraph when the prop is omitted', () => {
+      render(<ArticleSocialShare {...defaultProps} />)
+      expect(screen.queryByText('Help spread the word!')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('excerpt prop', () => {
+    it('renders without error when excerpt is not provided', () => {
+      render(<ArticleSocialShare title="No Excerpt Title" url="https://example.com/no-excerpt" />)
+      expect(screen.getByText('Share this article')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /copy link/i })).toBeInTheDocument()
+    })
+  })
+})

package/src/__tests__/ArticlesPage.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { ArticlesPage } from '../ArticlesPage'
 import type { ArticlesConfig } from '../articlesConfig'
-import { render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor, fireEvent } from '@testing-library/react'
 
 jest.mock('next/link', () => ({
   __esModule: true,
@@ -127,6 +127,152 @@ describe('ArticlesPage', () => {
     expect(screen.getByRole('button', { name: 'Try again' })).toBeInTheDocument()
   })
 
+  it('clicking Try again in the error state resets the search', async () => {
+    // First call fails, second call succeeds (after Try again click)
+    ;(globalThis.fetch as jest.Mock).mockResolvedValueOnce({ ok: false }).mockResolvedValue({
+      ok: true,
+      json: async () => ({ articles: mockArticles }),
+    })
+    render(<ArticlesPage config={{ ...baseConfig, layout: ['latest'] }} />)
+
+    await waitFor(() => expect(screen.getByText('Error Loading Articles')).toBeInTheDocument())
+
+    // Click "Try again" - invokes the onClick={() => handleSearch('')} on line 116
+    fireEvent.click(screen.getByRole('button', { name: 'Try again' }))
+
+    await waitFor(() => expect(screen.getByText('Latest Articles')).toBeInTheDocument())
+  })
+
+  it('clicking Clear search in LatestArticlesSection invokes onClearSearch', async () => {
+    jest.useFakeTimers({ legacyFakeTimers: false })
+
+    // Initial load returns articles; search returns empty
+    ;(globalThis.fetch as jest.Mock)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ articles: mockArticles }),
+      })
+      .mockResolvedValue({
+        ok: true,
+        json: async () => ({ articles: [] }),
+      })
+    render(<ArticlesPage config={{ ...baseConfig, layout: ['search', 'latest'] }} />)
+
+    // Let the initial fetch resolve - use runAllTimersAsync to flush timers + microtasks
+    await (jest as unknown as { runAllTimersAsync(): Promise<void> }).runAllTimersAsync()
+    await waitFor(() => expect(screen.getByText('Latest Articles')).toBeInTheDocument())
+
+    // Type a search query (3+ chars triggers debounce)
+    const searchInput = screen.getByPlaceholderText('Search articles (3+ characters required)...')
+    fireEvent.change(searchInput, { target: { value: 'xyz' } })
+
+    // Advance timers past the 1000ms debounce and flush microtasks
+    await (jest as unknown as { runAllTimersAsync(): Promise<void> }).runAllTimersAsync()
+
+    // Now articles=[] and searchQuery='xyz' so "Clear search" button appears
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: /clear search/i })).toBeInTheDocument()
+    )
+
+    // Click "Clear search" - triggers onClearSearch={() => handleSearch('')} on line 131
+    fireEvent.click(screen.getByRole('button', { name: /clear search/i }))
+
+    await (jest as unknown as { runAllTimersAsync(): Promise<void> }).runAllTimersAsync()
+
+    jest.useRealTimers()
+
+    await waitFor(() => expect(screen.getByText('Latest Articles')).toBeInTheDocument())
+  })
+
+  it('renders null for an unknown/unhandled layout section', async () => {
+    mockFetchSuccess()
+    // 'newsletter' is a valid ArticlesSection type but has no case in the switch -> default: return null
+    const { container } = render(
+      <ArticlesPage config={{ ...baseConfig, layout: ['newsletter'] }} />
+    )
+    await waitFor(() => {})
+    // The wrapper div exists but has no section content
+    expect(container.firstChild).toBeInTheDocument()
+    expect(container.querySelector('section')).not.toBeInTheDocument()
+  })
+
+  it('applies all theme properties as CSS custom properties', async () => {
+    mockFetchSuccess()
+    const config: ArticlesConfig = {
+      ...baseConfig,
+      layout: ['latest'],
+      theme: {
+        fontFamily: "'Inter', sans-serif",
+        headerColor: '#111827',
+        textColor: '#6b7280',
+        backgroundColor: '#ffffff',
+        linkColor: '#4f46e5',
+        linkHoverColor: '#4338ca',
+        linkTextDecoration: 'underline',
+        headerFontWeight: 700,
+        headerFontSize: '1.25rem',
+        bodyFontSize: '1rem',
+        lineHeight: '1.75',
+        borderRadius: '0.5rem',
+      },
+    }
+    const { container } = render(<ArticlesPage config={config} />)
+
+    await waitFor(() => expect(screen.getByText('Latest Articles')).toBeInTheDocument())
+
+    const wrapper = container.firstChild as HTMLElement
+    expect(wrapper.style.getPropertyValue('--articles-font-family')).toBe("'Inter', sans-serif")
+    expect(wrapper.style.getPropertyValue('--articles-text-color')).toBe('#6b7280')
+    expect(wrapper.style.getPropertyValue('--articles-bg-color')).toBe('#ffffff')
+    expect(wrapper.style.getPropertyValue('--articles-link-hover-color')).toBe('#4338ca')
+    expect(wrapper.style.getPropertyValue('--articles-link-decoration')).toBe('underline')
+    expect(wrapper.style.getPropertyValue('--articles-header-font-weight')).toBe('700')
+    expect(wrapper.style.getPropertyValue('--articles-header-font-size')).toBe('1.25rem')
+    expect(wrapper.style.getPropertyValue('--articles-body-font-size')).toBe('1rem')
+    expect(wrapper.style.getPropertyValue('--articles-line-height')).toBe('1.75')
+    expect(wrapper.style.getPropertyValue('--articles-border-radius')).toBe('0.5rem')
+  })
+
+  it('hides categories section when search query is active', async () => {
+    ;(globalThis.fetch as jest.Mock).mockResolvedValue({
+      ok: true,
+      json: async () => ({ articles: mockArticles }),
+    })
+    render(<ArticlesPage config={{ ...baseConfig, layout: ['search', 'categories'] }} />)
+
+    await waitFor(() => expect(screen.getByText('Browse by Category')).toBeInTheDocument())
+
+    const searchInput = screen.getByPlaceholderText('Search articles (3+ characters required)...')
+    fireEvent.change(searchInput, { target: { value: 'vol' } })
+
+    // searchQuery set synchronously -> categories returns null
+    await waitFor(() => expect(screen.queryByText('Browse by Category')).not.toBeInTheDocument())
+  })
+
+  it('uses DEFAULT_PAGE_SIZE when pageSize is not in config', async () => {
+    mockFetchSuccess()
+    // Omit pageSize to hit the ?? DEFAULT_PAGE_SIZE branch
+    const config: ArticlesConfig = {
+      siteUrl: 'https://example.com',
+      siteName: 'Test Site',
+      layout: ['latest'],
+    }
+    render(<ArticlesPage config={config} />)
+    await waitFor(() => expect(screen.getByText('Latest Articles')).toBeInTheDocument())
+  })
+
+  it('uses provided categoriesPageSize when set', async () => {
+    mockFetchSuccess()
+    // Set categoriesPageSize to hit the left branch of ?? DEFAULT_CATEGORIES_PAGE_SIZE
+    const config: ArticlesConfig = {
+      ...baseConfig,
+      layout: ['categories'],
+      categoriesPageSize: 4,
+    }
+    render(<ArticlesPage config={config} />)
+    await waitFor(() => expect(screen.getByText('Browse by Category')).toBeInTheDocument())
+  })
+
   it('uses pageSize from config', async () => {
     const manyArticles = Array.from({ length: 10 }, (_, i) => ({
       ...mockArticles[0],

package/src/__tests__/CommentItem.test.tsx

@@ -21,6 +21,13 @@ const baseComment: ArticleCommentWithReplies = {
   replies: [],
 }
 
+function makeComment(msAgo: number): ArticleCommentWithReplies {
+  return {
+    ...baseComment,
+    createdAt: new Date(Date.now() - msAgo).toISOString(),
+  }
+}
+
 describe('CommentItem', () => {
   beforeEach(() => jest.clearAllMocks())
 
@@ -146,4 +153,107 @@ describe('CommentItem', () => {
     fireEvent.click(screen.getAllByRole('button', { name: /cancel/i })[0])
     expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
   })
+
+  it('clicking the form Cancel button hides the reply form via onCancel', () => {
+    render(
+      <CommentItem
+        comment={baseComment}
+        articleSlug="my-article"
+        currentUserId="other@example.com"
+        onRefresh={jest.fn()}
+      />
+    )
+    fireEvent.click(screen.getByRole('button', { name: /reply/i }))
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+
+    // The CommentForm renders its own Cancel button (the second Cancel button)
+    const cancelButtons = screen.getAllByRole('button', { name: /cancel/i })
+    // Click the last one - that is the CommentForm's Cancel, which calls onCancel
+    fireEvent.click(cancelButtons[cancelButtons.length - 1])
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+  })
+
+  it('calls onRefresh and hides the form after reply is submitted', async () => {
+    const onRefresh = jest.fn()
+    mockFetch.mockResolvedValueOnce({ ok: true, json: async () => ({}) })
+
+    render(
+      <CommentItem
+        comment={baseComment}
+        articleSlug="my-article"
+        currentUserId="other@example.com"
+        onRefresh={onRefresh}
+      />
+    )
+    // Open reply form
+    fireEvent.click(screen.getByRole('button', { name: /reply/i }))
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+
+    // Fill the textarea
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'My reply text' } })
+
+    // The CommentForm submit button is labeled "Reply" when parentId is set
+    // There are now two "Reply" buttons: the toggle and the form submit
+    // The form submit is a type="submit" button; click the second one
+    const replyButtons = screen.getAllByRole('button', { name: /reply/i })
+    fireEvent.click(replyButtons[replyButtons.length - 1])
+
+    // After successful submit: form hides and onRefresh called
+    await waitFor(() => expect(screen.queryByRole('textbox')).not.toBeInTheDocument())
+    expect(onRefresh).toHaveBeenCalledTimes(1)
+  })
+
+  describe('relativeTime display', () => {
+    it('shows "just now" for timestamps less than 1 minute ago', () => {
+      render(<CommentItem comment={makeComment(30_000)} articleSlug="a" onRefresh={jest.fn()} />)
+      expect(screen.getByText('just now')).toBeInTheDocument()
+    })
+
+    it('shows "Xm ago" for timestamps 1-59 minutes ago', () => {
+      render(
+        <CommentItem comment={makeComment(5 * 60_000)} articleSlug="a" onRefresh={jest.fn()} />
+      )
+      expect(screen.getByText('5m ago')).toBeInTheDocument()
+    })
+
+    it('shows "Xh ago" for timestamps 1-23 hours ago', () => {
+      render(
+        <CommentItem comment={makeComment(3 * 60 * 60_000)} articleSlug="a" onRefresh={jest.fn()} />
+      )
+      expect(screen.getByText('3h ago')).toBeInTheDocument()
+    })
+
+    it('shows "Xd ago" for timestamps 1-29 days ago', () => {
+      render(
+        <CommentItem
+          comment={makeComment(10 * 24 * 60 * 60_000)}
+          articleSlug="a"
+          onRefresh={jest.fn()}
+        />
+      )
+      expect(screen.getByText('10d ago')).toBeInTheDocument()
+    })
+
+    it('shows "Xmo ago" for timestamps 1-11 months ago', () => {
+      render(
+        <CommentItem
+          comment={makeComment(60 * 24 * 60 * 60_000)}
+          articleSlug="a"
+          onRefresh={jest.fn()}
+        />
+      )
+      expect(screen.getByText('2mo ago')).toBeInTheDocument()
+    })
+
+    it('shows "Xy ago" for timestamps 12+ months ago', () => {
+      render(
+        <CommentItem
+          comment={makeComment(400 * 24 * 60 * 60_000)}
+          articleSlug="a"
+          onRefresh={jest.fn()}
+        />
+      )
+      expect(screen.getByText('1y ago')).toBeInTheDocument()
+    })
+  })
 })

package/src/__tests__/seoUtils.test.ts

@@ -1,6 +1,7 @@
 import { ArticlesConfig } from '../articlesConfig'
 import {
   generateArticleStaticParams,
+  generateArticlesIndexMetadata,
   generateCategoryStaticParams,
   generateArticleMetadata,
   generateCategoryMetadata,
@@ -98,6 +99,33 @@ describe('generateArticleStaticParams', () => {
   })
 })
 
+describe('generateArticlesIndexMetadata', () => {
+  it('returns canonical URL pointing to /articles', () => {
+    const meta = generateArticlesIndexMetadata(config)
+    expect(meta.alternates?.canonical).toBe('https://example.com/articles')
+  })
+
+  it('strips trailing slash from siteUrl before building canonical', () => {
+    const meta = generateArticlesIndexMetadata({ ...config, siteUrl: 'https://example.com/' })
+    expect(meta.alternates?.canonical).toBe('https://example.com/articles')
+  })
+
+  it('works with a subdirectory siteUrl', () => {
+    const meta = generateArticlesIndexMetadata({ ...config, siteUrl: 'https://example.com/app' })
+    expect(meta.alternates?.canonical).toBe('https://example.com/app/articles')
+  })
+
+  it('includes title, description, openGraph, twitter, and robots', () => {
+    const meta = generateArticlesIndexMetadata(config)
+    expect(meta.title).toBeDefined()
+    expect(meta.description).toBeDefined()
+    expect(meta.openGraph).toBeDefined()
+    expect((meta.openGraph as { type?: string })?.type).toBe('website')
+    expect(meta.twitter).toBeDefined()
+    expect(meta.robots).toBeDefined()
+  })
+})
+
 describe('generateCategoryStaticParams', () => {
   it('returns category slug params', async () => {
     const result = await generateCategoryStaticParams()
@@ -214,4 +242,39 @@ describe('getArticleSitemapEntries', () => {
     const entries = await getArticleSitemapEntries('https://example.com')
     expect(entries).toEqual([])
   })
+
+  it('accepts ArticlesConfig and uses siteUrl from config', async () => {
+    const entries = await getArticleSitemapEntries(config)
+    expect(entries).toHaveLength(4)
+
+    const articleUrls = entries.filter((e) => !e.url.includes('/category/')).map((e) => e.url)
+    expect(articleUrls).toEqual([
+      'https://example.com/articles/article-one',
+      'https://example.com/articles/article-two',
+    ])
+
+    const categoryUrls = entries.filter((e) => e.url.includes('/category/')).map((e) => e.url)
+    expect(categoryUrls).toEqual([
+      'https://example.com/articles/category/campaigns',
+      'https://example.com/articles/category/volunteers',
+    ])
+  })
+
+  it('accepts ArticlesConfig with trailing slash and strips it', async () => {
+    const entries = await getArticleSitemapEntries({
+      siteUrl: 'https://example.com/',
+      siteName: 'Example Site',
+    })
+    expect(entries).toHaveLength(4)
+    entries.forEach((e) => {
+      // protocol (https://) is fine; double slash in the path is not
+      expect(e.url.replace(/^https?:\/\//, '')).not.toContain('//')
+    })
+  })
+
+  it('returns same results whether called with string or ArticlesConfig', async () => {
+    const stringResult = await getArticleSitemapEntries('https://example.com')
+    const configResult = await getArticleSitemapEntries(config)
+    expect(JSON.stringify(stringResult)).toBe(JSON.stringify(configResult))
+  })
 })

package/src/index.ts

@@ -13,6 +13,9 @@ export { LatestArticlesSection } from './LatestArticlesSection'
 export { CategoryArticlesPage } from './CategoryArticlesPage'
 export { ArticleSchema, BreadcrumbSchema, CollectionPageSchema } from './ArticleSchemas'
 
+export { ArticleSocialShare } from './ArticleSocialShare'
+export { ArticleNavigation } from './ArticleNavigation'
+
 // Comments
 export { CommentsSection } from './CommentsSection'
 export { CommentThread } from './CommentThread'

package/src/seoUtils.ts

@@ -99,6 +99,45 @@ export async function generateArticleMetadata(
   }
 }
 
+export function generateArticlesIndexMetadata(config: ArticlesConfig): Metadata {
+  const siteUrl = config.siteUrl.replace(/\/$/, '')
+  const indexUrl = `${siteUrl}/articles`
+  const title = `Articles | ${config.siteName}`
+  const description =
+    config.hero?.description ?? `Expert analysis and insights from ${config.siteName}.`
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      url: indexUrl,
+      siteName: config.siteName,
+      type: 'website',
+      locale: 'en_US',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+    },
+    alternates: {
+      canonical: indexUrl,
+    },
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+        'max-video-preview': -1,
+        'max-image-preview': 'large',
+        'max-snippet': -1,
+      },
+    },
+  }
+}
+
 export async function generateCategoryMetadata(
   categorySlug: string,
   config: ArticlesConfig
@@ -114,8 +153,9 @@ export async function generateCategoryMetadata(
   const fallback = `Browse ${articles.length} article${articles.length === 1 ? '' : 's'} in the ${categoryName} category.`
   const description = typeof raw === 'string' ? raw : (raw?.short ?? fallback)
 
+  const title = `${categoryName} Articles | ${config.siteName}`
   return {
-    title: `${categoryName} Articles | ${config.siteName}`,
+    title,
     description,
     openGraph: {
       title: `${categoryName} Articles`,
@@ -123,14 +163,38 @@ export async function generateCategoryMetadata(
       url: categoryUrl,
       siteName: config.siteName,
       images: [{ url: articles[0].featuredImage }],
+      type: 'website',
+      locale: 'en_US',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: `${categoryName} Articles`,
+      description,
     },
     alternates: {
       canonical: categoryUrl,
     },
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+        'max-video-preview': -1,
+        'max-image-preview': 'large',
+        'max-snippet': -1,
+      },
+    },
   }
 }
 
-export async function getArticleSitemapEntries(baseUrl: string): Promise<MetadataRoute.Sitemap> {
+export async function getArticleSitemapEntries(
+  baseUrlOrConfig: string | ArticlesConfig
+): Promise<MetadataRoute.Sitemap> {
+  const baseUrl = (
+    typeof baseUrlOrConfig === 'string' ? baseUrlOrConfig : baseUrlOrConfig.siteUrl
+  ).replace(/\/$/, '')
+
   try {
     const [articles, categories] = await Promise.all([getAllArticles(), getAllCategories()])
 

package/src/server.ts

@@ -14,6 +14,7 @@ export {
 export {
   generateArticleStaticParams,
   generateCategoryStaticParams,
+  generateArticlesIndexMetadata,
   generateArticleMetadata,
   generateCategoryMetadata,
   getArticleSitemapEntries,