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

package/entities/posts/api/presets.ts

@@ -0,0 +1,137 @@
+/**
+ * API Presets for Posts Entity
+ */
+
+import { defineApiEndpoint } from '@nextsparkjs/core/types/api-presets'
+
+export default defineApiEndpoint({
+  summary: 'Manage blog posts with content builder and publication workflow',
+  presets: [
+    {
+      id: 'list-all',
+      title: 'List All Posts',
+      description: 'Get all posts with pagination',
+      method: 'GET',
+      params: {
+        limit: 20
+      },
+      tags: ['read', 'list']
+    },
+    {
+      id: 'list-published',
+      title: 'List Published Posts',
+      description: 'Get all published posts',
+      method: 'GET',
+      params: {
+        status: 'published'
+      },
+      tags: ['read', 'filter']
+    },
+    {
+      id: 'list-drafts',
+      title: 'List Draft Posts',
+      description: 'Get all draft posts',
+      method: 'GET',
+      params: {
+        status: 'draft'
+      },
+      tags: ['read', 'filter']
+    },
+    {
+      id: 'list-featured',
+      title: 'List Featured Posts',
+      description: 'Get all featured posts',
+      method: 'GET',
+      params: {
+        featured: 'true'
+      },
+      tags: ['read', 'filter']
+    },
+    {
+      id: 'search-by-title',
+      title: 'Search by Title',
+      description: 'Search posts by title',
+      method: 'GET',
+      params: {
+        search: '{{title}}'
+      },
+      tags: ['read', 'search']
+    },
+    {
+      id: 'create-draft',
+      title: 'Create Draft Post',
+      description: 'Create a new draft post',
+      method: 'POST',
+      payload: {
+        title: 'New Post Title',
+        slug: 'new-post-title',
+        excerpt: 'Brief description of the post',
+        status: 'draft'
+      },
+      tags: ['write', 'create']
+    },
+    {
+      id: 'publish-post',
+      title: 'Publish Post',
+      description: 'Publish a draft post',
+      method: 'PATCH',
+      pathParams: {
+        id: '{{id}}'
+      },
+      payload: {
+        status: 'published',
+        publishedAt: '{{publishedAt}}'
+      },
+      tags: ['write', 'update']
+    },
+    {
+      id: 'unpublish-post',
+      title: 'Unpublish Post',
+      description: 'Revert a post to draft',
+      method: 'PATCH',
+      pathParams: {
+        id: '{{id}}'
+      },
+      payload: {
+        status: 'draft'
+      },
+      tags: ['write', 'update']
+    },
+    {
+      id: 'set-featured',
+      title: 'Set as Featured',
+      description: 'Mark a post as featured',
+      method: 'PATCH',
+      pathParams: {
+        id: '{{id}}'
+      },
+      payload: {
+        featured: true
+      },
+      tags: ['write', 'update']
+    },
+    {
+      id: 'update-content',
+      title: 'Update Content',
+      description: 'Update post content blocks',
+      method: 'PATCH',
+      pathParams: {
+        id: '{{id}}'
+      },
+      payload: {
+        content: '{{content}}'
+      },
+      tags: ['write', 'update']
+    },
+    {
+      id: 'delete-post',
+      title: 'Delete Post',
+      description: 'Delete a post record',
+      method: 'DELETE',
+      pathParams: {
+        id: '{{id}}'
+      },
+      tags: ['write', 'delete']
+    }
+  ]
+})

package/lib/sanitize-post-html.ts

