Add sitemap and portfolio category SEO routes

app/[locale]/(site)/portfolio/category/[slug]/page.tsx

@@ -0,0 +1,91 @@
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { notFound } from "next/navigation";
+
+import { Container } from "@/components/layout/container";
+import { PageHero } from "@/components/layout/page-hero";
+import { PortfolioCategoryFilter } from "@/components/site/portfolio-category-filter";
+import { PortfolioProjectGrid } from "@/components/site/portfolio-project-grid";
+import { buildLocalizedMetadata } from "@/lib/metadata";
+import { resolveLocale } from "@/lib/locale";
+import {
+  getActivePortfolioCategories,
+  getActivePortfolioCategoryBySlug,
+  getLocalizedValue,
+  getPublishedPortfolioProjects,
+} from "@/lib/portfolio";
+
+type PortfolioCategoryPageProps = {
+  params: {
+    locale: string;
+    slug: string;
+  };
+};
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata({
+  params: { locale, slug },
+}: PortfolioCategoryPageProps): Promise<Metadata> {
+  const localeKey = resolveLocale(locale);
+  const t = await getTranslations({ locale: localeKey, namespace: "portfolioPage" });
+  const category = await getActivePortfolioCategoryBySlug(slug);
+
+  if (!category) {
+    return await buildLocalizedMetadata({
+      locale: localeKey,
+      pathname: `/portfolio/category/${slug}`,
+      title: t("title"),
+      description: t("intro"),
+    });
+  }
+
+  return await buildLocalizedMetadata({
+    locale: localeKey,
+    pathname: `/portfolio/category/${slug}`,
+    title: getLocalizedValue(category.name, localeKey),
+    description: getLocalizedValue(category.description, localeKey) || t("intro"),
+  });
+}
+
+export default async function PortfolioCategoryPage({
+  params: { locale, slug },
+}: PortfolioCategoryPageProps) {
+  const localeKey = resolveLocale(locale);
+  const t = await getTranslations({ locale: localeKey, namespace: "portfolioPage" });
+  const [categories, category, projects] = await Promise.all([
+    getActivePortfolioCategories(),
+    getActivePortfolioCategoryBySlug(slug),
+    getPublishedPortfolioProjects({ categorySlug: slug }),
+  ]);
+
+  if (!category) {
+    notFound();
+  }
+
+  return (
+    <>
+      <PageHero
+        locale={localeKey}
+        badge={t("heroBadge")}
+        title={getLocalizedValue(category.name, localeKey)}
+        description={getLocalizedValue(category.description, localeKey) || t("intro")}
+      />
+
+      <Container className="flex flex-col gap-section pb-12 lg:pb-16">
+        <PortfolioCategoryFilter
+          locale={localeKey}
+          categories={categories}
+          allLabel={t("all")}
+          activeCategorySlug={category.slug}
+        />
+        <PortfolioProjectGrid
+          locale={localeKey}
+          projects={projects}
+          emptyLabel={t("empty")}
+          openLabel={t("open")}
+        />
+      </Container>
+    </>
+  );
+}

app/[locale]/(site)/portfolio/category/page.tsx

@@ -0,0 +1,17 @@
+import { permanentRedirect } from "next/navigation";
+
+import { getLocalizedPath, resolveLocale } from "@/lib/locale";
+
+type PortfolioCategoryIndexPageProps = {
+  params: {
+    locale: string;
+  };
+};
+
+export default function PortfolioCategoryIndexPage({
+  params: { locale },
+}: PortfolioCategoryIndexPageProps) {
+  const localeKey = resolveLocale(locale);
+
+  permanentRedirect(getLocalizedPath(localeKey, "/portfolio"));
+}

app/[locale]/(site)/portfolio/page.tsx

@@ -1,20 +1,14 @@
 import type { Metadata } from "next";
-import { ArrowUpRight, CalendarDays } from "lucide-react";
-import Link from "next/link";
 import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
 
 import { Container } from "@/components/layout/container";
 import { PageHero } from "@/components/layout/page-hero";
