MohFarawati
86243b79c2
The detail page rendered an empty <PageHero /> (blank gradient band) with the real title buried in a card lower down (Phase 0 finding). - Populate the detail PageHero with the project category (badge), title and summary, so the top of the page is a proper header. - Slim the in-content ProjectHeader to back-link + meta chips + preview button, removing the now-duplicated title and summary. Applies across all three detail templates (grid/story/case-study). Verified: eslint clean, no new type errors.
85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { getLocale, getTranslations } from "next-intl/server";
|
|
import { notFound } from "next/navigation";
|
|
|
|
import { Container } from "@/components/layout/container";
|
|
import { PageHero } from "@/components/layout/page-hero";
|
|
import { PortfolioProjectDetail } from "@/components/site/portfolio-project-detail";
|
|
import { getSiteSettings } from "@/lib/app-config";
|
|
import { buildLocalizedMetadata } from "@/lib/metadata";
|
|
import { resolveLocale } from "@/lib/locale";
|
|
import {
|
|
getLocalizedValue,
|
|
getPublishedPortfolioProjectBySlug,
|
|
} from "@/lib/portfolio";
|
|
|
|
type PortfolioItemPageProps = {
|
|
params: Promise<{
|
|
locale: string;
|
|
slug: string;
|
|
}>;
|
|
};
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export async function generateMetadata({ params }: PortfolioItemPageProps): Promise<Metadata> {
|
|
const { slug } = await params;
|
|
const siteSettings = await getSiteSettings();
|
|
const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
|
|
const item = await getPublishedPortfolioProjectBySlug(slug);
|
|
|
|
if (!item) {
|
|
return await buildLocalizedMetadata({
|
|
locale: localeKey,
|
|
pathname: `/portfolio/${slug}`,
|
|
title: "Portfolio",
|
|
description: "Portfolio item",
|
|
});
|
|
}
|
|
|
|
return await buildLocalizedMetadata({
|
|
locale: localeKey,
|
|
pathname: `/portfolio/${slug}`,
|
|
title: getLocalizedValue(item.title, localeKey),
|
|
description: getLocalizedValue(item.summary, localeKey),
|
|
});
|
|
}
|
|
|
|
export default async function PortfolioItemPage({
|
|
params,
|
|
}: PortfolioItemPageProps) {
|
|
const { slug } = await params;
|
|
const siteSettings = await getSiteSettings();
|
|
const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
|
|
const item = await getPublishedPortfolioProjectBySlug(slug);
|
|
|
|
if (!item) {
|
|
notFound();
|
|
}
|
|
|
|
const t = await getTranslations({ locale: localeKey, namespace: "portfolioDetail" });
|
|
const title = getLocalizedValue(item.title, localeKey);
|
|
const category = getLocalizedValue(item.category.name, localeKey);
|
|
const summary = getLocalizedValue(item.summary, localeKey);
|
|
|
|
return (
|
|
<>
|
|
<PageHero
|
|
locale={localeKey}
|
|
badge={category}
|
|
lines={[{ text: title, tone: "soft", align: "center" }]}
|
|
description={summary}
|
|
/>
|
|
|
|
<Container size="wide" className="pb-12 lg:pb-16">
|
|
<PortfolioProjectDetail
|
|
item={item}
|
|
locale={localeKey}
|
|
defaultLocale={siteSettings.defaultLocale}
|
|
t={t}
|
|
/>
|
|
</Container>
|
|
</>
|
|
);
|
|
}
|