feat: add blog post metadata

Author: josimar-silva

src/app/__components/blog/share-modal.tsx

@@ -57,19 +57,18 @@ import { Input } from "@/app/__components/ui/input";
 import { Label } from "@/app/__components/ui/label";
 import { Separator } from "@/app/__components/ui/separator";
 import { useToast } from "@/app/__components/ui/use-toast";
+import config from "@/lib/config";
 
 interface ShareModalProps {
   title: string;
   slug: string;
 }
 
-const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
-
 const ShareModal = ({ title, slug }: ShareModalProps) => {
   const [open, setOpen] = useState(false);
   const [copied, setCopied] = useState(false);
   const { toast } = useToast();
-  const shareUrl = `${siteUrl}/blog/${slug}`;
+  const shareUrl = `${config.siteUrl}/blog/${slug}`;
 
   const handleCopyLink = () => {
     navigator.clipboard

src/app/blog/[slug]/page.tsx

@@ -27,7 +27,9 @@ import { notFound } from "next/navigation";
 import { BlogPost } from "@/app/__components/blog/blog-post";
 import { Footer } from "@/app/__components/common/footer";
 import { Header } from "@/app/__components/common/header";
+import { generateMetadata } from "@/lib/metadata";
 import { getAllPosts, getPostBySlug } from "@/lib/posts";
+export { generateMetadata };
 
 export default async function BlogPostPage({
   params,

src/lib/config.ts

@@ -22,11 +22,13 @@
  * SOFTWARE.
  */
 
+const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
 const postsConfig = {
   postsManifestFile: "src/lib/data/posts-manifest.json",
 };
 
 const config = {
+  siteUrl,
   posts: postsConfig,
 };
 

src/lib/metadata.test.ts

@@ -0,0 +1,91 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2025 Josimar Silva
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import config from "./config";
+import { generateMetadata } from "./metadata";
+import { getPostBySlug } from "./posts";
+
+jest.mock("./posts", () => ({
+  getPostBySlug: jest.fn(),
+}));
+
+jest.mock("./config", () => ({
+  __esModule: true,
+  default: {
+    siteUrl: "https://example.com",
+  },
+}));
+
+describe("generateMetadata", () => {
+  const mockPost = {
+    title: "Test Post Title",
+    excerpt: "Test Post Excerpt",
+    image: "/assets/test-image.jpg",
+    date: "2025-01-01T00:00:00Z",
+    author: "Test Author",
+    slug: "test-post-slug",
+  };
+
+  it("should generate correct metadata for a post", async () => {
+    (getPostBySlug as jest.Mock).mockResolvedValue(mockPost);
+
+    const metadata = await generateMetadata({
+      params: { slug: "test-post-slug" },
+    });
+
+    expect(metadata.title).toBe(mockPost.title);
+    expect(metadata.description).toBe(mockPost.excerpt);
+    expect(metadata.openGraph?.title).toBe(mockPost.title);
+    expect(metadata.openGraph?.description).toBe(mockPost.excerpt);
+    expect(metadata.openGraph?.url).toBe(
+      `${config.siteUrl}/blog/${mockPost.slug}`,
+    );
+    expect(metadata.openGraph?.type).toBe("article");
+    expect(metadata.openGraph?.publishedTime).toBe(mockPost.date);
+    expect(metadata.openGraph?.authors).toEqual([mockPost.author]);
+    expect(metadata.openGraph?.images?.[0].url).toBe(
+      new URL(mockPost.image, config.siteUrl).toString(),
+    );
+    expect(metadata.openGraph?.images?.[0].width).toBe(1200);
+    expect(metadata.openGraph?.images?.[0].height).toBe(630);
+    expect(metadata.openGraph?.images?.[0].alt).toBe(mockPost.title);
+
+    expect(metadata.twitter?.card).toBe("summary_large_image");
+    expect(metadata.twitter?.title).toBe(mockPost.title);
+    expect(metadata.twitter?.description).toBe(mockPost.excerpt);
+    expect(metadata.twitter?.images?.[0]).toBe(
+      new URL(mockPost.image, config.siteUrl).toString(),
+    );
+  });
+
+  it("should return empty metadata if post is not found", async () => {
+    (getPostBySlug as jest.Mock).mockResolvedValue(null);
+
+    const metadata = await generateMetadata({
+      params: { slug: "non-existent-post" },
+    });
+
+    expect(metadata).toEqual({});
+  });
+});

src/lib/metadata.ts

@@ -0,0 +1,75 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2025 Josimar Silva
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { Metadata } from "next";
+
+import config from "./config";
+import { getPostBySlug } from "./posts";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string };
+}): Promise<Metadata> {
+  const post = await getPostBySlug(params.slug, [
+    "title",
+    "excerpt",
+    "image",
+    "date",
+    "author",
+  ]);
+
+  if (!post || Object.keys(post).length === 0) {
+    return {};
+  }
+
+  const ogImageUrl = new URL(post.image, config.siteUrl).toString();
+
+  return {
+    title: post.title,
+    description: post.excerpt,
+    openGraph: {
+      title: post.title,
+      description: post.excerpt,
+      url: `${config.siteUrl}/blog/${params.slug}`,
+      type: "article",
+      publishedTime: post.date,
+      authors: [post.author],
+      images: [
+        {
+          url: ogImageUrl,
+          width: 1200,
+          height: 630,
+          alt: post.title,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: post.title,
+      description: post.excerpt,
+      images: [ogImageUrl],
+    },
+  };
+}