@fullstackdatasolutions/articles 0.3.0 → 0.4.2

package/src/ArticleSocialShare.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import { useState } from 'react'
+import { Share2, Copy, Check, Mail, MessageCircle, Users, FileText } from 'lucide-react'
+
+interface ArticleSocialShareProps {
+  readonly title: string
+  readonly url: string
+  readonly excerpt?: string
+  readonly shareMessage?: string
+}
+
+export function ArticleSocialShare({ title, url, excerpt, shareMessage }: ArticleSocialShareProps) {
+  const [copied, setCopied] = useState(false)
+
+  const encodedTitle = encodeURIComponent(title)
+  const encodedUrl = encodeURIComponent(url)
+  const encodedExcerpt = encodeURIComponent(excerpt || '')
+
+  const shareLinks = {
+    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
+    facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
+    twitter: `https://twitter.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`,
+    reddit: `https://reddit.com/submit?url=${encodedUrl}&title=${encodedTitle}`,
+    email: `mailto:?subject=${encodedTitle}&body=${encodedExcerpt}%0A%0A${encodedUrl}`,
+    whatsapp: `https://wa.me/?text=${encodedTitle}%20${encodedUrl}`,
+    telegram: `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`,
+  }
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(url)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      // clipboard unavailable
+    }
+  }
+
+  const openShareWindow = (shareUrl: string) => {
+    window.open(shareUrl, '_blank', 'width=600,height=400,scrollbars=yes,resizable=yes')
+  }
+
+  const btnClass =
+    'inline-flex items-center gap-2 px-3 py-1.5 text-sm rounded-md border border-border bg-background text-foreground hover:bg-primary/10 hover:border-primary hover:text-primary transition-colors cursor-pointer'
+
+  return (
+    <div className="border-t border-border pt-8 mt-8">
+      <div className="flex items-center gap-2 mb-4">
+        <Share2 className="h-5 w-5 text-muted-foreground" />
+        <h3 className="text-lg font-semibold text-foreground">Share this article</h3>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        <button className={btnClass} onClick={() => openShareWindow(shareLinks.linkedin)}>
+          <Users className="h-4 w-4" />
+          LinkedIn
+        </button>
+        <button className={btnClass} onClick={() => openShareWindow(shareLinks.facebook)}>
+          <span className="text-xs font-bold">f</span> Facebook
+        </button>
+        <button className={btnClass} onClick={() => openShareWindow(shareLinks.twitter)}>
+          <MessageCircle className="h-4 w-4" />
+          Twitter
+        </button>
+        <button className={btnClass} onClick={() => openShareWindow(shareLinks.reddit)}>
+          <FileText className="h-4 w-4" />
+          Reddit
+        </button>
+        <button className={btnClass} onClick={() => openShareWindow(shareLinks.whatsapp)}>
+          <MessageCircle className="h-4 w-4" />
+          WhatsApp
+        </button>
+        <button className={btnClass} onClick={() => openShareWindow(shareLinks.telegram)}>
+          <MessageCircle className="h-4 w-4" />
+          Telegram
+        </button>
+        <button
+          className={btnClass}
+          onClick={() => {
+            globalThis.location.href = shareLinks.email
+          }}
+        >
+          <Mail className="h-4 w-4" />
+          Email
+        </button>
+        <button className={btnClass} onClick={copyToClipboard}>
+          {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+          {copied ? 'Copied!' : 'Copy Link'}
+        </button>
+      </div>
+
+      {shareMessage && <p className="text-sm text-muted-foreground mt-3">{shareMessage}</p>}
+    </div>
+  )
+}

package/src/CategoryArticlesPage.tsx

@@ -43,17 +43,34 @@ export function CategoryArticlesPage({ category, articles, config }: CategoryArt
         ]}
       />
       {/* Hero */}
-      <section className="relative h-72 md:h-96 flex items-center justify-center overflow-hidden">
+      <section
+        style={{
+          position: 'relative',
+          height: '20rem',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+        }}
+      >
         <Image
           src={heroImage}
           alt={categoryName}
           fill
           sizes="100vw"
-          className="object-cover"
+          style={{ objectFit: 'cover' }}
           priority
         />
-        <div className="absolute inset-0 bg-black/60" />
-        <div className="relative z-10 text-center text-white px-4">
+        <div style={{ position: 'absolute', inset: 0, backgroundColor: 'rgba(0,0,0,0.6)' }} />
+        <div
+          style={{
+            position: 'relative',
+            zIndex: 10,
+            textAlign: 'center',
+            color: 'white',
+            padding: '0 1rem',
+          }}
+        >
           <p className="text-sm font-semibold uppercase tracking-widest mb-3 opacity-80">
             Category
           </p>

package/src/__tests__/ArticleCategoryGrid.test.tsx

