@nextsparkjs/theme-blog 0.1.0-beta.1

package/components/public/BlogFooter.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+/**
+ * Blog Footer Component
+ *
+ * Simple, clean footer with copyright, social links, and attribution.
+ */
+
+import Link from 'next/link'
+import { Github, Twitter, Linkedin, Mail, Heart } from 'lucide-react'
+
+interface SocialLink {
+  name: string
+  href: string
+  icon: 'github' | 'twitter' | 'linkedin' | 'email'
+}
+
+interface BlogFooterProps {
+  blogTitle?: string
+  authorName?: string
+  socialLinks?: SocialLink[]
+  showNewsletter?: boolean
+}
+
+const iconMap = {
+  github: Github,
+  twitter: Twitter,
+  linkedin: Linkedin,
+  email: Mail
+}
+
+export function BlogFooter({
+  blogTitle = 'My Blog',
+  authorName = 'Author',
+  socialLinks = [],
+  showNewsletter = false
+}: BlogFooterProps) {
+  const currentYear = new Date().getFullYear()
+
+  return (
+    <footer data-cy="blog-footer" className="border-t border-border bg-muted/30">
+      <div className="container mx-auto px-4 py-12">
+        <div data-cy="blog-footer-sections" className="grid gap-8 md:grid-cols-3">
+          {/* About Section */}
+          <div data-cy="blog-footer-about">
+            <h3 data-cy="blog-footer-title" className="font-serif text-lg font-bold mb-3">{blogTitle}</h3>
+            <p data-cy="blog-footer-description" className="text-sm text-muted-foreground leading-relaxed">
+              Thoughts, stories, and ideas about technology, life, and everything in between.
+            </p>
+          </div>
+
+          {/* Quick Links */}
+          <div data-cy="blog-footer-quick-links">
+            <h4 className="font-semibold text-sm uppercase tracking-wider mb-3 text-muted-foreground">
+              Quick Links
+            </h4>
+            <nav data-cy="blog-footer-nav" className="flex flex-col gap-2">
+              <Link
+                href="/"
+                data-cy="blog-footer-link-home"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Home
+              </Link>
+              <Link
+                href="/posts"
+                data-cy="blog-footer-link-posts"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                All Posts
+              </Link>
+              <Link
+                href="/dashboard"
+                data-cy="blog-footer-link-dashboard"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Dashboard
+              </Link>
+            </nav>
+          </div>
+
+          {/* Newsletter or Social */}
+          <div data-cy="blog-footer-connect">
+            {showNewsletter ? (
+              <>
+                <h4 className="font-semibold text-sm uppercase tracking-wider mb-3 text-muted-foreground">
+                  Stay Updated
+                </h4>
+                <p className="text-sm text-muted-foreground mb-3">
+                  Subscribe to get notified about new posts.
+                </p>
+                <form data-cy="blog-footer-newsletter-form" className="flex gap-2" onSubmit={(e) => e.preventDefault()}>
+                  <input
+                    type="email"
+                    data-cy="blog-footer-newsletter-input"
+                    placeholder="your@email.com"
+                    className="flex-1 px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+                  />
+                  <button
+                    type="submit"
+                    data-cy="blog-footer-newsletter-submit"
+                    className="px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+                  >
+                    Subscribe
+                  </button>
+                </form>
+              </>
+            ) : (
+              <>
+                <h4 className="font-semibold text-sm uppercase tracking-wider mb-3 text-muted-foreground">
+                  Connect
+                </h4>
+                {socialLinks.length > 0 ? (
+                  <div data-cy="blog-footer-social-links" className="flex gap-3">
+                    {socialLinks.map((link) => {
+                      const Icon = iconMap[link.icon]
+                      return (
+                        <a
+                          key={link.name}
+                          href={link.href}
+                          data-cy={`blog-footer-social-${link.icon}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors"
+                          aria-label={link.name}
+                        >
+                          <Icon className="h-5 w-5" />
+                        </a>
+                      )
+                    })}
+                  </div>
+                ) : (
+                  <div data-cy="blog-footer-social-links" className="flex gap-3">
+                    <a
+                      href="https://twitter.com"
+                      data-cy="blog-footer-social-twitter"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors"
+                      aria-label="Twitter"
+                    >
+                      <Twitter className="h-5 w-5" />
+                    </a>
+                    <a
+                      href="https://github.com"
+                      data-cy="blog-footer-social-github"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors"
+                      aria-label="GitHub"
+                    >
+                      <Github className="h-5 w-5" />
+                    </a>
+                    <a
+                      href="https://linkedin.com"
+                      data-cy="blog-footer-social-linkedin"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors"
+                      aria-label="LinkedIn"
+                    >
+                      <Linkedin className="h-5 w-5" />
+                    </a>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div data-cy="blog-footer-bottom" className="mt-12 pt-6 border-t border-border flex flex-col md:flex-row items-center justify-between gap-4">
+          <p data-cy="blog-footer-copyright" className="text-sm text-muted-foreground">
+            &copy; {currentYear} {blogTitle}. All rights reserved.
+          </p>
+          <p data-cy="blog-footer-attribution" className="text-sm text-muted-foreground flex items-center gap-1">
+            Made with <Heart className="h-3 w-3 text-destructive fill-destructive" /> by {authorName}
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default BlogFooter

package/components/public/BlogNavbar.tsx

@@ -0,0 +1,201 @@
+'use client'
+
+/**
+ * Blog Navbar Component
+ *
+ * Editorial navigation with blog title, category links, and actions.
+ * Responsive design with mobile hamburger menu.
+ */
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { Menu, X, Moon, Sun, Search } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+
+interface BlogNavbarProps {
+  blogTitle?: string
+  navLinks?: Array<{ name: string; href: string }>
+}
+
+export function BlogNavbar({
+  blogTitle = 'My Blog',
+  navLinks = []
+}: BlogNavbarProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isScrolled, setIsScrolled] = useState(false)
+  const { theme, setTheme, resolvedTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 10)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+  }
+
+  return (
+    <header
+      data-cy="blog-navbar"
+      className={cn(
+        'sticky top-0 z-50 w-full transition-all duration-200',
+        isScrolled
+          ? 'bg-background/95 backdrop-blur-md border-b border-border shadow-sm'
+          : 'bg-background border-b border-border'
+      )}
+    >
+      <div className="container mx-auto px-4">
+        <nav data-cy="blog-navbar-nav" className="flex items-center justify-between h-16">
+          {/* Logo / Blog Title */}
+          <Link
+            href="/"
+            data-cy="blog-navbar-logo"
+            className="font-serif text-xl font-bold text-foreground hover:text-primary transition-colors"
+          >
+            {blogTitle}
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div data-cy="blog-navbar-links" className="hidden md:flex items-center gap-1">
+            <Link
+              href="/"
+              data-cy="blog-navbar-link-home"
+              className="px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors rounded-md hover:bg-muted"
+            >
+              Home
+            </Link>
+            <Link
+              href="/posts"
+              data-cy="blog-navbar-link-posts"
+              className="px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors rounded-md hover:bg-muted"
+            >
+              Posts
+            </Link>
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                data-cy={`blog-navbar-link-${link.name.toLowerCase().replace(/\s+/g, '-')}`}
+                className="px-3 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors rounded-md hover:bg-muted"
+              >
+                {link.name}
+              </Link>
+            ))}
+          </div>
+
+          {/* Actions */}
+          <div data-cy="blog-navbar-actions" className="flex items-center gap-2">
+            {/* Search Toggle */}
+            <Button
+              variant="ghost"
+              size="icon"
+              data-cy="blog-navbar-search"
+              className="hidden md:flex"
+              aria-label="Search"
+            >
+              <Search className="h-4 w-4" />
+            </Button>
+
+            {/* Theme Toggle */}
+            {mounted && (
+              <Button
+                variant="ghost"
+                size="icon"
+                data-cy="blog-navbar-theme-toggle"
+                onClick={toggleTheme}
+                aria-label="Toggle theme"
+              >
+                {resolvedTheme === 'dark' ? (
+                  <Sun className="h-4 w-4" />
+                ) : (
+                  <Moon className="h-4 w-4" />
+                )}
+              </Button>
+            )}
+
+            {/* Dashboard Link */}
+            <Link href="/dashboard" data-cy="blog-navbar-dashboard-link">
+              <Button variant="outline" size="sm" className="hidden md:inline-flex">
+                Dashboard
+              </Button>
+            </Link>
+
+            {/* Mobile Menu Toggle */}
+            <Button
+              variant="ghost"
+              size="icon"
+              data-cy="blog-navbar-mobile-toggle"
+              className="md:hidden"
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+              aria-label="Toggle menu"
+              aria-expanded={isMenuOpen}
+            >
+              {isMenuOpen ? (
+                <X className="h-5 w-5" />
+              ) : (
+                <Menu className="h-5 w-5" />
+              )}
+            </Button>
+          </div>
+        </nav>
+
+        {/* Mobile Menu */}
+        {isMenuOpen && (
+          <div data-cy="blog-navbar-mobile-menu" className="md:hidden border-t border-border py-4">
+            <div className="flex flex-col gap-1">
+              <Link
+                href="/"
+                data-cy="blog-navbar-mobile-link-home"
+                className="px-3 py-2 text-sm font-medium text-foreground hover:bg-muted rounded-md"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Home
+              </Link>
+              <Link
+                href="/posts"
+                data-cy="blog-navbar-mobile-link-posts"
+                className="px-3 py-2 text-sm font-medium text-foreground hover:bg-muted rounded-md"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Posts
+              </Link>
+              {navLinks.map((link) => (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  data-cy={`blog-navbar-mobile-link-${link.name.toLowerCase().replace(/\s+/g, '-')}`}
+                  className="px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted rounded-md"
+                  onClick={() => setIsMenuOpen(false)}
+                >
+                  {link.name}
+                </Link>
+              ))}
+              <hr className="my-2 border-border" />
+              <Link
+                href="/dashboard"
+                data-cy="blog-navbar-mobile-link-dashboard"
+                className="px-3 py-2 text-sm font-medium text-primary hover:bg-muted rounded-md"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Dashboard
+              </Link>
+            </div>
+          </div>
+        )}
+      </div>
+    </header>
+  )
+}
+
+export default BlogNavbar

package/components/public/PostCard.tsx

@@ -0,0 +1,306 @@
+'use client'
+
+/**
+ * Post Card Component
+ *
+ * Blog-style post card with featured image, category badge,
+ * title, excerpt, author info, and reading time.
+ */
+
+import Link from 'next/link'
+import Image from 'next/image'
+import { Calendar, Clock, User } from 'lucide-react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+
+interface PostCardProps {
+  id: string
+  title: string
+  slug: string
+  excerpt?: string | null
+  featuredImage?: string | null
+  category?: string | null
+  categorySlug?: string | null
+  authorName?: string
+  authorUsername?: string
+  authorAvatar?: string | null
+  publishedAt?: string | null
+  readingTime?: number
+  variant?: 'default' | 'featured' | 'compact'
+  className?: string
+}
+
+function formatDate(dateString: string | null | undefined): string {
+  if (!dateString) return 'Draft'
+  const date = new Date(dateString)
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    timeZone: 'UTC'
+  })
+}
+
+export function PostCard({
+  id,
+  title,
+  slug,
+  excerpt,
+  featuredImage,
+  category,
+  categorySlug,
+  authorName = 'Anonymous',
+  authorUsername,
+  authorAvatar,
+  publishedAt,
+  readingTime = 5,
+  variant = 'default',
+  className
+}: PostCardProps) {
+  const postUrl = `/posts/${slug || id}`
+  const authorUrl = authorUsername ? `/author/${authorUsername}` : undefined
+
+  if (variant === 'featured') {
+    return (
+      <article
+        data-cy={`post-card-${id}`}
+        data-cy-variant="featured"
+        className={cn(
+          'group relative overflow-hidden rounded-lg border border-border bg-card transition-all duration-300 hover:shadow-lg',
+          className
+        )}
+      >
+        {/* Featured Image */}
+        <div data-cy={`post-card-image-${id}`} className="aspect-[21/9] relative overflow-hidden">
+          {featuredImage ? (
+            <Image
+              src={featuredImage}
+              alt={title}
+              fill
+              className="object-cover transition-transform duration-500 group-hover:scale-105"
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
+            />
+          ) : (
+            <div className="w-full h-full bg-gradient-to-br from-primary/20 to-primary/5" />
+          )}
+          {/* Gradient Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-background/90 via-background/30 to-transparent" />
+        </div>
+
+        {/* Content */}
+        <div data-cy={`post-card-content-${id}`} className="absolute bottom-0 left-0 right-0 p-6">
+          {category && (
+            <Link
+              href={categorySlug ? `/category/${categorySlug}` : '#'}
+              data-cy={`post-card-category-${id}`}
+              className="inline-block px-3 py-1 text-xs font-semibold rounded-full bg-primary text-primary-foreground mb-3 hover:bg-primary/90 transition-colors"
+            >
+              {category}
+            </Link>
+          )}
+
+          <Link href={postUrl} data-cy={`post-card-title-link-${id}`}>
+            <h2 data-cy={`post-card-title-${id}`} className="font-serif text-2xl md:text-3xl font-bold text-foreground mb-2 line-clamp-2 group-hover:text-primary transition-colors">
+              {title}
+            </h2>
+          </Link>
+
+          {excerpt && (
+            <p data-cy={`post-card-excerpt-${id}`} className="text-muted-foreground line-clamp-2 mb-4">
+              {excerpt}
+            </p>
+          )}
+
+          <div data-cy={`post-card-meta-${id}`} className="flex items-center gap-4 text-sm text-muted-foreground">
+            {authorUrl ? (
+              <Link href={authorUrl} data-cy={`post-card-author-${id}`} className="flex items-center gap-2 hover:text-foreground transition-colors">
+                {authorAvatar ? (
+                  <Image
+                    src={authorAvatar}
+                    alt={authorName}
+                    width={24}
+                    height={24}
+                    className="rounded-full"
+                  />
+                ) : (
+                  <div className="w-6 h-6 rounded-full bg-muted flex items-center justify-center">
+                    <User className="w-3 h-3" />
+                  </div>
+                )}
+                <span>{authorName}</span>
+              </Link>
+            ) : (
+              <div data-cy={`post-card-author-${id}`} className="flex items-center gap-2">
+                {authorAvatar ? (
+                  <Image
+                    src={authorAvatar}
+                    alt={authorName}
+                    width={24}
+                    height={24}
+                    className="rounded-full"
+                  />
+                ) : (
+                  <div className="w-6 h-6 rounded-full bg-muted flex items-center justify-center">
+                    <User className="w-3 h-3" />
+                  </div>
+                )}
+                <span>{authorName}</span>
+              </div>
+            )}
+            <span data-cy={`post-card-date-${id}`} className="flex items-center gap-1">
+              <Calendar className="w-3 h-3" />
+              {formatDate(publishedAt)}
+            </span>
+            <span data-cy={`post-card-reading-time-${id}`} className="flex items-center gap-1">
+              <Clock className="w-3 h-3" />
+              {readingTime} min read
+            </span>
+          </div>
+        </div>
+      </article>
+    )
+  }
+
+  if (variant === 'compact') {
+    return (
+      <article
+        data-cy={`post-card-${id}`}
+        data-cy-variant="compact"
+        className={cn(
+          'group flex gap-4 p-4 rounded-lg border border-border bg-card hover:shadow-md transition-all duration-200',
+          className
+        )}
+      >
+        {/* Thumbnail */}
+        <div data-cy={`post-card-image-${id}`} className="flex-shrink-0 w-24 h-24 relative overflow-hidden rounded-md">
+          {featuredImage ? (
+            <Image
+              src={featuredImage}
+              alt={title}
+              fill
+              className="object-cover"
+              sizes="96px"
+            />
+          ) : (
+            <div className="w-full h-full bg-gradient-to-br from-primary/20 to-primary/5" />
+          )}
+        </div>
+
+        {/* Content */}
+        <div data-cy={`post-card-content-${id}`} className="flex-1 min-w-0">
+          <Link href={postUrl} data-cy={`post-card-title-link-${id}`}>
+            <h3 data-cy={`post-card-title-${id}`} className="font-semibold text-sm line-clamp-2 group-hover:text-primary transition-colors">
+              {title}
+            </h3>
+          </Link>
+          <div data-cy={`post-card-meta-${id}`} className="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
+            <span data-cy={`post-card-date-${id}`}>{formatDate(publishedAt)}</span>
+            <span>·</span>
+            <span data-cy={`post-card-reading-time-${id}`}>{readingTime} min</span>
+          </div>
+        </div>
+      </article>
+    )
+  }
+
+  // Default variant
+  return (
+    <article
+      data-cy={`post-card-${id}`}
+      data-cy-variant="default"
+      className={cn(
+        'group overflow-hidden rounded-lg border border-border bg-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1',
+        className
+      )}
+    >
+      {/* Featured Image */}
+      <div data-cy={`post-card-image-${id}`} className="aspect-[16/10] relative overflow-hidden">
+        {featuredImage ? (
+          <Image
+            src={featuredImage}
+            alt={title}
+            fill
+            className="object-cover transition-transform duration-500 group-hover:scale-105"
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          />
+        ) : (
+          <div className="w-full h-full bg-gradient-to-br from-primary/20 via-primary/10 to-primary/5" />
+        )}
+      </div>
+
+      {/* Content */}
+      <div data-cy={`post-card-content-${id}`} className="p-5">
+        {category && (
+          <Link
+            href={categorySlug ? `/category/${categorySlug}` : '#'}
+            data-cy={`post-card-category-${id}`}
+            className="inline-block px-2 py-0.5 text-xs font-medium rounded bg-primary/10 text-primary mb-3 hover:bg-primary/20 transition-colors"
+          >
+            {category}
+          </Link>
+        )}
+
+        <Link href={postUrl} data-cy={`post-card-title-link-${id}`}>
+          <h3 data-cy={`post-card-title-${id}`} className="font-serif text-lg font-bold text-foreground mb-2 line-clamp-2 group-hover:text-primary transition-colors">
+            {title}
+          </h3>
+        </Link>
+
+        {excerpt && (
+          <p data-cy={`post-card-excerpt-${id}`} className="text-sm text-muted-foreground line-clamp-2 mb-4">
+            {excerpt}
+          </p>
+        )}
+
+        <div data-cy={`post-card-meta-${id}`} className="flex items-center justify-between text-xs text-muted-foreground">
+          {authorUrl ? (
+            <Link href={authorUrl} data-cy={`post-card-author-${id}`} className="flex items-center gap-2 hover:text-foreground transition-colors">
+              {authorAvatar ? (
+                <Image
+                  src={authorAvatar}
+                  alt={authorName}
+                  width={20}
+                  height={20}
+                  className="rounded-full"
+                />
+              ) : (
+                <div className="w-5 h-5 rounded-full bg-muted flex items-center justify-center">
+                  <User className="w-2.5 h-2.5" />
+                </div>
+              )}
+              <span>{authorName}</span>
+            </Link>
+          ) : (
+            <div data-cy={`post-card-author-${id}`} className="flex items-center gap-2">
+              {authorAvatar ? (
+                <Image
+                  src={authorAvatar}
+                  alt={authorName}
+                  width={20}
+                  height={20}
+                  className="rounded-full"
+                />
+              ) : (
+                <div className="w-5 h-5 rounded-full bg-muted flex items-center justify-center">
+                  <User className="w-2.5 h-2.5" />
+                </div>
+              )}
+              <span>{authorName}</span>
+            </div>
+          )}
+          <div className="flex items-center gap-3">
+            <span data-cy={`post-card-date-${id}`} className="flex items-center gap-1">
+              <Calendar className="w-3 h-3" />
+              {formatDate(publishedAt)}
+            </span>
+            <span data-cy={`post-card-reading-time-${id}`} className="flex items-center gap-1">
+              <Clock className="w-3 h-3" />
+              {readingTime} min
+            </span>
+          </div>
+        </div>
+      </div>
+    </article>
+  )
+}
+
+export default PostCard