Compare commits
1 Commits
todo/mvp1-
...
todo/mvp1-
| Author | SHA1 | Date | |
|---|---|---|---|
987843d96b
|
3
TODO.md
3
TODO.md
@@ -137,7 +137,7 @@ This file is the single source of truth for roadmap and delivery progress.
|
||||
### Admin App (Primary Focus)
|
||||
|
||||
- [~] [P1] Page management (create/edit/publish/unpublish/schedule)
|
||||
- [ ] [P1] Page builder with reusable content blocks (hero, rich text, gallery, CTA, forms, price cards)
|
||||
- [x] [P1] Page builder with reusable content blocks (hero, rich text, gallery, CTA, forms, price cards)
|
||||
- [~] [P1] Navigation management (menus, nested items, order, visibility)
|
||||
- [~] [P1] Media library (upload, browse, replace, delete) with media-type classification (artwork, banner, promo, generic, video/gif)
|
||||
- [x] [P1] Media enrichment metadata (alt text, copyright, author, source, tags, licensing, usage context)
|
||||
@@ -365,6 +365,7 @@ This file is the single source of truth for roadmap and delivery progress.
|
||||
- [2026-02-12] Artwork refinement baseline completed: admin `/portfolio` now captures/edits medium, dimensions, year, framing, availability, publish state, and optional price visibility (`priceAmountCents` + `priceCurrency`), with public artwork detail rendering visible prices only.
|
||||
- [2026-02-12] Artwork rendition management completed: admin `/portfolio` supports `thumbnail/card/full/retina/custom` slot assignment with dimensions and primary flag, plus per-artwork rendition listing and delete controls.
|
||||
- [2026-02-12] Media type presets baseline completed in upload API: server-side validation now uses shared per-type rules (mime + max size) for `artwork/banner/promotion/video/gif/generic`, with optional env cap override via `CMS_MEDIA_UPLOAD_MAX_BYTES`.
|
||||
- [2026-02-12] Page builder reusable blocks completed: admin block editor now supports full field editing + ordering controls for hero/rich-text/gallery/cta/form/price-cards; public renderer includes form-link behavior for `contact`/`commission` keys.
|
||||
- [2026-02-12] Public UX pass: commission request flow now reports explicit invalid budget range errors, and header navigation now falls back to localized defaults (`home`, `portfolio`, `news`, `commissions`) when no CMS menu exists; seed data now creates those default menu entries.
|
||||
- [2026-02-12] Added `e2e/public-rendering.pw.ts` web coverage for fallback navigation visibility, portfolio routes, and commission submission validation (invalid budget range + successful submission path).
|
||||
- [2026-02-12] Testing execution is temporarily paused for delivery velocity: root test scripts are stubbed and CI test steps are disabled; all testing backlog is consolidated under `MVP 3: Testing and Quality`.
|
||||
|
||||
@@ -43,6 +43,25 @@ function updateBlock(blocks: PageBlocks, blockId: string, next: Partial<PageBloc
|
||||
)
|
||||
}
|
||||
|
||||
function moveBlock(blocks: PageBlocks, blockId: string, direction: "up" | "down"): PageBlocks {
|
||||
const index = blocks.findIndex((entry) => entry.id === blockId)
|
||||
|
||||
if (index < 0) {
|
||||
return blocks
|
||||
}
|
||||
|
||||
const nextIndex = direction === "up" ? index - 1 : index + 1
|
||||
if (nextIndex < 0 || nextIndex >= blocks.length) {
|
||||
return blocks
|
||||
}
|
||||
|
||||
const next = [...blocks]
|
||||
const current = next[index]
|
||||
next[index] = next[nextIndex]
|
||||
next[nextIndex] = current
|
||||
return next
|
||||
}
|
||||
|
||||
export function PageBlockEditor({
|
||||
name,
|
||||
initialContent,
|
||||
@@ -156,13 +175,29 @@ export function PageBlockEditor({
|
||||
<span>
|
||||
#{index + 1} {block.type}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border px-2 py-1"
|
||||
onClick={() => setBlocks((prev) => prev.filter((entry) => entry.id !== block.id))}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border px-2 py-1"
|
||||
onClick={() => setBlocks((prev) => moveBlock(prev, block.id, "up"))}
|
||||
>
|
||||
Up
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border px-2 py-1"
|
||||
onClick={() => setBlocks((prev) => moveBlock(prev, block.id, "down"))}
|
||||
>
|
||||
Down
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="rounded border px-2 py-1"
|
||||
onClick={() => setBlocks((prev) => prev.filter((entry) => entry.id !== block.id))}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{block.type === "hero" ? (
|
||||
@@ -187,6 +222,26 @@ export function PageBlockEditor({
|
||||
placeholder="Subheading"
|
||||
className="rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<input
|
||||
value={block.ctaLabel ?? ""}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, { ctaLabel: event.target.value || null }),
|
||||
)
|
||||
}
|
||||
placeholder="CTA label"
|
||||
className="rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<input
|
||||
value={block.ctaHref ?? ""}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, { ctaHref: event.target.value || null }),
|
||||
)
|
||||
}
|
||||
placeholder="CTA href"
|
||||
className="rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -203,22 +258,34 @@ export function PageBlockEditor({
|
||||
) : null}
|
||||
|
||||
{block.type === "gallery" ? (
|
||||
<textarea
|
||||
rows={3}
|
||||
value={block.imageIds.join(",")}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, {
|
||||
imageIds: event.target.value
|
||||
.split(",")
|
||||
.map((entry) => entry.trim())
|
||||
.filter((entry) => entry.length > 0),
|
||||
}),
|
||||
)
|
||||
}
|
||||
placeholder="Media asset IDs (comma separated UUIDs)"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
value={block.title ?? ""}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, { title: event.target.value || null }),
|
||||
)
|
||||
}
|
||||
placeholder="Gallery title"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<textarea
|
||||
rows={3}
|
||||
value={block.imageIds.join(",")}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, {
|
||||
imageIds: event.target.value
|
||||
.split(",")
|
||||
.map((entry) => entry.trim())
|
||||
.filter((entry) => entry.length > 0),
|
||||
}),
|
||||
)
|
||||
}
|
||||
placeholder="Media asset IDs (comma separated UUIDs)"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{block.type === "cta" ? (
|
||||
@@ -239,50 +306,101 @@ export function PageBlockEditor({
|
||||
placeholder="Link href"
|
||||
className="rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<select
|
||||
value={block.variant}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, {
|
||||
variant: event.target.value as "primary" | "secondary",
|
||||
}),
|
||||
)
|
||||
}
|
||||
className="rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
>
|
||||
<option value="primary">Primary</option>
|
||||
<option value="secondary">Secondary</option>
|
||||
</select>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{block.type === "form" ? (
|
||||
<input
|
||||
value={block.formKey}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) => updateBlock(prev, block.id, { formKey: event.target.value }))
|
||||
}
|
||||
placeholder="Form key (e.g. contact, commission)"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
value={block.formKey}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, { formKey: event.target.value }),
|
||||
)
|
||||
}
|
||||
placeholder="Form key (e.g. contact, commission)"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<input
|
||||
value={block.title ?? ""}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, { title: event.target.value || null }),
|
||||
)
|
||||
}
|
||||
placeholder="Form title"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<textarea
|
||||
rows={2}
|
||||
value={block.description ?? ""}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, { description: event.target.value || null }),
|
||||
)
|
||||
}
|
||||
placeholder="Form description"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{block.type === "price_cards" ? (
|
||||
<textarea
|
||||
rows={4}
|
||||
value={block.cards
|
||||
.map((card) => [card.name, card.price ?? "", card.description ?? ""].join("|"))
|
||||
.join("\n")}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, {
|
||||
cards: event.target.value
|
||||
.split("\n")
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line.length > 0)
|
||||
.map((line, lineIndex) => {
|
||||
const [name, price, description] = line
|
||||
.split("|")
|
||||
.map((entry) => entry.trim())
|
||||
return {
|
||||
id: `card-${lineIndex}`,
|
||||
name: name || `Card ${lineIndex + 1}`,
|
||||
price: price || null,
|
||||
description: description || null,
|
||||
}
|
||||
}),
|
||||
}),
|
||||
)
|
||||
}
|
||||
placeholder="One card per line: Name|Price|Description"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
value={block.title ?? ""}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, { title: event.target.value || null }),
|
||||
)
|
||||
}
|
||||
placeholder="Price card section title"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
<textarea
|
||||
rows={4}
|
||||
value={block.cards
|
||||
.map((card) => [card.name, card.price ?? "", card.description ?? ""].join("|"))
|
||||
.join("\n")}
|
||||
onChange={(event) =>
|
||||
setBlocks((prev) =>
|
||||
updateBlock(prev, block.id, {
|
||||
cards: event.target.value
|
||||
.split("\n")
|
||||
.map((line) => line.trim())
|
||||
.filter((line) => line.length > 0)
|
||||
.map((line, lineIndex) => {
|
||||
const [name, price, description] = line
|
||||
.split("|")
|
||||
.map((entry) => entry.trim())
|
||||
return {
|
||||
id: `card-${lineIndex}`,
|
||||
name: name || `Card ${lineIndex + 1}`,
|
||||
price: price || null,
|
||||
description: description || null,
|
||||
}
|
||||
}),
|
||||
}),
|
||||
)
|
||||
}
|
||||
placeholder="One card per line: Name|Price|Description"
|
||||
className="w-full rounded border border-neutral-300 px-2 py-1 text-sm"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</article>
|
||||
))}
|
||||
|
||||
@@ -12,6 +12,16 @@ type PublicPageViewProps = {
|
||||
page: PageEntity
|
||||
}
|
||||
|
||||
function resolveFormLink(formKey: string): { href: string; label: string } {
|
||||
const normalized = formKey.trim().toLowerCase()
|
||||
|
||||
if (normalized === "commission" || normalized === "commissions") {
|
||||
return { href: "/commissions", label: "Open commission form" }
|
||||
}
|
||||
|
||||
return { href: `/#form-${normalized || "contact"}`, label: "Open contact form" }
|
||||
}
|
||||
|
||||
export function PublicPageView({ page }: PublicPageViewProps) {
|
||||
const blocks = (() => {
|
||||
try {
|
||||
@@ -106,6 +116,7 @@ export function PublicPageView({ page }: PublicPageViewProps) {
|
||||
}
|
||||
|
||||
if (block.type === "form") {
|
||||
const formLink = resolveFormLink(block.formKey)
|
||||
return (
|
||||
<section key={block.id} className="space-y-2 rounded border border-neutral-200 p-4">
|
||||
<h3 className="text-lg font-medium">{block.title || "Form block"}</h3>
|
||||
@@ -113,6 +124,12 @@ export function PublicPageView({ page }: PublicPageViewProps) {
|
||||
{block.description || "Form integration pending."}
|
||||
</p>
|
||||
<p className="text-xs text-neutral-500">formKey: {block.formKey}</p>
|
||||
<a
|
||||
href={formLink.href}
|
||||
className="inline-flex rounded border border-neutral-300 px-3 py-1.5 text-sm"
|
||||
>
|
||||
{formLink.label}
|
||||
</a>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user