@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import type { CategoryInfo } from '../articleTypes'
 import { ArticleCategoryGrid } from '../ArticleCategoryGrid'
 
@@ -101,4 +101,37 @@ describe('ArticleCategoryGrid', () => {
       expect(screen.getByText(label)).toBeInTheDocument()
     })
   })
+
+  describe('Load more', () => {
+    it('shows Load more button when categories exceed pageSize', () => {
+      const cats: CategoryInfo[] = Array.from({ length: 5 }, (_, i) => ({
+        name: `Cat ${i + 1}`,
+        slug: `cat-${i + 1}`,
+        count: i + 1,
+        featuredImage: '/image.jpg',
+      }))
+      render(<ArticleCategoryGrid categories={cats} pageSize={3} />)
+      expect(screen.getByRole('button', { name: /load more categories/i })).toBeInTheDocument()
+      // only first 3 visible
+      expect(screen.getByText('Cat 1')).toBeInTheDocument()
+      expect(screen.queryByText('Cat 4')).not.toBeInTheDocument()
+    })
+
+    it('clicking Load more reveals more categories', () => {
+      const cats: CategoryInfo[] = Array.from({ length: 5 }, (_, i) => ({
+        name: `Cat ${i + 1}`,
+        slug: `cat-${i + 1}`,
+        count: i + 1,
+        featuredImage: '/image.jpg',
+      }))
+      render(<ArticleCategoryGrid categories={cats} pageSize={3} />)
+      fireEvent.click(screen.getByRole('button', { name: /load more categories/i }))
+      expect(screen.getByText('Cat 4')).toBeInTheDocument()
+      expect(screen.getByText('Cat 5')).toBeInTheDocument()
+      // button disappears when all are shown
+      expect(
+        screen.queryByRole('button', { name: /load more categories/i })
+      ).not.toBeInTheDocument()
+    })
+  })
 })

package/src/__tests__/ArticleDetailHero.test.tsx

@@ -62,9 +62,15 @@ describe('ArticleDetailHero', () => {
     })
   })
 
