@nextsparkjs/core 0.1.0-beta.191 → 0.1.0-beta.192

package/dist/templates/projects/blog/components/editor/FeaturedImageUpload.tsx

@@ -0,0 +1,186 @@
+'use client'
+
+/**
+ * Featured Image Upload Component
+ *
+ * A simple single-image upload component for blog post featured images.
+ * Supports drag & drop, click to upload, and preview.
+ */
+
+import * as React from 'react'
+import NextImage from 'next/image'
+import { X, Upload, Image as ImageIcon } from 'lucide-react'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
+
+interface FeaturedImageUploadProps {
+  value: string // URL string
+  onChange: (url: string) => void
+  disabled?: boolean
+  className?: string
+}
+
+export function FeaturedImageUpload({
+  value,
+  onChange,
+  disabled = false,
+  className,
+}: FeaturedImageUploadProps) {
+  const [isDragOver, setIsDragOver] = React.useState(false)
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [error, setError] = React.useState<string | null>(null)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const handleFile = async (file: File) => {
+    if (disabled) return
+
+    // Validate file type
+    if (!file.type.startsWith('image/')) {
+      setError('Please select an image file')
+      return
+    }
+
+    // Validate file size (max 5MB)
+    if (file.size > 5 * 1024 * 1024) {
+      setError('Image must be less than 5MB')
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      // For now, create a local object URL
+      // In production, you would upload to a storage service
+      const objectUrl = URL.createObjectURL(file)
+      onChange(objectUrl)
+    } catch (err) {
+      setError('Failed to process image')
+      console.error('Image upload error:', err)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    if (!disabled) {
+      setIsDragOver(true)
+    }
+  }
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(false)
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setIsDragOver(false)
+
+    if (!disabled && e.dataTransfer.files?.[0]) {
+      handleFile(e.dataTransfer.files[0])
+    }
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files?.[0]) {
+      handleFile(e.target.files[0])
+    }
+  }
+
+  const openFileDialog = () => {
+    if (!disabled) {
+      inputRef.current?.click()
+    }
+  }
+
+  const removeImage = () => {
+    if (!disabled) {
+      onChange('')
+      setError(null)
+    }
+  }
+
+  // Check if value is a valid URL or blob URL
+  const hasImage = value && (value.startsWith('http') || value.startsWith('blob:'))
+
+  return (
+    <div className={cn('w-full space-y-2', className)} data-cy="featured-image-container">
+      {hasImage ? (
+        // Image Preview
+        <div className="relative aspect-video rounded-lg overflow-hidden border border-border bg-muted" data-cy="featured-image-preview">
+          <NextImage
+            src={withBasePathIfInApp(value)}
+            alt="Featured image preview"
+            fill
+            className="object-cover"
+            unoptimized={value.startsWith('blob:')}
+          />
+          {/* Remove button */}
+          <Button
+            variant="destructive"
+            size="icon"
+            className="absolute top-2 right-2 h-8 w-8"
+            onClick={removeImage}
+            disabled={disabled}
+            data-cy="featured-image-remove"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      ) : (
+        // Upload Area
+        <div
+          className={cn(
+            'relative aspect-video border-2 border-dashed rounded-lg transition-colors cursor-pointer',
+            isDragOver && 'border-primary bg-primary/5',
+            !isDragOver && 'border-muted-foreground/25 hover:border-primary/50',
+            disabled && 'opacity-50 cursor-not-allowed',
+            isLoading && 'animate-pulse'
+          )}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onClick={openFileDialog}
+          data-cy="featured-image-dropzone"
+        >
+          <div className="absolute inset-0 flex flex-col items-center justify-center">
+            {isLoading ? (
+              <div className="h-8 w-8 border-2 border-primary border-t-transparent rounded-full animate-spin" data-cy="featured-image-loading" />
+            ) : (
+              <>
+                <ImageIcon className="h-8 w-8 text-muted-foreground mb-2" />
+                <p className="text-sm text-muted-foreground text-center px-4">
+                  <span className="font-medium text-primary">Click to upload</span>
+                  {' '}or drag and drop
+                </p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  PNG, JPG, GIF up to 5MB
+                </p>
+              </>
+            )}
+          </div>
+
+          <input
+            ref={inputRef}
+            type="file"
+            accept="image/*"
+            onChange={handleInputChange}
+            className="sr-only"
+            disabled={disabled || isLoading}
+            data-cy="featured-image-input"
+          />
+        </div>
+      )}
+
+      {/* Error message */}
+      {error && (
+        <p className="text-xs text-destructive" data-cy="featured-image-error">{error}</p>
+      )}
+    </div>
+  )
+}
+
+export default FeaturedImageUpload

