@nextsparkjs/theme-blog 0.1.0-beta.19 → 0.1.0-beta.190

package/api/authors/[username]/route.ts

@@ -9,6 +9,7 @@
 
 import { NextRequest, NextResponse } from 'next/server'
 import { queryWithRLS } from '@nextsparkjs/core/lib/db'
+import { withRateLimitTier } from '@nextsparkjs/core/lib/api/rate-limit'
 
 interface Author {
   id: string
@@ -39,10 +40,10 @@ interface RouteContext {
   }>
 }
 
-export async function GET(
+const getHandler = async (
   request: NextRequest,
   context: RouteContext
-) {
+) => {
   try {
     const { username } = await context.params
 
@@ -148,3 +149,5 @@ export async function GET(
     )
   }
 }
+
+export const GET = withRateLimitTier(getHandler, 'read')

package/api/authors/docs.md

@@ -0,0 +1,135 @@
+# Authors API
+
+Public author profiles and post listings. No authentication required.
+
+## Overview
+
+The Authors API provides read-only access to author profiles and their published posts. This endpoint is designed for public consumption and does not require authentication.
+
+## Authentication
+
+**No authentication required** - This is a public endpoint.
+
+## Endpoints
+
+### List Authors
+`GET /api/v1/theme/blog/authors`
+
+Returns a list of all authors who have published posts.
+
+**Example Request:**
+```bash
+curl https://example.com/api/v1/theme/blog/authors
+```
+
+**Example Response:**
+```json
+{
+  "data": [
+    {
+      "id": "user_abc123",
+      "name": "John Doe",
+      "username": "johndoe",
+      "bio": "Full-stack developer and tech writer",
+      "image": "https://example.com/avatar.jpg",
+      "postCount": 15
+    },
+    {
+      "id": "user_def456",
+      "name": "Jane Smith",
+      "username": "janesmith",
+      "bio": "Product designer and UX enthusiast",
+      "image": "https://example.com/avatar2.jpg",
+      "postCount": 8
+    }
+  ]
+}
+```
+
+### Get Author Profile
+`GET /api/v1/theme/blog/authors/[username]`
+
+Returns an author's profile with their published posts.
+
+**Path Parameters:**
+- `username` (string, required): Author's username
+
+**Example Request:**
+```bash
+curl https://example.com/api/v1/theme/blog/authors/johndoe
+```
+
+**Example Response:**
+```json
+{
+  "author": {
+    "id": "user_abc123",
+    "name": "John Doe",
+    "username": "johndoe",
+    "bio": "Full-stack developer and tech writer",
+    "image": "https://example.com/avatar.jpg"
+  },
+  "posts": [
+    {
+      "id": "post_123",
+      "title": "Getting Started with Next.js",
+      "slug": "getting-started-with-nextjs",
+      "excerpt": "A comprehensive guide...",
+      "featuredImage": "https://example.com/image.jpg",
+      "publishedAt": "2024-01-15T10:30:00Z",
+      "categories": [
+        {
+          "id": "cat_123",
+          "name": "Technology",
+          "slug": "technology"
+        }
+      ]
+    }
+  ],
+  "stats": {
+    "totalPosts": 15
+  }
+}
+```
+
+## Response Fields
+
+### Author Object
+
+| Field | Type | Description |
+|-------|------|-------------|
+| id | string | Author user ID |
+| name | string | Author display name |
+| username | string | Author username (URL-friendly) |
+| bio | string | Author biography |
+| image | string | Author avatar URL |
+| postCount | number | Number of published posts (list endpoint only) |
+
+### Author Profile Response
+
+| Field | Type | Description |
+|-------|------|-------------|
+| author | object | Author profile information |
+| posts | array | Array of published posts |
+| stats.totalPosts | number | Total number of published posts |
+
+## Features
+
+- **No Auth Required**: Accessible without authentication
+- **Rate Limited**: 100 requests per minute per IP
+- **Cached**: Responses cached for 60 seconds
+- **Sorted by Post Count**: Authors with more posts appear first
+
+## Error Responses
+
+| Status | Description |
+|--------|-------------|
+| 400 | Bad Request - Invalid parameters |
+| 404 | Not Found - Author not found |
+| 429 | Too Many Requests - Rate limit exceeded |
+| 500 | Internal Server Error |
+
+## Related APIs
+
+- **[Public Posts](/api/v1/theme/blog/posts/public)** - Public post feed
+- **[Posts](/api/v1/posts)** - Authenticated CRUD operations

package/api/authors/presets.ts

@@ -0,0 +1,45 @@
+/**
+ * API Presets for Authors Route
+ *
+ * Public author profiles and their published posts
+ */
+
+import { defineApiEndpoint } from '@nextsparkjs/core/types/api-presets'
+
+export default defineApiEndpoint({
+  endpoint: '/api/v1/theme/blog/authors',
+  summary: 'Public author profiles with published posts',
+  presets: [
+    {
+      id: 'list-all',
+      title: 'List All Authors',
+      description: 'Get all authors with published posts',
+      method: 'GET',
+      params: {
+        limit: 50
+      },
+      tags: ['read', 'list', 'public']
+    },
+    {
+      id: 'get-by-username',
+      title: 'Get Author by Username',
+      description: 'Get author profile with their posts',
+      method: 'GET',
+      pathParams: {
+        username: '{{username}}'
+      },
+      tags: ['read', 'detail', 'public']
+    },
+    {
+      id: 'list-with-post-count',
+      title: 'List with Post Count',
+      description: 'Get authors sorted by number of posts',
+      method: 'GET',
+      params: {
+        sortBy: 'postCount',
+        sortOrder: 'desc'
+      },
+      tags: ['read', 'list', 'public']
+    }
+  ]
+})

package/api/authors/route.ts

@@ -9,6 +9,7 @@
 
 import { NextRequest, NextResponse } from 'next/server'
 import { queryWithRLS } from '@nextsparkjs/core/lib/db'
+import { withRateLimitTier } from '@nextsparkjs/core/lib/api/rate-limit'
 
 interface AuthorWithCount {
   id: string
@@ -19,7 +20,7 @@ interface AuthorWithCount {
   postCount: number
 }
 
-export async function GET(request: NextRequest) {
+const getHandler = async (request: NextRequest) => {
   try {
     // Get all authors who have at least one published post
     const authorsQuery = `
@@ -61,3 +62,5 @@ export async function GET(request: NextRequest) {
     )
   }
 }
+
+export const GET = withRateLimitTier(getHandler, 'read')

package/api/posts/public/docs.md

@@ -0,0 +1,124 @@
+# Public Posts API
+
+Public feed of published blog posts. No authentication required.
+
+## Overview
+
+The Public Posts API provides read-only access to published blog posts. This endpoint is designed for public consumption by blog visitors and does not require authentication.
+
+## Authentication
+
+**No authentication required** - This is a public endpoint.
+
+## Endpoints
+
+### List Published Posts
+`GET /api/v1/theme/blog/posts/public`
+
+Returns a paginated list of published posts.
+
+**Query Parameters:**
+- `limit` (number, optional): Maximum records to return. Default: 20, Max: 100
+- `offset` (number, optional): Number of records to skip. Default: 0
+- `category` (string, optional): Filter by category slug
+
+**Example Request:**
+```bash
+curl https://example.com/api/v1/theme/blog/posts/public?limit=10&category=technology
+```
+
+**Example Response:**
+```json
+{
+  "data": [
+    {
+      "id": "post_abc123",
+      "title": "Getting Started with Next.js",
+      "slug": "getting-started-with-nextjs",
+      "excerpt": "A comprehensive guide to building modern web apps",
+      "featuredImage": "https://example.com/image.jpg",
+      "featured": true,
+      "publishedAt": "2024-01-15T10:30:00Z",
+      "author": {
+        "id": "user_123",
+        "name": "John Doe",
+        "username": "johndoe",
+        "image": "https://example.com/avatar.jpg"
+      },
+      "categories": [
+        {
+          "id": "cat_123",
+          "name": "Technology",
+          "slug": "technology"
+        }
+      ]
+    }
+  ],
+  "pagination": {
+    "total": 25,
+    "limit": 10,
+    "offset": 0,
+    "hasMore": true
+  }
+}
+```
+
+## Response Fields
+
+| Field | Type | Description |
+|-------|------|-------------|
+| id | string | Post unique identifier |
+| title | string | Post title |
+| slug | string | URL-friendly slug |
+| excerpt | string | Brief description |
+| featuredImage | string | Featured image URL |
+| featured | boolean | Whether post is featured |
+| publishedAt | datetime | Publication timestamp |
+| author | object | Author information |
+| author.id | string | Author user ID |
+| author.name | string | Author display name |
+| author.username | string | Author username |
+| author.image | string | Author avatar URL |
+| categories | array | Associated categories |
+
+## Features
+
+- **No Auth Required**: Accessible without authentication
+- **Rate Limited**: 100 requests per minute per IP
+- **Cached**: Responses cached for 60 seconds
+- **Category Filter**: Filter posts by category slug
+
+## Pagination
+
+The API uses offset-based pagination:
+
+```json
+{
+  "pagination": {
+    "total": 100,
+    "limit": 20,
+    "offset": 0,
+    "hasMore": true
+  }
+}
+```
+
+To get the next page:
+```
+GET /api/v1/theme/blog/posts/public?offset=20&limit=20
+```
+
+## Error Responses
+
+| Status | Description |
+|--------|-------------|
+| 400 | Bad Request - Invalid query parameters |
+| 404 | Not Found - Category not found |
+| 429 | Too Many Requests - Rate limit exceeded |
+| 500 | Internal Server Error |
+
+## Related APIs
+
+- **[Posts](/api/v1/posts)** - Authenticated CRUD operations
+- **[Authors](/api/v1/theme/blog/authors)** - Author profiles
+- **[Categories](/api/v1/categories)** - Category management

package/api/posts/public/presets.ts

@@ -0,0 +1,65 @@
+/**
+ * API Presets for Public Posts
+ *
+ * Public feed of published blog posts (no authentication required)
+ */
+
+import { defineApiEndpoint } from '@nextsparkjs/core/types/api-presets'
+
+export default defineApiEndpoint({
+  endpoint: '/api/v1/theme/blog/posts/public',
+  summary: 'Public feed of published blog posts',
+  presets: [
+    {
+      id: 'list-recent',
+      title: 'List Recent Posts',
+      description: 'Get recent published posts',
+      method: 'GET',
+      params: {
+        limit: 20
+      },
+      tags: ['read', 'list', 'public']
+    },
+    {
+      id: 'list-with-limit',
+      title: 'List with Custom Limit',
+      description: 'Get posts with specific limit',
+      method: 'GET',
+      params: {
+        limit: '{{limit}}'
+      },
+      tags: ['read', 'list', 'public']
+    },
+    {
+      id: 'list-by-category',
+      title: 'List by Category',
+      description: 'Get posts filtered by category slug',
+      method: 'GET',
+      params: {
+        category: '{{category}}'
+      },
+      tags: ['read', 'filter', 'public']
+    },
+    {
+      id: 'list-paginated',
+      title: 'List Paginated',
+      description: 'Get paginated posts',
+      method: 'GET',
+      params: {
+        limit: '{{limit}}',
+        offset: '{{offset}}'
+      },
+      tags: ['read', 'list', 'public']
+    },
+    {
+      id: 'list-featured',
+      title: 'List Featured Posts',
+      description: 'Get featured published posts',
+      method: 'GET',
+      params: {
+        featured: 'true'
+      },
+      tags: ['read', 'filter', 'public']
+    }
+  ]
+})

package/api/posts/public/route.ts

@@ -10,6 +10,7 @@
 
 import { NextRequest, NextResponse } from 'next/server'
 import { queryWithRLS } from '@nextsparkjs/core/lib/db'
+import { withRateLimitTier } from '@nextsparkjs/core/lib/api/rate-limit'
 
 interface Post {
   id: string
@@ -31,7 +32,7 @@ interface Post {
   authorImage: string | null
 }
 
-export async function GET(request: NextRequest) {
+const getHandler = async (request: NextRequest) => {
   try {
     const { searchParams } = new URL(request.url)
 
@@ -149,3 +150,5 @@ export async function GET(request: NextRequest) {
     )
   }
 }
+
+export const GET = withRateLimitTier(getHandler, 'read')

package/components/ExportPostsButton.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { Button } from '@nextsparkjs/core/components/ui/button'
 import { Download, Loader2 } from 'lucide-react'
 import { useToast } from '@nextsparkjs/core/hooks/useToast'
+import { withBasePath } from '@nextsparkjs/core/lib/base-path'
 
 interface ExportPostsButtonProps {
   className?: string
@@ -17,7 +18,7 @@ export function ExportPostsButton({ className }: ExportPostsButtonProps) {
     setIsExporting(true)
     
     try {
-      const response = await fetch('/api/v1/posts?limit=1000', {
+      const response = await fetch(withBasePath('/api/v1/posts?limit=1000'), {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',

package/components/ImportPostsDialog.tsx

@@ -16,6 +16,7 @@ import { Badge } from '@nextsparkjs/core/components/ui/badge'
 import { ScrollArea } from '@nextsparkjs/core/components/ui/scroll-area'
 import { Upload, FileJson, AlertCircle, CheckCircle2, Loader2 } from 'lucide-react'
 import { useToast } from '@nextsparkjs/core/hooks/useToast'
+import { withBasePath } from '@nextsparkjs/core/lib/base-path'
 
 interface PostImport {
   title: string
@@ -108,7 +109,7 @@ export function ImportPostsDialog({ className, onImportComplete }: ImportPostsDi
       const post = posts[i]
       
       try {
-        const response = await fetch('/api/v1/posts', {
+        const response = await fetch(withBasePath('/api/v1/posts'), {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',

package/components/editor/FeaturedImageUpload.tsx

@@ -12,6 +12,7 @@ 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
@@ -111,7 +112,7 @@ export function FeaturedImageUpload({
         // Image Preview
         <div className="relative aspect-video rounded-lg overflow-hidden border border-border bg-muted" data-cy="featured-image-preview">
           <NextImage
-            src={value}
+            src={withBasePathIfInApp(value)}
             alt="Featured image preview"
             fill
             className="object-cover"

package/components/editor/WysiwygEditor.tsx

@@ -6,12 +6,15 @@
  * A rich text editor built with native contentEditable.
  * Provides formatting, markdown shortcuts, and a clean interface.
  *
- * No external dependencies - uses document.execCommand for formatting.
+ * 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 '@/themes/blog/lib/sanitize-post-html'
 import {
   Bold,
   Italic,
@@ -78,6 +81,22 @@ const TOOLBAR_GROUPS: ToolbarButton[][] = [
   ],
 ]
 
+/** 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,
@@ -91,15 +110,18 @@ export function WysiwygEditor({
   const [isFocused, setIsFocused] = useState(false)
   const isComposing = useRef(false)
 
-  // Initialize content
+  // 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) {
-      const currentContent = editorRef.current.innerHTML
-      if (currentContent !== value) {
-        editorRef.current.innerHTML = value || ''
+      if (editorRef.current.innerHTML !== value || postHtmlHasUnsafeMarkup(value)) {
+        editorRef.current.innerHTML = sanitizePostHtml(value)
       }
     }
-  }, [value])
+  }, [value, isPreview])
 
   // Auto focus
   useEffect(() => {
@@ -115,6 +137,31 @@ export function WysiwygEditor({
     }
   }, [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:')
@@ -275,7 +322,7 @@ export function WysiwygEditor({
         <div
           className="flex-1 min-h-0 prose prose-sm max-w-none p-4 overflow-auto"
           style={{ minHeight }}
-          dangerouslySetInnerHTML={{ __html: value || '<p class="text-muted-foreground">Nothing to preview...</p>' }}
+          dangerouslySetInnerHTML={{ __html: value ? sanitizePostHtml(value) : '<p class="text-muted-foreground">Nothing to preview...</p>' }}
           data-cy="wysiwyg-preview"
         />
       ) : (
@@ -302,6 +349,8 @@ export function WysiwygEditor({
             )}
             style={{ minHeight }}
             onInput={handleInput}
+            onPaste={handlePaste}
+            onDrop={handleDrop}
             onKeyDown={handleKeyDown}
             onFocus={() => setIsFocused(true)}
             onBlur={() => setIsFocused(false)}

package/components/public/AuthorBio.tsx

@@ -9,6 +9,7 @@
 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'
@@ -43,7 +44,7 @@ export function AuthorBio({
       <div data-cy="author-bio-avatar" className="flex-shrink-0">
         {avatar ? (
           <Image
-            src={avatar}
+            src={withBasePathIfInApp(avatar)}
             alt={name}
             width={64}
             height={64}
@@ -84,7 +85,7 @@ export function AuthorBio({
               return (
                 <a
                   key={link.type}
-                  href={link.url}
+                  href={withBasePathIfInApp(link.url)}
                   data-cy={`author-bio-social-${link.type}`}
                   target="_blank"
                   rel="noopener noreferrer"

package/components/public/AuthorCard.tsx

@@ -11,6 +11,7 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { User } from 'lucide-react'
 import { cn } from '@nextsparkjs/core/lib/utils'
+import { withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
 
 interface AuthorCardProps {
   username: string
@@ -48,7 +49,7 @@ export function AuthorCard({
         <div data-cy={`author-card-avatar-${username}`} className="flex-shrink-0">
           {avatar ? (
             <Image
-              src={avatar}
+              src={withBasePathIfInApp(avatar)}
               alt={name}
               width={48}
               height={48}
@@ -89,7 +90,7 @@ export function AuthorCard({
       <div data-cy={`author-card-avatar-${username}`} className="flex justify-center mb-4">
         {avatar ? (
           <Image
-            src={avatar}
+            src={withBasePathIfInApp(avatar)}
             alt={name}
             width={96}
             height={96}

package/components/public/BlogFooter.tsx

@@ -8,6 +8,7 @@
 
 import Link from 'next/link'
 import { Github, Twitter, Linkedin, Mail, Heart } from 'lucide-react'
+import { withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
 
 interface SocialLink {
   name: string
@@ -117,7 +118,7 @@ export function BlogFooter({
                       return (
                         <a
                           key={link.name}
-                          href={link.href}
+                          href={withBasePathIfInApp(link.href)}
                           data-cy={`blog-footer-social-${link.icon}`}
                           target="_blank"
                           rel="noopener noreferrer"