Implement portfolio admin management

2026-03-07 16:06:20 +01:00
parent f983ce2203
commit ea64373853
35 changed files with 5126 additions and 178 deletions
@@ -1,15 +1,18 @@
 import type { Metadata } from "next";
-import { ArrowLeft, CalendarDays, FolderKanban, Tag } from "lucide-react";
+import { ArrowLeft, ArrowUpRight, CalendarDays, FolderKanban, Tag, UserRound } from "lucide-react";
 import Link from "next/link";
+import Image from "next/image";
 import { getTranslations } from "next-intl/server";
 import { notFound } from "next/navigation";

 import { Container } from "@/components/layout/container";
 import { MotionFade } from "@/components/motion-fade";
-import { routing } from "@/i18n/routing";
 import { buildLocalizedMetadata } from "@/lib/metadata";
 import { getLocalizedPath, resolveLocale } from "@/lib/locale";
-import { getPortfolioItem, pickText, portfolioItems } from "@/lib/site-data";
+import {
+  getLocalizedValue,
+  getPublishedPortfolioProjectBySlug,
+} from "@/lib/portfolio";
 import { AppCard } from "@/components/ui/app-card";
 import { Button } from "@/components/ui/button";
 import { CardContent } from "@/components/ui/card";
@@ -21,12 +24,30 @@ type PortfolioItemPageProps = {
  };
 };