package/dist/templates/projects/blog/components/editor/WysiwygEditor.tsx

@@ -0,0 +1,389 @@
+'use client'
+
+/**
+ * WYSIWYG Editor Component
+ *
+ * A rich text editor built with native contentEditable.
+ * Provides formatting, markdown shortcuts, and a clean interface.
+ *
+ * Formatting uses document.execCommand. Stored HTML, and markup pasted or
+ * dropped in, is sanitised before it reaches the DOM, in the editable area and
+ * in the preview.
+ */
+
+import { useRef, useCallback, useEffect, useState } from 'react'
+import { cn } from '@nextsparkjs/core/lib/utils'
+import { Button } from '@nextsparkjs/core/components/ui/button'
+import { postHtmlHasUnsafeMarkup, sanitizePostHtml } from '@/lib/sanitize-post-html'
+import {
+  Bold,
+  Italic,
+  Underline,
+  Strikethrough,
+  Heading1,
+  Heading2,
+  Heading3,
+  List,
+  ListOrdered,
+  Quote,
+  Code,
+  Link as LinkIcon,
+  Image,
+  Minus,
+  Undo,
+  Redo,
+  Eye,
+  EyeOff
+} from 'lucide-react'
+
+interface WysiwygEditorProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  className?: string
+  minHeight?: string
+  autoFocus?: boolean
+}
+
+interface ToolbarButton {
+  icon: React.ReactNode
+  command: string
+  value?: string
+  title: string
+}
+
+const TOOLBAR_GROUPS: ToolbarButton[][] = [
+  [
+    { icon: <Undo className="h-4 w-4" />, command: 'undo', title: 'Undo' },
+    { icon: <Redo className="h-4 w-4" />, command: 'redo', title: 'Redo' },
+  ],
+  [
+    { icon: <Bold className="h-4 w-4" />, command: 'bold', title: 'Bold (Ctrl+B)' },
+    { icon: <Italic className="h-4 w-4" />, command: 'italic', title: 'Italic (Ctrl+I)' },
+    { icon: <Underline className="h-4 w-4" />, command: 'underline', title: 'Underline (Ctrl+U)' },
+    { icon: <Strikethrough className="h-4 w-4" />, command: 'strikeThrough', title: 'Strikethrough' },
+  ],
+  [
+    { icon: <Heading1 className="h-4 w-4" />, command: 'formatBlock', value: 'h1', title: 'Heading 1' },
+    { icon: <Heading2 className="h-4 w-4" />, command: 'formatBlock', value: 'h2', title: 'Heading 2' },
+    { icon: <Heading3 className="h-4 w-4" />, command: 'formatBlock', value: 'h3', title: 'Heading 3' },
+  ],
+  [
+    { icon: <List className="h-4 w-4" />, command: 'insertUnorderedList', title: 'Bullet List' },
+    { icon: <ListOrdered className="h-4 w-4" />, command: 'insertOrderedList', title: 'Numbered List' },
+    { icon: <Quote className="h-4 w-4" />, command: 'formatBlock', value: 'blockquote', title: 'Quote' },
+  ],
+  [
+    { icon: <Code className="h-4 w-4" />, command: 'formatBlock', value: 'pre', title: 'Code Block' },
+    { icon: <LinkIcon className="h-4 w-4" />, command: 'createLink', title: 'Insert Link' },
+    { icon: <Image className="h-4 w-4" />, command: 'insertImage', title: 'Insert Image' },
+    { icon: <Minus className="h-4 w-4" />, command: 'insertHorizontalRule', title: 'Horizontal Line' },
+  ],
+]
+
+/** The caret position under a point, so a drop lands where the pointer is. */
+function rangeAtPoint(x: number, y: number): Range | null {
+  const doc = document as Document & {
+    caretPositionFromPoint?: (x: number, y: number) => { offsetNode: Node; offset: number } | null
+    caretRangeFromPoint?: (x: number, y: number) => Range | null
+  }
+  const position = doc.caretPositionFromPoint?.(x, y)
+  if (position) {
+    const range = document.createRange()
+    range.setStart(position.offsetNode, position.offset)
+    range.collapse(true)
+    return range
+  }
+  return doc.caretRangeFromPoint?.(x, y) ?? null
+}
+
+export function WysiwygEditor({
+  value,
+  onChange,
+  placeholder = 'Start writing...',
+  className,
+  minHeight = '400px',
+  autoFocus = false
+}: WysiwygEditorProps) {
+  const editorRef = useRef<HTMLDivElement>(null)
+  const [isPreview, setIsPreview] = useState(false)
+  const [isFocused, setIsFocused] = useState(false)
+  const isComposing = useRef(false)
+
+  // Fill the editable area. A value from outside (a loaded post) always goes in
+  // sanitised, and so does the value when leaving the preview mounts a new,
+  // empty area. One the area produced itself (typing, a paste, a command) is
+  // replaced only when sanitising would change it: rewriting it for a mere
+  // re-serialisation would move the caret to the start.
+  useEffect(() => {
+    if (editorRef.current && !isComposing.current) {
+      if (editorRef.current.innerHTML !== value || postHtmlHasUnsafeMarkup(value)) {
+        editorRef.current.innerHTML = sanitizePostHtml(value)
+      }
+    }
+  }, [value, isPreview])
+
+  // Auto focus
+  useEffect(() => {
+    if (autoFocus && editorRef.current) {
+      editorRef.current.focus()
+    }
+  }, [autoFocus])
+
+  const handleInput = useCallback(() => {
+    if (editorRef.current && !isComposing.current) {
+      const html = editorRef.current.innerHTML
+      onChange(html)
+    }
+  }, [onChange])
+
+  // Markup pasted or dropped in that sanitising would change goes in sanitised,
+  // in place of the browser's own insertion. Replacing it once it is in the
+  // editable area is too late: an attribute such as onerror fires as soon as
+  // the element is in the document. Anything else keeps the browser's paste
+  // and drop, which is also how text moves within the editor.
+  const handlePaste = useCallback((e: React.ClipboardEvent) => {
+    const html = e.clipboardData.getData('text/html')
+    if (!postHtmlHasUnsafeMarkup(html)) return
+    e.preventDefault()
+    document.execCommand('insertHTML', false, sanitizePostHtml(html))
+  }, [])
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    const html = e.dataTransfer.getData('text/html')
+    if (!postHtmlHasUnsafeMarkup(html)) return
+    e.preventDefault()
+    const range = rangeAtPoint(e.clientX, e.clientY)
+    if (range) {
+      const selection = window.getSelection()
+      selection?.removeAllRanges()
+      selection?.addRange(range)
+    }
+    document.execCommand('insertHTML', false, sanitizePostHtml(html))
+  }, [])
+
+  const execCommand = useCallback((command: string, value?: string) => {
+    if (command === 'createLink') {
+      const url = prompt('Enter URL:')
+      if (url) {
+        document.execCommand('createLink', false, url)
+      }
+    } else if (command === 'insertImage') {
+      const url = prompt('Enter image URL:')
+      if (url) {
+        document.execCommand('insertImage', false, url)
+      }
+    } else if (command === 'formatBlock' && value) {
+      document.execCommand('formatBlock', false, `<${value}>`)
+    } else {
+      document.execCommand(command, false, value)
+    }
+
+    // Update content after command
+    if (editorRef.current) {
+      onChange(editorRef.current.innerHTML)
+    }
+
+    // Keep focus on editor
+    editorRef.current?.focus()
+  }, [onChange])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    // Keyboard shortcuts
+    if (e.ctrlKey || e.metaKey) {
+      switch (e.key.toLowerCase()) {
+        case 'b':
+          e.preventDefault()
+          execCommand('bold')
+          break
+        case 'i':
+          e.preventDefault()
+          execCommand('italic')
+          break
+        case 'u':
+          e.preventDefault()
+          execCommand('underline')
+          break
+        case 'z':
+          if (e.shiftKey) {
+            e.preventDefault()
+            execCommand('redo')
+          } else {
+            e.preventDefault()
+            execCommand('undo')
+          }
+          break
+      }
+    }
+
+    // Markdown shortcuts on space
+    if (e.key === ' ' && editorRef.current) {
+      const selection = window.getSelection()
+      if (selection && selection.anchorNode) {
+        const text = selection.anchorNode.textContent || ''
+        const offset = selection.anchorOffset
+
+        // Check for markdown patterns at the beginning of line
+        if (offset <= 3) {
+          const line = text.substring(0, offset)
+
+          if (line === '#') {
+            e.preventDefault()
+            selection.anchorNode.textContent = text.substring(1)
+            execCommand('formatBlock', 'h1')
+          } else if (line === '##') {
+            e.preventDefault()
+            selection.anchorNode.textContent = text.substring(2)
+            execCommand('formatBlock', 'h2')
+          } else if (line === '###') {
+            e.preventDefault()
+            selection.anchorNode.textContent = text.substring(3)
+            execCommand('formatBlock', 'h3')
+          } else if (line === '-' || line === '*') {
+            e.preventDefault()
+            selection.anchorNode.textContent = text.substring(1)
+            execCommand('insertUnorderedList')
+          } else if (line === '1.') {
+            e.preventDefault()
+            selection.anchorNode.textContent = text.substring(2)
+            execCommand('insertOrderedList')
+          } else if (line === '>') {
+            e.preventDefault()
+            selection.anchorNode.textContent = text.substring(1)
+            execCommand('formatBlock', 'blockquote')
+          }
+        }
+      }
+    }
+  }, [execCommand])
+
+  const handleCompositionStart = () => {
+    isComposing.current = true
+  }
+
+  const handleCompositionEnd = () => {
+    isComposing.current = false
+    handleInput()
+  }
+
+  return (
+    <div className={cn('rounded-lg border border-input bg-background', className)} data-cy="wysiwyg-container">
+      {/* Toolbar */}
+      <div className="shrink-0 flex flex-wrap items-center gap-1 p-2 border-b border-border bg-muted/30" data-cy="wysiwyg-toolbar">
+        {TOOLBAR_GROUPS.map((group, groupIndex) => (
+          <div key={groupIndex} className="flex items-center">
+            {group.map((button) => (
+              <Button
+                key={button.command + (button.value || '')}
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={() => execCommand(button.command, button.value)}
+                title={button.title}
+                data-cy={`wysiwyg-${button.command}${button.value ? `-${button.value}` : ''}`}
+              >
+                {button.icon}
+              </Button>
+            ))}
+            {groupIndex < TOOLBAR_GROUPS.length - 1 && (
+              <div className="w-px h-6 bg-border mx-1" />
+            )}
+          </div>
+        ))}
+
+        {/* Preview Toggle */}
+        <div className="ml-auto">
+          <Button
+            type="button"
+            variant={isPreview ? 'default' : 'ghost'}
+            size="sm"
+            className="h-8"
+            onClick={() => setIsPreview(!isPreview)}
+            data-cy="wysiwyg-preview-toggle"
+          >
+            {isPreview ? (
+              <>
+                <EyeOff className="h-4 w-4 mr-1" />
+                Edit
+              </>
+            ) : (
+              <>
+                <Eye className="h-4 w-4 mr-1" />
+                Preview
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+
+      {/* Editor / Preview */}
+      {isPreview ? (
+        <div
+          className="flex-1 min-h-0 prose prose-sm max-w-none p-4 overflow-auto"
+          style={{ minHeight }}
+          dangerouslySetInnerHTML={{ __html: sanitizePostHtml(value || '<p class="text-muted-foreground">Nothing to preview...</p>') }}
+          data-cy="wysiwyg-preview"
+        />
+      ) : (
+        <div className="flex-1 min-h-0 relative" data-cy="wysiwyg-editor-wrapper">
+          <div
+            ref={editorRef}
+            contentEditable
+            className={cn(
+              'h-full prose prose-sm max-w-none p-4 outline-none overflow-auto',
+              'focus:ring-0 focus:outline-none',
+              '[&_h1]:text-2xl [&_h1]:font-bold [&_h1]:mb-4',
+              '[&_h2]:text-xl [&_h2]:font-bold [&_h2]:mb-3',
+              '[&_h3]:text-lg [&_h3]:font-bold [&_h3]:mb-2',
+              '[&_p]:mb-4 [&_p]:last:mb-0',
+              '[&_ul]:list-disc [&_ul]:pl-5 [&_ul]:mb-4',
+              '[&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:mb-4',
+              '[&_li]:mb-1',
+              '[&_blockquote]:border-l-4 [&_blockquote]:border-primary [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-muted-foreground [&_blockquote]:mb-4',
+              '[&_pre]:bg-muted [&_pre]:p-3 [&_pre]:rounded [&_pre]:mb-4 [&_pre]:overflow-x-auto',
+              '[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-sm [&_code]:font-mono',
+              '[&_a]:text-primary [&_a]:underline',
+              '[&_img]:max-w-full [&_img]:h-auto [&_img]:rounded [&_img]:my-4',
+              '[&_hr]:my-6 [&_hr]:border-border'
+            )}
+            style={{ minHeight }}
+            onInput={handleInput}
+            onPaste={handlePaste}
+            onDrop={handleDrop}
+            onKeyDown={handleKeyDown}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            onCompositionStart={handleCompositionStart}
+            onCompositionEnd={handleCompositionEnd}
+            data-placeholder={placeholder}
+            data-cy="wysiwyg-content"
+          />
+
+          {/* Placeholder */}
+          {!value && !isFocused && (
+            <div
+              className="absolute top-4 left-4 text-muted-foreground pointer-events-none"
+              aria-hidden="true"
+              data-cy="wysiwyg-placeholder"
+            >
+              {placeholder}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Status Bar */}
+      <div className="shrink-0 flex items-center justify-between px-4 py-2 border-t border-border bg-muted/30 text-xs text-muted-foreground" data-cy="wysiwyg-statusbar">
+        <span data-cy="wysiwyg-shortcuts">
+          Shortcuts: # H1, ## H2, ### H3, - List, 1. Numbered, &gt; Quote
+        </span>
+        <span data-cy="wysiwyg-wordcount">
+          {value.replace(/<[^>]*>/g, '').split(/\s+/).filter(Boolean).length} words
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default WysiwygEditor

package/dist/templates/projects/blog/components/index.ts

@@ -0,0 +1,4 @@
+export { ExportPostsButton } from './ExportPostsButton'
+export { ImportPostsDialog } from './ImportPostsDialog'
+export { PostsToolbar } from './PostsToolbar'
+

package/dist/templates/projects/blog/components/public/AuthorBio.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+/**
+ * Author Bio Component
+ *
+ * Author section with avatar, name, bio, and social links.
+ */
+
+import Image from 'next/image'
+import Link from 'next/link'
+import { Twitter, Github, Linkedin, Globe, User } from 'lucide-react'
+import { withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
+
+interface SocialLink {
+  type: 'twitter' | 'github' | 'linkedin' | 'website'
+  url: string
+}
+
+interface AuthorBioProps {
+  name: string
+  bio?: string
+  avatar?: string | null
+  socialLinks?: SocialLink[]
+  showMoreLink?: boolean
+}
+
+const socialIcons = {
+  twitter: Twitter,
+  github: Github,
+  linkedin: Linkedin,
+  website: Globe
+}
+
+export function AuthorBio({
+  name,
+  bio,
+  avatar,
+  socialLinks = [],
+  showMoreLink = true
+}: AuthorBioProps) {
+  return (
+    <div data-cy="author-bio" className="flex items-start gap-4 p-6 bg-muted/30 rounded-xl border border-border">
+      {/* Avatar */}
+      <div data-cy="author-bio-avatar" className="flex-shrink-0">
+        {avatar ? (
+          <Image
+            src={withBasePathIfInApp(avatar)}
+            alt={name}
+            width={64}
+            height={64}
+            className="rounded-full"
+          />
+        ) : (
+          <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center">
+            <User className="w-8 h-8 text-muted-foreground" />
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div data-cy="author-bio-content" className="flex-1 min-w-0">
+        <div className="flex items-center justify-between mb-1">
+          <h3 data-cy="author-bio-name" className="font-semibold text-foreground">{name}</h3>
+          {showMoreLink && (
+            <Link
+              href="/about"
+              data-cy="author-bio-more-link"
+              className="text-sm text-primary hover:underline"
+            >
+              More articles
+            </Link>
+          )}
+        </div>
+
+        {bio && (
+          <p data-cy="author-bio-text" className="text-sm text-muted-foreground mb-3 line-clamp-2">
+            {bio}
+          </p>
+        )}
+
+        {socialLinks.length > 0 && (
+          <div data-cy="author-bio-social-links" className="flex gap-2">
+            {socialLinks.map((link) => {
+              const Icon = socialIcons[link.type]
+              return (
+                <a
+                  key={link.type}
+                  href={withBasePathIfInApp(link.url)}
+                  data-cy={`author-bio-social-${link.type}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors"
+                  aria-label={link.type}
+                >
+                  <Icon className="w-4 h-4" />
+                </a>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default AuthorBio