dynamic MetaData not working still.

mrswastik-robot · Mar 18, 2024 · c59234c · c59234c
1 parent ae32eca
commit c59234c
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 4 deletions.
diff --git a/app/[postTitle]/layout.tsx b/app/[postTitle]/layout.tsx
@@ -0,0 +1,73 @@
+
+import type { Metadata } from "next";
+
+import { cn } from "@/lib/utils";
+import Navbar from "@/components/Navbar";
+import Providers from "@/components/ThemeProvider";
+import { StoreProvider } from "@/store/StoreProvider";
+import { Toaster } from "@/components/ui/toaster";
+
+import { GeistSans } from 'geist/font/sans';
+import { db } from "@/utils/firebase";
+import { collection , getDocs, query, where } from "firebase/firestore";
+
+type Props = {
+    params: {
+        postTitle: string;
+    }
+}
+
+type Post = {
+    id: string;
+    title: string;
+    // content: string;
+}
+
+const fetchPost = async (postTitle: string) => {
+
+    //how to fetch the question from the firestore using postTitle
+    const queRef = collection(db, "questions");
+    const q = query (queRef, where("title", "==", postTitle));
+
+    const querySnapshot = await getDocs(q);
+    const post = querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() } as Post ));
+    console.log(post);
+    return { post };
+
+}
+
+export const generateMetaData = async({ params }: Props) : Promise<Metadata> => {
+
+    const postTitleWithSpaces = decodeURIComponent(params.postTitle as string).split("-").join(" ");
+    const { post }= await fetchPost(postTitleWithSpaces);
+
+
+    const metadata: Metadata = {
+        title: post[0].title,
+        description: "Discover answers to your questions.",
+    };
+    return metadata;
+}
+
+
+// export const metadata: Metadata = {
+//   title: "Your Questions Answered",
+//   description: "Get all your answers here.",
+// };
+
+export default function PostPage({
+  children,
+}:{
+  children: React.ReactNode;
+}) {
+  return (
+
+            <div>
+            <Navbar />
+            <div className=" ">
+            {children}
+            </div>
+            </div>
+
+  );
+}
diff --git a/app/[postTitle]/page.tsx b/app/[postTitle]/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
+import Head from "next/head";
 
 import { postData } from "@/lib/data";
 import QuePost from "@/components/queAnsPage/QuePost";
@@ -320,6 +321,14 @@ const PostPage = ({ params: { postTitle } }: Props) => {
 
   return (
 
+    <>
+
+      <Head>
+        <title>{queObject.title}</title>
+        <meta name="keywords" content={queObject.keywords} />
+        <meta name="description" content="This is a dynamic description" />
+      </Head>
+
     <div className="grid md:grid-cols-2 lg:grid-cols-7 gap-y-4 md:gap-x-4 pb-6">
       <div className=" md:col-span-5 col-span-2 order-first">
       <div className={`${ansLoading?"overflow-auto":""} max-h-screen`}>
@@ -441,6 +450,7 @@ const PostPage = ({ params: { postTitle } }: Props) => {
         </div>
       </div>
     </div>
+    </>
   );
 };
 

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -12,8 +12,8 @@ import { GeistSans } from 'geist/font/sans';
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Devotional-B",
+  description: "Get all your answers here.",
 };
 
 export default function RootLayout({

diff --git a/components/Post.tsx b/components/Post.tsx
@@ -268,8 +268,8 @@ const Post = ({ post, isProfile = false, handleDelete = () => {} }: Props) => {
               
             ) : null} */}
             {!isExpanded && isOverflowing && (
-              <div className="absolute bottom-[-0.16rem] left-0 w-full  text-right ">
-                <button className=" text-blue-500/80  hover:underline w-[8%] backdrop-blur-none bg-white/50  text-right  " onClick={() => setIsExpanded(true)}>(more)</button>
+              <div className="absolute bottom-0 md:bottom-[-0.16rem] left-0 w-full  text-right ">
+                <button className=" text-blue-500/80  hover:underline md:w-[8%] w-full backdrop-blur-none bg-white/50 dark:bg-transparent  text-right text-sm  " onClick={() => setIsExpanded(true)}>(more)</button>
               </div>
             )}
           </div>