@@ -0,0 +1,52 @@
+import DOMPurify from 'dompurify'
+
+/**
+ * A post body is HTML written by anyone who can create a post, a team member
+ * and not only an owner, so every place that turns it back into DOM sanitises
+ * it first: the public page, the editor and the editor's preview.
+ *
+ * DOMPurify needs a DOM. Where there is none (a server render pass) this
+ * returns '' rather than the raw string, failing closed.
+ */
+export function sanitizePostHtml(html: string | null | undefined): string {
+  if (!html) return ''
+  if (!DOMPurify.isSupported) return ''
+  return DOMPurify.sanitize(html)
+}
+
+/**
+ * Whether sanitising changes the markup beyond what parsing it already does.
+ *
+ * Parsing alone rewrites markup that is not unsafe: the browser's editing
+ * commands leave a list inside a <p>, and the parser moves it out. So the
+ * original and the sanitised result are both parsed and compared as trees; any
+ * difference is something the sanitiser took out or altered. It does not read
+ * DOMPurify.removed, which DOMPurify documents as unfit for security decisions
+ * and which misses changes such as an attribute it rewrites.
+ *
+ * Both are parsed as a fragment, the way the editable area receives a paste. A
+ * document parse moves a leading <script> or <base> into a <head> that a
+ * comparison of bodies never sees. A template's content is inert, so nothing in
+ * the unsanitised markup runs or loads while it is inspected. Where there is no
+ * DOM the answer is true, sending callers down the sanitising path.
+ */
+export function postHtmlHasUnsafeMarkup(html: string | null | undefined): boolean {
+  if (!html) return false
+  if (!DOMPurify.isSupported || typeof document === 'undefined') return true
+  return !sameMarkup(parseFragment(html), parseFragment(DOMPurify.sanitize(html)))
+}
+
+function parseFragment(markup: string): DocumentFragment {
+  const template = document.createElement('template')
+  template.innerHTML = markup
+  return template.content
+}
+
+/** Equal trees, including what each <template> holds: isEqualNode does not look inside one. */
+function sameMarkup(a: DocumentFragment, b: DocumentFragment): boolean {
+  if (!a.isEqualNode(b)) return false
+  const templatesA = Array.from(a.querySelectorAll('template'))
+  const templatesB = Array.from(b.querySelectorAll('template'))
+  return templatesA.length === templatesB.length
+    && templatesA.every((template, i) => sameMarkup(template.content, templatesB[i].content))
+}

package/lib/selectors.ts

@@ -9,8 +9,7 @@
  * - Cypress tests (via tests/cypress/src/selectors.ts)
  */
 
-import { createSelectorHelpers } from '@nextsparkjs/core/lib/test/selector-factory'
-import { CORE_SELECTORS } from '@nextsparkjs/core/lib/test/core-selectors'
+import { createSelectorHelpers, CORE_SELECTORS } from '@nextsparkjs/core/selectors'
 
 // =============================================================================
 // BLOCK SELECTORS
@@ -175,5 +174,5 @@ export const entitySelectors = helpers.entitySelectors
 export type ThemeSelectorsType = typeof THEME_SELECTORS
 export type BlockSelectorsType = typeof BLOCK_SELECTORS
 export type EntitySelectorsType = typeof ENTITY_SELECTORS
-export type { Replacements } from '@nextsparkjs/core/lib/test/selector-factory'
+export type { Replacements } from '@nextsparkjs/core/selectors'
 export { CORE_SELECTORS }

package/migrations/090_billing_sample_data.sql

@@ -0,0 +1,99 @@
+-- Migration: 090_billing_sample_data.sql
+-- Description: Sample billing plans for the blog theme (free, pro, enterprise)
+-- Theme: blog
+-- Phase: Theme sample data - runs before 999_theme_sample_data.sql, whose
+--        subscriptions reference these plans by slug.
+--
+-- Mirrors themes/blog/config/billing.config.ts (slugs, prices, features,
+-- limits) so the seeded plans match what the app's billing config declares.
+
+-- ============================================
+-- SAMPLE PLANS
+-- ============================================
+
+-- Plan: Free
+INSERT INTO public."plans" (
+  id,
+  slug,
+  name,
+  description,
+  type,
+  visibility,
+  "priceMonthly",
+  "priceYearly",
+  "trialDays",
+  features,
+  limits,
+  "sortOrder"
+) VALUES (
+  'plan_blog_free',
+  'free',
+  'Free',
+  'Free plan to get started',
+  'free',
+  'public',
+  0,
+  0,
+  0,
+  '["basic_analytics"]'::jsonb,
+  '{"posts": 10, "monthly_views": 10000, "storage_gb": 1, "authors": 1}'::jsonb,
+  1
+) ON CONFLICT (slug) DO NOTHING;
+
+-- Plan: Pro
+INSERT INTO public."plans" (
+  id,
+  slug,
+  name,
+  description,
+  type,
+  visibility,
+  "priceMonthly",
+  "priceYearly",
+  "trialDays",
+  features,
+  limits,
+  "sortOrder"
+) VALUES (
+  'plan_blog_pro',
+  'pro',
+  'Pro',
+  'Professional plan for bloggers',
+  'paid',
+  'public',
+  2900,
+  29000,
+  14,
+  '["basic_analytics", "custom_domain", "advanced_seo"]'::jsonb,
+  '{"posts": -1, "monthly_views": 100000, "storage_gb": 10, "authors": 5}'::jsonb,
+  2
+) ON CONFLICT (slug) DO NOTHING;
+
+-- Plan: Enterprise
+INSERT INTO public."plans" (
+  id,
+  slug,
+  name,
+  description,
+  type,
+  visibility,
+  "priceMonthly",
+  "priceYearly",
+  "trialDays",
+  features,
+  limits,
+  "sortOrder"
+) VALUES (
+  'plan_blog_enterprise',
+  'enterprise',
+  'Enterprise',
+  'Custom enterprise plan with unlimited features',
+  'enterprise',
+  'hidden',
+  NULL,
+  NULL,
+  30,
+  '["*"]'::jsonb,
+  '{"posts": -1, "monthly_views": -1, "storage_gb": -1, "authors": -1}'::jsonb,
+  3
+) ON CONFLICT (slug) DO NOTHING;

