feat(metadata): add generateMetadata function for resource and category pages

Author: tyronejosee

src/app/(public)/resources/[slug]/page.tsx

@@ -1,11 +1,49 @@
 import { notFound } from "next/navigation";
 import { getResourceBySlug } from "@/actions/resources";
 import { ResourceDetail } from "@/components/resources";
+import { Metadata } from "next";
+import { PROJECT_NAME } from "@/config/constants";
 
 type Props = {
   params: { slug: string };
 };
 
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = await params;
+  const resource = await getResourceBySlug(slug);
+
+  if (!resource) {
+    return {
+      title: "Resource not found",
+      description: "The resource you are looking for does not exist.",
+      robots: "noindex, nofollow",
+    };
+  }
+
+  return {
+    title: `${resource.name} - ${PROJECT_NAME}`,
+    description: resource.description,
+    openGraph: {
+      title: `${resource.name} - ${PROJECT_NAME}`,
+      description: resource.description,
+      images: [
+        {
+          url: resource.image,
+          width: 1200,
+          height: 630,
+          alt: resource.name,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: `${resource.name} - ${PROJECT_NAME}`,
+      description: resource.description,
+      images: [resource.image],
+    },
+  };
+}
+
 export default async function ResourceDetailPage({ params }: Props) {
   const { slug } = await params;
   const resource = await getResourceBySlug(slug);

src/app/(public)/resources/categories/[category]/page.tsx

@@ -1,14 +1,35 @@
+import type { Metadata } from "next";
+
 import { getResourcesByCategory } from "@/actions/resources";
 import { ResourceList } from "@/components/resources";
 import { EmptyList } from "@/components/layout";
 import { Heading } from "@/components/ui";
+import { PROJECT_NAME } from "@/config/constants";
+import { formatSlugToTitle } from "@/lib/utils";
 
 export const dynamic = "force-dynamic";
 
 type Props = {
   params: { category: string };
 };
 
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { category } = await params;
+
+  if (!category) {
+    return {
+      title: "Category not found",
+      description: "The category you are looking for does not exist.",
+      robots: "noindex, nofollow",
+    };
+  }
+
+  return {
+    title: `${formatSlugToTitle(category)} - ${PROJECT_NAME}`,
+    description: `Explore all the resources by category: ${category}`,
+  };
+}
+
 export default async function ResourcesByCategoryPage({ params }: Props) {
   const { category } = await params;
   const resources = await getResourcesByCategory(category);
@@ -23,7 +44,7 @@ export default async function ResourcesByCategoryPage({ params }: Props) {
   return (
     <main className="max-w-screen-xl mx-auto p-4 flex flex-col gap-4">
       <Heading
-        title={category}
+        title={formatSlugToTitle(category)}
         subtitle="Explore all the resources by category"
       />
       {renderResources()}

src/components/resources/resource-card.tsx

@@ -16,9 +16,9 @@ export default function ResourceCard({ resource }: Props) {
         <Card
           isBlurred
           radius="none"
-          className="bg-white dark:bg-neutral-950 active:bg-neutral-800 transition-colors duration-1000 !outline-none shadow-none rounded-xl p-2 border-2 border-neutral-200 dark:border-neutral-800"
+          className="bg-white dark:bg-neutral-950 active:bg-neutral-800 transition-colors duration-1000 !outline-none shadow-none rounded-xl border-2 border-neutral-200 dark:border-neutral-800"
         >
-          <figure className="relative border-2 border-neutral-200 dark:border-neutral-800 rounded-md overflow-hidden">
+          <figure className="relative border-b-2 border-neutral-200 dark:border-neutral-800 overflow-hidden">
             <span className="hidden group-hover:block absolute top-2 right-2 bg-neutral-950 dark:bg-white text-neutral-950 px-2 py-1 rounded-lg text-xs z-50">
               {resource.category?.name ?? "Uncategorized"}
             </span>

src/lib/utils.ts

@@ -1,3 +1,10 @@
-export function capitalize(str: string) {
+export function capitalize(str: string): string {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
+
+export function formatSlugToTitle(slug: string): string {
+  return slug
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}