-export function generateStaticParams() {
-  return routing.locales.flatMap((locale) =>
-    portfolioItems.map((item) => ({
-      locale,
-      slug: item.slug,
-    })),
+export const dynamic = "force-dynamic";
+
+function PortfolioImage({
+  src,
+  alt,
+  className,
+  width,
+  height,
+}: {
+  src: string;
+  alt: string;
+  className: string;
+  width: number;
+  height: number;
+}) {
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      unoptimized
+      className={className}
+    />
  );
 }

@@ -34,7 +55,7 @@ export async function generateMetadata({
  params: { locale, slug },
 }: PortfolioItemPageProps): Promise<Metadata> {
  const localeKey = resolveLocale(locale);
-  const item = getPortfolioItem(slug);
+  const item = await getPublishedPortfolioProjectBySlug(slug);

  if (!item) {
    return buildLocalizedMetadata({
@@ -48,8 +69,8 @@ export async function generateMetadata({
  return buildLocalizedMetadata({
    locale: localeKey,
    pathname: `/portfolio/${slug}`,
-    title: pickText(item.title, localeKey),
-    description: pickText(item.summary, localeKey),
+    title: getLocalizedValue(item.title, localeKey),
+    description: getLocalizedValue(item.summary, localeKey),
  });
 }

@@ -57,7 +78,7 @@ export default async function PortfolioItemPage({
  params: { locale, slug },
 }: PortfolioItemPageProps) {
  const localeKey = resolveLocale(locale);
-  const item = getPortfolioItem(slug);
+  const item = await getPublishedPortfolioProjectBySlug(slug);

  if (!item) {
    notFound();
@@ -78,25 +99,41 @@ export default async function PortfolioItemPage({
            </Button>

            <h1 className="mt-5 text-3xl font-semibold text-foreground sm:text-4xl">
-              {pickText(item.title, localeKey)}
+              {getLocalizedValue(item.title, localeKey)}
            </h1>
            <p className="mt-4 text-base text-muted-foreground sm:text-lg">
-              {pickText(item.summary, localeKey)}
+              {getLocalizedValue(item.summary, localeKey)}
            </p>

+            {item.coverImagePath ? (
+              <div className="mt-6 overflow-hidden rounded-surface border border-border">
+                <PortfolioImage
+                  src={item.coverImagePath}
+                  alt={getLocalizedValue(item.title, localeKey)}
+                  width={1600}
+                  height={900}
+                  className="h-auto w-full object-cover"
+                />
+              </div>
+            ) : null}
+
            <div className="mt-6 flex flex-wrap gap-3 text-sm text-foreground/80">
              {[
                {
                  icon: Tag,
-                  label: pickText(item.category, localeKey),
+                  label: getLocalizedValue(item.category.name, localeKey),
                },
                {
                  icon: CalendarDays,
-                  label: item.year,
+                  label: String(item.projectYear),
                },
                {
                  icon: FolderKanban,
-                  label: item.slug,
+                  label: getLocalizedValue(item.serviceLabel, localeKey),
+                },
+                {
+                  icon: UserRound,
+                  label: item.clientName,
                },
              ].map((meta) => {
                const Icon = meta.icon;
@@ -111,35 +148,90 @@ export default async function PortfolioItemPage({
                );
              })}
            </div>
+
+            {item.previewUrl ? (
+              <div className="mt-6">
+                <Button asChild>
+                  <Link href={item.previewUrl} target="_blank" rel="noreferrer">
+                    {t("preview")}
+                    <ArrowUpRight className="h-4 w-4" />
+                  </Link>
+                </Button>
+              </div>
+            ) : null}
          </CardContent>
        </AppCard>
      </MotionFade>

      <div className="grid gap-4 md:grid-cols-3">
-        {[
-          {
-            title: t("challenge"),
-            text: t("challengeText"),
-          },
-          {
-            title: t("solution"),
-            text: t("solutionText"),
-          },
-          {
-            title: t("outcome"),
-            text: t("outcomeText"),
-          },
-        ].map((section, index) => (
-          <MotionFade key={section.title} delay={0.05 * (index + 1)}>
+        {item.sections.map((section, index) => (
+          <MotionFade key={section.id} delay={0.05 * (index + 1)}>
            <AppCard>
              <CardContent className="p-5">
-                <h2 className="text-lg font-semibold text-foreground">{section.title}</h2>
-                <p className="mt-2 text-sm text-muted-foreground">{section.text}</p>
+                <h2 className="text-lg font-semibold text-foreground">
+                  {getLocalizedValue(section.title, localeKey)}
+                </h2>
+                <p className="mt-2 whitespace-pre-line text-sm text-muted-foreground">
+                  {getLocalizedValue(section.body, localeKey)}
+                </p>
+                {section.imagePath ? (
+                  <PortfolioImage
+                    src={section.imagePath}
+                    alt={getLocalizedValue(section.title, localeKey)}
+                    width={1200}
+                    height={720}
+                    className="mt-4 h-48 w-full rounded-nested object-cover"
+                  />
+                ) : null}
+                {section.linkUrl ? (
+                  <Button asChild variant="outline" className="mt-4">
+                    <Link href={section.linkUrl} target="_blank" rel="noreferrer">
+                      {t("openLink")}
+                      <ArrowUpRight className="h-4 w-4" />
+                    </Link>
+                  </Button>
+                ) : null}
              </CardContent>
            </AppCard>
          </MotionFade>
        ))}
      </div>
+
+      {item.assets.length > 0 ? (
+        <MotionFade delay={0.1}>
+          <AppCard>
+            <CardContent className="p-6 lg:p-8">
+              <h2 className="text-xl font-semibold text-foreground">{t("gallery")}</h2>
+              <div className="mt-4 grid gap-4 md:grid-cols-2">
+                {item.assets.map((asset) => (
+                  <div key={asset.id} className="overflow-hidden rounded-surface border border-border">
+                    {asset.kind === "IMAGE" ? (
+                      <PortfolioImage
+                        src={asset.filePath}
+                        alt={getLocalizedValue(asset.alt, localeKey)}
+                        width={1200}
+                        height={720}
+                        className="h-64 w-full object-cover"
+                      />
+                    ) : (
+                      <div className="flex h-64 items-center justify-center bg-surface-1 p-6 text-center text-sm text-muted-foreground">
+                        <div className="space-y-3">
+                          <p>{getLocalizedValue(asset.alt, localeKey)}</p>
+                          <Button asChild variant="outline">
+                            <Link href={asset.filePath} target="_blank" rel="noreferrer">
+                              {t("download")}
+                            </Link>
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </AppCard>
+        </MotionFade>
+      ) : null}
    </Container>
  );
 }
@@ -9,14 +9,23 @@ import { buildLocalizedMetadata } from "@/lib/metadata";
 import { AppCard } from "@/components/ui/app-card";
 import { CardContent } from "@/components/ui/card";
 import { getLocalizedPath, resolveLocale } from "@/lib/locale";
-import { pickText, portfolioItems } from "@/lib/site-data";
+import {
+  getActivePortfolioCategories,
+  getLocalizedValue,
+  getPublishedPortfolioProjects,
+} from "@/lib/portfolio";

 type PortfolioPageProps = {
  params: {
    locale: string;
  };
+  searchParams?: {
+    category?: string;
+  };
 };

+export const dynamic = "force-dynamic";
+
 export async function generateMetadata({
  params: { locale },
 }: PortfolioPageProps): Promise<Metadata> {
@@ -31,9 +40,19 @@ export async function generateMetadata({
  });
 }

-export default async function PortfolioPage({ params: { locale } }: PortfolioPageProps) {
+export default async function PortfolioPage({
+  params: { locale },
+  searchParams,
+}: PortfolioPageProps) {
  const localeKey = resolveLocale(locale);
  const t = await getTranslations({ locale: localeKey, namespace: "portfolioPage" });
+  const selectedCategory = searchParams?.category ?? "";
+  const [categories, projects] = await Promise.all([
+    getActivePortfolioCategories(),
+    getPublishedPortfolioProjects({
+      categorySlug: selectedCategory || undefined,
+    }),
+  ]);

  return (
    <Container className="flex flex-col gap-section py-10 lg:py-14">
@@ -53,8 +72,34 @@ export default async function PortfolioPage({ params: { locale } }: PortfolioPag
        </AppCard>
      </MotionFade>

+      <section className="flex flex-wrap gap-3">
+        <Link
+          href={getLocalizedPath(localeKey, "/portfolio")}
+          className={`rounded-pill border px-4 py-2 text-sm transition-colors ${
+            selectedCategory === ""
+              ? "border-border-strong bg-foreground text-background"
+              : "border-border bg-background text-foreground/80 hover:border-border-strong hover:text-foreground"
+          }`}
+        >
+          {t("all")}
+        </Link>
+        {categories.map((category) => (
+          <Link
+            key={category.id}
+            href={getLocalizedPath(localeKey, `/portfolio?category=${category.slug}`)}
+            className={`rounded-pill border px-4 py-2 text-sm transition-colors ${
+              selectedCategory === category.slug
+                ? "border-border-strong bg-foreground text-background"
+                : "border-border bg-background text-foreground/80 hover:border-border-strong hover:text-foreground"
+            }`}
+          >
+            {getLocalizedValue(category.name, localeKey)}
+          </Link>
+        ))}
+      </section>
+
      <section className="grid gap-4 md:grid-cols-2">
-        {portfolioItems.map((item, index) => (
+        {projects.map((item, index) => (
          <MotionFade key={item.slug} delay={index * 0.05}>
            <AppCard interactive>
              <CardContent className="p-5">
@@ -64,18 +109,18 @@ export default async function PortfolioPage({ params: { locale } }: PortfolioPag
                >
                  <div className="flex items-center justify-between gap-3">
                    <p className="text-sm text-muted-foreground/80">
-                      {pickText(item.category, localeKey)}
+                      {getLocalizedValue(item.category.name, localeKey)}
                    </p>
                    <p className="inline-flex items-center gap-1 text-xs text-muted-foreground/80">
                      <CalendarDays className="h-3.5 w-3.5" />
-                      {item.year}
+                      {item.projectYear}
                    </p>
                  </div>
                  <h2 className="mt-3 text-xl font-semibold text-foreground">
-                    {pickText(item.title, localeKey)}
+                    {getLocalizedValue(item.title, localeKey)}
                  </h2>
                  <p className="mt-2 text-sm text-muted-foreground">
-                    {pickText(item.summary, localeKey)}
+                    {getLocalizedValue(item.summary, localeKey)}
                  </p>
                  <p className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-foreground/80 group-hover:text-foreground">
                    {t("open")}
@@ -86,6 +131,14 @@ export default async function PortfolioPage({ params: { locale } }: PortfolioPag
            </AppCard>
          </MotionFade>
        ))}
+
+        {projects.length === 0 ? (
+          <AppCard className="md:col-span-2">
+            <CardContent className="p-6 text-sm text-muted-foreground">
+              {t("empty")}
+            </CardContent>
+          </AppCard>
+        ) : null}
      </section>
    </Container>
  );