[fix] base path

next.config.js

@@ -1,5 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  basePath:"/TRAVEL-TIPPLER",
+  trailingSlash:true,
   images: {
     domains: ["www.traveltippler.com"],
     unoptimized: true,

package.json

@@ -14,6 +14,7 @@
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.12",
     "formik": "^2.4.3",
+    "moment": "^2.29.4",
     "next": "13.4.12",
     "postcss": "8.4.27",
     "react": "18.2.0",

src/app/page.js

@@ -8,11 +8,12 @@ export const metadata = {
 };
 
 const Home =  async () => {
-  const fetch_categories = await fetchCategory()
+  const fetch_categories = await fetchCategory();
+  const fetch_PostLists = await fetchPostLists()
   return (
     <div className="">
       <Banner />
-      <Category fetch_categories={fetch_categories}/>
+      <Category fetch_categories={fetch_categories} fetch_PostLists={fetch_PostLists}/>
     </div>
   );
 };
@@ -23,4 +24,10 @@ export const fetchCategory =async () => {
   const data = await fetch("https://www.traveltippler.com/wp-json/wp/v2/categories");
   const responseData = await data.json();
   return responseData
+}
+
+export const fetchPostLists = async () => {
+  const data = await fetch("https://www.traveltippler.com/wp-json/wp/v2/posts");
+  const responseData = await data.json();
+  return responseData
 }

src/pages/Category/Category.js

@@ -6,22 +6,26 @@ import RecentPost from "./RecentPost";
 import CategorysList from "./CategorysList";
 import Category_Post from "./Category_Post";
 
-const Category = ({fetch_categories}) => {
-
+const Category = ({fetch_categories, fetch_PostLists}) => {
+console.log(fetch_categories,  "Category");
+console.log(fetch_PostLists, "Post lists ")
   return (
     <div className="mx-[4%] sm:flex shadow-md ">
       <div className="">
         <div className="shadow-md sm:w-max-[1160px] bg-white pb-[20px]">
-          {CATEGORYs.map((category, index) => {
+          {fetch_PostLists.map((category, index) => {
             return <Category_Post
               id={category.id}
               key={category.id}
-              image={category.image}
+              image={category.content.rendered}
               category={category.category}
-              aurther={category.aurther}
-              heading={category.heading}
+              author={category.author}
+              title={category.title.rendered
+              }
               date={category.date}
-              description={category.detail.description}
+              excerpt={category.excerpt}
+              slug={category.slug
+              }
             />;
           })}
         </div>

src/pages/Category/Category_Post.js

@@ -5,26 +5,25 @@ import Link from "next/link";
 import getFirstTwoLines from "@/components/hooks/ConvertWordLength";
 import useCategoryName from "@/components/hooks/ConvertCaps";
 import { useRouter } from "next/navigation";
+import moment from "moment";
 
-const Category_Post = ({ id, image, category, aurther, heading, date, description }) => {
-
+const Category_Post = ({ id, image, category, author, title, date, excerpt }) => {
   const router = useRouter();
 
-  const categoryType = useCategoryName(category);
+  // const categoryType = useCategoryName(category);
   const wordLength = (detail) => {
     if (detail) {
-      const word = getFirstTwoLines(detail);
+      // const word = getFirstTwoLines(detail);
       return word;
     }
   };
 
-  const headingHandler = (id) => {
-    router.push(`/category/${categoryType}/${id}`);
+  const headingHandler = (slug) => {
+    router.push(`/category/${"categoryType"}/${slug}`);
   };
 
   return (
     <div key={id} className="">
-
       <div className="mo:p-1 pt-1 w-full ">
         <div className="relative m-3 cursor-pointer ">
           <Image
@@ -35,31 +34,32 @@ const Category_Post = ({ id, image, category, aurther, heading, date, descriptio
             height={80}
           />
           <Link
-            href={`/category/${categoryType}`}
+            href={`/category/${"categoryType"}`}
             className="sm:block hidden float-left absolute z-10 text-sm m-2 text-bold text-left top-0 font-serif bg-[#0000004D] hover:bg-[#777777] text-white px-[6px] rounded-sm"
           >
             {category}
           </Link>
           <div className="flex flex-col  ">
             <a
-              onClick={() => headingHandler(id)}
+              onClick={() => headingHandler(slug)}
+              dangerouslySetInnerHTML={{ __html: title }}
               className="mo:text-[20px] text-[#000] font-semibold w-full hover:text-blue-600 cursor-pointer line-clamp-3"
-            >
-              {heading}
-            </a>
-
+            ></a>
+
             <div className=" text-gray-400  flex w-full ">
               <p className=" text-black font-medium text-md font-serif hidden mo:block">
-                {aurther}
+                {author}
               </p>
-              <strong className="text-gray-[#999999] mo:ml-3 mo:text-sm">{date}</strong>
+              <strong className="text-gray-[#999999] mo:ml-3 mo:text-sm">{moment(date).format('MMMM DD, YYYY')}</strong>
             </div>
           </div>
         </div>
 
-        <p className="mt-[10px] text-md float-left  text-justify text-[#222222] font-serif line-clamp-2 mr-11 mt-4 sm:float-none sm:mr-0 whitespace-normal hidden mo:block">
-          {wordLength(description)}
-        </p>
+        {/* <p dangerouslySetInnerHTML={{__html:excerpt.rendered}} className="mt-[10px] text-md float-left  text-justify text-[#222222] font-serif line-clamp-2 mr-11 mt-4 sm:float-none sm:mr-0 whitespace-normal hidden mo:block">
+         
+        </p> */}
+        <div dangerouslySetInnerHTML={{ __html: excerpt.rendered }} >
+        </div>
       </div>
       <hr className=" clear-left  mx-[2%] mt-[4%] " />
     </div>