package/migrations/999_theme_sample_data.sql

@@ -662,15 +662,15 @@ INSERT INTO public."subscriptions" (
   "externalSubscriptionId", "externalCustomerId", "createdAt"
 ) VALUES
   -- Marcos Tech → Pro Plan $29/mo (active, monthly)
-  ('sub-blog-marcos', 'team-blog-marcos', 'usr-blog-marcos', 'plan_pro', 'active',
+  ('sub-blog-marcos', 'team-blog-marcos', 'usr-blog-marcos', (SELECT id FROM public."plans" WHERE slug = 'pro'), 'active',
    NOW() - INTERVAL '30 days', NOW() + INTERVAL '30 days', 'monthly', 'stripe',
    'sub_stripe_marcos', 'cus_marcos', NOW() - INTERVAL '6 months'),
   -- Lucia Lifestyle → Pro Plan $29/mo (active, monthly)
-  ('sub-blog-lucia', 'team-blog-lucia', 'usr-blog-lucia', 'plan_pro', 'active',
+  ('sub-blog-lucia', 'team-blog-lucia', 'usr-blog-lucia', (SELECT id FROM public."plans" WHERE slug = 'pro'), 'active',
    NOW() - INTERVAL '15 days', NOW() + INTERVAL '15 days', 'monthly', 'stripe',
    'sub_stripe_lucia', 'cus_lucia', NOW() - INTERVAL '5 months'),
   -- Carlos Finance → Pro Plan (trialing, monthly)
-  ('sub-blog-carlos', 'team-blog-carlos', 'usr-blog-carlos', 'plan_pro', 'trialing',
+  ('sub-blog-carlos', 'team-blog-carlos', 'usr-blog-carlos', (SELECT id FROM public."plans" WHERE slug = 'pro'), 'trialing',
    NOW(), NOW() + INTERVAL '14 days', 'monthly', NULL, NULL, NULL, NOW() - INTERVAL '4 months')
 ON CONFLICT (id) DO NOTHING;
 
@@ -843,64 +843,64 @@ INSERT INTO public."subscriptions" (
   "createdAt", "canceledAt", "cancelAtPeriodEnd", metadata
 ) VALUES
   -- 1. Diana Design - Pro Monthly ACTIVE (8 months customer)
-  ('sub-blog-diana', 'team-blog-diana', 'usr-blog-diana', 'plan_pro', 'active',
+  ('sub-blog-diana', 'team-blog-diana', 'usr-blog-diana', (SELECT id FROM public."plans" WHERE slug = 'pro'), 'active',
    NOW() - INTERVAL '25 days', NOW() + INTERVAL '5 days', 'monthly',
    'stripe', 'sub_stripe_diana', 'cus_diana',
    NOW() - INTERVAL '8 months', NULL, false, '{}'::jsonb),
 
   -- 2. Elena Eco - Pro Monthly ACTIVE (7 months customer)
-  ('sub-blog-elena', 'team-blog-elena', 'usr-blog-elena', 'plan_pro', 'active',
+  ('sub-blog-elena', 'team-blog-elena', 'usr-blog-elena', (SELECT id FROM public."plans" WHERE slug = 'pro'), 'active',
    NOW() - INTERVAL '20 days', NOW() + INTERVAL '10 days', 'monthly',
    'stripe', 'sub_stripe_elena', 'cus_elena',
    NOW() - INTERVAL '7 months', NULL, false, '{}'::jsonb),
 
   -- 3. Felix Fitness - Pro Yearly ACTIVE (14 months = 2nd year)
-  ('sub-blog-felix', 'team-blog-felix', 'usr-blog-felix', 'plan_pro', 'active',
+  ('sub-blog-felix', 'team-blog-felix', 'usr-blog-felix', (SELECT id FROM public."plans" WHERE slug = 'pro'), 'active',
    NOW() - INTERVAL '60 days', NOW() + INTERVAL '305 days', 'yearly',
    'stripe', 'sub_stripe_felix', 'cus_felix',
    NOW() - INTERVAL '14 months', NULL, false, '{}'::jsonb),
 
   -- 4. Gloria Gourmet - Pro Yearly ACTIVE (12 months)
-  ('sub-blog-gloria', 'team-blog-gloria', 'usr-blog-gloria', 'plan_pro', 'active',
+  ('sub-blog-gloria', 'team-blog-gloria', 'usr-blog-gloria', (SELECT id FROM public."plans" WHERE slug = 'pro'), 'active',
    NOW() - INTERVAL '30 days', NOW() + INTERVAL '335 days', 'yearly',
    'stripe', 'sub_stripe_gloria', 'cus_gloria',
    NOW() - INTERVAL '12 months', NULL, false, '{}'::jsonb),
 
   -- 5. Hugo Health - Pro Monthly ACTIVE (6 months customer)
-  ('sub-blog-hugo', 'team-blog-hugo', 'usr-blog-hugo', 'plan_pro', 'active',
+  ('sub-blog-hugo', 'team-blog-hugo', 'usr-blog-hugo', (SELECT id FROM public."plans" WHERE slug = 'pro'), 'active',
    NOW() - INTERVAL '18 days', NOW() + INTERVAL '12 days', 'monthly',
    'stripe', 'sub_stripe_hugo', 'cus_hugo',
    NOW() - INTERVAL '6 months', NULL, false, '{}'::jsonb),
 
   -- 6. Iris Inspire - Pro Monthly PAST_DUE (failed payment)
-  ('sub-blog-iris', 'team-blog-iris', 'usr-blog-iris', 'plan_pro', 'past_due',
+  ('sub-blog-iris', 'team-blog-iris', 'usr-blog-iris', (SELECT id FROM public."plans" WHERE slug = 'pro'), 'past_due',
    NOW() - INTERVAL '35 days', NOW() - INTERVAL '5 days', 'monthly',
    'stripe', 'sub_stripe_iris', 'cus_iris',
    NOW() - INTERVAL '5 months', NULL, false,
    '{"lastPaymentAttempt": "failed", "retryCount": 2}'::jsonb),
 
   -- 7. Jorge Journey - Pro Monthly CANCELED (voluntary - user decided to cancel)
-  ('sub-blog-jorge', 'team-blog-jorge', 'usr-blog-jorge', 'plan_pro', 'canceled',
+  ('sub-blog-jorge', 'team-blog-jorge', 'usr-blog-jorge', (SELECT id FROM public."plans" WHERE slug = 'pro'), 'canceled',
    NOW() - INTERVAL '45 days', NOW() - INTERVAL '15 days', 'monthly',
    'stripe', 'sub_stripe_jorge', 'cus_jorge',
    NOW() - INTERVAL '9 months', NOW() - INTERVAL '15 days', false,
    '{"cancelReason": "voluntary", "canceledBy": "user", "feedback": "taking a break"}'::jsonb),
 
   -- 8. Karen Kitchen - Pro Yearly CANCELED (payment failed 4 times)
-  ('sub-blog-karen', 'team-blog-karen', 'usr-blog-karen', 'plan_pro', 'canceled',
+  ('sub-blog-karen', 'team-blog-karen', 'usr-blog-karen', (SELECT id FROM public."plans" WHERE slug = 'pro'), 'canceled',
    NOW() - INTERVAL '400 days', NOW() - INTERVAL '35 days', 'yearly',
    'stripe', 'sub_stripe_karen', 'cus_karen',
    NOW() - INTERVAL '15 months', NOW() - INTERVAL '35 days', false,
    '{"cancelReason": "payment_failed", "failedAttempts": 4, "lastCardEnding": "4242"}'::jsonb),
 
   -- 9. Leo Learn - Free Plan ACTIVE (no billing)
-  ('sub-blog-leo', 'team-blog-leo', 'usr-blog-leo', 'plan_free', 'active',
+  ('sub-blog-leo', 'team-blog-leo', 'usr-blog-leo', (SELECT id FROM public."plans" WHERE slug = 'free'), 'active',
    NOW() - INTERVAL '2 months', NOW() + INTERVAL '100 years', 'monthly',
    NULL, NULL, NULL,
    NOW() - INTERVAL '2 months', NULL, false, '{}'::jsonb),
 
   -- 10. Maria Music - Pro Monthly TRIALING (5 days in)
-  ('sub-blog-maria', 'team-blog-maria', 'usr-blog-maria', 'plan_pro', 'trialing',
+  ('sub-blog-maria', 'team-blog-maria', 'usr-blog-maria', (SELECT id FROM public."plans" WHERE slug = 'pro'), 'trialing',
    NOW() - INTERVAL '5 days', NOW() + INTERVAL '25 days', 'monthly',
    NULL, NULL, NULL,
    NOW() - INTERVAL '5 days', NULL, false, '{}'::jsonb)

package/package.json

@@ -1,22 +1,30 @@
 {
   "name": "@nextsparkjs/theme-blog",
-  "version": "0.1.0-beta.19",
+  "version": "0.1.0-beta.190",
   "private": false,
   "type": "module",
   "main": "./config/theme.config.ts",
   "requiredPlugins": [],
-  "dependencies": {},
+  "dependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
+    "dompurify": "^3.2.7",
+    "next-themes": "^0.4.6"
+  },
   "peerDependencies": {
+    "@nextsparkjs/core": ">=0.1.0-0",
+    "@nextsparkjs/testing": ">=0.1.0-0",
     "lucide-react": "^0.539.0",
-    "next": "^15.0.0",
+    "next": "^15.0.0 || ^16.0.0",
     "next-intl": "^4.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "zod": "^4.0.0",
-    "@nextsparkjs/core": "0.1.0-beta.19"
+    "zod": "^4.0.0"
   },
   "nextspark": {
     "type": "theme",
     "name": "blog"
+  },
+  "devDependencies": {
+    "@types/dompurify": "^3.2.0"
   }
 }

package/styles/globals.css

@@ -3,8 +3,54 @@
  *
  * Warm amber/orange palette with editorial typography.
  * Fonts: Oxanium (sans), Merriweather (serif), Fira Code (mono)
+ *
+ * ÚNICA FUENTE DE VERDAD para estilos del theme.
+ * Editar este archivo para customizar el design system.
  */
 
+/* =============================================
+   IMPORTS
+   ============================================= */
+@import "tailwindcss";
+
+/* =============================================
+   TAILWIND v4 DARK MODE CONFIGURATION
+
+   Por defecto Tailwind v4 usa @media (prefers-color-scheme: dark)
+   para las variantes dark:. Esto causa problemas porque:
+   - next-themes usa la clase .dark en el HTML
+   - El sistema operativo puede tener dark mode aunque la app use light
+
+   Esta configuración hace que Tailwind use el selector de clase .dark
+   en lugar de la media query, sincronizándose con next-themes.
+   ============================================= */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@plugin "@tailwindcss/container-queries";
+/* @nextsparkjs/core/styles/ui.css is intentionally NOT imported here: it is
+   pre-compiled by packages/core/scripts/build/build-ui-css.mjs with a plain
+   `@import "tailwindcss"` that has no knowledge of this theme's
+   `@custom-variant dark` override above, so it bakes every dark: utility it
+   contains (including ThemeToggle's own dark:-rotate-90/scale-0 icon
+   classes) using Tailwind's default `@media (prefers-color-scheme: dark)`
+   strategy. Importing that already-compiled CSS re-declares the same
+   classes with that conflicting strategy, so they stop following
+   next-themes' `.dark`/`.light` class and instead silently track the
+   visitor's OS/browser color-scheme preference (issue #110). The @source
+   globs below already scan core's source (monorepo) and its compiled dist
+   output (npm) directly into THIS compilation, so they pick up the same
+   classes correctly scoped to `@custom-variant dark` — the separate ui.css
+   import is redundant. */
+@import "@nextsparkjs/core/styles/utilities.css";
+@import "@nextsparkjs/core/styles/docs.css";
+@source "../../../**/*.{js,ts,jsx,tsx}";
+/* Core package: monorepo (short path) + npm projects (long path) */
+@source "../node_modules/@nextsparkjs/core/dist/**/*.js";
+@source "../../../../node_modules/@nextsparkjs/core/dist/**/*.js";
+
+/* =============================================
+   BLOG THEME - LIGHT MODE
+   ============================================= */
 :root {
     --background: oklch(0.9885 0.0057 84.5659);
     --foreground: oklch(0.3660 0.0251 49.6085);
@@ -152,6 +198,18 @@
     --shadow-2xl: var(--shadow-2xl);
 }
 
+/* =============================================
+   BASE STYLES
+   ============================================= */
+* {
+  border-color: var(--border);
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
 /* ============================================================================
    TYPOGRAPHY
    ============================================================================ */

package/templates/(public)/author/[username]/page.tsx

@@ -13,6 +13,7 @@ import Image from 'next/image'
 import { Twitter, Linkedin, Globe, User } from 'lucide-react'
 import { PostCard } from '@/themes/blog/components/public/PostCard'
 import { cn } from '@nextsparkjs/core/lib/utils'
+import { withBasePath, withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
 
 interface Author {
   id: string
@@ -60,7 +61,7 @@ export default function AuthorPage({ params }: PageProps) {
         setLoading(true)
         setError(null)
 
-        const response = await fetch(`/api/v1/theme/blog/authors/${username}`, {
+        const response = await fetch(withBasePath(`/api/v1/theme/blog/authors/${username}`), {
           method: 'GET',
           headers: {
             'Content-Type': 'application/json',
@@ -137,7 +138,7 @@ export default function AuthorPage({ params }: PageProps) {
           <div className="flex-shrink-0">
             {author.image ? (
               <Image
-                src={author.image}
+                src={withBasePathIfInApp(author.image)}
                 alt={author.name}
                 width={128}
                 height={128}
@@ -165,7 +166,7 @@ export default function AuthorPage({ params }: PageProps) {
             <div className="flex items-center gap-4">
               {author.socialTwitter && (
                 <a
-                  href={author.socialTwitter}
+                  href={withBasePathIfInApp(author.socialTwitter)}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -176,7 +177,7 @@ export default function AuthorPage({ params }: PageProps) {
               )}
               {author.socialLinkedin && (
                 <a
-                  href={author.socialLinkedin}
+                  href={withBasePathIfInApp(author.socialLinkedin)}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
@@ -187,7 +188,7 @@ export default function AuthorPage({ params }: PageProps) {
               )}
               {author.socialWebsite && (
                 <a
-                  href={author.socialWebsite}
+                  href={withBasePathIfInApp(author.socialWebsite)}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"

package/templates/(public)/authors/page.tsx

@@ -10,6 +10,7 @@ import { useState, useEffect } from 'react'
 import Link from 'next/link'
 import Image from 'next/image'
 import { User } from 'lucide-react'
+import { withBasePath, withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
 
 interface Author {
   id: string
@@ -31,7 +32,7 @@ export default function AuthorsPage() {
         setLoading(true)
         setError(null)
 
-        const response = await fetch('/api/v1/theme/blog/authors', {
+        const response = await fetch(withBasePath('/api/v1/theme/blog/authors'), {
           method: 'GET',
           headers: {
             'Content-Type': 'application/json',
@@ -115,7 +116,7 @@ export default function AuthorsPage() {
                 <div className="flex justify-center mb-4">
                   {author.image ? (
                     <Image
-                      src={author.image}
+                      src={withBasePathIfInApp(author.image)}
                       alt={author.name}
                       width={80}
                       height={80}

package/templates/(public)/page.tsx

@@ -14,6 +14,7 @@ import { useTranslations } from 'next-intl'
 import { PostCard } from '@/themes/blog/components/public/PostCard'
 import { cn } from '@nextsparkjs/core/lib/utils'
 import { Loader2 } from 'lucide-react'
+import { withBasePath } from '@nextsparkjs/core/lib/base-path'
 
 interface Post {
   id: string
@@ -65,7 +66,7 @@ export default function BlogHomePage() {
 
       // Fetch published posts from ALL authors via public endpoint
       // This endpoint does not require authentication and aggregates posts cross-team
-      const response = await fetch('/api/v1/theme/blog/posts/public?limit=20', {
+      const response = await fetch(withBasePath('/api/v1/theme/blog/posts/public?limit=20'), {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',

package/templates/(public)/posts/[slug]/page.tsx

@@ -12,10 +12,12 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { ArrowLeft, Calendar, Clock, Loader2, Share2, Bookmark } from 'lucide-react'
 import { use, useEffect, useState } from 'react'
+import { sanitizePostHtml } from '@/themes/blog/lib/sanitize-post-html'
 import { ReadingProgress } from '@/themes/blog/components/public/ReadingProgress'
 import { AuthorBio } from '@/themes/blog/components/public/AuthorBio'
 import { RelatedPosts } from '@/themes/blog/components/public/RelatedPosts'
 import { Button } from '@nextsparkjs/core/components/ui/button'
+import { withBasePath, withBasePathInHtml, withBasePathIfInApp } from '@nextsparkjs/core/lib/base-path'
 
 interface Post {
   id: string
@@ -57,7 +59,7 @@ async function fetchPost(identifier: string): Promise<Post | null> {
   try {
     const headers = buildHeaders()
 
-    const byIdResponse = await fetch(`/api/v1/posts?ids=${encodeURIComponent(identifier)}&status=published&limit=1`, {
+    const byIdResponse = await fetch(withBasePath(`/api/v1/posts?ids=${encodeURIComponent(identifier)}&status=published&limit=1`), {
       credentials: 'include',
       headers,
     })
@@ -69,7 +71,7 @@ async function fetchPost(identifier: string): Promise<Post | null> {
       }
     }
 
-    const bySlugResponse = await fetch(`/api/v1/posts?slug=${encodeURIComponent(identifier)}&status=published&limit=1`, {
+    const bySlugResponse = await fetch(withBasePath(`/api/v1/posts?slug=${encodeURIComponent(identifier)}&status=published&limit=1`), {
       credentials: 'include',
       headers,
     })
@@ -145,7 +147,7 @@ async function fetchRelatedPosts(currentPostId: string): Promise<RelatedPost[]>
     const headers = buildHeaders()
 
     // Fetch latest published posts
-    const response = await fetch('/api/v1/posts?status=published&limit=4&sortBy=publishedAt&sortOrder=desc', {
+    const response = await fetch(withBasePath('/api/v1/posts?status=published&limit=4&sortBy=publishedAt&sortOrder=desc'), {
       credentials: 'include',
       headers,
     })
@@ -281,7 +283,7 @@ export default function PostPage({ params }: PageProps) {
           <figure className="mb-12">
             <div className="aspect-[21/9] relative overflow-hidden rounded-xl">
               <Image
-                src={post.featuredImage}
+                src={withBasePathIfInApp(post.featuredImage)}
                 alt={post.title}
                 fill
                 className="object-cover"
@@ -294,7 +296,7 @@ export default function PostPage({ params }: PageProps) {
 
         {/* Article Content */}
         <div className="article-content">
-          <div dangerouslySetInnerHTML={{ __html: renderContent(post.content) }} />
+          <div dangerouslySetInnerHTML={{ __html: withBasePathInHtml(sanitizePostHtml(renderContent(post.content))) }} />
         </div>
 
         {/* Divider */}