@nextsparkjs/core 0.1.0-beta.1 → 0.1.0-beta.2

package/templates/features/blog/blocks/post-content/component.tsx

@@ -0,0 +1,197 @@
+import React from 'react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { buildSectionClasses } from '@nextsparkjs/core/types/blocks'
+import { sel } from '../../lib/selectors'
+import type { PostContentBlockProps } from './schema'
+
+/**
+ * Post Content Block Component
+ *
+ * Beautiful editorial typography optimized for long-form reading.
+ * Inspired by Medium, The New York Times, and other premium publishers.
+ *
+ * Props from 3-tab structure:
+ * - Content: title, content (rich-text article body), cta
+ * - Design: backgroundColor, drop cap, typography, dividers
+ * - Advanced: className, id
+ *
+ * Features:
+ * - Optimal reading width (680-900px)
+ * - Beautiful line height (1.7-1.8) for readability
+ * - Optional decorative drop cap
+ * - Configurable typography scale
+ * - Section dividers for visual breaks
+ */
+export function PostContentBlock({
+  // Base content props
+  title,
+  content,
+  cta,
+  // Base design props
+  backgroundColor,
+  // Post-content-specific design
+  showDropCap = false,
+  dropCapStyle = 'serif',
+  maxWidth = 'narrow',
+  fontSize = 'medium',
+  lineHeight = 'relaxed',
+  paragraphSpacing = 'normal',
+  showDividers = false,
+  dividerStyle = 'line',
+  // Base advanced props
+  className,
+  id,
+}: PostContentBlockProps) {
+  // Max width classes for optimal reading
+  const maxWidthClasses: Record<string, string> = {
+    narrow: 'max-w-[680px]', // Optimal for reading
+    medium: 'max-w-[768px]',
+    wide: 'max-w-[900px]',
+  }
+
+  // Font size classes
+  const fontSizeClasses: Record<string, string> = {
+    small: 'text-base', // 16px
+    medium: 'text-lg', // 18px
+    large: 'text-xl', // 20px
+  }
+
+  // Line height classes
+  const lineHeightClasses: Record<string, string> = {
+    compact: 'leading-relaxed', // 1.6
+    normal: 'leading-loose', // 1.7
+    relaxed: 'leading-[1.8]', // 1.8
+  }
+
+  // Paragraph spacing classes
+  const paragraphSpacingClasses: Record<string, string> = {
+    tight: '[&_p]:mb-4',
+    normal: '[&_p]:mb-6',
+    loose: '[&_p]:mb-8',
+  }
+
+  // Drop cap style classes
+  const dropCapClasses: Record<string, string> = {
+    serif: 'font-serif',
+    'sans-serif': 'font-sans',
+    decorative: 'font-serif italic',
+  }
+
+  // Build section classes with background
+  const sectionClasses = buildSectionClasses(
+    'py-16 px-4 md:py-24',
+    { backgroundColor, className }
+  )
+
+  // Drop cap CSS (applied via first-letter pseudo-element)
+  const contentWithDropCap = showDropCap
+    ? `[&>p:first-of-type]:first-letter:float-left [&>p:first-of-type]:first-letter:text-7xl [&>p:first-of-type]:first-letter:font-bold [&>p:first-of-type]:first-letter:mr-3 [&>p:first-of-type]:first-letter:mt-1 [&>p:first-of-type]:first-letter:leading-none [&>p:first-of-type]:first-letter:${dropCapClasses[dropCapStyle]}`
+    : ''
+
+  // Divider component
+  const Divider = () => {
+    if (!showDividers) return null
+
+    const dividerContent: Record<string, React.ReactNode> = {
+      line: <hr className="border-t border-gray-300 dark:border-gray-700" />,
+      dots: (
+        <div className="text-center text-gray-400 dark:text-gray-600 text-2xl tracking-[0.5em]">
+          •••
+        </div>
+      ),
+      asterisks: (
+        <div className="text-center text-gray-400 dark:text-gray-600 text-xl tracking-widest">
+          * * *
+        </div>
+      ),
+    }
+
+    return (
+      <div className="my-12" data-cy={sel('blocks.postContent.divider')}>
+        {dividerContent[dividerStyle]}
+      </div>
+    )
+  }
+
+  return (
+    <section id={id} className={sectionClasses} data-cy={sel('blocks.postContent.container')}>
+      <div className="container mx-auto">
+        {/* Optional Section Title */}
+        {title && (
+          <div className={cn('mb-12 text-center', maxWidthClasses[maxWidth], 'mx-auto')}>
+            <h2 className="text-4xl font-bold md:text-5xl lg:text-6xl tracking-tight">
+              {title}
+            </h2>
+          </div>
+        )}
+
+        {/* Rich Text Article Content - Editorial Typography */}
+        <article
+          className={cn(
+            // Base typography
+            'prose prose-lg dark:prose-invert',
+            // Max width for optimal reading
+            maxWidthClasses[maxWidth],
+            'mx-auto',
+            // Font size
+            fontSizeClasses[fontSize],
+            // Line height
+            lineHeightClasses[lineHeight],
+            // Paragraph spacing
+            paragraphSpacingClasses[paragraphSpacing],
+            // Drop cap
+            contentWithDropCap,
+            // Enhanced prose styling for editorial content
+            'prose-headings:font-bold prose-headings:tracking-tight',
+            'prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6',
+            'prose-h3:text-2xl prose-h3:mt-10 prose-h3:mb-4',
+            'prose-h4:text-xl prose-h4:mt-8 prose-h4:mb-3',
+            // Links
+            'prose-a:text-primary prose-a:no-underline prose-a:font-medium hover:prose-a:underline',
+            // Blockquotes (pull quotes)
+            'prose-blockquote:border-l-4 prose-blockquote:border-primary',
+            'prose-blockquote:pl-6 prose-blockquote:italic',
+            'prose-blockquote:text-xl prose-blockquote:leading-relaxed',
+            'prose-blockquote:my-8',
+            // Lists
+            'prose-ul:my-6 prose-ol:my-6',
+            'prose-li:my-2',
+            // Images
+            'prose-img:rounded-lg prose-img:shadow-lg',
+            'prose-img:my-8',
+            // Code
+            'prose-code:bg-gray-100 dark:prose-code:bg-gray-800',
+            'prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded',
+            'prose-code:text-sm',
+            // Pre/code blocks
+            'prose-pre:bg-gray-900 prose-pre:text-gray-100',
+            'prose-pre:rounded-lg prose-pre:my-6',
+            // Strong/bold
+            'prose-strong:font-semibold prose-strong:text-gray-900 dark:prose-strong:text-gray-100',
+            // Em/italic
+            'prose-em:italic'
+          )}
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+
+        {/* Optional Divider after content */}
+        {showDividers && <Divider />}
+
+        {/* Optional CTA */}
+        {cta && (
+          <div className={cn('mt-12 text-center', maxWidthClasses[maxWidth], 'mx-auto')}>
+            <a
+              href={cta.link}
+              target={cta.target}
+              rel={cta.target === '_blank' ? 'noopener noreferrer' : undefined}
+              className="inline-flex items-center justify-center rounded-md bg-primary px-8 py-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg"
+              data-cy={sel('blocks.postContent.cta')}
+            >
+              {cta.text}
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/templates/features/blog/blocks/post-content/config.ts

@@ -0,0 +1,11 @@
+import type { BlockConfig } from '@nextsparkjs/core/types/blocks'
+
+export const config: Omit<BlockConfig, 'schema' | 'fieldDefinitions' | 'Component' | 'examples'> = {
+  slug: 'post-content',
+  name: 'Post Content',
+  description: 'A rich text content block designed for long-form blog posts with editorial styling similar to Medium. Features beautiful typography, proper spacing, and optional elements like drop caps, pull quotes, and images.',
+  category: 'content',
+  icon: 'FileText',
+  thumbnail: '/theme/blocks/post-content/thumbnail.png',
+  scope: ['posts']
+}

package/templates/features/blog/blocks/post-content/examples.ts

@@ -0,0 +1,33 @@
+import type { BlockExample } from '@nextsparkjs/core/types/blocks'
+
+export const examples: BlockExample[] = [
+  {
+    name: 'Default',
+    description: 'Standard blog post content',
+    props: {
+      content: `
+        <h2>Introduction</h2>
+        <p>This is a sample blog post demonstrating the post content block. It supports rich text formatting including headings, paragraphs, lists, and more.</p>
+
+        <h3>Key Features</h3>
+        <ul>
+          <li>Rich text editing with markdown support</li>
+          <li>Automatic table of contents generation</li>
+          <li>Code syntax highlighting</li>
+          <li>Image optimization</li>
+        </ul>
+
+        <h3>Getting Started</h3>
+        <p>To use this block, simply add it to your page and start writing. The editor supports all standard formatting options and will automatically handle styling to match your theme.</p>
+
+        <blockquote>
+          <p>"This platform has transformed how we create and manage content. The simplicity is unmatched." - Happy Customer</p>
+        </blockquote>
+
+        <p>Learn more by exploring our <a href="/docs">documentation</a> or reaching out to our support team.</p>
+      `,
+      backgroundColor: 'white',
+      maxWidth: '4xl',
+    },
+  },
+]

package/templates/features/blog/blocks/post-content/fields.ts

@@ -0,0 +1,165 @@
+import type { FieldDefinition } from '@nextsparkjs/core/types/blocks'
+import {
+  baseContentFields,
+  baseDesignFields,
+  baseAdvancedFields,
+} from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Post Content Block Field Definitions
+ *
+ * Organized into 3 tabs:
+ * - Content: title, cta (from base) + content (rich-text, replaces base content)
+ * - Design: backgroundColor (from base) + editorial typography options
+ * - Advanced: className, id (from base)
+ *
+ * Note: The `content` field is overridden with a rich-text version for editorial content
+ */
+
+// Filter out base content field (we'll replace it with rich-text version)
+const baseContentFieldsWithoutContent = baseContentFields.filter(
+  (field) => field.name !== 'content'
+)
+
+// Post-content-specific content fields (rich-text content)
+const postContentFields: FieldDefinition[] = [
+  {
+    name: 'content',
+    label: 'Article Content',
+    type: 'rich-text',
+    tab: 'content',
+    required: true,
+    placeholder: 'Write your article content here...',
+    helpText: 'Main article body with rich text formatting support',
+  },
+]
+
+// Post-content-specific design fields (editorial styling)
+const postDesignFields: FieldDefinition[] = [
+  // Drop cap section
+  {
+    name: 'showDropCap',
+    label: 'Show Drop Cap',
+    type: 'checkbox',
+    tab: 'design',
+    required: false,
+    default: false,
+    helpText: 'Display a decorative large first letter',
+  },
+  {
+    name: 'dropCapStyle',
+    label: 'Drop Cap Style',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'serif',
+    helpText: 'Visual style for the drop cap',
+    options: [
+      { label: 'Serif (Classic)', value: 'serif' },
+      { label: 'Sans-Serif (Modern)', value: 'sans-serif' },
+      { label: 'Decorative', value: 'decorative' },
+    ],
+  },
+
+  // Typography section
+  {
+    name: 'maxWidth',
+    label: 'Reading Width',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'narrow',
+    helpText: 'Optimal reading width for long-form content',
+    options: [
+      { label: 'Narrow (680px) - Optimal for reading', value: 'narrow' },
+      { label: 'Medium (768px)', value: 'medium' },
+      { label: 'Wide (900px)', value: 'wide' },
+    ],
+  },
+  {
+    name: 'fontSize',
+    label: 'Base Font Size',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'medium',
+    helpText: 'Base font size for article text',
+    options: [
+      { label: 'Small (16px)', value: 'small' },
+      { label: 'Medium (18px) - Recommended', value: 'medium' },
+      { label: 'Large (20px)', value: 'large' },
+    ],
+  },
+  {
+    name: 'lineHeight',
+    label: 'Line Spacing',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'relaxed',
+    helpText: 'Vertical spacing between lines',
+    options: [
+      { label: 'Compact (1.6)', value: 'compact' },
+      { label: 'Normal (1.7)', value: 'normal' },
+      { label: 'Relaxed (1.8) - Recommended', value: 'relaxed' },
+    ],
+  },
+  {
+    name: 'paragraphSpacing',
+    label: 'Paragraph Spacing',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'normal',
+    helpText: 'Vertical spacing between paragraphs',
+    options: [
+      { label: 'Tight', value: 'tight' },
+      { label: 'Normal', value: 'normal' },
+      { label: 'Loose', value: 'loose' },
+    ],
+  },
+
+  // Dividers section
+  {
+    name: 'showDividers',
+    label: 'Show Section Dividers',
+    type: 'checkbox',
+    tab: 'design',
+    required: false,
+    default: false,
+    helpText: 'Display subtle dividers between content sections',
+  },
+  {
+    name: 'dividerStyle',
+    label: 'Divider Style',
+    type: 'select',
+    tab: 'design',
+    required: false,
+    default: 'line',
+    helpText: 'Visual style for section dividers',
+    options: [
+      { label: 'Line', value: 'line' },
+      { label: 'Dots (•••)', value: 'dots' },
+      { label: 'Asterisks (***)', value: 'asterisks' },
+    ],
+  },
+]
+
+/**
+ * Complete field definitions organized by tab
+ */
+export const fieldDefinitions: FieldDefinition[] = [
+  // Content tab: base fields (without content) + rich-text content
+  ...baseContentFieldsWithoutContent,
+  ...postContentFields,
+
+  // Design tab: base fields + editorial-specific
+  ...baseDesignFields,
+  ...postDesignFields,
+
+  // Advanced tab: base fields only (ALWAYS last)
+  ...baseAdvancedFields,
+]
+
+// Alias for compatibility
+export const fields = fieldDefinitions

package/templates/features/blog/blocks/post-content/index.ts

@@ -0,0 +1,4 @@
+export { config } from './config'
+export { fieldDefinitions, fields } from './fields'
+export { schema, type PostContentBlockProps } from './schema'
+export { PostContentBlock } from './component'

package/templates/features/blog/blocks/post-content/schema.ts

@@ -0,0 +1,46 @@
+import { z } from 'zod'
+import { baseBlockSchema } from '@nextsparkjs/core/types/blocks'
+
+/**
+ * Post Content Block Schema
+ *
+ * Extends base schema with editorial-focused fields:
+ * - content: Main article content (overrides base content with required)
+ * - showDropCap: Display decorative drop cap on first letter
+ * - dropCapStyle: Style variant for the drop cap
+ * - maxWidth: Reading width control for optimal typography
+ * - fontSize: Base font size for content
+ * - lineHeight: Line spacing for readability
+ * - paragraphSpacing: Vertical spacing between paragraphs
+ * - showDividers: Show subtle section dividers
+ * - dividerStyle: Visual style for dividers
+ *
+ * Note: Uses base schema title, cta, backgroundColor, className, id
+ * The `content` field is overridden to be required and serves as the main article body
+ */
+export const postContentSpecificSchema = z.object({
+  // Content: rich text body (overrides base optional content)
+  content: z.string().min(1, 'Content is required'),
+
+  // Design: drop cap styling
+  showDropCap: z.boolean().default(false),
+  dropCapStyle: z.enum(['serif', 'sans-serif', 'decorative']).default('serif'),
+
+  // Design: layout and typography
+  maxWidth: z.enum(['narrow', 'medium', 'wide']).default('narrow'),
+  fontSize: z.enum(['small', 'medium', 'large']).default('medium'),
+  lineHeight: z.enum(['compact', 'normal', 'relaxed']).default('relaxed'),
+  paragraphSpacing: z.enum(['tight', 'normal', 'loose']).default('normal'),
+
+  // Design: section dividers
+  showDividers: z.boolean().default(false),
+  dividerStyle: z.enum(['line', 'dots', 'asterisks']).default('line'),
+})
+
+/**
+ * Complete Post Content Block Schema
+ * Note: postContentSpecificSchema.content overrides baseBlockSchema.content
+ */
+export const schema = baseBlockSchema.merge(postContentSpecificSchema)
+
+export type PostContentBlockProps = z.infer<typeof schema>

package/templates/features/blog/entities/posts/components/post-header.tsx

@@ -0,0 +1,97 @@
+import { Badge } from '@nextsparkjs/core/components/ui/badge'
+import Image from 'next/image'
+
+interface Category {
+  id: string
+  name: string
+  color?: string
+}
+
+interface PostHeaderProps {
+  post: {
+    title: string
+    excerpt?: string
+    featuredImage?: string
+    createdAt: string
+    categories?: Category[]
+  }
+}
+
+export function PostHeader({ post }: PostHeaderProps) {
+  return (
+    <div className="w-full" data-cy="post-header">
+      {/* Featured Image */}
+      {post.featuredImage && (
+        <div className="relative w-full h-[400px] md:h-[500px] mb-8" data-cy="post-featured-image-display">
+          <Image
+            src={post.featuredImage}
+            alt={post.title}
+            fill
+            className="object-cover rounded-lg"
+            priority
+          />
+        </div>
+      )}
+
+      {/* Post Meta */}
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 mb-8">
+        {/* Categories */}
+        {post.categories && post.categories.length > 0 && (
+          <div className="flex gap-2 mb-4" data-cy="post-categories-display">
+            {post.categories.map((category) => (
+              <Badge
+                key={category.id}
+                variant="outline"
+                style={{
+                  backgroundColor: category.color ? `${category.color}20` : undefined,
+                  borderColor: category.color || undefined,
+                  color: category.color || undefined,
+                }}
+              >
+                {category.name}
+              </Badge>
+            ))}
+          </div>
+        )}
+
+        {/* Title */}
+        <h1
+          className="text-4xl md:text-5xl font-bold text-foreground mb-4"
+          data-cy="post-title"
+        >
+          {post.title}
+        </h1>
+
+        {/* Excerpt */}
+        {post.excerpt && (
+          <p
+            className="text-xl text-muted-foreground mb-4"
+            data-cy="post-excerpt"
+          >
+            {post.excerpt}
+          </p>
+        )}
+
+        {/* Date - using suppressHydrationWarning to prevent server/client mismatch */}
+        <div className="flex items-center gap-4 text-sm text-muted-foreground">
+          <time
+            dateTime={new Date(post.createdAt).toISOString()}
+            suppressHydrationWarning
+          >
+            {new Date(post.createdAt).toLocaleDateString('en-US', {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+              timeZone: 'UTC',
+            })}
+          </time>
+        </div>
+      </div>
+
+      {/* Separator */}
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+        <hr className="border-border mb-8" />
+      </div>
+    </div>
+  )
+}

package/templates/features/blog/entities/posts/messages/en.json

@@ -0,0 +1,55 @@
+{
+  "entity": {
+    "singular": "Post",
+    "plural": "Posts"
+  },
+  "fields": {
+    "title": {
+      "label": "Title",
+      "placeholder": "Enter post title...",
+      "description": "Post title"
+    },
+    "slug": {
+      "label": "Slug",
+      "placeholder": "post-slug",
+      "description": "URL-friendly identifier"
+    },
+    "status": {
+      "label": "Status",
+      "description": "Publication status",
+      "options": {
+        "draft": "Draft",
+        "published": "Published",
+        "scheduled": "Scheduled",
+        "archived": "Archived"
+      }
+    },
+    "excerpt": {
+      "label": "Excerpt",
+      "placeholder": "Brief description...",
+      "description": "Short summary shown in listings"
+    },
+    "featuredImage": {
+      "label": "Featured Image",
+      "description": "Main image for the post"
+    },
+    "categories": {
+      "label": "Categories",
+      "placeholder": "Select categories...",
+      "description": "Post categories"
+    }
+  },
+  "actions": {
+    "create": "Create Post",
+    "edit": "Edit Post",
+    "delete": "Delete Post",
+    "publish": "Publish",
+    "unpublish": "Unpublish"
+  },
+  "messages": {
+    "created": "Post created successfully",
+    "updated": "Post updated successfully",
+    "deleted": "Post deleted successfully",
+    "published": "Post published successfully"
+  }
+}

package/templates/features/blog/entities/posts/messages/es.json

@@ -0,0 +1,55 @@
+{
+  "entity": {
+    "singular": "Publicacion",
+    "plural": "Publicaciones"
+  },
+  "fields": {
+    "title": {
+      "label": "Titulo",
+      "placeholder": "Ingresa el titulo...",
+      "description": "Titulo de la publicacion"
+    },
+    "slug": {
+      "label": "Slug",
+      "placeholder": "slug-publicacion",
+      "description": "Identificador amigable para URL"
+    },
+    "status": {
+      "label": "Estado",
+      "description": "Estado de publicacion",
+      "options": {
+        "draft": "Borrador",
+        "published": "Publicado",
+        "scheduled": "Programado",
+        "archived": "Archivado"
+      }
+    },
+    "excerpt": {
+      "label": "Extracto",
+      "placeholder": "Breve descripcion...",
+      "description": "Resumen corto mostrado en listados"
+    },
+    "featuredImage": {
+      "label": "Imagen Destacada",
+      "description": "Imagen principal de la publicacion"
+    },
+    "categories": {
+      "label": "Categorias",
+      "placeholder": "Selecciona categorias...",
+      "description": "Categorias de la publicacion"
+    }
+  },
+  "actions": {
+    "create": "Crear Publicacion",
+    "edit": "Editar Publicacion",
+    "delete": "Eliminar Publicacion",
+    "publish": "Publicar",
+    "unpublish": "Despublicar"
+  },
+  "messages": {
+    "created": "Publicacion creada exitosamente",
+    "updated": "Publicacion actualizada exitosamente",
+    "deleted": "Publicacion eliminada exitosamente",
+    "published": "Publicacion publicada exitosamente"
+  }
+}