feat: added metadata for bogs

task2/src/app/auth/layout.tsx

@@ -1,7 +1,13 @@
+import { Suspense } from "react";
+
 export default function AuthLayout({
    children,
 }: {
    children: React.ReactNode;
 }) {
-   return <div>{children}</div>;
+   return (
+      <div>
+         <Suspense>{children}</Suspense>
+      </div>
+   );
 }

task2/src/app/auth/signin/page.tsx

@@ -2,35 +2,29 @@
 
 import type React from "react";
 
-import { useEffect, useState } from "react";
-import { signIn } from "next-auth/react";
-import { useRouter } from "next/navigation";
-import { motion } from "framer-motion";
-import { Mail, Lock, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
 } from "@/components/ui/card";
-import { useSession } from "next-auth/react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { toast } from "@/components/ui/use-toast";
+import { motion } from "framer-motion";
+import { Loader2, Lock, Mail } from "lucide-react";
+import { signIn } from "next-auth/react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState } from "react";
 
 export default function SignIn() {
+   const searchParams = useSearchParams();
+   const callbackUrl = searchParams.get("callbackUrl") ?? "/blog";
    const router = useRouter();
    const [error, setError] = useState("");
    const [isLoading, setIsLoading] = useState(false);
-   const { data: session } = useSession();
-
-   useEffect(() => {
-      if (session) {
-         router.push("/blog");
-      }
-   }, [session, router]);
 
    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -43,14 +37,15 @@ export default function SignIn() {
             email: formData.get("email"),
             password: formData.get("password"),
             redirect: false,
+            callbackUrl,
          });
 
          if (response?.error) {
             console.error("sign in ", response?.error);
             setError("Invalid credentials");
             setIsLoading(false);
          } else {
-            router.push("/blog");
+            router.push(callbackUrl);
             router.refresh();
          }
       } catch (error) {

task2/src/app/blog/[id]/page.tsx

@@ -3,13 +3,45 @@ import { CommentSection } from "@/components/CommentSection";
 import { DeleteBlogButton } from "@/components/DeleteBlogButton";
 import { supabase } from "@/lib/supabase";
 import { Blog } from "@/supbase";
+import { capitalize } from "@/utils/string";
 import { formatDistanceToNow } from "date-fns";
 import { Calendar, Tag, User } from "lucide-react";
+import { Metadata } from "next";
 import { getServerSession } from "next-auth/next";
 import { notFound } from "next/navigation";
 import ReactMarkdown from "react-markdown";
 import "react-markdown-editor-lite/lib/index.css";
 
+type User = {
+   id: string;
+   email: string;
+   name: string;
+};
+
+type Props = {
+   params: Promise<{ id: string }>;
+};
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+   const { id } = await params;
+
+   const { data: blog } = await supabase
+      .from("blogs")
+      .select("*")
+      .eq("id", id)
+      .single<Blog>();
+
+   return {
+      title: blog?.title,
+      openGraph: {
+         description: blog?.excerpt,
+         publishedTime: `${new Date(`${blog?.created_at}`).getTime()}`,
+         tags: blog?.category,
+         writers: blog?.author,
+      },
+   };
+}
+
 export default async function BlogPost({
    params,
 }: {
@@ -23,6 +55,12 @@ export default async function BlogPost({
       .single<Blog>();
    const session = await getServerSession(authOptions);
 
+   const { data: blogAuthor } = await supabase
+      .from("users")
+      .select("*")
+      .eq("id", blog?.author)
+      .single<User>();
+
    if (!blog) {
       notFound();
    }
@@ -38,7 +76,7 @@ export default async function BlogPost({
                </h1>
                <div className="flex flex-wrap items-center text-muted-foreground mb-2">
                   <User className="mr-2 h-4 w-4" />
-                  <span className="mr-4">{blog.author}</span>
+                  <span className="mr-4">{capitalize(blogAuthor?.name)}</span>
                   <Calendar className="mr-2 h-4 w-4" />
                   <span className="mr-4">
                      {formatDistanceToNow(blog.created_at)} ago

task2/src/app/layout.tsx

@@ -18,7 +18,7 @@ export default function RootLayout({
    children: React.ReactNode;
 }) {
    return (
-      <html lang="en">
+      <html lang="en" suppressHydrationWarning>
          <body className={` antialiased`}>
             <ThemeProvider
                attribute="class"

task2/src/app/page.tsx

@@ -34,7 +34,7 @@ export default function Home() {
                         </Link>
                      </Button>
                      <Button asChild size="lg" variant="outline">
-                        <Link href="/auth/signin">Start Writing</Link>
+                        <Link href="/blog/create">Start Writing</Link>
                      </Button>
                   </div>
                </motion.div>

task2/src/utils/string.ts

@@ -0,0 +1,4 @@
+export function capitalize(text: string | undefined) {
+   if (!text) return "";
+   return text.charAt(0).toUpperCase() + text.slice(1);
+}