252 lines
10 KiB
TypeScript
252 lines
10 KiB
TypeScript
import HeroImage from "@/components/HeroImage";
|
|
import { fetchBlogDetail } from "@/services/payload/blog";
|
|
import { getDefaultMetadata } from "@/utils/metadata";
|
|
import { RichText } from "@payloadcms/richtext-lexical/react";
|
|
import { Metadata } from "next";
|
|
import { headers } from "next/headers";
|
|
import Image from "next/image";
|
|
import { notFound } from "next/navigation";
|
|
|
|
const metaDesc =
|
|
"Explore the latest insights, news, and resources on the Dynamic Realty blog. Read our articles today.";
|
|
|
|
export async function generateMetadata(props: { params: Promise<{ slug: string }> }): Promise<Metadata> {
|
|
const metadata = await getDefaultMetadata();
|
|
const params = await props.params;
|
|
|
|
let title = "Page";
|
|
let description = "Page";
|
|
let publishedAt = "";
|
|
let updatedAt = "";
|
|
let imgUrl = "";
|
|
let createdByName = "";
|
|
let canonicalUrl = "";
|
|
|
|
const blog = await fetchBlogDetail(params.slug);
|
|
if (!!blog) {
|
|
// check for blog data
|
|
title = `${!!blog.data?.meta?.title ? blog.data?.meta?.title : blog.data.title} - ${metadata.openGraph?.siteName}`;
|
|
description = `${!!blog.data?.meta?.description ? blog.data?.meta?.description : blog.data.title}`;
|
|
imgUrl = blog.img.url;
|
|
publishedAt = blog.data.createdAt;
|
|
updatedAt = blog.data.updatedAt;
|
|
if (!!blog.data?.meta?.canonical_url) {
|
|
canonicalUrl = blog.data.meta.canonical_url;
|
|
}
|
|
if (!!blog?.data?.createdBy && typeof blog.data.createdBy !== "number") {
|
|
createdByName = blog.data.createdBy?.name ?? "";
|
|
}
|
|
}
|
|
|
|
metadata.title = title;
|
|
metadata.description = description;
|
|
if (!!metadata.openGraph) {
|
|
// @ts-ignore
|
|
metadata.openGraph.type = "article";
|
|
metadata.openGraph.title = title;
|
|
metadata.openGraph.description = description;
|
|
metadata.openGraph.images = !!imgUrl ? [imgUrl] : undefined;
|
|
}
|
|
if (!!metadata.alternates && !!canonicalUrl) {
|
|
metadata.alternates.canonical = canonicalUrl;
|
|
}
|
|
metadata.twitter = {
|
|
card: "summary_large_image",
|
|
title: title,
|
|
description: description,
|
|
images: !!imgUrl ? [imgUrl] : undefined,
|
|
};
|
|
metadata.other = {
|
|
"article:published_time": publishedAt,
|
|
"article:modified_time": updatedAt,
|
|
"twitter:label1": "Written by",
|
|
"twitter:data1": !!createdByName ? createdByName : "Admin",
|
|
"twitter:label2": "Est. reading time",
|
|
"twitter:data2": "3 minutes",
|
|
};
|
|
|
|
return metadata;
|
|
}
|
|
|
|
export default async function BlogDetail(props: { params: Promise<{ slug: string }> }) {
|
|
const params = await props.params;
|
|
const headersList = await headers();
|
|
const fullUrl = headersList.get("x-full-url");
|
|
const blog = await fetchBlogDetail(params.slug);
|
|
if (!blog) return notFound();
|
|
|
|
const shareUrl = {
|
|
facebook: `https://www.facebook.com/sharer/sharer.php?u=${fullUrl}`,
|
|
linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${fullUrl}`,
|
|
twitter: `https://twitter.com/intent/tweet?url=${fullUrl}`,
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<HeroImage title={blog.data.title} />
|
|
|
|
<section className="section section-md bg-colorSection1">
|
|
<div className="container">
|
|
<div className="row justify-content-lg-center">
|
|
<div className="col-lg-8">
|
|
<article className="blog-post-solo">
|
|
<div className="blog-post-solo-part">
|
|
<div className="w-full h-56 md:h-80 bg-colorImgPlaceholder/50 relative">
|
|
<Image className="object-cover" src={blog.img.url} alt={blog.img.alt} fill />
|
|
</div>
|
|
|
|
<RichText className="mt-4" data={blog.data.content} />
|
|
</div>
|
|
|
|
<div className="blog-post-solo-footer">
|
|
<div className="blog-post-solo-footer-left">
|
|
<ul className="blog-post-solo-footer-list">
|
|
<li>
|
|
<span className="icon mdi mdi-clock"></span>
|
|
<a href="#">{blog.createdAt}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="blog-post-solo-footer-right">
|
|
<ul className="blog-post-solo-footer-list-1">
|
|
<li>
|
|
<span>Share this post</span>
|
|
</li>
|
|
<li>
|
|
<a className="icon icon-circle icon-rounded icon-5 fa-facebook" href={shareUrl.facebook}></a>
|
|
</li>
|
|
<li>
|
|
<a className="icon icon-circle icon-rounded icon-6 fa-twitter" href={shareUrl.twitter}></a>
|
|
</li>
|
|
<li>
|
|
<a className="icon icon-circle icon-rounded icon-4 fa-linkedin" href={shareUrl.linkedin}></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="post-simple-group">
|
|
<div className="post-simple-group-title">
|
|
<h6>Recent Posts</h6>
|
|
</div>
|
|
<div className="post-simple-group-divider"></div>
|
|
<div className="row row-30">
|
|
<div className="col-sm-6">
|
|
<article className="post-simple">
|
|
<div className="post-simple-img">
|
|
<Image src="/images/blog-post-03-736x540.jpg" alt="" width="736" height="540" />
|
|
</div>
|
|
<div className="post-simple-body">
|
|
<div className="post-simple-title">
|
|
<h4>
|
|
<a href="#">Turks and Caicos Villa to be Sold for Record $7.6M</a>
|
|
</h4>
|
|
</div>
|
|
<div className="post-simple-time">
|
|
<span className="icon mdi mdi-clock"></span>
|
|
<a className="time" href="#">
|
|
March 15, 2021
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div className="col-sm-6">
|
|
<article className="post-simple">
|
|
<div className="post-simple-img">
|
|
<Image src="/images/blog-post-04-736x540.jpg" alt="" width="736" height="540" />
|
|
</div>
|
|
<div className="post-simple-body">
|
|
<div className="post-simple-title">
|
|
<h4>
|
|
<a href="#">How We Build a Better LA for Fifth Year in a Row</a>
|
|
</h4>
|
|
</div>
|
|
<div className="post-simple-time">
|
|
<span className="icon mdi mdi-clock"></span>
|
|
<a className="time" href="#">
|
|
March 15, 2021
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="col-lg-4">
|
|
<div className="pdl-xl-40">
|
|
<div className="row row-60">
|
|
<div className="col-md-6 col-lg-12">
|
|
<form action="/blog" className="form-lg rd-search rd-search-classic">
|
|
<div className="form-wrap">
|
|
<input
|
|
className="form-input"
|
|
id="rd-search-form-input"
|
|
type="text"
|
|
name="s"
|
|
autoComplete="off"
|
|
placeholder="Search blog..."
|
|
/>
|
|
</div>
|
|
<button className="rd-search-submit" type="submit"></button>
|
|
</form>
|
|
</div>
|
|
<div className="col-md-6 col-lg-12">
|
|
<div className="block-info-2">
|
|
<div className="block-info-2-title">
|
|
<h3>Latest Listings</h3>
|
|
</div>
|
|
<a className="post-minimal-1" href="#">
|
|
<div className="post-minimal-1-left">
|
|
<Image src="/images/post-agent-01-212x208.jpg" alt="" width="212" height="208" />
|
|
</div>
|
|
<div className="post-minimal-1-body">
|
|
<div className="post-minimal-1-title">
|
|
<span>401 Biscayne Blvd</span>
|
|
</div>
|
|
<div className="post-minimal-1-text">
|
|
<span>$5000\mo</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a className="post-minimal-1" href="#">
|
|
<div className="post-minimal-1-left">
|
|
<Image src="/images/post-agent-02-212x208.jpg" alt="" width="212" height="208" />
|
|
</div>
|
|
<div className="post-minimal-1-body">
|
|
<div className="post-minimal-1-title">
|
|
<span>35 Pond St, New York</span>
|
|
</div>
|
|
<div className="post-minimal-1-text">
|
|
<span>$5550\mo</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a className="post-minimal-1" href="#">
|
|
<div className="post-minimal-1-left">
|
|
<Image src="/images/post-agent-03-212x208.jpg" alt="" width="212" height="208" />
|
|
</div>
|
|
<div className="post-minimal-1-body">
|
|
<div className="post-minimal-1-title">
|
|
<span>182 3rd St, Seattle</span>
|
|
</div>
|
|
<div className="post-minimal-1-text">
|
|
<span>$2520\mo</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|