@nextsparkjs/theme-blog 0.1.0-beta.1

package/components/public/ReadingProgress.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+/**
+ * Reading Progress Component
+ *
+ * Fixed progress bar at the top of the page that tracks
+ * scroll progress through an article.
+ */
+
+import { useState, useEffect } from 'react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+
+interface ReadingProgressProps {
+  className?: string
+  height?: number
+}
+
+export function ReadingProgress({
+  className,
+  height = 3
+}: ReadingProgressProps) {
+  const [progress, setProgress] = useState(0)
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    const calculateProgress = () => {
+      const scrollTop = window.scrollY
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight
+      const scrollPercent = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0
+
+      setProgress(Math.min(100, Math.max(0, scrollPercent)))
+      setIsVisible(scrollTop > 100)
+    }
+
+    // Calculate initial progress
+    calculateProgress()
+
+    // Add scroll listener with passive for better performance
+    window.addEventListener('scroll', calculateProgress, { passive: true })
+
+    return () => {
+      window.removeEventListener('scroll', calculateProgress)
+    }
+  }, [])
+
+  return (
+    <div
+      data-cy="reading-progress"
+      className={cn(
+        'fixed top-0 left-0 right-0 z-[100] transition-opacity duration-300',
+        isVisible ? 'opacity-100' : 'opacity-0',
+        className
+      )}
+      style={{ height: `${height}px` }}
+      role="progressbar"
+      aria-valuenow={Math.round(progress)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label="Reading progress"
+    >
+      <div
+        data-cy="reading-progress-bar"
+        className="h-full bg-primary transition-[width] duration-100 ease-out"
+        style={{ width: `${progress}%` }}
+      />
+    </div>
+  )
+}
+
+export default ReadingProgress