-import { MotionFade } from "@/components/motion-fade";
+import { PortfolioCategoryFilter } from "@/components/site/portfolio-category-filter";
+import { PortfolioProjectGrid } from "@/components/site/portfolio-project-grid";
 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 {
-  getActivePortfolioCategories,
-  getLocalizedValue,
-  getPublishedPortfolioProjects,
-} from "@/lib/portfolio";
+import { getActivePortfolioCategories, getPublishedPortfolioProjects } from "@/lib/portfolio";
 
 type PortfolioPageProps = {
   params: {
@@ -48,11 +42,14 @@ export default async function PortfolioPage({
   const localeKey = resolveLocale(locale);
   const t = await getTranslations({ locale: localeKey, namespace: "portfolioPage" });
   const selectedCategory = searchParams?.category ?? "";
+
+  if (selectedCategory) {
+    redirect(getLocalizedPath(localeKey, `/portfolio/category/${selectedCategory}`));
+  }
+
   const [categories, projects] = await Promise.all([
     getActivePortfolioCategories(),
-    getPublishedPortfolioProjects({
-      categorySlug: selectedCategory || undefined,
-    }),
+    getPublishedPortfolioProjects(),
   ]);
 
   return (
@@ -65,74 +62,13 @@ export default async function PortfolioPage({
       />
 
       <Container className="flex flex-col gap-section pb-12 lg:pb-16">
-        <section className="flex flex-wrap gap-3">
-        <Link
-          href={getLocalizedPath(localeKey, "/portfolio")}
-          className={`rounded-md border px-4 py-2 text-sm transition-colors ${
-            selectedCategory === ""
-              ? "border-input bg-primary text-primary-foreground"
-              : "border-input bg-background text-foreground/80 hover:bg-accent hover:text-accent-foreground"
-          }`}
-        >
-          {t("all")}
-        </Link>
-        {categories.map((category) => (
-          <Link
-            key={category.id}
-            href={getLocalizedPath(localeKey, `/portfolio?category=${category.slug}`)}
-            className={`rounded-md border px-4 py-2 text-sm transition-colors ${
-              selectedCategory === category.slug
-                ? "border-input bg-primary text-primary-foreground"
-                : "border-input bg-background text-foreground/80 hover:bg-accent hover:text-accent-foreground"
-            }`}
-          >
-            {getLocalizedValue(category.name, localeKey)}
-          </Link>
-        ))}
-        </section>
-
-        <section className="grid gap-4 md:grid-cols-2">
-        {projects.map((item, index) => (
-          <MotionFade key={item.slug} delay={index * 0.05}>
-            <AppCard interactive>
-              <CardContent className="p-5">
-                <Link
-                  href={getLocalizedPath(localeKey, `/portfolio/${item.slug}`)}
-                  className="group block"
-                >
-                  <div className="flex items-center justify-between gap-3">
-                    <p className="text-sm text-muted-foreground/80">
-                      {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.projectYear}
-                    </p>
-                  </div>
-                  <h2 className="mt-3 text-xl font-semibold text-foreground">
-                    {getLocalizedValue(item.title, localeKey)}
-                  </h2>
-                  <p className="mt-2 text-sm text-muted-foreground">
-                    {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")}
-                    <ArrowUpRight className="h-4 w-4" />
-                  </p>
-                </Link>
-              </CardContent>
-            </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>
+        <PortfolioCategoryFilter locale={localeKey} categories={categories} allLabel={t("all")} />
+        <PortfolioProjectGrid
+          locale={localeKey}
+          projects={projects}
+          emptyLabel={t("empty")}
+          openLabel={t("open")}
+        />
       </Container>
     </>
   );

app/robots.ts

@@ -1,6 +1,8 @@
 import type { MetadataRoute } from "next";
 
 export default function robots(): MetadataRoute.Robots {
+  const siteUrl = new URL(process.env.NEXT_PUBLIC_SITE_URL ?? "https://mohfarawati.de");
+
   return {
     rules: [
       {
@@ -8,5 +10,6 @@ export default function robots(): MetadataRoute.Robots {
         disallow: ["/root"],
       },
     ],
+    sitemap: new URL("/sitemap.xml", siteUrl).toString(),
   };
 }

app/sitemap.ts

@@ -0,0 +1,85 @@
+import type { MetadataRoute } from "next";
+import { unstable_noStore as noStore } from "next/cache";
+
+import { routing } from "@/i18n/routing";
+import { getLocalizedPath } from "@/lib/locale";
+import { getPublishedPortfolioProjects } from "@/lib/portfolio";
+import { productItems } from "@/lib/site-data";
+
+function getSiteUrl(): URL {
+  return new URL(process.env.NEXT_PUBLIC_SITE_URL ?? "https://mohfarawati.de");
+}
+
+function toAbsoluteUrl(pathname: string): string {
+  return new URL(pathname, getSiteUrl()).toString();
+}
+
+function buildLocalizedEntries(
+  pathname: string,
+  options?: Pick<MetadataRoute.Sitemap[number], "changeFrequency" | "priority" | "lastModified">,
+): MetadataRoute.Sitemap {
+  return routing.locales.map((locale) => ({
+    url: toAbsoluteUrl(getLocalizedPath(locale, pathname)),
+    lastModified: options?.lastModified,
+    changeFrequency: options?.changeFrequency,
+    priority: options?.priority,
+  }));
+}
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  noStore();
+
+  let projects: Awaited<ReturnType<typeof getPublishedPortfolioProjects>> = [];
+
+  try {
+    projects = await getPublishedPortfolioProjects();
+  } catch {
+    projects = [];
+  }
+
+  const categories = Array.from(
+    new Map(projects.map((project) => [project.category.slug, project.category])).values(),
+  );
+
+  return [
+    ...buildLocalizedEntries("/", {
+      changeFrequency: "weekly",
+      priority: 1,
+    }),
+    ...buildLocalizedEntries("/about", {
+      changeFrequency: "monthly",
+      priority: 0.8,
+    }),
+    ...buildLocalizedEntries("/portfolio", {
+      changeFrequency: "weekly",
+      priority: 0.9,
+    }),
+    ...categories.flatMap((category) =>
+      buildLocalizedEntries(`/portfolio/category/${category.slug}`, {
+        changeFrequency: "weekly",
+        priority: 0.8,
+      }),
+    ),
+    ...buildLocalizedEntries("/products", {
+      changeFrequency: "weekly",
+      priority: 0.8,
+    }),
+    ...buildLocalizedEntries("/contact", {
+      changeFrequency: "monthly",
+      priority: 0.7,
+    }),
+    ...productItems.flatMap((item) =>
+      buildLocalizedEntries(`/products/${item.slug}`, {
+        changeFrequency: "monthly",
+        priority: 0.7,
+      }),
+    ),
+    ...projects.flatMap((project) =>
+      buildLocalizedEntries(`/portfolio/${project.slug}`, {
+        lastModified: project.publishedAt ?? undefined,
+        changeFrequency: "monthly",
+        priority: 0.8,
+      }),
+    ),
+  ];
+}

components/site/portfolio-category-filter.tsx

@@ -0,0 +1,69 @@
+import Link from "next/link";
+
+import { AppCard } from "@/components/ui/app-card";
+import { getLocalizedPath, type AppLocale } from "@/lib/locale";
+import { getLocalizedValue, type PortfolioCategoryView } from "@/lib/portfolio";
+import { cn } from "@/lib/utils";
+
+type PortfolioCategoryFilterProps = {
+  locale: AppLocale;
+  categories: PortfolioCategoryView[];
+  allLabel: string;
+  activeCategorySlug?: string;
+};
+
+export function PortfolioCategoryFilter({
+  locale,
+  categories,
+  allLabel,
+  activeCategorySlug,
+}: PortfolioCategoryFilterProps) {
+  return (
+    <section className="flex flex-wrap gap-3">
+      <CategoryLink
+        href={getLocalizedPath(locale, "/portfolio")}
+        label={allLabel}
+        active={!activeCategorySlug}
+      />
+      {categories.map((category) => (
+        <CategoryLink
+          key={category.id}
+          href={getLocalizedPath(locale, `/portfolio/category/${category.slug}`)}
+          label={getLocalizedValue(category.name, locale)}
+          active={activeCategorySlug === category.slug}
+        />
+      ))}
+    </section>
+  );
+}
+
+function CategoryLink({
+  href,
+  label,
+  active,
+}: {
+  href: string;
+  label: string;
+  active: boolean;
+}) {
+  return (
+    <AppCard
+      layer="single"
+      padding="none"
+      className={cn(
+        "overflow-hidden border-border/80",
+        active ? "bg-primary text-primary-foreground" : "bg-surface-2 text-foreground/80",
+      )}
+    >
+      <Link
+        href={href}
+        className={cn(
+          "block rounded-nested px-4 py-2 text-sm transition-colors",
+          active ? "bg-primary text-primary-foreground" : "hover:bg-accent/40 hover:text-accent-foreground",
+        )}
+      >
+        {label}
+      </Link>
+    </AppCard>
+  );
+}

components/site/portfolio-project-grid.tsx

@@ -0,0 +1,67 @@
+import { ArrowUpRight, CalendarDays } from "lucide-react";
+import Link from "next/link";
+
+import { MotionFade } from "@/components/motion-fade";
+import { AppCard } from "@/components/ui/app-card";
+import { CardContent } from "@/components/ui/card";
+import { getLocalizedPath, type AppLocale } from "@/lib/locale";
+import { getLocalizedValue, type PortfolioProjectView } from "@/lib/portfolio";
+
+type PortfolioProjectGridProps = {
+  locale: AppLocale;
+  projects: PortfolioProjectView[];
+  emptyLabel: string;
+  openLabel: string;
+};
+
+export function PortfolioProjectGrid({
+  locale,
+  projects,
+  emptyLabel,
+  openLabel,
+}: PortfolioProjectGridProps) {
+  return (
+    <section className="grid gap-4 md:grid-cols-2">
+      {projects.map((item, index) => (
+        <MotionFade key={item.slug} delay={index * 0.05}>
+          <AppCard interactive>
+            <CardContent className="p-5">
+              <Link
+                href={getLocalizedPath(locale, `/portfolio/${item.slug}`)}
+                className="group block"
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <p className="text-sm text-muted-foreground/80">
+                    {getLocalizedValue(item.category.name, locale)}
+                  </p>
+                  <p className="inline-flex items-center gap-1 text-xs text-muted-foreground/80">
+                    <CalendarDays className="h-3.5 w-3.5" />
+                    {item.projectYear}
+                  </p>
+                </div>
+                <h2 className="mt-3 text-xl font-semibold text-foreground">
+                  {getLocalizedValue(item.title, locale)}
+                </h2>
+                <p className="mt-2 text-sm text-muted-foreground">
+                  {getLocalizedValue(item.summary, locale)}
+                </p>
+                <p className="mt-4 inline-flex items-center gap-2 text-sm font-medium text-foreground/80 group-hover:text-foreground">
+                  {openLabel}
+                  <ArrowUpRight className="h-4 w-4" />
+                </p>
+              </Link>
+            </CardContent>
+          </AppCard>
+        </MotionFade>
+      ))}
+
+      {projects.length === 0 ? (
+        <AppCard className="md:col-span-2">
+          <CardContent className="p-6 text-sm text-muted-foreground">
+            {emptyLabel}
+          </CardContent>
+        </AppCard>
+      ) : null}
+    </section>
+  );
+}

lib/portfolio.ts

@@ -266,6 +266,17 @@ export async function getActivePortfolioCategories() {
   return categories.map(mapCategory);
 }
 
+export async function getActivePortfolioCategoryBySlug(slug: string) {
+  const category = await prisma.category.findFirst({
+    where: {
+      slug,
+      isActive: true,
+    },
+  });
+
+  return category ? mapCategory(category) : null;
+}
+
 export async function getAdminPortfolioProjects(filters?: {
   categoryId?: string;
   status?: "all" | "draft" | "published";