feat(web): add public portfolio rendering and media streaming
This commit is contained in:
101
apps/web/src/app/[locale]/portfolio/[slug]/page.tsx
Normal file
101
apps/web/src/app/[locale]/portfolio/[slug]/page.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
import { getPublishedArtworkBySlug } from "@cms/db"
|
||||
import Image from "next/image"
|
||||
import { notFound } from "next/navigation"
|
||||
import { getTranslations } from "next-intl/server"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type PublicArtworkPageProps = {
|
||||
params: Promise<{ slug: string }>
|
||||
}
|
||||
|
||||
function formatLabelList(values: string[]) {
|
||||
if (values.length === 0) {
|
||||
return "-"
|
||||
}
|
||||
|
||||
return values.join(", ")
|
||||
}
|
||||
|
||||
export default async function PublicArtworkPage({ params }: PublicArtworkPageProps) {
|
||||
const [{ slug }, t] = await Promise.all([params, getTranslations("Portfolio")])
|
||||
const artwork = await getPublishedArtworkBySlug(slug)
|
||||
|
||||
if (!artwork) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="mx-auto w-full max-w-5xl space-y-6 px-6 py-16">
|
||||
<header className="space-y-2">
|
||||
<p className="text-sm uppercase tracking-[0.2em] text-neutral-500">{t("badge")}</p>
|
||||
<h1 className="text-4xl font-semibold tracking-tight">{artwork.title}</h1>
|
||||
<p className="text-neutral-600">{artwork.description || t("noDescription")}</p>
|
||||
</header>
|
||||
|
||||
<section className="grid gap-4 md:grid-cols-2">
|
||||
{artwork.renditions.length === 0 ? (
|
||||
<article className="rounded-xl border border-neutral-200 p-6 text-sm text-neutral-600">
|
||||
{t("noPreview")}
|
||||
</article>
|
||||
) : (
|
||||
artwork.renditions.map((rendition) => (
|
||||
<article
|
||||
key={rendition.id}
|
||||
className="overflow-hidden rounded-xl border border-neutral-200"
|
||||
>
|
||||
<Image
|
||||
src={`/api/media/file/${rendition.mediaAssetId}`}
|
||||
alt={rendition.mediaAsset.altText || artwork.title}
|
||||
width={1400}
|
||||
height={1000}
|
||||
className="h-72 w-full object-cover"
|
||||
/>
|
||||
<div className="flex items-center justify-between px-4 py-2 text-xs text-neutral-600">
|
||||
<span>{rendition.slot}</span>
|
||||
<span>
|
||||
{rendition.mediaAsset.width ?? "-"} x {rendition.mediaAsset.height ?? "-"}
|
||||
</span>
|
||||
</div>
|
||||
</article>
|
||||
))
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="grid gap-4 rounded-xl border border-neutral-200 p-6 md:grid-cols-2">
|
||||
<div className="space-y-2 text-sm">
|
||||
<p>
|
||||
<strong>{t("fields.medium")}:</strong> {artwork.medium || "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{t("fields.dimensions")}:</strong> {artwork.dimensions || "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{t("fields.year")}:</strong> {artwork.year || "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{t("fields.availability")}:</strong> {artwork.availability || "-"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2 text-sm">
|
||||
<p>
|
||||
<strong>{t("fields.galleries")}:</strong>{" "}
|
||||
{formatLabelList(artwork.galleryLinks.map((entry) => entry.gallery.name))}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{t("fields.albums")}:</strong>{" "}
|
||||
{formatLabelList(artwork.albumLinks.map((entry) => entry.album.name))}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{t("fields.categories")}:</strong>{" "}
|
||||
{formatLabelList(artwork.categoryLinks.map((entry) => entry.category.name))}
|
||||
</p>
|
||||
<p>
|
||||
<strong>{t("fields.tags")}:</strong>{" "}
|
||||
{formatLabelList(artwork.tagLinks.map((entry) => entry.tag.name))}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
178
apps/web/src/app/[locale]/portfolio/page.tsx
Normal file
178
apps/web/src/app/[locale]/portfolio/page.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import { listPublishedArtworks, listPublishedPortfolioGroups } from "@cms/db"
|
||||
import Image from "next/image"
|
||||
import { getTranslations } from "next-intl/server"
|
||||
|
||||
import { Link } from "@/i18n/navigation"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
type SearchParamsInput = Record<string, string | string[] | undefined>
|
||||
|
||||
type PortfolioPageProps = {
|
||||
searchParams: Promise<SearchParamsInput>
|
||||
}
|
||||
|
||||
function readFirstValue(value: string | string[] | undefined): string | null {
|
||||
if (Array.isArray(value)) {
|
||||
return value[0] ?? null
|
||||
}
|
||||
|
||||
return value ?? null
|
||||
}
|
||||
|
||||
function resolveGroupFilter(searchParams: SearchParamsInput) {
|
||||
const gallery = readFirstValue(searchParams.gallery)
|
||||
if (gallery) {
|
||||
return { groupType: "gallery" as const, groupSlug: gallery }
|
||||
}
|
||||
|
||||
const album = readFirstValue(searchParams.album)
|
||||
if (album) {
|
||||
return { groupType: "album" as const, groupSlug: album }
|
||||
}
|
||||
|
||||
const category = readFirstValue(searchParams.category)
|
||||
if (category) {
|
||||
return { groupType: "category" as const, groupSlug: category }
|
||||
}
|
||||
|
||||
const tag = readFirstValue(searchParams.tag)
|
||||
if (tag) {
|
||||
return { groupType: "tag" as const, groupSlug: tag }
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
function findPreviewAsset(
|
||||
renditions: Array<{
|
||||
slot: string
|
||||
mediaAssetId: string
|
||||
mediaAsset: {
|
||||
id: string
|
||||
altText: string | null
|
||||
title: string
|
||||
}
|
||||
}>,
|
||||
) {
|
||||
const byPreference =
|
||||
renditions.find((item) => item.slot === "card") ??
|
||||
renditions.find((item) => item.slot === "thumbnail") ??
|
||||
renditions.find((item) => item.slot === "full") ??
|
||||
renditions[0]
|
||||
|
||||
return byPreference ?? null
|
||||
}
|
||||
|
||||
export default async function PortfolioPage({ searchParams }: PortfolioPageProps) {
|
||||
const [resolvedSearchParams, t] = await Promise.all([searchParams, getTranslations("Portfolio")])
|
||||
const activeFilter = resolveGroupFilter(resolvedSearchParams)
|
||||
|
||||
const [groups, artworks] = await Promise.all([
|
||||
listPublishedPortfolioGroups(),
|
||||
listPublishedArtworks(
|
||||
activeFilter
|
||||
? {
|
||||
groupType: activeFilter.groupType,
|
||||
groupSlug: activeFilter.groupSlug,
|
||||
}
|
||||
: undefined,
|
||||
),
|
||||
])
|
||||
|
||||
return (
|
||||
<section className="mx-auto w-full max-w-6xl space-y-6 px-6 py-16">
|
||||
<header className="space-y-2">
|
||||
<p className="text-sm uppercase tracking-[0.2em] text-neutral-500">{t("badge")}</p>
|
||||
<h1 className="text-4xl font-semibold tracking-tight">{t("title")}</h1>
|
||||
<p className="text-neutral-600">{t("description")}</p>
|
||||
</header>
|
||||
|
||||
<section className="rounded-xl border border-neutral-200 p-4">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Link
|
||||
href="/portfolio"
|
||||
className="rounded-md border border-neutral-300 px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100"
|
||||
>
|
||||
{t("filters.clear")}
|
||||
</Link>
|
||||
|
||||
{groups.galleries.map((group) => (
|
||||
<Link
|
||||
key={`gallery-${group.id}`}
|
||||
href={{ pathname: "/portfolio", query: { gallery: group.slug } }}
|
||||
className="rounded-md border border-neutral-300 px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100"
|
||||
>
|
||||
{t("filters.gallery")}: {group.name}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{groups.albums.map((group) => (
|
||||
<Link
|
||||
key={`album-${group.id}`}
|
||||
href={{ pathname: "/portfolio", query: { album: group.slug } }}
|
||||
className="rounded-md border border-neutral-300 px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100"
|
||||
>
|
||||
{t("filters.album")}: {group.name}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{groups.categories.map((group) => (
|
||||
<Link
|
||||
key={`category-${group.id}`}
|
||||
href={{ pathname: "/portfolio", query: { category: group.slug } }}
|
||||
className="rounded-md border border-neutral-300 px-3 py-1.5 text-sm text-neutral-700 hover:bg-neutral-100"
|
||||
>
|
||||
{t("filters.category")}: {group.name}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{artworks.length === 0 ? (
|
||||
<section className="rounded-xl border border-neutral-200 p-6 text-sm text-neutral-600">
|
||||
{t("empty")}
|
||||
</section>
|
||||
) : (
|
||||
<section className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{artworks.map((artwork) => {
|
||||
const preview = findPreviewAsset(artwork.renditions)
|
||||
|
||||
return (
|
||||
<article
|
||||
key={artwork.id}
|
||||
className="overflow-hidden rounded-xl border border-neutral-200"
|
||||
>
|
||||
{preview ? (
|
||||
<Image
|
||||
src={`/api/media/file/${preview.mediaAssetId}`}
|
||||
alt={preview.mediaAsset.altText || artwork.title}
|
||||
width={1200}
|
||||
height={800}
|
||||
className="h-56 w-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-56 items-center justify-center bg-neutral-100 text-sm text-neutral-500">
|
||||
{t("noPreview")}
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2 p-4">
|
||||
<h2 className="text-lg font-medium">{artwork.title}</h2>
|
||||
<p className="line-clamp-3 text-sm text-neutral-600">
|
||||
{artwork.description || t("noDescription")}
|
||||
</p>
|
||||
<Link
|
||||
href={`/portfolio/${artwork.slug}`}
|
||||
className="text-sm underline underline-offset-2"
|
||||
>
|
||||
{t("viewArtwork")}
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
})}
|
||||
</section>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
47
apps/web/src/app/api/media/file/[id]/route.ts
Normal file
47
apps/web/src/app/api/media/file/[id]/route.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import { getMediaAssetById } from "@cms/db"
|
||||
|
||||
import { readMediaStorageObject } from "@/lib/media/storage-read"
|
||||
|
||||
export const runtime = "nodejs"
|
||||
|
||||
type RouteContext = {
|
||||
params: Promise<{ id: string }>
|
||||
}
|
||||
|
||||
function toBody(data: Uint8Array): BodyInit {
|
||||
const bytes = new Uint8Array(data.byteLength)
|
||||
bytes.set(data)
|
||||
return bytes
|
||||
}
|
||||
|
||||
export async function GET(_request: Request, context: RouteContext): Promise<Response> {
|
||||
const { id } = await context.params
|
||||
const asset = await getMediaAssetById(id)
|
||||
|
||||
if (!asset || !asset.storageKey || !asset.isPublished) {
|
||||
return Response.json(
|
||||
{
|
||||
message: "Media file not found",
|
||||
},
|
||||
{ status: 404 },
|
||||
)
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await readMediaStorageObject(asset.storageKey)
|
||||
return new Response(toBody(data), {
|
||||
status: 200,
|
||||
headers: {
|
||||
"content-type": asset.mimeType || "application/octet-stream",
|
||||
"cache-control": "public, max-age=3600",
|
||||
},
|
||||
})
|
||||
} catch {
|
||||
return Response.json(
|
||||
{
|
||||
message: "Unable to read media file from configured storage backends",
|
||||
},
|
||||
{ status: 404 },
|
||||
)
|
||||
}
|
||||
}
|
||||
114
apps/web/src/lib/media/storage-read.ts
Normal file
114
apps/web/src/lib/media/storage-read.ts
Normal file
@@ -0,0 +1,114 @@
|
||||
import { readFile } from "node:fs/promises"
|
||||
import path from "node:path"
|
||||
import { GetObjectCommand, S3Client } from "@aws-sdk/client-s3"
|
||||
|
||||
export type MediaStorageProvider = "local" | "s3"
|
||||
|
||||
type S3Config = {
|
||||
bucket: string
|
||||
region: string
|
||||
endpoint?: string
|
||||
accessKeyId: string
|
||||
secretAccessKey: string
|
||||
forcePathStyle?: boolean
|
||||
}
|
||||
|
||||
function parseBoolean(value: string | undefined): boolean {
|
||||
return value?.toLowerCase() === "true"
|
||||
}
|
||||
|
||||
export function resolveMediaStorageProvider(raw: string | undefined): MediaStorageProvider {
|
||||
if (raw?.toLowerCase() === "local") {
|
||||
return "local"
|
||||
}
|
||||
|
||||
return "s3"
|
||||
}
|
||||
|
||||
function resolveS3Config(): S3Config {
|
||||
const bucket = process.env.CMS_MEDIA_S3_BUCKET?.trim()
|
||||
const region = process.env.CMS_MEDIA_S3_REGION?.trim()
|
||||
const accessKeyId = process.env.CMS_MEDIA_S3_ACCESS_KEY_ID?.trim()
|
||||
const secretAccessKey = process.env.CMS_MEDIA_S3_SECRET_ACCESS_KEY?.trim()
|
||||
const endpoint = process.env.CMS_MEDIA_S3_ENDPOINT?.trim() || undefined
|
||||
|
||||
if (!bucket || !region || !accessKeyId || !secretAccessKey) {
|
||||
throw new Error(
|
||||
"S3 storage selected but required env vars are missing: CMS_MEDIA_S3_BUCKET, CMS_MEDIA_S3_REGION, CMS_MEDIA_S3_ACCESS_KEY_ID, CMS_MEDIA_S3_SECRET_ACCESS_KEY",
|
||||
)
|
||||
}
|
||||
|
||||
return {
|
||||
bucket,
|
||||
region,
|
||||
endpoint,
|
||||
accessKeyId,
|
||||
secretAccessKey,
|
||||
forcePathStyle: parseBoolean(process.env.CMS_MEDIA_S3_FORCE_PATH_STYLE),
|
||||
}
|
||||
}
|
||||
|
||||
function createS3Client(config: S3Config): S3Client {
|
||||
return new S3Client({
|
||||
region: config.region,
|
||||
endpoint: config.endpoint,
|
||||
forcePathStyle: config.forcePathStyle,
|
||||
credentials: {
|
||||
accessKeyId: config.accessKeyId,
|
||||
secretAccessKey: config.secretAccessKey,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function resolveLocalMediaBaseDirectory(): string {
|
||||
const configured = process.env.CMS_MEDIA_LOCAL_STORAGE_DIR?.trim()
|
||||
|
||||
if (configured) {
|
||||
return path.resolve(configured)
|
||||
}
|
||||
|
||||
return path.resolve(process.cwd(), ".data", "media")
|
||||
}
|
||||
|
||||
async function readFromLocalStorage(storageKey: string): Promise<Uint8Array> {
|
||||
const baseDirectory = resolveLocalMediaBaseDirectory()
|
||||
const outputPath = path.join(baseDirectory, storageKey)
|
||||
|
||||
return readFile(outputPath)
|
||||
}
|
||||
|
||||
async function readFromS3Storage(storageKey: string): Promise<Uint8Array> {
|
||||
const config = resolveS3Config()
|
||||
const client = createS3Client(config)
|
||||
|
||||
const response = await client.send(
|
||||
new GetObjectCommand({
|
||||
Bucket: config.bucket,
|
||||
Key: storageKey,
|
||||
}),
|
||||
)
|
||||
|
||||
if (!response.Body) {
|
||||
throw new Error("S3 object body is empty")
|
||||
}
|
||||
|
||||
return response.Body.transformToByteArray()
|
||||
}
|
||||
|
||||
export async function readMediaStorageObject(storageKey: string): Promise<Uint8Array> {
|
||||
const preferred = resolveMediaStorageProvider(process.env.CMS_MEDIA_STORAGE_PROVIDER)
|
||||
const reads =
|
||||
preferred === "s3"
|
||||
? [() => readFromS3Storage(storageKey), () => readFromLocalStorage(storageKey)]
|
||||
: [() => readFromLocalStorage(storageKey), () => readFromS3Storage(storageKey)]
|
||||
|
||||
for (const read of reads) {
|
||||
try {
|
||||
return await read()
|
||||
} catch {
|
||||
// Try next backend.
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error("Unable to read media file from configured storage backends")
|
||||
}
|
||||
@@ -60,5 +60,30 @@
|
||||
"budgetMin": "Budget min.",
|
||||
"budgetMax": "Budget max."
|
||||
}
|
||||
},
|
||||
"Portfolio": {
|
||||
"badge": "Portfolio",
|
||||
"title": "Kunstwerk-Portfolio",
|
||||
"description": "Durchsuche veröffentlichte Kunstwerke aus Galerien, Alben und Kategorien.",
|
||||
"empty": "Keine Kunstwerke für diesen Filter gefunden.",
|
||||
"noPreview": "Keine Vorschau verfügbar",
|
||||
"noDescription": "Keine Beschreibung",
|
||||
"viewArtwork": "Kunstwerk ansehen",
|
||||
"filters": {
|
||||
"clear": "Filter zurücksetzen",
|
||||
"gallery": "Galerie",
|
||||
"album": "Album",
|
||||
"category": "Kategorie"
|
||||
},
|
||||
"fields": {
|
||||
"medium": "Medium",
|
||||
"dimensions": "Abmessungen",
|
||||
"year": "Jahr",
|
||||
"availability": "Verfügbarkeit",
|
||||
"galleries": "Galerien",
|
||||
"albums": "Alben",
|
||||
"categories": "Kategorien",
|
||||
"tags": "Tags"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,5 +60,30 @@
|
||||
"budgetMin": "Budget min",
|
||||
"budgetMax": "Budget max"
|
||||
}
|
||||
},
|
||||
"Portfolio": {
|
||||
"badge": "Portfolio",
|
||||
"title": "Artwork portfolio",
|
||||
"description": "Browse published artworks from galleries, albums, and categories.",
|
||||
"empty": "No artworks found for this filter.",
|
||||
"noPreview": "No preview available",
|
||||
"noDescription": "No description",
|
||||
"viewArtwork": "View artwork",
|
||||
"filters": {
|
||||
"clear": "Clear filters",
|
||||
"gallery": "Gallery",
|
||||
"album": "Album",
|
||||
"category": "Category"
|
||||
},
|
||||
"fields": {
|
||||
"medium": "Medium",
|
||||
"dimensions": "Dimensions",
|
||||
"year": "Year",
|
||||
"availability": "Availability",
|
||||
"galleries": "Galleries",
|
||||
"albums": "Albums",
|
||||
"categories": "Categories",
|
||||
"tags": "Tags"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,5 +60,30 @@
|
||||
"budgetMin": "Presupuesto mínimo",
|
||||
"budgetMax": "Presupuesto máximo"
|
||||
}
|
||||
},
|
||||
"Portfolio": {
|
||||
"badge": "Portafolio",
|
||||
"title": "Portafolio de obras",
|
||||
"description": "Explora obras publicadas de galerías, álbumes y categorías.",
|
||||
"empty": "No se encontraron obras para este filtro.",
|
||||
"noPreview": "Sin vista previa",
|
||||
"noDescription": "Sin descripción",
|
||||
"viewArtwork": "Ver obra",
|
||||
"filters": {
|
||||
"clear": "Limpiar filtros",
|
||||
"gallery": "Galería",
|
||||
"album": "Álbum",
|
||||
"category": "Categoría"
|
||||
},
|
||||
"fields": {
|
||||
"medium": "Técnica",
|
||||
"dimensions": "Dimensiones",
|
||||
"year": "Año",
|
||||
"availability": "Disponibilidad",
|
||||
"galleries": "Galerías",
|
||||
"albums": "Álbumes",
|
||||
"categories": "Categorías",
|
||||
"tags": "Etiquetas"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -60,5 +60,30 @@
|
||||
"budgetMin": "Budget min",
|
||||
"budgetMax": "Budget max"
|
||||
}
|
||||
},
|
||||
"Portfolio": {
|
||||
"badge": "Portfolio",
|
||||
"title": "Portfolio d'oeuvres",
|
||||
"description": "Parcourez les oeuvres publiées par galeries, albums et catégories.",
|
||||
"empty": "Aucune oeuvre trouvée pour ce filtre.",
|
||||
"noPreview": "Aperçu indisponible",
|
||||
"noDescription": "Aucune description",
|
||||
"viewArtwork": "Voir l'oeuvre",
|
||||
"filters": {
|
||||
"clear": "Réinitialiser les filtres",
|
||||
"gallery": "Galerie",
|
||||
"album": "Album",
|
||||
"category": "Catégorie"
|
||||
},
|
||||
"fields": {
|
||||
"medium": "Médium",
|
||||
"dimensions": "Dimensions",
|
||||
"year": "Année",
|
||||
"availability": "Disponibilité",
|
||||
"galleries": "Galeries",
|
||||
"albums": "Albums",
|
||||
"categories": "Catégories",
|
||||
"tags": "Tags"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user