package/components/public/RelatedPosts.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+/**
+ * Related Posts Component
+ *
+ * Displays a horizontal list of related posts from the same category.
+ */
+
+import Link from 'next/link'
+import Image from 'next/image'
+import { Clock } from 'lucide-react'
+
+interface RelatedPost {
+  id: string
+  title: string
+  slug: string
+  featuredImage?: string | null
+  readingTime?: number
+}
+
+interface RelatedPostsProps {
+  posts: RelatedPost[]
+  title?: string
+}
+
+export function RelatedPosts({
+  posts,
+  title = 'Related Articles'
+}: RelatedPostsProps) {
+  if (posts.length === 0) return null
+
+  return (
+    <section data-cy="related-posts" className="py-8">
+      <h2 data-cy="related-posts-title" className="font-serif text-xl font-bold mb-6">{title}</h2>
+
+      <div data-cy="related-posts-grid" className="grid gap-4 md:grid-cols-3">
+        {posts.slice(0, 3).map((post) => (
+          <Link
+            key={post.id}
+            href={`/posts/${post.slug || post.id}`}
+            data-cy={`related-post-${post.id}`}
+            className="group flex flex-col overflow-hidden rounded-lg border border-border bg-card hover:shadow-md transition-all duration-200"
+          >
+            {/* Image */}
+            <div data-cy={`related-post-image-${post.id}`} className="aspect-[16/9] relative overflow-hidden">
+              {post.featuredImage ? (
+                <Image
+                  src={post.featuredImage}
+                  alt={post.title}
+                  fill
+                  className="object-cover transition-transform duration-300 group-hover:scale-105"
+                  sizes="(max-width: 768px) 100vw, 33vw"
+                />
+              ) : (
+                <div className="w-full h-full bg-gradient-to-br from-primary/20 to-primary/5" />
+              )}
+            </div>
+
+            {/* Content */}
+            <div data-cy={`related-post-content-${post.id}`} className="p-4">
+              <h3 data-cy={`related-post-title-${post.id}`} className="font-medium text-sm line-clamp-2 group-hover:text-primary transition-colors">
+                {post.title}
+              </h3>
+              {post.readingTime && (
+                <div data-cy={`related-post-reading-time-${post.id}`} className="flex items-center gap-1 mt-2 text-xs text-muted-foreground">
+                  <Clock className="w-3 h-3" />
+                  <span>{post.readingTime} min read</span>
+                </div>
+              )}
+            </div>
+          </Link>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default RelatedPosts

package/config/app.config.ts

@@ -0,0 +1,200 @@
+/**
+ * Blog Theme - Application Configuration
+ *
+ * Multi-author blog platform with single-user mode.
+ * Each author has their own isolated team but content is aggregated publicly.
+ */
+
+export const APP_CONFIG_OVERRIDES = {
+  // =============================================================================
+  // APPLICATION METADATA
+  // =============================================================================
+  app: {
+    name: 'Blog Platform',
+    version: '2.0.0',
+  },
+
+  // =============================================================================
+  // TEAMS CONFIGURATION - SINGLE USER MODE
+  // =============================================================================
+  /**
+   * Single-user mode:
+   * - No team switching
+   * - No invitations
+   * - No team creation
+   * - Each author has their personal team
+   * - Content aggregates publicly across all authors
+   */
+  teams: {
+    mode: 'single-user' as const,
+    options: {
+      maxTeamsPerUser: 1,
+      maxMembersPerTeam: 1,
+      allowLeaveAllTeams: false,
+    },
+  },
+
+  // =============================================================================
+  // TOPBAR CONFIGURATION
+  // =============================================================================
+  topbar: {
+    features: {
+      quickCreate: true,
+      search: false, // No search in MVP
+      notifications: false,
+      help: false,
+      theme: true,
+      sector7: false,
+      userMenu: true,
+    },
+  },
+
+  // =============================================================================
+  // SETTINGS PAGES CONFIGURATION
+  // =============================================================================
+  settings: {
+    pages: {
+      profile: { enabled: true, order: 1 },
+      billing: { enabled: true, order: 2 }, // Billing enabled for Pro/Enterprise plans
+      apiKeys: { enabled: false },
+      password: { enabled: true, order: 3 },
+      teams: { enabled: false }, // Hidden in single-user mode
+    },
+  },
+
+  // =============================================================================
+  // INTERNATIONALIZATION
+  // =============================================================================
+  i18n: {
+    supportedLocales: ['en', 'es'],
+    defaultLocale: 'en' as const,
+    namespaces: [
+      'common',
+      'dashboard',
+      'settings',
+      'auth',
+      'public',
+      'validation',
+      // Theme specific
+      'posts',
+      'blog',
+    ],
+  },
+
+  // =============================================================================
+  // API CONFIGURATION
+  // =============================================================================
+  api: {
+    cors: {
+      allowedOrigins: {
+        development: [
+          'http://localhost:3000',
+          'http://localhost:5173',
+        ],
+        production: [],
+      },
+    },
+  },
+
+  // =============================================================================
+  // DOCUMENTATION
+  // =============================================================================
+  docs: {
+    enabled: true,
+    public: true,
+    searchEnabled: true,
+    breadcrumbs: true,
+    theme: {
+      enabled: true,
+      open: true,
+      label: "Blog Theme",
+    },
+    plugins: {
+      enabled: false,
+      open: false,
+      label: "Plugins",
+    },
+    core: {
+      enabled: true,
+      open: false,
+      label: "Core",
+    },
+    showPluginsDocsInProd: false,
+  },
+
+  // =============================================================================
+  // SCHEDULED ACTIONS
+  // =============================================================================
+  scheduledActions: {
+    enabled: true,
+    retentionDays: 7,
+    batchSize: 10,
+    defaultTimeout: 30000,
+  },
+
+  // =============================================================================
+  // MOBILE NAVIGATION
+  // =============================================================================
+  mobileNav: {
+    items: [
+      {
+        id: 'home',
+        labelKey: 'common.mobileNav.home',
+        href: '/dashboard',
+        icon: 'Home',
+        enabled: true,
+      },
+      {
+        id: 'posts',
+        labelKey: 'posts.title',
+        href: '/dashboard/posts',
+        icon: 'FileText',
+        enabled: true,
+      },
+      {
+        id: 'create',
+        labelKey: 'common.mobileNav.create',
+        icon: 'Plus',
+        isCentral: true,
+        action: 'quickCreate',
+        enabled: true,
+      },
+      {
+        id: 'settings',
+        labelKey: 'common.mobileNav.settings',
+        href: '/dashboard/settings',
+        icon: 'Settings',
+        enabled: true,
+      },
+      {
+        id: 'view-blog',
+        labelKey: 'blog.viewBlog',
+        href: '/',
+        icon: 'ExternalLink',
+        enabled: true,
+      },
+    ],
+    moreSheetItems: [
+      {
+        id: 'profile',
+        labelKey: 'common.navigation.profile',
+        href: '/dashboard/settings/profile',
+        icon: 'User',
+        enabled: true,
+      },
+      {
+        id: 'export',
+        labelKey: 'blog.export',
+        href: '/dashboard/settings/export',
+        icon: 'Download',
+        enabled: true,
+      },
+    ],
+  },
+
+  // =============================================================================
+  // DEV KEYRING - MOVED TO dev.config.ts
+  // =============================================================================
+  // DevKeyring configuration has been moved to config/dev.config.ts
+  // This separates development-only settings from production configuration.
+}

package/config/billing.config.ts

@@ -0,0 +1,146 @@
+/**
+ * Billing Configuration - Blog Theme
+ *
+ * Defines plans, features, limits, and action mappings for the Blog theme.
+ * Customized for content publishing and blogging.
+ */
+
+import type { BillingConfig } from '@nextsparkjs/core/lib/billing/config-types'
+
+export const billingConfig: BillingConfig = {
+  provider: 'stripe',
+  currency: 'usd',
+  defaultPlan: 'free',
+
+  // ===========================================
+  // FEATURE DEFINITIONS (Blog-specific)
+  // ===========================================
+  features: {
+    basic_analytics: {
+      name: 'billing.features.basic_analytics',
+      description: 'billing.features.basic_analytics_description',
+    },
+    custom_domain: {
+      name: 'billing.features.custom_domain',
+      description: 'billing.features.custom_domain_description',
+    },
+    advanced_seo: {
+      name: 'billing.features.advanced_seo',
+      description: 'billing.features.advanced_seo_description',
+    },
+    priority_support: {
+      name: 'billing.features.priority_support',
+      description: 'billing.features.priority_support_description',
+    },
+  },
+
+  // ===========================================
+  // LIMIT DEFINITIONS (Blog-specific)
+  // ===========================================
+  limits: {
+    posts: {
+      name: 'billing.limits.posts',
+      unit: 'count',
+      resetPeriod: 'never',
+    },
+    monthly_views: {
+      name: 'billing.limits.monthly_views',
+      unit: 'count',
+      resetPeriod: 'monthly',
+    },
+    storage_gb: {
+      name: 'billing.limits.storage',
+      unit: 'bytes',
+      resetPeriod: 'never',
+    },
+    authors: {
+      name: 'billing.limits.authors',
+      unit: 'count',
+      resetPeriod: 'never',
+    },
+  },
+
+  // ===========================================
+  // PLAN DEFINITIONS (Blog-optimized)
+  // ===========================================
+  plans: [
+    {
+      slug: 'free',
+      name: 'billing.plans.free.name',
+      description: 'billing.plans.free.description',
+      type: 'free',
+      visibility: 'public',
+      price: { monthly: 0, yearly: 0 },
+      trialDays: 0,
+      features: ['basic_analytics'],
+      limits: {
+        posts: 10,
+        monthly_views: 10000,
+        storage_gb: 1,
+        authors: 1,
+      },
+      stripePriceIdMonthly: null,
+      stripePriceIdYearly: null,
+    },
+    {
+      slug: 'pro',
+      name: 'billing.plans.pro.name',
+      description: 'billing.plans.pro.description',
+      type: 'paid',
+      visibility: 'public',
+      price: {
+        monthly: 2900, // $29.00 - Same as default theme
+        yearly: 29000, // $290.00 (16% savings)
+      },
+      trialDays: 14,
+      features: ['basic_analytics', 'custom_domain', 'advanced_seo'],
+      limits: {
+        posts: -1, // Unlimited posts
+        monthly_views: 100000,
+        storage_gb: 10,
+        authors: 5,
+      },
+      // Configure these in Stripe Dashboard
+      stripePriceIdMonthly: 'price_blog_pro_monthly',
+      stripePriceIdYearly: 'price_blog_pro_yearly',
+    },
+    {
+      slug: 'enterprise',
+      name: 'billing.plans.enterprise.name',
+      description: 'billing.plans.enterprise.description',
+      type: 'enterprise',
+      visibility: 'hidden',
+      trialDays: 30,
+      features: ['*'], // All features
+      limits: {
+        posts: -1, // Unlimited
+        monthly_views: -1,
+        storage_gb: -1,
+        authors: -1,
+      },
+      stripePriceIdMonthly: null,
+      stripePriceIdYearly: null,
+    },
+  ],
+
+  // ===========================================
+  // ACTION MAPPINGS (Blog-specific)
+  // ===========================================
+  actionMappings: {
+    permissions: {
+      'team.billing.manage': 'team.billing.manage',
+    },
+
+    features: {
+      'domain.customize': 'custom_domain',
+      'seo.advanced': 'advanced_seo',
+      'support.priority_access': 'priority_support',
+    },
+
+    limits: {
+      'posts.create': 'posts',
+      'files.upload': 'storage_gb',
+      'authors.invite': 'authors',
+    },
+  },
+}