-  describe('category rendering as spans (no categoryBasePath)', () => {
-    it('renders category tags as spans when categoryBasePath is not provided', () => {
+  describe('category rendering with default categoryBasePath', () => {
+    it('renders category tags as links to /articles/category/[slug] when categoryBasePath is not provided', () => {
       render(<ArticleDetailHero article={articleWith3Categories} />)
+      const politicsLink = screen.getByRole('link', { name: 'Politics' })
+      expect(politicsLink).toHaveAttribute('href', '/articles/category/politics')
+    })
+
+    it('renders category tags as spans when categoryBasePath is empty string', () => {
+      render(<ArticleDetailHero article={articleWith3Categories} categoryBasePath="" />)
       const links = screen.queryAllByRole('link')
       const categoryLinks = links.filter((el) =>
         ['Politics', 'Elections', 'Voting'].includes(el.textContent ?? '')
@@ -84,19 +90,45 @@ describe('ArticleDetailHero', () => {
 
     it('caps linked category tags at 4 when article has more than 4 categories', () => {
       render(
-        <ArticleDetailHero
-          article={articleWith6Categories}
-          categoryBasePath="/articles/category"
-        />
+        <ArticleDetailHero article={articleWith6Categories} categoryBasePath="/articles/category" />
       )
-      const links = screen.getAllByRole('link').filter((el) =>
-        ['Politics', 'Elections', 'Voting', 'Campaigns', 'Democracy', 'Civic Engagement'].includes(
-          el.textContent ?? ''
+      const links = screen
+        .getAllByRole('link')
+        .filter((el) =>
+          [
+            'Politics',
+            'Elections',
+            'Voting',
+            'Campaigns',
+            'Democracy',
+            'Civic Engagement',
+          ].includes(el.textContent ?? '')
         )
-      )
       expect(links).toHaveLength(4)
       expect(screen.queryByRole('link', { name: 'Democracy' })).not.toBeInTheDocument()
       expect(screen.queryByRole('link', { name: 'Civic Engagement' })).not.toBeInTheDocument()
     })
   })
+
+  describe('showDate prop', () => {
+    const articleWithDate: Article = {
+      ...baseArticle,
+      date: '2024-01-15',
+    }
+
+    it('does not render the date when showDate is omitted (default behavior)', () => {
+      render(<ArticleDetailHero article={articleWithDate} />)
+      expect(screen.queryByText('2024-01-15')).not.toBeInTheDocument()
+    })
+
+    it('does not render the date when showDate={false}', () => {
+      render(<ArticleDetailHero article={articleWithDate} showDate={false} />)
+      expect(screen.queryByText('2024-01-15')).not.toBeInTheDocument()
+    })
+
+    it('renders the date when showDate={true} and article.date is set', () => {
+      render(<ArticleDetailHero article={articleWithDate} showDate={true} />)
+      expect(screen.getByText('2024-01-15')).toBeInTheDocument()
+    })
+  })
 })

package/src/__tests__/ArticleNavigation.test.tsx

@@ -0,0 +1,127 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { ArticleNavigation } from '../ArticleNavigation'
+
+jest.mock('next/link', () => ({
+  __esModule: true,
+  default: ({ href, children }: { href: string; children: React.ReactNode }) => (
+    <a href={href}>{children}</a>
+  ),
+}))
+
+const basePath = '/articles'
+
+const prevArticle = { slug: 'previous-article', title: 'Previous Article Title' }
+const nextArticle = { slug: 'next-article', title: 'Next Article Title' }
+
+describe('ArticleNavigation', () => {
+  describe('null rendering', () => {
+    it('renders nothing when both previous and next are null', () => {
+      const { container } = render(
+        <ArticleNavigation previous={null} next={null} basePath={basePath} />
+      )
+      expect(container.firstChild).toBeNull()
+    })
+  })
+
+  describe('previous link', () => {
+    it('renders the previous link with the correct href', () => {
+      render(<ArticleNavigation previous={prevArticle} next={null} basePath={basePath} />)
+      const link = screen.getByRole('link', { name: /previous article title/i })
+      expect(link).toHaveAttribute('href', '/articles/previous-article')
+    })
+
+    it('shows the "Previous Article" label', () => {
+      render(<ArticleNavigation previous={prevArticle} next={null} basePath={basePath} />)
+      expect(screen.getByText('Previous Article')).toBeInTheDocument()
+    })
+  })
+
+  describe('next link', () => {
+    it('renders the next link with the correct href', () => {
+      render(<ArticleNavigation previous={null} next={nextArticle} basePath={basePath} />)
+      const link = screen.getByRole('link', { name: /next article title/i })
+      expect(link).toHaveAttribute('href', '/articles/next-article')
+    })
+
+    it('shows the "Next Article" label', () => {
+      render(<ArticleNavigation previous={null} next={nextArticle} basePath={basePath} />)
+      expect(screen.getByText('Next Article')).toBeInTheDocument()
+    })
+  })
+
+  describe('both links', () => {
+    it('renders both previous and next links when both are provided', () => {
+      render(<ArticleNavigation previous={prevArticle} next={nextArticle} basePath={basePath} />)
+      expect(screen.getByRole('link', { name: /previous article title/i })).toHaveAttribute(
+        'href',
+        '/articles/previous-article'
+      )
+      expect(screen.getByRole('link', { name: /next article title/i })).toHaveAttribute(
+        'href',
+        '/articles/next-article'
+      )
+      expect(screen.getByText('Previous Article')).toBeInTheDocument()
+      expect(screen.getByText('Next Article')).toBeInTheDocument()
+    })
+  })
+
+  describe('title truncation', () => {
+    it('truncates titles longer than 60 characters to 60 chars followed by "..."', () => {
+      const longTitle = 'A'.repeat(61)
+      render(
+        <ArticleNavigation
+          previous={{ slug: 'long-prev', title: longTitle }}
+          next={null}
+          basePath={basePath}
+        />
+      )
+      const truncated = 'A'.repeat(60) + '...'
+      expect(screen.getByText(truncated)).toBeInTheDocument()
+    })
+
+    it('does not truncate a title of exactly 60 characters', () => {
+      const exactTitle = 'B'.repeat(60)
+      render(
+        <ArticleNavigation
+          previous={{ slug: 'exact-prev', title: exactTitle }}
+          next={null}
+          basePath={basePath}
+        />
+      )
+      expect(screen.getByText(exactTitle)).toBeInTheDocument()
+      expect(screen.queryByText(exactTitle + '...')).not.toBeInTheDocument()
+    })
+
+    it('does not truncate a title shorter than 60 characters', () => {
+      const shortTitle = 'Short Title'
+      render(
+        <ArticleNavigation
+          previous={{ slug: 'short-prev', title: shortTitle }}
+          next={null}
+          basePath={basePath}
+        />
+      )
+      expect(screen.getByText('Short Title')).toBeInTheDocument()
+    })
+  })
+
+  describe('basePath handling', () => {
+    it('uses a custom basePath in generated hrefs', () => {
+      render(
+        <ArticleNavigation previous={prevArticle} next={nextArticle} basePath="/news/articles" />
+      )
+      expect(screen.getByRole('link', { name: /previous article title/i })).toHaveAttribute(
+        'href',
+        '/news/articles/previous-article'
+      )
+      expect(screen.getByRole('link', { name: /next article title/i })).toHaveAttribute(
+        'href',
+        '/news/articles/next-article'
+      )
+    })
+  })
+})

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