@fullstackdatasolutions/articles 0.2.1 → 0.4.2

package/src/ArticleDetailHero.tsx

@@ -0,0 +1,122 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import { Calendar, Clock, User } from 'lucide-react'
+import type { Article } from './articleTypes'
+
+type ArticleDetailHeroProps = Readonly<{
+  article: Article
+  categoryBasePath?: string
+  showDate?: boolean
+}>
+
+function toSlug(cat: string): string {
+  return cat
+    .toLowerCase()
+    .replaceAll(/\s+/g, '-')
+    .replaceAll(/[^a-z0-9-]/g, '')
+}
+
+export function ArticleDetailHero({
+  article,
+  categoryBasePath = '/articles/category',
+  showDate = false,
+}: ArticleDetailHeroProps) {
+  return (
+    <section
+      style={{
+        position: 'relative',
+        height: '18rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+      }}
+    >
+      <Image
+        src={article.featuredImage}
+        alt={article.title}
+        fill
+        sizes="100vw"
+        className="object-cover"
+        style={{ objectFit: 'cover' }}
+        priority
+      />
+      <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',
+          maxWidth: '56rem',
+          margin: '0 auto',
+          width: '100%',
+        }}
+      >
+        {article.categories && article.categories.length > 0 && (
+          <div
+            style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              justifyContent: 'center',
+              gap: '0.5rem',
+              marginBottom: '1rem',
+            }}
+          >
+            {article.categories.slice(0, 4).map((cat) =>
+              categoryBasePath ? (
+                <Link
+                  key={cat}
+                  href={`${categoryBasePath}/${toSlug(cat)}`}
+                  className="inline-block bg-white/20 text-white text-sm font-medium px-3 py-1 rounded-full hover:bg-white/30 transition-colors"
+                >
+                  {cat}
+                </Link>
+              ) : (
+                <span
+                  key={cat}
+                  className="inline-block bg-white/20 text-white text-sm font-medium px-3 py-1 rounded-full"
+                >
+                  {cat}
+                </span>
+              )
+            )}
+          </div>
+        )}
+        <h1 className="text-4xl md:text-5xl font-bold mb-4">{article.title}</h1>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '1.5rem',
+            fontSize: '0.875rem',
+            color: 'rgba(255,255,255,0.8)',
+          }}
+        >
+          {showDate && article.date && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+              <Calendar className="h-4 w-4" />
+              <span>{article.date}</span>
+            </div>
+          )}
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <Clock className="h-4 w-4" />
+            <span>{article.readTime}</span>
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <User className="h-4 w-4" />
+            <span>By {article.author}</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/ArticleNavigation.tsx

@@ -0,0 +1,56 @@
+import Link from 'next/link'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+interface ArticleNavigationProps {
+  readonly previous: { slug: string; title: string } | null
+  readonly next: { slug: string; title: string } | null
+  readonly basePath: string
+}
+
+function truncateTitle(title: string, maxLength = 60): string {
+  return title.length > maxLength ? `${title.substring(0, maxLength)}...` : title
+}
+
+export function ArticleNavigation({ previous, next, basePath }: ArticleNavigationProps) {
+  if (!previous && !next) return null
+
+  return (
+    <nav className="mt-12 pt-8 border-t border-border" aria-label="Article navigation">
+      <div className="flex justify-between gap-4">
+        <div className="flex-1 min-w-0">
+          {previous && (
+            <Link
+              href={`${basePath}/${previous.slug}`}
+              className="group flex items-center gap-3 p-4 rounded-lg border border-border hover:border-primary/20 hover:bg-muted/50 transition-colors"
+            >
+              <ChevronLeft className="h-5 w-5 text-muted-foreground group-hover:text-primary shrink-0" />
+              <div className="min-w-0 flex-1">
+                <div className="text-sm text-muted-foreground mb-1">Previous Article</div>
+                <div className="font-medium text-foreground truncate" title={previous.title}>
+                  {truncateTitle(previous.title)}
+                </div>
+              </div>
+            </Link>
+          )}
+        </div>
+
+        <div className="flex-1 min-w-0">
+          {next && (
+            <Link
+              href={`${basePath}/${next.slug}`}
+              className="group flex items-center justify-end gap-3 p-4 rounded-lg border border-border hover:border-primary/20 hover:bg-muted/50 transition-colors"
+            >
+              <div className="min-w-0 flex-1 text-right">
+                <div className="text-sm text-muted-foreground mb-1">Next Article</div>
+                <div className="font-medium text-foreground truncate" title={next.title}>
+                  {truncateTitle(next.title)}
+                </div>
+              </div>
+              <ChevronRight className="h-5 w-5 text-muted-foreground group-hover:text-primary shrink-0" />
+            </Link>
+          )}
+        </div>
+      </div>
+    </nav>
+  )
+}

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'
 
