Compare commits

...

6 Commits

19 changed files with 964 additions and 138 deletions

18
TODO.md
View File

@@ -137,14 +137,14 @@ 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)
- [~] [P1] Navigation management (menus, nested items, order, visibility)
- [x] [P1] Page builder with reusable content blocks (hero, rich text, gallery, CTA, forms, price cards)
- [x] [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)
- [ ] [P1] Portfolio grouping primitives (galleries, albums, categories, tags) with ordering/visibility controls
- [ ] [P1] Artwork refinement fields (medium, dimensions, year, framing, availability, price visibility)
- [ ] [P1] Artwork rendition management (thumbnail, card, full, retina/custom sizes)
- [ ] [P1] Type-specific processing presets (artwork/banner/promo/video/gif) with validation rules
- [x] [P1] Portfolio grouping primitives (galleries, albums, categories, tags) with ordering/visibility controls
- [x] [P1] Artwork refinement fields (medium, dimensions, year, framing, availability, price visibility)
- [x] [P1] Artwork rendition management (thumbnail, card, full, retina/custom sizes)
- [x] [P1] Type-specific processing presets (artwork/banner/promo/video/gif) with validation rules
- [ ] [P1] Users management (invite, roles, status)
- [ ] [P1] Disable/ban user function and enforcement in auth/session checks
- [~] [P1] Owner/support protection rules in user management actions (cannot delete/demote)
@@ -361,6 +361,12 @@ This file is the single source of truth for roadmap and delivery progress.
- [2026-02-12] Page editor now supports locale translations in `/pages/:id`; public page rendering uses locale-aware page lookup with base-content fallback.
- [2026-02-12] Public rendering integration advanced with locale-aware navigation/news translations and a new public commission request entry route (`/[locale]/commissions`) that creates/reuses customer records and opens a `new` commission.
- [2026-02-12] Public portfolio baseline added with `/{locale}/portfolio` and `/{locale}/portfolio/{slug}`, including published-artwork filters (gallery/album/category/tag), rendition image streaming via web `/api/media/file/:id`, and media-aware artwork detail rendering.
- [2026-02-12] Portfolio grouping controls completed in admin `/portfolio`: galleries/albums/categories/tags now support visibility and sort-order management (create/update/delete), and public tag filters now respect visibility.
- [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] Navigation management completed: admin `/navigation` now supports menu update/delete controls, nested item parent selection via menu-local dropdown, and full order/visibility updates across menus and items.
- [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`.

View File

@@ -1,4 +1,9 @@
import { randomUUID } from "node:crypto"
import {
getMediaUploadMaxBytes,
isMimeAllowedForMediaType,
mediaAssetTypeSchema,
} from "@cms/content"
import { hasPermission } from "@cms/content/rbac"
import { createMediaAsset } from "@cms/db"
@@ -7,33 +12,7 @@ import { storeUpload } from "@/lib/media/storage"
export const runtime = "nodejs"
const MAX_UPLOAD_BYTES = Number(process.env.CMS_MEDIA_UPLOAD_MAX_BYTES ?? 25 * 1024 * 1024)
type AllowedRule = {
mimePrefix?: string
mimeExact?: string[]
}
const ALLOWED_MIME_BY_TYPE: Record<string, AllowedRule> = {
artwork: {
mimePrefix: "image/",
},
banner: {
mimePrefix: "image/",
},
promotion: {
mimePrefix: "image/",
},
video: {
mimePrefix: "video/",
},
gif: {
mimeExact: ["image/gif"],
},
generic: {
mimePrefix: "",
},
}
const MAX_UPLOAD_BYTES_OVERRIDE = Number(process.env.CMS_MEDIA_UPLOAD_MAX_BYTES ?? 0)
function parseTextField(formData: FormData, field: string): string {
const value = formData.get(field)
@@ -88,24 +67,6 @@ function deriveTitleFromFilename(fileName: string): string {
return normalized.length > 0 ? normalized : "Untitled media"
}
function isMimeAllowed(mediaType: string, mimeType: string): boolean {
const rule = ALLOWED_MIME_BY_TYPE[mediaType]
if (!rule) {
return false
}
if (rule.mimeExact?.includes(mimeType)) {
return true
}
if (rule.mimePrefix === "") {
return true
}
return rule.mimePrefix ? mimeType.startsWith(rule.mimePrefix) : false
}
function badRequest(message: string): Response {
return Response.json(
{
@@ -147,12 +108,13 @@ export async function POST(request: Request): Promise<Response> {
return badRequest("Invalid form payload.")
}
const type = parseTextField(formData, "type")
const parsedType = mediaAssetTypeSchema.safeParse(parseTextField(formData, "type"))
const fileEntry = formData.get("file")
if (!type) {
if (!parsedType.success) {
return badRequest("Type is required.")
}
const type = parsedType.data
if (!(fileEntry instanceof File)) {
return badRequest("File is required.")
@@ -162,13 +124,17 @@ export async function POST(request: Request): Promise<Response> {
return badRequest("File is empty.")
}
if (fileEntry.size > MAX_UPLOAD_BYTES) {
const typeMaxBytes = getMediaUploadMaxBytes(type)
const effectiveMaxBytes =
MAX_UPLOAD_BYTES_OVERRIDE > 0 ? Math.min(MAX_UPLOAD_BYTES_OVERRIDE, typeMaxBytes) : typeMaxBytes
if (fileEntry.size > effectiveMaxBytes) {
return badRequest(
`File is too large. Maximum upload is ${Math.floor(MAX_UPLOAD_BYTES / 1024 / 1024)} MB.`,
`File is too large for ${type}. Maximum upload is ${Math.floor(effectiveMaxBytes / 1024 / 1024)} MB.`,
)
}
if (!isMimeAllowed(type, fileEntry.type)) {
if (!isMimeAllowedForMediaType(type, fileEntry.type)) {
return badRequest(`File type ${fileEntry.type || "unknown"} is not allowed for ${type}.`)
}

View File

@@ -2,9 +2,11 @@ import {
createNavigationItem,
createNavigationMenu,
deleteNavigationItem,
deleteNavigationMenu,
listNavigationMenus,
listPages,
updateNavigationItem,
updateNavigationMenu,
upsertNavigationItemTranslation,
} from "@cms/db"
import { Button } from "@cms/ui/button"
@@ -131,6 +133,50 @@ async function createItemAction(formData: FormData) {
redirectWithState({ notice: "Navigation item created." })
}
async function updateMenuAction(formData: FormData) {
"use server"
await requirePermissionForRoute({
nextPath: "/navigation",
permission: "navigation:write",
scope: "team",
})
try {
await updateNavigationMenu({
id: readInputString(formData, "id"),
name: readInputString(formData, "name"),
slug: readInputString(formData, "slug"),
location: readInputString(formData, "location"),
isVisible: readInputString(formData, "isVisible") === "true",
})
} catch {
redirectWithState({ error: "Failed to update navigation menu." })
}
revalidatePath("/navigation")
redirectWithState({ notice: "Navigation menu updated." })
}
async function deleteMenuAction(formData: FormData) {
"use server"
await requirePermissionForRoute({
nextPath: "/navigation",
permission: "navigation:write",
scope: "team",
})
try {
await deleteNavigationMenu(readInputString(formData, "id"))
} catch {
redirectWithState({ error: "Failed to delete navigation menu." })
}
revalidatePath("/navigation")
redirectWithState({ notice: "Navigation menu deleted." })
}
async function updateItemAction(formData: FormData) {
"use server"
@@ -279,14 +325,58 @@ export default async function NavigationManagementPage({
) : (
menus.map((menu) => (
<article key={menu.id} className="rounded-xl border border-neutral-200 p-6">
<div className="flex flex-wrap items-center justify-between gap-2">
<h3 className="text-lg font-medium">
{menu.name} <span className="text-sm text-neutral-500">({menu.location})</span>
</h3>
<span className="text-xs text-neutral-500">
{menu.isVisible ? "visible" : "hidden"}
</span>
<form action={updateMenuAction} className="rounded border border-neutral-200 p-3">
<input type="hidden" name="id" value={menu.id} />
<div className="grid gap-3 md:grid-cols-4">
<label className="space-y-1">
<span className="text-xs text-neutral-600">Menu name</span>
<input
name="name"
defaultValue={menu.name}
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
/>
</label>
<label className="space-y-1">
<span className="text-xs text-neutral-600">Slug</span>
<input
name="slug"
defaultValue={menu.slug}
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
/>
</label>
<label className="space-y-1">
<span className="text-xs text-neutral-600">Location</span>
<input
name="location"
defaultValue={menu.location}
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
/>
</label>
<label className="space-y-1">
<span className="text-xs text-neutral-600">Visible</span>
<select
name="isVisible"
defaultValue={menu.isVisible ? "true" : "false"}
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
>
<option value="true">Visible</option>
<option value="false">Hidden</option>
</select>
</label>
</div>
<div className="mt-3 flex items-center gap-2">
<Button type="submit" size="sm">
Save menu
</Button>
<button
type="submit"
formAction={deleteMenuAction}
className="rounded-md border border-red-300 px-3 py-2 text-sm text-red-700"
>
Delete menu
</button>
</div>
</form>
<div className="mt-4 space-y-3">
{menu.items.length === 0 ? (
@@ -348,11 +438,20 @@ export default async function NavigationManagementPage({
</label>
<label className="space-y-1">
<span className="text-xs text-neutral-600">Parent id</span>
<input
<select
name="parentId"
defaultValue={item.parentId ?? ""}
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
/>
>
<option value="">(none)</option>
{menu.items
.filter((entry) => entry.id !== item.id)
.map((entry) => (
<option key={`${item.id}-parent-${entry.id}`} value={entry.id}>
{entry.label}
</option>
))}
</select>
</label>
</div>

View File

@@ -5,10 +5,14 @@ import {
createCategory,
createGallery,
createTag,
deleteArtworkRendition,
deleteGrouping,
linkArtworkToGrouping,
listArtworks,
listMediaAssets,
listMediaFoundationGroups,
updateArtwork,
updateGrouping,
} from "@cms/db"
import { Button } from "@cms/ui/button"
import { revalidatePath } from "next/cache"
@@ -32,6 +36,30 @@ function readOptionalField(formData: FormData, key: string): string | undefined
return value.length > 0 ? value : undefined
}
function readOptionalNullableField(formData: FormData, key: string): string | null {
const value = readField(formData, key)
return value.length > 0 ? value : null
}
function readNonNegativeInt(formData: FormData, key: string): number {
const raw = readField(formData, key)
const value = Number(raw)
return Number.isFinite(value) && value >= 0 ? Math.floor(value) : 0
}
function readOptionalNonNegativeInt(formData: FormData, key: string): number | undefined {
const raw = readField(formData, key)
if (!raw) {
return undefined
}
const value = Number(raw)
return Number.isFinite(value) && value >= 0 ? Math.floor(value) : undefined
}
function readBooleanField(formData: FormData, key: string): boolean {
return formData.get(key) === "on" || readField(formData, key) === "true"
}
function readFirstValue(value: string | string[] | undefined): string | null {
if (Array.isArray(value)) {
return value[0] ?? null
@@ -89,6 +117,15 @@ async function createArtworkAction(formData: FormData) {
dimensions: readOptionalField(formData, "dimensions"),
framing: readOptionalField(formData, "framing"),
availability: readOptionalField(formData, "availability"),
priceAmountCents: (() => {
const raw = readField(formData, "priceAmount")
return raw ? Math.round(Number(raw) * 100) : undefined
})(),
priceCurrency: (() => {
const raw = readField(formData, "priceCurrency").toUpperCase()
return raw.length === 3 ? raw : undefined
})(),
isPriceVisible: readBooleanField(formData, "isPriceVisible"),
year: (() => {
const raw = readField(formData, "year")
return raw ? Number(raw) : undefined
@@ -102,6 +139,41 @@ async function createArtworkAction(formData: FormData) {
redirectWithState({ notice: "Artwork created." })
}
async function updateArtworkAction(formData: FormData) {
"use server"
await requireWritePermission()
try {
await updateArtwork({
id: readField(formData, "artworkId"),
medium: readOptionalNullableField(formData, "medium"),
dimensions: readOptionalNullableField(formData, "dimensions"),
year: (() => {
const raw = readField(formData, "year")
return raw ? Number(raw) : null
})(),
framing: readOptionalNullableField(formData, "framing"),
availability: readOptionalNullableField(formData, "availability"),
priceAmountCents: (() => {
const value = readOptionalNonNegativeInt(formData, "priceAmountCents")
return value ?? null
})(),
priceCurrency: (() => {
const raw = readField(formData, "priceCurrency").toUpperCase()
return raw.length === 3 ? raw : null
})(),
isPriceVisible: readBooleanField(formData, "isPriceVisible"),
isPublished: readBooleanField(formData, "isPublished"),
})
} catch {
redirectWithState({ error: "Failed to update artwork refinement fields." })
}
revalidatePath("/portfolio")
redirectWithState({ notice: "Artwork refinement updated." })
}
async function createGroupAction(formData: FormData) {
"use server"
@@ -117,23 +189,32 @@ async function createGroupAction(formData: FormData) {
name,
slug,
description: readOptionalField(formData, "description"),
sortOrder: readNonNegativeInt(formData, "sortOrder"),
isVisible: readBooleanField(formData, "isVisible"),
})
} else if (type === "album") {
await createAlbum({
name,
slug,
description: readOptionalField(formData, "description"),
sortOrder: readNonNegativeInt(formData, "sortOrder"),
isVisible: readBooleanField(formData, "isVisible"),
})
} else if (type === "category") {
await createCategory({
name,
slug,
description: readOptionalField(formData, "description"),
sortOrder: readNonNegativeInt(formData, "sortOrder"),
isVisible: readBooleanField(formData, "isVisible"),
})
} else {
await createTag({
name,
slug,
description: readOptionalField(formData, "description"),
sortOrder: readNonNegativeInt(formData, "sortOrder"),
isVisible: readBooleanField(formData, "isVisible"),
})
}
} catch {
@@ -144,6 +225,47 @@ async function createGroupAction(formData: FormData) {
redirectWithState({ notice: `${type} created.` })
}
async function updateGroupAction(formData: FormData) {
"use server"
await requireWritePermission()
try {
await updateGrouping({
groupType: readField(formData, "groupType"),
groupId: readField(formData, "groupId"),
name: readField(formData, "name"),
slug: slugify(readField(formData, "slug")),
description: readOptionalNullableField(formData, "description"),
sortOrder: readNonNegativeInt(formData, "sortOrder"),
isVisible: readBooleanField(formData, "isVisible"),
})
} catch {
redirectWithState({ error: "Failed to update grouping entity." })
}
revalidatePath("/portfolio")
redirectWithState({ notice: "Grouping entity updated." })
}
async function deleteGroupAction(formData: FormData) {
"use server"
await requireWritePermission()
try {
await deleteGrouping({
groupType: readField(formData, "groupType"),
groupId: readField(formData, "groupId"),
})
} catch {
redirectWithState({ error: "Failed to delete grouping entity." })
}
revalidatePath("/portfolio")
redirectWithState({ notice: "Grouping entity deleted." })
}
async function linkArtworkGroupAction(formData: FormData) {
"use server"
@@ -195,6 +317,21 @@ async function attachRenditionAction(formData: FormData) {
redirectWithState({ notice: "Rendition attached." })
}
async function deleteRenditionAction(formData: FormData) {
"use server"
await requireWritePermission()
try {
await deleteArtworkRendition(readField(formData, "renditionId"))
} catch {
redirectWithState({ error: "Failed to delete rendition." })
}
revalidatePath("/portfolio")
redirectWithState({ notice: "Rendition deleted." })
}
export default async function PortfolioPage({
searchParams,
}: {
@@ -290,6 +427,26 @@ export default async function PortfolioPage({
placeholder="Availability"
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
/>
<div className="grid gap-3 md:grid-cols-3">
<input
name="priceAmount"
type="number"
step="0.01"
min={0}
placeholder="Price amount (e.g. 199.99)"
className="rounded border border-neutral-300 px-3 py-2 text-sm"
/>
<input
name="priceCurrency"
maxLength={3}
placeholder="Currency (USD)"
className="rounded border border-neutral-300 px-3 py-2 text-sm uppercase"
/>
<label className="flex items-center gap-2 rounded border border-neutral-300 px-3 py-2 text-sm">
<input type="checkbox" name="isPriceVisible" />
Price visible
</label>
</div>
<Button type="submit">Create artwork</Button>
</form>
</section>
@@ -297,7 +454,7 @@ export default async function PortfolioPage({
<section className="rounded-xl border border-neutral-200 p-6">
<h2 className="text-xl font-medium">Create Group Entity</h2>
<form action={createGroupAction} className="mt-4 space-y-3">
<div className="grid gap-3 md:grid-cols-3">
<div className="grid gap-3 md:grid-cols-5">
<select
name="groupType"
defaultValue="gallery"
@@ -319,6 +476,18 @@ export default async function PortfolioPage({
placeholder="Slug (optional)"
className="rounded border border-neutral-300 px-3 py-2 text-sm"
/>
<input
name="sortOrder"
type="number"
min={0}
defaultValue={0}
placeholder="Sort order"
className="rounded border border-neutral-300 px-3 py-2 text-sm"
/>
<label className="flex items-center gap-2 rounded border border-neutral-300 px-3 py-2 text-sm">
<input type="checkbox" name="isVisible" defaultChecked />
Visible
</label>
</div>
<textarea
name="description"
@@ -330,6 +499,89 @@ export default async function PortfolioPage({
</form>
</section>
<section className="rounded-xl border border-neutral-200 p-6">
<h2 className="text-xl font-medium">Manage Group Entities</h2>
<div className="mt-4 grid gap-4">
{(
[
{ type: "gallery" as const, label: "Gallery", items: groups.galleries },
{ type: "album" as const, label: "Album", items: groups.albums },
{ type: "category" as const, label: "Category", items: groups.categories },
{ type: "tag" as const, label: "Tag", items: groups.tags },
] as const
).map((groupConfig) => (
<section
key={`manage-${groupConfig.type}`}
className="rounded border border-neutral-200 p-4"
>
<h3 className="text-sm font-semibold">{groupConfig.label} Entities</h3>
<div className="mt-3 space-y-3">
{groupConfig.items.length === 0 ? (
<p className="text-xs text-neutral-500">No entities created yet.</p>
) : (
groupConfig.items.map((group) => (
<form
key={`manage-${groupConfig.type}-${group.id}`}
action={updateGroupAction}
className="space-y-3 rounded border border-neutral-200 p-3"
>
<input type="hidden" name="groupType" value={groupConfig.type} />
<input type="hidden" name="groupId" value={group.id} />
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
<input
name="name"
required
defaultValue={group.name}
className="rounded border border-neutral-300 px-3 py-2 text-sm"
/>
<input
name="slug"
required
defaultValue={group.slug}
className="rounded border border-neutral-300 px-3 py-2 text-sm"
/>
<input
name="sortOrder"
type="number"
min={0}
defaultValue={group.sortOrder}
className="rounded border border-neutral-300 px-3 py-2 text-sm"
/>
<label className="flex items-center gap-2 rounded border border-neutral-300 px-3 py-2 text-sm">
<input
type="checkbox"
name="isVisible"
defaultChecked={group.isVisible}
/>
Visible
</label>
</div>
<textarea
name="description"
rows={2}
defaultValue={group.description ?? ""}
placeholder="Description"
className="w-full rounded border border-neutral-300 px-3 py-2 text-sm"
/>
<div className="flex flex-wrap gap-2">
<Button type="submit">Save group</Button>
<button
type="submit"
formAction={deleteGroupAction}
className="rounded border border-red-300 px-3 py-2 text-sm text-red-700 hover:bg-red-50"
>
Delete group
</button>
</div>
</form>
))
)}
</div>
</section>
))}
</div>
</section>
<section className="rounded-xl border border-neutral-200 p-6">
<h2 className="text-xl font-medium">Link Artwork To Group</h2>
<div className="mt-4 grid gap-4 lg:grid-cols-2">
@@ -405,6 +657,7 @@ export default async function PortfolioPage({
<option value="thumbnail">thumbnail</option>
<option value="card">card</option>
<option value="full">full</option>
<option value="retina">retina</option>
<option value="custom">custom</option>
</select>
<input
@@ -447,14 +700,16 @@ export default async function PortfolioPage({
<th className="py-2 pr-4">Title</th>
<th className="py-2 pr-4">Slug</th>
<th className="py-2 pr-4">Published</th>
<th className="py-2 pr-4">Refinement</th>
<th className="py-2 pr-4">Renditions</th>
<th className="py-2 pr-4">Groups</th>
<th className="py-2 pr-4">Actions</th>
</tr>
</thead>
<tbody>
{artworks.length === 0 ? (
<tr>
<td className="py-3 text-neutral-500" colSpan={5}>
<td className="py-3 text-neutral-500" colSpan={7}>
No artworks yet. Add creation flows after media upload pipeline lands.
</td>
</tr>
@@ -464,11 +719,135 @@ export default async function PortfolioPage({
<td className="py-3 pr-4">{artwork.title}</td>
<td className="py-3 pr-4 font-mono text-xs">{artwork.slug}</td>
<td className="py-3 pr-4">{artwork.isPublished ? "yes" : "no"}</td>
<td className="py-3 pr-4">{artwork.renditions.length}</td>
<td className="py-3 pr-4 text-xs text-neutral-600">
{artwork.medium ? `medium: ${artwork.medium}` : "medium: -"}
<br />
{artwork.dimensions ? `dimensions: ${artwork.dimensions}` : "dimensions: -"}
<br />
{artwork.year ? `year: ${artwork.year}` : "year: -"}
<br />
{artwork.framing ? `framing: ${artwork.framing}` : "framing: -"}
<br />
{artwork.availability
? `availability: ${artwork.availability}`
: "availability: -"}
<br />
{artwork.priceAmountCents && artwork.priceCurrency
? `price: ${(artwork.priceAmountCents / 100).toFixed(2)} ${artwork.priceCurrency} (${artwork.isPriceVisible ? "visible" : "hidden"})`
: "price: -"}
</td>
<td className="py-3 pr-4">
<div className="space-y-1">
{artwork.renditions.length === 0 ? (
<span className="text-xs text-neutral-500">0</span>
) : (
artwork.renditions.map((rendition) => (
<form
key={rendition.id}
action={deleteRenditionAction}
className="flex items-center gap-2 text-xs"
>
<input type="hidden" name="renditionId" value={rendition.id} />
<span className="rounded bg-neutral-100 px-2 py-1 font-mono">
{rendition.slot}
</span>
<span className="text-neutral-500">
{rendition.width ?? "-"}x{rendition.height ?? "-"}
</span>
{rendition.isPrimary ? (
<span className="rounded bg-emerald-100 px-2 py-1 text-emerald-700">
primary
</span>
) : null}
<button
type="submit"
className="rounded border border-red-300 px-2 py-1 text-red-700 hover:bg-red-50"
>
delete
</button>
</form>
))
)}
</div>
</td>
<td className="py-3 pr-4 text-neutral-600">
g:{artwork.galleryLinks.length} a:{artwork.albumLinks.length} c:
{artwork.categoryLinks.length} t:{artwork.tagLinks.length}
</td>
<td className="py-3 pr-4">
<form action={updateArtworkAction} className="grid min-w-80 gap-2">
<input type="hidden" name="artworkId" value={artwork.id} />
<input
name="medium"
defaultValue={artwork.medium ?? ""}
placeholder="Medium"
className="rounded border border-neutral-300 px-2 py-1 text-xs"
/>
<input
name="dimensions"
defaultValue={artwork.dimensions ?? ""}
placeholder="Dimensions"
className="rounded border border-neutral-300 px-2 py-1 text-xs"
/>
<div className="grid grid-cols-2 gap-2">
<input
name="year"
type="number"
defaultValue={artwork.year ?? ""}
placeholder="Year"
className="rounded border border-neutral-300 px-2 py-1 text-xs"
/>
<input
name="framing"
defaultValue={artwork.framing ?? ""}
placeholder="Framing"
className="rounded border border-neutral-300 px-2 py-1 text-xs"
/>
</div>
<input
name="availability"
defaultValue={artwork.availability ?? ""}
placeholder="Availability"
className="rounded border border-neutral-300 px-2 py-1 text-xs"
/>
<div className="grid grid-cols-2 gap-2">
<input
name="priceAmountCents"
type="number"
min={0}
defaultValue={artwork.priceAmountCents ?? ""}
placeholder="Price cents"
className="rounded border border-neutral-300 px-2 py-1 text-xs"
/>
<input
name="priceCurrency"
maxLength={3}
defaultValue={artwork.priceCurrency ?? ""}
placeholder="USD"
className="rounded border border-neutral-300 px-2 py-1 text-xs uppercase"
/>
</div>
<div className="flex items-center gap-3 text-xs">
<label className="inline-flex items-center gap-1">
<input
type="checkbox"
name="isPriceVisible"
defaultChecked={artwork.isPriceVisible}
/>
price visible
</label>
<label className="inline-flex items-center gap-1">
<input
type="checkbox"
name="isPublished"
defaultChecked={artwork.isPublished}
/>
published
</label>
</div>
<Button type="submit">Save</Button>
</form>
</td>
</tr>
))
)}

View File

@@ -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,6 +175,21 @@ export function PageBlockEditor({
<span>
#{index + 1} {block.type}
</span>
<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"
@@ -164,6 +198,7 @@ export function PageBlockEditor({
Remove
</button>
</div>
</div>
{block.type === "hero" ? (
<div className="grid gap-2 md:grid-cols-2">
@@ -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,6 +258,17 @@ export function PageBlockEditor({
) : null}
{block.type === "gallery" ? (
<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(",")}
@@ -219,6 +285,7 @@ export function PageBlockEditor({
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,21 +306,71 @@ 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" ? (
<div className="space-y-2">
<input
value={block.formKey}
onChange={(event) =>
setBlocks((prev) => updateBlock(prev, block.id, { formKey: event.target.value }))
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" ? (
<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
@@ -283,6 +400,7 @@ export function PageBlockEditor({
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>
))}

View File

@@ -17,6 +17,17 @@ function formatLabelList(values: string[]) {
return values.join(", ")
}
function formatArtworkPrice(priceAmountCents: number | null, priceCurrency: string | null) {
if (!priceAmountCents || !priceCurrency) {
return "-"
}
return new Intl.NumberFormat("en-US", {
style: "currency",
currency: priceCurrency,
}).format(priceAmountCents / 100)
}
export default async function PublicArtworkPage({ params }: PublicArtworkPageProps) {
const [{ slug }, t] = await Promise.all([params, getTranslations("Portfolio")])
const artwork = await getPublishedArtworkBySlug(slug)
@@ -78,6 +89,12 @@ export default async function PublicArtworkPage({ params }: PublicArtworkPagePro
<p>
<strong>{t("fields.availability")}:</strong> {artwork.availability || "-"}
</p>
<p>
<strong>{t("fields.price")}:</strong>{" "}
{artwork.isPriceVisible
? formatArtworkPrice(artwork.priceAmountCents, artwork.priceCurrency)
: "-"}
</p>
</div>
<div className="space-y-2 text-sm">
<p>

View File

@@ -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>
)
}

View File

@@ -84,6 +84,7 @@
"dimensions": "Abmessungen",
"year": "Jahr",
"availability": "Verfügbarkeit",
"price": "Preis",
"galleries": "Galerien",
"albums": "Alben",
"categories": "Kategorien",

View File

@@ -84,6 +84,7 @@
"dimensions": "Dimensions",
"year": "Year",
"availability": "Availability",
"price": "Price",
"galleries": "Galleries",
"albums": "Albums",
"categories": "Categories",

View File

@@ -84,6 +84,7 @@
"dimensions": "Dimensiones",
"year": "Año",
"availability": "Disponibilidad",
"price": "Precio",
"galleries": "Galerías",
"albums": "Álbumes",
"categories": "Categorías",

View File

@@ -84,6 +84,7 @@
"dimensions": "Dimensions",
"year": "Année",
"availability": "Disponibilité",
"price": "Prix",
"galleries": "Galeries",
"albums": "Albums",
"categories": "Catégories",

View File

@@ -9,7 +9,57 @@ export const mediaAssetTypeSchema = z.enum([
"generic",
])
export const artworkRenditionSlotSchema = z.enum(["thumbnail", "card", "full", "custom"])
export type MediaUploadRule = {
maxBytes: number
allowedMimePrefix?: string
allowedMimeExact?: string[]
}
export const mediaUploadRulesByType: Record<MediaAssetType, MediaUploadRule> = {
artwork: {
maxBytes: 40 * 1024 * 1024,
allowedMimePrefix: "image/",
},
banner: {
maxBytes: 20 * 1024 * 1024,
allowedMimePrefix: "image/",
},
promotion: {
maxBytes: 20 * 1024 * 1024,
allowedMimePrefix: "image/",
},
video: {
maxBytes: 250 * 1024 * 1024,
allowedMimePrefix: "video/",
},
gif: {
maxBytes: 40 * 1024 * 1024,
allowedMimeExact: ["image/gif"],
},
generic: {
maxBytes: 50 * 1024 * 1024,
},
}
export function isMimeAllowedForMediaType(type: MediaAssetType, mimeType: string): boolean {
const rule = mediaUploadRulesByType[type]
if (rule.allowedMimeExact?.includes(mimeType)) {
return true
}
if (rule.allowedMimePrefix) {
return mimeType.startsWith(rule.allowedMimePrefix)
}
return true
}
export function getMediaUploadMaxBytes(type: MediaAssetType): number {
return mediaUploadRulesByType[type].maxBytes
}
export const artworkRenditionSlotSchema = z.enum(["thumbnail", "card", "full", "retina", "custom"])
export const createMediaAssetInputSchema = z.object({
id: z.string().uuid().optional(),
@@ -65,6 +115,25 @@ export const createArtworkInputSchema = z.object({
year: z.number().int().min(1000).max(9999).optional(),
framing: z.string().max(180).optional(),
availability: z.string().max(180).optional(),
priceAmountCents: z.number().int().min(0).optional(),
priceCurrency: z.string().min(3).max(3).optional(),
isPriceVisible: z.boolean().optional(),
})
export const updateArtworkInputSchema = z.object({
id: z.string().uuid(),
title: z.string().min(1).max(180).optional(),
slug: z.string().min(1).max(180).optional(),
description: z.string().max(5000).nullable().optional(),
medium: z.string().max(180).nullable().optional(),
dimensions: z.string().max(180).nullable().optional(),
year: z.number().int().min(1000).max(9999).nullable().optional(),
framing: z.string().max(180).nullable().optional(),
availability: z.string().max(180).nullable().optional(),
priceAmountCents: z.number().int().min(0).nullable().optional(),
priceCurrency: z.string().min(3).max(3).nullable().optional(),
isPriceVisible: z.boolean().optional(),
isPublished: z.boolean().optional(),
})
export const createGroupingInputSchema = z.object({
@@ -75,6 +144,21 @@ export const createGroupingInputSchema = z.object({
isVisible: z.boolean().default(true),
})
export const updateGroupingInputSchema = z.object({
groupType: z.enum(["gallery", "album", "category", "tag"]),
groupId: z.string().uuid(),
name: z.string().min(1).max(180),
slug: z.string().min(1).max(180),
description: z.string().max(5000).nullable().optional(),
sortOrder: z.number().int().min(0),
isVisible: z.boolean(),
})
export const deleteGroupingInputSchema = z.object({
groupType: z.enum(["gallery", "album", "category", "tag"]),
groupId: z.string().uuid(),
})
export const linkArtworkGroupingInputSchema = z.object({
artworkId: z.string().uuid(),
groupType: z.enum(["gallery", "album", "category", "tag"]),
@@ -95,6 +179,9 @@ export type ArtworkRenditionSlot = z.infer<typeof artworkRenditionSlotSchema>
export type CreateMediaAssetInput = z.infer<typeof createMediaAssetInputSchema>
export type UpdateMediaAssetInput = z.infer<typeof updateMediaAssetInputSchema>
export type CreateArtworkInput = z.infer<typeof createArtworkInputSchema>
export type UpdateArtworkInput = z.infer<typeof updateArtworkInputSchema>
export type CreateGroupingInput = z.infer<typeof createGroupingInputSchema>
export type UpdateGroupingInput = z.infer<typeof updateGroupingInputSchema>
export type DeleteGroupingInput = z.infer<typeof deleteGroupingInputSchema>
export type LinkArtworkGroupingInput = z.infer<typeof linkArtworkGroupingInputSchema>
export type AttachArtworkRenditionInput = z.infer<typeof attachArtworkRenditionInputSchema>

View File

@@ -133,6 +133,14 @@ export const createNavigationMenuInputSchema = z.object({
isVisible: z.boolean().default(true),
})
export const updateNavigationMenuInputSchema = z.object({
id: z.string().uuid(),
name: z.string().min(1).max(180).optional(),
slug: z.string().min(1).max(180).optional(),
location: z.string().min(1).max(80).optional(),
isVisible: z.boolean().optional(),
})
export const createNavigationItemInputSchema = z.object({
menuId: z.string().uuid(),
label: z.string().min(1).max(180),
@@ -157,6 +165,7 @@ export type CreatePageInput = z.infer<typeof createPageInputSchema>
export type UpdatePageInput = z.infer<typeof updatePageInputSchema>
export type UpsertPageTranslationInput = z.infer<typeof upsertPageTranslationInputSchema>
export type CreateNavigationMenuInput = z.infer<typeof createNavigationMenuInputSchema>
export type UpdateNavigationMenuInput = z.infer<typeof updateNavigationMenuInputSchema>
export type CreateNavigationItemInput = z.infer<typeof createNavigationItemInputSchema>
export type UpdateNavigationItemInput = z.infer<typeof updateNavigationItemInputSchema>
export type PageBlock = z.infer<typeof pageBlockSchema>

View File

@@ -0,0 +1,4 @@
ALTER TABLE "Tag"
ADD COLUMN "description" TEXT,
ADD COLUMN "sortOrder" INTEGER NOT NULL DEFAULT 0,
ADD COLUMN "isVisible" BOOLEAN NOT NULL DEFAULT true;

View File

@@ -0,0 +1,4 @@
ALTER TABLE "Artwork"
ADD COLUMN "priceAmountCents" INTEGER,
ADD COLUMN "priceCurrency" TEXT,
ADD COLUMN "isPriceVisible" BOOLEAN NOT NULL DEFAULT false;

View File

@@ -153,6 +153,9 @@ model Artwork {
year Int?
framing String?
availability String?
priceAmountCents Int?
priceCurrency String?
isPriceVisible Boolean @default(false)
isPublished Boolean @default(false)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
@@ -222,6 +225,9 @@ model Tag {
id String @id @default(uuid())
name String
slug String @unique
description String?
sortOrder Int @default(0)
isVisible Boolean @default(true)
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
artworkLinks ArtworkTag[]

View File

@@ -24,6 +24,8 @@ export {
createGallery,
createMediaAsset,
createTag,
deleteArtworkRendition,
deleteGrouping,
deleteMediaAsset,
getMediaAssetById,
getMediaFoundationSummary,
@@ -34,6 +36,8 @@ export {
listMediaFoundationGroups,
listPublishedArtworks,
listPublishedPortfolioGroups,
updateArtwork,
updateGrouping,
updateMediaAsset,
} from "./media-foundation"
export type { PublicNavigationItem } from "./pages-navigation"
@@ -42,6 +46,7 @@ export {
createNavigationMenu,
createPage,
deleteNavigationItem,
deleteNavigationMenu,
deletePage,
getPageById,
getPublishedPageBySlug,
@@ -52,6 +57,7 @@ export {
listPublicNavigation,
listPublishedPageSlugs,
updateNavigationItem,
updateNavigationMenu,
updatePage,
upsertNavigationItemTranslation,
upsertPageTranslation,

View File

@@ -3,7 +3,10 @@ import {
createArtworkInputSchema,
createGroupingInputSchema,
createMediaAssetInputSchema,
deleteGroupingInputSchema,
linkArtworkGroupingInputSchema,
updateArtworkInputSchema,
updateGroupingInputSchema,
updateMediaAssetInputSchema,
} from "@cms/content"
@@ -30,10 +33,14 @@ export async function listArtworks(limit = 24) {
take: limit,
include: {
renditions: {
orderBy: [{ isPrimary: "desc" }, { updatedAt: "desc" }],
select: {
id: true,
slot: true,
mediaAssetId: true,
width: true,
height: true,
isPrimary: true,
},
},
galleryLinks: {
@@ -96,7 +103,7 @@ export async function listMediaFoundationGroups() {
orderBy: [{ sortOrder: "asc" }, { name: "asc" }],
}),
db.tag.findMany({
orderBy: { name: "asc" },
orderBy: [{ sortOrder: "asc" }, { name: "asc" }],
}),
])
@@ -146,6 +153,16 @@ export async function createArtwork(input: unknown) {
})
}
export async function updateArtwork(input: unknown) {
const payload = updateArtworkInputSchema.parse(input)
const { id, ...data } = payload
return db.artwork.update({
where: { id },
data,
})
}
export async function createGallery(input: unknown) {
const payload = createGroupingInputSchema.parse(input)
@@ -171,18 +188,76 @@ export async function createCategory(input: unknown) {
}
export async function createTag(input: unknown) {
const payload = createGroupingInputSchema
.pick({
name: true,
slug: true,
})
.parse(input)
const payload = createGroupingInputSchema.parse(input)
return db.tag.create({
data: payload,
})
}
export async function updateGrouping(input: unknown) {
const payload = updateGroupingInputSchema.parse(input)
const data = {
name: payload.name,
slug: payload.slug,
description: payload.description ?? null,
sortOrder: payload.sortOrder,
isVisible: payload.isVisible,
}
if (payload.groupType === "gallery") {
return db.gallery.update({
where: { id: payload.groupId },
data,
})
}
if (payload.groupType === "album") {
return db.album.update({
where: { id: payload.groupId },
data,
})
}
if (payload.groupType === "category") {
return db.category.update({
where: { id: payload.groupId },
data,
})
}
return db.tag.update({
where: { id: payload.groupId },
data,
})
}
export async function deleteGrouping(input: unknown) {
const payload = deleteGroupingInputSchema.parse(input)
if (payload.groupType === "gallery") {
return db.gallery.delete({
where: { id: payload.groupId },
})
}
if (payload.groupType === "album") {
return db.album.delete({
where: { id: payload.groupId },
})
}
if (payload.groupType === "category") {
return db.category.delete({
where: { id: payload.groupId },
})
}
return db.tag.delete({
where: { id: payload.groupId },
})
}
export async function linkArtworkToGrouping(input: unknown) {
const payload = linkArtworkGroupingInputSchema.parse(input)
@@ -269,6 +344,12 @@ export async function attachArtworkRendition(input: unknown) {
})
}
export async function deleteArtworkRendition(id: string) {
return db.artworkRendition.delete({
where: { id },
})
}
export async function getMediaFoundationSummary() {
const [mediaAssets, artworks, galleries, albums, categories, tags] = await Promise.all([
db.mediaAsset.count(),
@@ -325,7 +406,10 @@ export async function listPublishedPortfolioGroups() {
},
}),
db.tag.findMany({
orderBy: [{ name: "asc" }],
where: {
isVisible: true,
},
orderBy: [{ sortOrder: "asc" }, { name: "asc" }],
select: {
id: true,
name: true,
@@ -381,6 +465,7 @@ export async function listPublishedArtworks(input: ListPublishedArtworksInput =
some: {
tag: {
slug: input.groupSlug,
isVisible: true,
},
},
}
@@ -398,6 +483,7 @@ export async function listPublishedArtworks(input: ListPublishedArtworksInput =
isPublished: true,
},
},
orderBy: [{ isPrimary: "desc" }, { updatedAt: "desc" }],
include: {
mediaAsset: {
select: {
@@ -472,6 +558,7 @@ export async function getPublishedArtworkBySlug(slug: string) {
isPublished: true,
},
},
orderBy: [{ isPrimary: "desc" }, { updatedAt: "desc" }],
include: {
mediaAsset: {
select: {

View File

@@ -3,6 +3,7 @@ import {
createNavigationMenuInputSchema,
createPageInputSchema,
updateNavigationItemInputSchema,
updateNavigationMenuInputSchema,
updatePageInputSchema,
upsertPageTranslationInputSchema,
} from "@cms/content"
@@ -297,6 +298,22 @@ export async function createNavigationMenu(input: unknown) {
})
}
export async function updateNavigationMenu(input: unknown) {
const payload = updateNavigationMenuInputSchema.parse(input)
const { id, ...data } = payload
return db.navigationMenu.update({
where: { id },
data,
})
}
export async function deleteNavigationMenu(id: string) {
return db.navigationMenu.delete({
where: { id },
})
}
export async function createNavigationItem(input: unknown) {
const payload = createNavigationItemInputSchema.parse(input)