@@ -505,32 +381,23 @@ export function StoreSettingsEditor() {
{activeSection === 'identity' && (
setModalImage(null)}>
-
e.stopPropagation()}>
-
-
-
Open original
+
setModalImage(null)}>
+
event.stopPropagation()}>
+
-
- )}
-
-
-
- Reset storefront theme?
-
- Resetting restores the bundled colors, fonts, and corner radius. This action cannot be undone.
-
-
-
- Cancel
-
- {themeSaving ? 'Resetting...' : 'Reset Theme'}
-
-
-
-
-
-
-
- Settings saved
-
- Store settings updated successfully.
-
-
-
- setSavedOpen(false)}>OK
-
-
-
-
-
-
- Something went wrong
- {errorText}
-
-
- OK
-
-
-
+ )}
+
+
+
+
+ Reset storefront theme?
+ Resetting restores the bundled colors, fonts, and corner radius. This action cannot be undone.
+
+
+ Cancel
+ {themeSaving ? 'Resetting...' : 'Reset Theme'}
+
+
+
+
+
+
+
+ Settings saved
+ Store settings updated successfully.
+
+
+ setSavedOpen(false)}>OK
+
+
+
+
+
+
+
+ Something went wrong
+ {errorText}
+
+
+ setErrorOpen(false)}>OK
+
+
+
)
}
diff --git a/src/components/storefront/page-builder/PageBuilderBlocks.jsx b/src/components/storefront/page-builder/PageBuilderBlocks.jsx
new file mode 100644
index 0000000..78fc503
--- /dev/null
+++ b/src/components/storefront/page-builder/PageBuilderBlocks.jsx
@@ -0,0 +1,188 @@
+import { useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { normalizeImageUrl } from '../../../lib/utils'
+import { Carousel } from '../Carousel'
+import { ProductCard } from '../ProductCard'
+
+function StorefrontLink({ to, children, variant = 'primary', disableNavigation }) {
+ if (!to || !children) return null
+
+ const className = variant === 'primary'
+ ? 'storefront-button-primary storefront-radius-sm inline-flex items-center justify-center px-6 py-3 text-sm font-semibold'
+ : 'storefront-button-outline storefront-radius-sm inline-flex items-center justify-center px-6 py-3 text-sm font-semibold bg-white'
+
+ if (disableNavigation) {
+ return
{children}
+ }
+
+ if (to.startsWith('/')) {
+ return
{children}
+ }
+
+ return
{children}
+}
+
+export function HeroSection({
+ title,
+ subtitle,
+ imageUrl,
+ primaryLabel,
+ primaryPath,
+ secondaryLabel,
+ secondaryPath,
+ disableNavigation,
+}) {
+ return (
+
+ {imageUrl ? (
+ })
+ ) : (
+
+ )}
+
+
+
+
+
{title}
+ {subtitle &&
{subtitle}
}
+ {(primaryLabel || secondaryLabel) && (
+
+ {primaryLabel}
+ {secondaryLabel}
+
+ )}
+
+
+ )
+}
+
+export function FeaturedProducts({ heading, maxItems = 3, products = [] }) {
+ const featuredProducts = products.slice(0, Number(maxItems) || 3)
+
+ if (!products.length) return null
+
+ return (
+
+ {heading && {heading}
}
+
+
+ )
+}
+
+export function ProductGrid({
+ heading,
+ showCollectionFilter = true,
+ products = [],
+ collections = [],
+ disableNavigation,
+}) {
+ const [selectedCollection, setSelectedCollection] = useState(null)
+ const collectionFilterEnabled = showCollectionFilter === true || showCollectionFilter === 'true'
+ const filteredProducts = useMemo(() => (
+ selectedCollection
+ ? products.filter((product) => product.collectionId === selectedCollection)
+ : products
+ ), [products, selectedCollection])
+
+ return (
+
+ {collectionFilterEnabled && collections.length > 0 && (
+
+
+
+ {collections.map((collection) => (
+
+ ))}
+
+
{heading}
}
+
+ {filteredProducts.length === 0 ? (
+
+
No products found
+
+ {selectedCollection ? 'No products in this collection yet.' : 'No products available at the moment.'}
+
+
+ {filteredProducts.map((product) => (
+
+ ))}
+
+ )
+}
+
+export function RichTextSection({ heading, body }) {
+ const paragraphs = String(body || '').split(/\n{2,}/).filter(Boolean)
+
+ return (
+
+
+ {heading &&
{heading}
}
+
+ {paragraphs.map((paragraph, index) => (
+
{paragraph}
+ ))}
+
+
+ )
+}
+
+export function ImageTextSection({ imageUrl, heading, body, imageAlign = 'left' }) {
+ const imageFirst = imageAlign !== 'right'
+
+ return (
+
+
+ {imageFirst &&
}
+
+ {heading &&
{heading}
}
+
+ {String(body || '').split(/\n{2,}/).filter(Boolean).map((paragraph, index) => (
+
{paragraph}
+ ))}
+
+
+ {!imageFirst &&
}
+
+ )
+}
+
+function ImagePanel({ imageUrl, heading }) {
+ if (!imageUrl) {
+ return
+ }
+
+ return (
+
+ )
+}
diff --git a/src/components/storefront/page-builder/PageRenderer.jsx b/src/components/storefront/page-builder/PageRenderer.jsx
new file mode 100644
index 0000000..9e8c482
--- /dev/null
+++ b/src/components/storefront/page-builder/PageRenderer.jsx
@@ -0,0 +1,14 @@
+import { Render } from '@puckeditor/core'
+import { createPageBuilderConfig } from './config'
+
+export function PageRenderer({
+ data,
+ products = [],
+ collections = [],
+ disableNavigation = false,
+}) {
+ const config = createPageBuilderConfig({ products, collections, disableNavigation })
+ const renderData = data || { content: [], root: { props: {} } }
+
+ return
+}
diff --git a/src/components/storefront/page-builder/config.jsx b/src/components/storefront/page-builder/config.jsx
new file mode 100644
index 0000000..934dd7c
--- /dev/null
+++ b/src/components/storefront/page-builder/config.jsx
@@ -0,0 +1,123 @@
+import {
+ FeaturedProducts,
+ HeroSection,
+ ImageTextSection,
+ ProductGrid,
+ RichTextSection,
+} from './PageBuilderBlocks'
+
+export function createPageBuilderConfig(options = {}) {
+ const {
+ products = [],
+ collections = [],
+ disableNavigation = false,
+ } = options
+
+ return {
+ components: {
+ HeroSection: {
+ label: 'Hero section',
+ fields: {
+ title: { type: 'text' },
+ subtitle: { type: 'textarea' },
+ imageUrl: { type: 'text' },
+ primaryLabel: { type: 'text' },
+ primaryPath: { type: 'text' },
+ secondaryLabel: { type: 'text' },
+ secondaryPath: { type: 'text' },
+ },
+ defaultProps: {
+ title: 'Welcome to OpenShop',
+ subtitle: 'Discover amazing products at unbeatable prices.',
+ imageUrl: '',
+ primaryLabel: 'Shop Now',
+ primaryPath: '#products',
+ secondaryLabel: 'Learn More',
+ secondaryPath: '/about',
+ },
+ render: (props) =>
,
+ },
+ FeaturedProducts: {
+ label: 'Featured products',
+ fields: {
+ heading: { type: 'text' },
+ maxItems: { type: 'number', min: 1, max: 12 },
+ },
+ defaultProps: {
+ heading: 'Featured Products',
+ maxItems: 3,
+ },
+ render: (props) =>
,
+ },
+ ProductGrid: {
+ label: 'Product grid',
+ fields: {
+ heading: { type: 'text' },
+ showCollectionFilter: {
+ type: 'select',
+ options: [
+ { label: 'Show collection filter', value: true },
+ { label: 'Hide collection filter', value: false },
+ ],
+ },
+ },
+ defaultProps: {
+ heading: 'All Products',
+ showCollectionFilter: true,
+ },
+ render: (props) => (
+
+ ),
+ },
+ RichTextSection: {
+ label: 'Text section',
+ fields: {
+ heading: { type: 'text' },
+ body: { type: 'textarea' },
+ },
+ defaultProps: {
+ heading: 'About this store',
+ body: 'Write your content here.',
+ },
+ render: (props) =>
,
+ },
+ ImageTextSection: {
+ label: 'Image and text',
+ fields: {
+ imageUrl: { type: 'text' },
+ heading: { type: 'text' },
+ body: { type: 'textarea' },
+ imageAlign: {
+ type: 'select',
+ options: [
+ { label: 'Image left', value: 'left' },
+ { label: 'Image right', value: 'right' },
+ ],
+ },
+ },
+ defaultProps: {
+ imageUrl: '',
+ heading: 'Section heading',
+ body: 'Add supporting copy here.',
+ imageAlign: 'left',
+ },
+ render: (props) =>
,
+ },
+ },
+ categories: {
+ layout: {
+ title: 'Layout',
+ components: ['HeroSection', 'ImageTextSection', 'RichTextSection'],
+ },
+ commerce: {
+ title: 'Commerce',
+ components: ['FeaturedProducts', 'ProductGrid'],
+ },
+ },
+ }
+}
diff --git a/src/config/constants.js b/src/config/constants.js
index d68eb29..13b0554 100644
--- a/src/config/constants.js
+++ b/src/config/constants.js
@@ -47,6 +47,7 @@ export const KV_KEYS = {
COLLECTIONS_LIST: 'collections:all',
MEDIA_LIST: 'media:all',
STORE_SETTINGS: 'store:settings',
+ STOREFRONT_PAGE_PREFIX: 'storefront:page:',
DRIVE_TOKEN: 'drive:oauth:tokens',
DRIVE_FOLDER_PREFIX: 'drive:folder',
ADMIN_TOKEN_PREFIX: 'admin_token:',
diff --git a/src/lib/pageContent.js b/src/lib/pageContent.js
new file mode 100644
index 0000000..162ff9a
--- /dev/null
+++ b/src/lib/pageContent.js
@@ -0,0 +1,282 @@
+const PAGE_VERSION = 1
+const MAX_PAGE_BYTES = 50000
+const MAX_TEXT_LENGTH = 5000
+
+export const ALLOWED_PAGE_SLUGS = ['home', 'about']
+
+export const PAGE_COMPONENT_PROPS = {
+ HeroSection: {
+ title: 'string',
+ subtitle: 'string',
+ imageUrl: 'url',
+ primaryLabel: 'string',
+ primaryPath: 'url',
+ secondaryLabel: 'string',
+ secondaryPath: 'url',
+ },
+ FeaturedProducts: {
+ heading: 'string',
+ maxItems: 'number',
+ },
+ ProductGrid: {
+ heading: 'string',
+ showCollectionFilter: 'boolean',
+ },
+ RichTextSection: {
+ heading: 'string',
+ body: 'string',
+ },
+ ImageTextSection: {
+ imageUrl: 'url',
+ heading: 'string',
+ body: 'string',
+ imageAlign: 'enum:left,right',
+ },
+}
+
+export const ALLOWED_PAGE_COMPONENTS = Object.keys(PAGE_COMPONENT_PROPS)
+
+export function getPageContentKey(slug) {
+ assertPageSlug(slug)
+ return `storefront:page:${slug}`
+}
+
+export function assertPageSlug(slug) {
+ if (!ALLOWED_PAGE_SLUGS.includes(slug)) {
+ throw new Error(`Invalid page slug: ${slug}`)
+ }
+}
+
+export function createDefaultPageRecord(slug, settings = {}) {
+ assertPageSlug(slug)
+ const data = slug === 'about'
+ ? createDefaultAboutData(settings)
+ : createDefaultHomeData(settings)
+
+ return {
+ slug,
+ version: PAGE_VERSION,
+ updatedAt: null,
+ data,
+ }
+}
+
+export function createPageRecord(slug, data, now = new Date()) {
+ assertPageSlug(slug)
+ const sanitizedData = validatePageData(data)
+ return {
+ slug,
+ version: PAGE_VERSION,
+ updatedAt: now.toISOString(),
+ data: sanitizedData,
+ }
+}
+
+export function validatePageRecord(record) {
+ if (!record || typeof record !== 'object') {
+ throw new Error('Invalid page record')
+ }
+
+ assertPageSlug(record.slug)
+
+ return {
+ slug: record.slug,
+ version: PAGE_VERSION,
+ updatedAt: typeof record.updatedAt === 'string' ? record.updatedAt : null,
+ data: validatePageData(record.data),
+ }
+}
+
+export function validatePageData(data) {
+ if (!data || typeof data !== 'object' || Array.isArray(data)) {
+ throw new Error('Page data must be an object')
+ }
+
+ const serialized = JSON.stringify(data)
+ if (serialized.length > MAX_PAGE_BYTES) {
+ throw new Error('Page data is too large')
+ }
+
+ if (!Array.isArray(data.content)) {
+ throw new Error('Page data must include a content array')
+ }
+
+ if (!data.root || typeof data.root !== 'object' || Array.isArray(data.root)) {
+ throw new Error('Page data must include a root object')
+ }
+
+ return {
+ content: data.content.map(validateContentItem),
+ root: {
+ ...data.root,
+ props: sanitizePlainObject(data.root.props || {}),
+ },
+ }
+}
+
+function validateContentItem(item) {
+ if (!item || typeof item !== 'object' || Array.isArray(item)) {
+ throw new Error('Page content entries must be objects')
+ }
+
+ if (!ALLOWED_PAGE_COMPONENTS.includes(item.type)) {
+ throw new Error(`Unsupported page component: ${item.type}`)
+ }
+
+ return {
+ type: item.type,
+ props: sanitizeProps(item.type, item.props || {}),
+ }
+}
+
+function sanitizeProps(type, props) {
+ if (!props || typeof props !== 'object' || Array.isArray(props)) {
+ throw new Error(`${type} props must be an object`)
+ }
+
+ const schema = PAGE_COMPONENT_PROPS[type]
+ const sanitized = {}
+
+ for (const [key, value] of Object.entries(props)) {
+ if (key === 'id') {
+ sanitized.id = sanitizeString(value, 128)
+ continue
+ }
+
+ const expectedType = schema[key]
+ if (!expectedType) continue
+
+ sanitized[key] = sanitizeValue(key, value, expectedType)
+ }
+
+ return sanitized
+}
+
+function sanitizeValue(key, value, expectedType) {
+ if (expectedType === 'string') {
+ return sanitizeString(value, MAX_TEXT_LENGTH)
+ }
+
+ if (expectedType === 'url') {
+ const text = sanitizeString(value, 1000)
+ if (!text) return ''
+ if (isSafeUrl(text)) return text
+ throw new Error(`${key} must be an http, https, or relative URL`)
+ }
+
+ if (expectedType === 'number') {
+ const numberValue = Number(value)
+ if (!Number.isFinite(numberValue)) {
+ throw new Error(`${key} must be a number`)
+ }
+ return Math.max(0, Math.min(Math.round(numberValue), 24))
+ }
+
+ if (expectedType === 'boolean') {
+ if (value === true || value === 'true') return true
+ if (value === false || value === 'false') return false
+ throw new Error(`${key} must be true or false`)
+ }
+
+ if (expectedType.startsWith('enum:')) {
+ const options = expectedType.replace('enum:', '').split(',')
+ const text = sanitizeString(value, 100)
+ if (!options.includes(text)) {
+ throw new Error(`${key} must be one of: ${options.join(', ')}`)
+ }
+ return text
+ }
+
+ throw new Error(`Unsupported field type for ${key}`)
+}
+
+function sanitizeString(value, maxLength) {
+ if (value === undefined || value === null) return ''
+ if (typeof value !== 'string') {
+ throw new Error('Expected a string value')
+ }
+ return value.slice(0, maxLength)
+}
+
+function sanitizePlainObject(value) {
+ if (!value || typeof value !== 'object' || Array.isArray(value)) return {}
+ return JSON.parse(JSON.stringify(value))
+}
+
+function isSafeUrl(value) {
+ if (value.startsWith('#')) return true
+ if (value.startsWith('/') && !value.startsWith('//')) return true
+
+ try {
+ const url = new URL(value)
+ return url.protocol === 'http:' || url.protocol === 'https:'
+ } catch {
+ return false
+ }
+}
+
+function createDefaultHomeData(settings) {
+ return {
+ content: [
+ {
+ type: 'HeroSection',
+ props: {
+ id: 'home-hero',
+ title: settings.heroTitle || 'Welcome to OpenShop',
+ subtitle: settings.heroSubtitle || 'Discover amazing products at unbeatable prices. Built on Cloudflare for lightning-fast performance.',
+ imageUrl: settings.heroImageUrl || '',
+ primaryLabel: 'Shop Now',
+ primaryPath: '#products',
+ secondaryLabel: 'Learn More',
+ secondaryPath: '/about',
+ },
+ },
+ {
+ type: 'FeaturedProducts',
+ props: {
+ id: 'featured-products',
+ heading: 'Featured Products',
+ maxItems: 3,
+ },
+ },
+ {
+ type: 'ProductGrid',
+ props: {
+ id: 'product-grid',
+ heading: 'All Products',
+ showCollectionFilter: true,
+ },
+ },
+ ],
+ root: { props: {} },
+ }
+}
+
+function createDefaultAboutData(settings) {
+ return {
+ content: [
+ {
+ type: 'HeroSection',
+ props: {
+ id: 'about-hero',
+ title: settings.aboutHeroTitle || 'About Us',
+ subtitle: settings.aboutHeroSubtitle || 'Learn more about our story and mission',
+ imageUrl: settings.aboutHeroImageUrl || '',
+ primaryLabel: '',
+ primaryPath: '',
+ secondaryLabel: '',
+ secondaryPath: '',
+ },
+ },
+ {
+ type: 'RichTextSection',
+ props: {
+ id: 'about-content',
+ heading: '',
+ body: settings.aboutContent || 'Welcome to our store! We are passionate about providing high-quality products and exceptional customer service. Our journey began with a simple idea: to make great products accessible to everyone.\n\nWe believe in quality, sustainability, and building lasting relationships with our customers. Every product in our catalog is carefully selected to meet our high standards.\n\nThank you for choosing us for your shopping needs!',
+ },
+ },
+ ],
+ root: { props: {} },
+ }
+}
diff --git a/src/middleware/securityHeaders.js b/src/middleware/securityHeaders.js
index f1dba4f..9d52761 100644
--- a/src/middleware/securityHeaders.js
+++ b/src/middleware/securityHeaders.js
@@ -23,7 +23,7 @@ export async function securityHeadersMiddleware(c, next) {
"img-src 'self' data: https: blob:",
"font-src 'self' data:",
"connect-src 'self' https://api.stripe.com https://*.stripe.com https://oauth2.googleapis.com https://www.googleapis.com",
- "frame-src https://js.stripe.com https://hooks.stripe.com",
+ "frame-src 'self' https://js.stripe.com https://hooks.stripe.com",
"frame-ancestors 'none'",
"base-uri 'self'",
"form-action 'self'",
diff --git a/src/pages/storefront/About.jsx b/src/pages/storefront/About.jsx
index 3be48e1..a20e744 100644
--- a/src/pages/storefront/About.jsx
+++ b/src/pages/storefront/About.jsx
@@ -1,85 +1,43 @@
import { useEffect, useState } from 'react'
import { Navbar } from '../../components/storefront/Navbar'
import { Footer } from '../../components/storefront/Footer'
-import { normalizeImageUrl } from '../../lib/utils'
+import { PageRenderer } from '../../components/storefront/page-builder/PageRenderer'
export function About() {
- const [settings, setSettings] = useState({
- aboutHeroImageUrl: '',
- aboutHeroTitle: 'About Us',
- aboutHeroSubtitle: 'Learn more about our story and mission',
- aboutContent: 'Welcome to our store! We are passionate about providing high-quality products and exceptional customer service. Our journey began with a simple idea: to make great products accessible to everyone.\n\nWe believe in quality, sustainability, and building lasting relationships with our customers. Every product in our catalog is carefully selected to meet our high standards.\n\nThank you for choosing us for your shopping needs!'
- })
+ const [page, setPage] = useState(null)
+ const [loading, setLoading] = useState(true)
useEffect(() => {
let isMounted = true
- async function fetchSettings() {
+
+ async function fetchPage() {
try {
- const res = await fetch('/api/store-settings')
+ const res = await fetch('/api/storefront/pages/about')
if (res.ok) {
const data = await res.json()
- if (isMounted) setSettings(prev => ({
- ...prev,
- aboutHeroImageUrl: data.aboutHeroImageUrl || prev.aboutHeroImageUrl || '',
- aboutHeroTitle: data.aboutHeroTitle || prev.aboutHeroTitle,
- aboutHeroSubtitle: data.aboutHeroSubtitle || prev.aboutHeroSubtitle,
- aboutContent: data.aboutContent || prev.aboutContent || ''
- }))
+ if (isMounted) setPage(data)
}
} catch (e) {
- console.error('Failed to load store settings', e)
+ console.error('Failed to load page content', e)
+ } finally {
+ if (isMounted) setLoading(false)
}
}
- fetchSettings()
+
+ fetchPage()
return () => { isMounted = false }
}, [])
return (
-
+
-
- {/* Hero Section */}
-
- {settings.aboutHeroImageUrl ? (
- })
- ) : (
-
- )}
-
-
-
-
-
-
{settings.aboutHeroTitle}
-
{settings.aboutHeroSubtitle}
-
+ {loading ? (
+
-
-
-
-
- {/* Content Section */}
-
-
-
- {(settings.aboutContent || '').split('\n\n').map((paragraph, index) => (
-
- {paragraph}
-
- ))}
-
-
-
- {/* Footer */}
+ ) : (
+
+ )}
@@ -71,73 +68,7 @@ export function Storefront() {
return (
-
- {/* Hero Section */}
-
-
- {/* Featured Products Carousel */}
- {featuredProducts.length > 0 && (
-
-
- Featured Products
-
-
-
- )}
-
- {/* Collection Filter */}
-
-
-
- {collections.map((collection) => (
-
- ))}
-
-
-
- {/* Products Grid */}
-
- {filteredProducts.length === 0 ? (
-
-
-
No products found
-
- {selectedCollection
- ? 'No products in this collection yet.'
- : 'No products available at the moment.'
- }
-
- {selectedCollection && (
-
- )}
-
- {filteredProducts.map((product) => (
-
- ))}
-
-
- {/* Footer */}
+
)
diff --git a/src/routes/admin/settings.js b/src/routes/admin/settings.js
index a455a53..f68efb9 100644
--- a/src/routes/admin/settings.js
+++ b/src/routes/admin/settings.js
@@ -2,6 +2,7 @@
import { Hono } from 'hono'
import { ThemeService } from '../../services/ThemeService.js'
import { StoreSettingsService } from '../../services/StoreSettingsService.js'
+import { PageContentService } from '../../services/PageContentService.js'
import { getKVNamespace } from '../../utils/kv.js'
import { validateThemePayload } from '../../middleware/validation.js'
import { asyncHandler } from '../../middleware/errorHandler.js'
@@ -60,5 +61,34 @@ router.put('/store-settings', asyncHandler(async (c) => {
return c.json(updatedSettings)
}))
+// Get page-builder content
+router.get('/storefront/pages/:slug', asyncHandler(async (c) => {
+ const slug = c.req.param('slug')
+ const kvNamespace = getKVNamespace(c.env)
+ const pageContentService = new PageContentService(kvNamespace)
+
+ try {
+ const page = await pageContentService.getPage(slug)
+ return c.json(page)
+ } catch (error) {
+ throw new ValidationError(error.message)
+ }
+}))
+
+// Publish page-builder content
+router.put('/storefront/pages/:slug', asyncHandler(async (c) => {
+ const slug = c.req.param('slug')
+ const payload = await c.req.json()
+ const kvNamespace = getKVNamespace(c.env)
+ const pageContentService = new PageContentService(kvNamespace)
+
+ try {
+ const page = await pageContentService.updatePage(slug, payload.data || payload)
+ return c.json(page)
+ } catch (error) {
+ throw new ValidationError(error.message)
+ }
+}))
+
export default router
diff --git a/src/routes/index.js b/src/routes/index.js
index d52ec20..ffe0c11 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -9,6 +9,7 @@ import checkoutRouter from './public/checkout.js'
import imageProxyRouter from './public/imageProxy.js'
import storeSettingsRouter, { contactEmailRouter } from './public/storeSettings.js'
import imagesRouter from './public/images.js'
+import pagesRouter from './public/pages.js'
// Admin routes
import authRouter from './admin/auth.js'
@@ -39,6 +40,7 @@ export function registerRoutes(app) {
app.route('/api/store-settings', storeSettingsRouter)
app.route('/api/contact-email', contactEmailRouter)
app.route('/api/images', imagesRouter)
+ app.route('/api/storefront/pages', pagesRouter)
// Admin API routes
app.route('/api/admin', authRouter) // /api/admin/login
diff --git a/src/routes/public/pages.js b/src/routes/public/pages.js
new file mode 100644
index 0000000..1891f0d
--- /dev/null
+++ b/src/routes/public/pages.js
@@ -0,0 +1,22 @@
+import { Hono } from 'hono'
+import { PageContentService } from '../../services/PageContentService.js'
+import { getKVNamespace } from '../../utils/kv.js'
+import { asyncHandler } from '../../middleware/errorHandler.js'
+import { ValidationError } from '../../utils/errors.js'
+
+const router = new Hono()
+
+router.get('/:slug', asyncHandler(async (c) => {
+ const slug = c.req.param('slug')
+ const kvNamespace = getKVNamespace(c.env)
+ const service = new PageContentService(kvNamespace)
+
+ try {
+ const page = await service.getPage(slug)
+ return c.json(page)
+ } catch (error) {
+ throw new ValidationError(error.message)
+ }
+}))
+
+export default router
diff --git a/src/services/PageContentService.js b/src/services/PageContentService.js
new file mode 100644
index 0000000..4891512
--- /dev/null
+++ b/src/services/PageContentService.js
@@ -0,0 +1,33 @@
+import {
+ createDefaultPageRecord,
+ createPageRecord,
+ getPageContentKey,
+ validatePageRecord,
+} from '../lib/pageContent.js'
+import { StoreSettingsService } from './StoreSettingsService.js'
+
+export class PageContentService {
+ constructor(kvNamespace) {
+ this.kv = kvNamespace
+ this.settingsService = new StoreSettingsService(kvNamespace)
+ }
+
+ async getPage(slug) {
+ const key = getPageContentKey(slug)
+ const raw = await this.kv.get(key)
+
+ if (raw) {
+ return validatePageRecord(JSON.parse(raw))
+ }
+
+ const settings = await this.settingsService.getSettings()
+ return createDefaultPageRecord(slug, settings)
+ }
+
+ async updatePage(slug, data) {
+ const key = getPageContentKey(slug)
+ const record = createPageRecord(slug, data)
+ await this.kv.put(key, JSON.stringify(record))
+ return record
+ }
+}
diff --git a/tests/integration/admin-settings.test.js b/tests/integration/admin-settings.test.js
index 569df83..a34ad3c 100644
--- a/tests/integration/admin-settings.test.js
+++ b/tests/integration/admin-settings.test.js
@@ -1,6 +1,6 @@
// Integration tests for admin settings endpoints
import { describe, it, expect, beforeEach } from 'vitest'
-import { createTestApp, createTestRequest, executeRequest, parseJsonResponse, createAdminToken, createAdminHeaders, createTestStoreSettings } from '../utils/test-helpers.js'
+import { createTestApp, createTestRequest, executeRequest, parseJsonResponse, createAdminToken, createAdminHeaders } from '../utils/test-helpers.js'
import { createMockEnv, createMockKV } from '../setup.js'
import { KV_KEYS } from '../../src/config/index.js'
@@ -92,8 +92,6 @@ describe('Admin Settings Endpoints', () => {
})
const response = await executeRequest(app, request, env)
- const data = await parseJsonResponse(response)
-
// May return 400 or 200 depending on validation implementation
expect([200, 400]).toContain(response.status)
})
@@ -177,8 +175,6 @@ describe('Admin Settings Endpoints', () => {
})
const response = await executeRequest(app, request, env)
- const data = await parseJsonResponse(response)
-
expect(response.status).toBe(500) // Service throws error for invalid logoType
})
@@ -247,6 +243,95 @@ describe('Admin Settings Endpoints', () => {
expect(response.status).toBe(401)
})
})
+
+ describe('GET /api/admin/storefront/pages/:slug', () => {
+ it('should return default page content', async () => {
+ const request = createTestRequest('/api/admin/storefront/pages/home', {
+ method: 'GET',
+ headers: createAdminHeaders(adminToken)
+ })
+
+ const response = await executeRequest(app, request, env)
+ const data = await parseJsonResponse(response)
+
+ expect(response.status).toBe(200)
+ expect(data.slug).toBe('home')
+ expect(Array.isArray(data.data.content)).toBe(true)
+ })
+
+ it('should require authentication', async () => {
+ const request = createTestRequest('/api/admin/storefront/pages/home')
+
+ const response = await executeRequest(app, request, env)
+
+ expect(response.status).toBe(401)
+ })
+
+ it('should reject invalid slugs', async () => {
+ const request = createTestRequest('/api/admin/storefront/pages/checkout', {
+ method: 'GET',
+ headers: createAdminHeaders(adminToken)
+ })
+
+ const response = await executeRequest(app, request, env)
+
+ expect(response.status).toBe(400)
+ })
+ })
+
+ describe('PUT /api/admin/storefront/pages/:slug', () => {
+ it('should publish valid page content', async () => {
+ const request = createTestRequest('/api/admin/storefront/pages/about', {
+ method: 'PUT',
+ body: {
+ data: {
+ content: [
+ {
+ type: 'RichTextSection',
+ props: {
+ id: 'about-content',
+ heading: 'About',
+ body: 'Updated content'
+ }
+ }
+ ],
+ root: { props: {} }
+ }
+ },
+ headers: createAdminHeaders(adminToken)
+ })
+
+ const response = await executeRequest(app, request, env)
+ const data = await parseJsonResponse(response)
+
+ expect(response.status).toBe(200)
+ expect(data.slug).toBe('about')
+ expect(data.updatedAt).toBeTruthy()
+ expect(data.data.content[0].props.body).toBe('Updated content')
+ })
+
+ it('should reject unsupported components', async () => {
+ const request = createTestRequest('/api/admin/storefront/pages/home', {
+ method: 'PUT',
+ body: {
+ data: {
+ content: [
+ {
+ type: 'ScriptBlock',
+ props: { id: 'x' }
+ }
+ ],
+ root: { props: {} }
+ }
+ },
+ headers: createAdminHeaders(adminToken)
+ })
+
+ const response = await executeRequest(app, request, env)
+
+ expect(response.status).toBe(400)
+ })
+ })
})
diff --git a/tests/integration/public-endpoints.test.js b/tests/integration/public-endpoints.test.js
index a11e4d2..9612ae2 100644
--- a/tests/integration/public-endpoints.test.js
+++ b/tests/integration/public-endpoints.test.js
@@ -1,6 +1,6 @@
// Integration tests for public API endpoints
import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { createTestApp, createTestRequest, executeRequest, parseJsonResponse, setupTestEnvironment, createTestProduct, createTestCollection, createTestStoreSettings, setupProductInKV, setupCollectionInKV } from '../utils/test-helpers.js'
+import { createTestApp, createTestRequest, executeRequest, parseJsonResponse, createTestProduct, createTestCollection, createTestStoreSettings, setupProductInKV, setupCollectionInKV } from '../utils/test-helpers.js'
import { createMockEnv, createMockKV } from '../setup.js'
describe('Public Endpoints', () => {
@@ -221,6 +221,27 @@ describe('Public Endpoints', () => {
})
})
+ describe('GET /api/storefront/pages/:slug', () => {
+ it('should return default public home page content', async () => {
+ const request = createTestRequest('/api/storefront/pages/home')
+
+ const response = await executeRequest(app, request, env)
+ const data = await parseJsonResponse(response)
+
+ expect(response.status).toBe(200)
+ expect(data.slug).toBe('home')
+ expect(Array.isArray(data.data.content)).toBe(true)
+ })
+
+ it('should reject invalid public page slugs', async () => {
+ const request = createTestRequest('/api/storefront/pages/checkout')
+
+ const response = await executeRequest(app, request, env)
+
+ expect(response.status).toBe(400)
+ })
+ })
+
describe('GET /api/contact-email', () => {
it('should return default contact email when no settings exist', async () => {
const request = createTestRequest('/api/contact-email')
diff --git a/tests/unit/services/PageContentService.test.js b/tests/unit/services/PageContentService.test.js
new file mode 100644
index 0000000..88eac6a
--- /dev/null
+++ b/tests/unit/services/PageContentService.test.js
@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { PageContentService } from '../../../src/services/PageContentService.js'
+import { createMockKV } from '../../setup.js'
+import { getPageContentKey } from '../../../src/lib/pageContent.js'
+import { KV_KEYS } from '../../../src/config/index.js'
+
+describe('PageContentService', () => {
+ let service
+ let kv
+
+ beforeEach(() => {
+ kv = createMockKV()
+ service = new PageContentService(kv)
+ })
+
+ it('returns default home data derived from store settings', async () => {
+ await kv.put(KV_KEYS.STORE_SETTINGS, JSON.stringify({
+ logoType: 'text',
+ heroTitle: 'Custom home',
+ heroSubtitle: 'Custom subtitle',
+ heroImageUrl: 'https://example.com/hero.jpg',
+ }))
+
+ const page = await service.getPage('home')
+
+ expect(page.slug).toBe('home')
+ expect(page.updatedAt).toBeNull()
+ expect(page.data.content[0].type).toBe('HeroSection')
+ expect(page.data.content[0].props.title).toBe('Custom home')
+ expect(page.data.content[0].props.imageUrl).toBe('https://example.com/hero.jpg')
+ })
+
+ it('returns stored page data', async () => {
+ const stored = {
+ slug: 'about',
+ version: 1,
+ updatedAt: '2026-05-28T00:00:00.000Z',
+ data: {
+ content: [
+ {
+ type: 'RichTextSection',
+ props: {
+ id: 'custom',
+ heading: 'Story',
+ body: 'Body',
+ },
+ },
+ ],
+ root: { props: {} },
+ },
+ }
+ await kv.put(getPageContentKey('about'), JSON.stringify(stored))
+
+ const page = await service.getPage('about')
+
+ expect(page).toEqual(stored)
+ })
+
+ it('rejects invalid slugs', async () => {
+ await expect(service.getPage('checkout')).rejects.toThrow('Invalid page slug')
+ })
+
+ it('rejects invalid page data shape', async () => {
+ await expect(service.updatePage('home', { content: 'invalid', root: {} })).rejects.toThrow('content array')
+ })
+
+ it('rejects unsupported components', async () => {
+ await expect(service.updatePage('home', {
+ content: [
+ {
+ type: 'ScriptBlock',
+ props: { id: 'script', body: '' },
+ },
+ ],
+ root: { props: {} },
+ })).rejects.toThrow('Unsupported page component')
+ })
+
+ it('stores valid page data', async () => {
+ const page = await service.updatePage('home', {
+ content: [
+ {
+ type: 'HeroSection',
+ props: {
+ id: 'hero',
+ title: 'New title',
+ subtitle: 'New subtitle',
+ imageUrl: '/hero.jpg',
+ primaryLabel: 'Shop',
+ primaryPath: '#products',
+ secondaryLabel: 'About',
+ secondaryPath: '/about',
+ },
+ },
+ ],
+ root: { props: {} },
+ })
+
+ expect(page.updatedAt).toBeTruthy()
+ expect(page.data.content[0].props.title).toBe('New title')
+ expect(await kv.get(getPageContentKey('home'))).toBeTruthy()
+ })
+})
diff --git a/tests/utils/test-helpers.js b/tests/utils/test-helpers.js
index 623cd7e..825fcc2 100644
--- a/tests/utils/test-helpers.js
+++ b/tests/utils/test-helpers.js
@@ -75,7 +75,7 @@ export async function createTestApp() {
"img-src 'self' data: https: blob:",
"font-src 'self' data:",
"connect-src 'self' https://api.stripe.com https://*.stripe.com https://oauth2.googleapis.com https://www.googleapis.com",
- "frame-src https://js.stripe.com https://hooks.stripe.com",
+ "frame-src 'self' https://js.stripe.com https://hooks.stripe.com",
"frame-ancestors 'none'",
"base-uri 'self'",
"form-action 'self'",
@@ -143,11 +143,9 @@ export function createTestRequest(url, options = {}) {
method = 'GET',
body = null,
headers = {},
- params = {}
} = options
const fullUrl = url.startsWith('http') ? url : `https://test.workers.dev${url}`
- const urlObj = new URL(fullUrl)
// Create headers object
const headersObj = new Headers(headers)