@@ -50,6 +50,12 @@ describe('ArticleCategoryGrid', () => {
     expect(screen.getByText('Browse by Category')).toBeInTheDocument()
   })
 
+  it('grid container has responsive layout classes matching LatestArticles', () => {
+    const { container } = render(<ArticleCategoryGrid categories={mockCategories} />)
+    const grid = container.querySelector(String.raw`.grid.md\:grid-cols-2.lg\:grid-cols-3.gap-6`)
+    expect(grid).toBeInTheDocument()
+  })
+
   it('renders a card for each category', () => {
     render(<ArticleCategoryGrid categories={mockCategories} />)
     expect(screen.getByText('Campaigns')).toBeInTheDocument()
@@ -95,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

@@ -0,0 +1,134 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import type { Article } from '../articleTypes'
+import { ArticleDetailHero } from '../ArticleDetailHero'
+
+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: (props: React.ComponentProps<'img'>) => <img alt="test" {...props} />,
+}))
+
+const baseArticle: Article = {
+  slug: 'test-article',
+  title: 'Test Article Title',
+  excerpt: 'Test excerpt',
+  author: 'Jane Doe',
+  category: 'Politics',
+  categories: [],
+  readTime: '5 min read',
+  featuredImage: '/images/test.jpg',
+}
+
+const articleWith6Categories: Article = {
+  ...baseArticle,
+  categories: ['Politics', 'Elections', 'Voting', 'Campaigns', 'Democracy', 'Civic Engagement'],
+}
+
+const articleWith3Categories: Article = {
+  ...baseArticle,
+  categories: ['Politics', 'Elections', 'Voting'],
+}
+
+describe('ArticleDetailHero', () => {
+  describe('category cap at 4', () => {
+    it('renders at most 4 category tags when the article has more than 4 categories', () => {
+      render(<ArticleDetailHero article={articleWith6Categories} />)
+      const rendered = [
+        screen.queryByText('Politics'),
+        screen.queryByText('Elections'),
+        screen.queryByText('Voting'),
+        screen.queryByText('Campaigns'),
+      ]
+      rendered.forEach((el) => expect(el).toBeInTheDocument())
+      expect(screen.queryByText('Democracy')).not.toBeInTheDocument()
+      expect(screen.queryByText('Civic Engagement')).not.toBeInTheDocument()
+    })
+
+    it('renders all categories when the article has 4 or fewer categories', () => {
+      render(<ArticleDetailHero article={articleWith3Categories} />)
+      expect(screen.getByText('Politics')).toBeInTheDocument()
+      expect(screen.getByText('Elections')).toBeInTheDocument()
+      expect(screen.getByText('Voting')).toBeInTheDocument()
+    })
+  })
+
+  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 ?? '')
+      )
+      expect(categoryLinks).toHaveLength(0)
+    })
+  })
+
+  describe('category rendering as links (with categoryBasePath)', () => {
+    it('renders category tags as links when categoryBasePath is provided', () => {
+      render(
+        <ArticleDetailHero article={articleWith3Categories} categoryBasePath="/articles/category" />
+      )
+      const politicsLink = screen.getByRole('link', { name: 'Politics' })
+      expect(politicsLink).toHaveAttribute('href', '/articles/category/politics')
+    })
+
+    it('caps linked category tags at 4 when article has more than 4 categories', () => {
+      render(
+        <ArticleDetailHero article={articleWith6Categories} categoryBasePath="/articles/category" />
+      )
+      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'
+      )
+    })
+  })
+})