feat:meta data

This commit is contained in:
Rama Priyanto 2025-03-10 13:03:43 +07:00
parent d428928150
commit d884ed1732
2 changed files with 45 additions and 26 deletions

View File

@ -198,7 +198,7 @@ export default function BannerHumasNew() {
<Image <Image
src={img} src={img}
alt={`humasbanner-${index}`} alt={`humasbanner-${index}`}
className="w-full h-full object-cover object-center opacity-[25] dark:opacity-70" className="w-full h-full object-cover object-center opacity-[25] dark:opacity-70 rounded-none"
/> />
</Link> </Link>
))} ))}

View File

@ -11,6 +11,7 @@ import { ChevronRightIcon, UserIcon } from "@/components/icons";
import { close, loading } from "@/config/swal"; import { close, loading } from "@/config/swal";
import { saveActivity } from "@/service/activity-log"; import { saveActivity } from "@/service/activity-log";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import Head from "next/head";
const token = Cookies.get("access_token"); const token = Cookies.get("access_token");
const uid = Cookies.get("uie"); const uid = Cookies.get("uie");
@ -19,7 +20,7 @@ export default function NewsDetailPage() {
const params = useParams(); const params = useParams();
const id: any = params?.id; const id: any = params?.id;
const pathname = usePathname(); const pathname = usePathname();
const [detailArticle, setDetailArticle] = useState(); const [detailArticle, setDetailArticle] = useState<any>();
const [articles, setArticles] = useState<any>([]); const [articles, setArticles] = useState<any>([]);
useEffect(() => { useEffect(() => {
@ -55,33 +56,51 @@ export default function NewsDetailPage() {
const resActivity = await saveActivity(req, token); const resActivity = await saveActivity(req, token);
}; };
return ( return (
<div className="bg-white dark:bg-stone-900"> <>
<div className="px-5 lg:px-0 lg:w-[75vw] lg:mx-auto py-8"> {" "}
<div className="flex flex-row gap-4 items-end "> <Head>
<Link href="/" className=" font-semibold text-lg"> <title>{detailArticle?.title}</title>
Beranda <meta property="og:title" content={detailArticle.title} />
</Link> <meta property="og:description" content={detailArticle.description} />
<ChevronRightIcon /> <meta property="og:image" content={detailArticle.thumbnailUrl} />
<p className=" text-lg">Berita</p> <meta
</div> property="og:url"
<div className=" lg:flex lg:justify-around gap-4 lg:gap-16 w-full"> content={`https://kontenhumas.com/news/detail/${detailArticle?.id}-${detailArticle?.slug}`}
<DetailNews data={detailArticle} listArticle={articles} /> />
<div className="w-auto lg:w-[25%] hidden lg:block"> <meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={detailArticle?.title} />
<meta name="twitter:description" content={detailArticle?.description} />
<meta name="twitter:image" content={detailArticle?.thumbnailUrl} />
</Head>
<div className="bg-white dark:bg-stone-900">
<div className="px-5 lg:px-0 lg:w-[75vw] lg:mx-auto py-8">
<div className="flex flex-row gap-4 items-end ">
<Link href="/" className=" font-semibold text-lg">
Beranda
</Link>
<ChevronRightIcon />
<p className=" text-lg">Berita</p>
</div>
<div className=" lg:flex lg:justify-around gap-4 lg:gap-16 w-full">
<DetailNews data={detailArticle} listArticle={articles} />
<div className="w-auto lg:w-[25%] hidden lg:block">
<SidebarDetail />
</div>
</div>
<div className="w-full lg:w-[70%] h-auto my-2 md:my-5 lg:my-10 px-0 lg:px-3">
<Comment id={id?.split("-")[0]} />
</div>
<div className="bg-gray-50 text-black dark:bg-black dark:text-white lg:px-24 my-4 lg:my-8 pt-3 lg:pb-4 rounded-lg shadow-md h-fit ">
<RelatedNews />
</div>
<div className="md:hidden text-black">
<SidebarDetail /> <SidebarDetail />
</div> </div>
</div> </div>
<div className="w-full lg:w-[70%] h-auto my-2 md:my-5 lg:my-10 px-0 lg:px-3">
<Comment id={id?.split("-")[0]} />
</div>
<div className="bg-gray-50 text-black dark:bg-black dark:text-white lg:px-24 my-4 lg:my-8 pt-3 lg:pb-4 rounded-lg shadow-md h-fit ">
<RelatedNews />
</div>
<div className="md:hidden text-black">
<SidebarDetail />
</div>
</div> </div>
</div> </>
); );
} }