index.js
3.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import PageBanner from "@/components/reuseables/PageBanner";
import Seo from "@/components/reuseables/Seo/Seo";
// import BlogDetails from "@/container/Blog/BlogDetails";
import { cleanImage } from "@/layout/imageHandling";
import axios from "axios";
import Image from "next/image";
import Link from "next/link";
import QueryString from "qs";
import React from "react";
const details = ({ blog }) => {
// console.log(blog, "blog");
// console.log(blog[0]?.Description, "blog content");
const banners = [
{
imageSrc: "/images/banner/knowledge.webp",
pageTitle: "Blogs",
homePageUrl: "/",
homePageText: "Home",
activePageText: blog[0]?.Title || "Default Title",
},
];
// const seo = blog?.seo;
// console.log(seo, 'seo');
return (
<>
{/* <Seo seo={seo} /> */}
<PageBanner banners={banners} />
<div className="blog-details-area ptb-100">
<div className="container">
<div className="row">
<div className="col-lg-12 col-md-12">
<div className="blog-details-desc">
<div className="article-image">
<Image
src={cleanImage(blog[0]?.HeroImage?.url)}
layout="fill"
alt="image"
className="image-fluid image"
/>
</div>
<div className="article-content">
<div className="entry-meta">
<ul>
<li>
<i className="ri-shield-user-line"></i>
<p> {blog[0]?.Author}</p>
</li>
<li>
<i className="ri-calendar-2-line"></i>
<p>{blog[0]?.Date}</p>
</li>
</ul>
</div>
<h3>{blog[0]?.Title}</h3>
<p>{blog?.shortDesc}</p>
<div className="table" dangerouslySetInnerHTML={{ __html: blog[0]?.Description}}/>
{/* {blog[0]?.Description.map((item, index) => (<div key={index} dangerouslySetInnerHTML={{ __html: item?.children[0]?.text}}>
</div>))} */}
</div>
<div className="article-footer">
<div className="article-tags">
<Link href="/blog">Consulting</Link>
<Link href="/blog">Business</Link>
<Link href="/blog">Market</Link>
</div>
</div>
</div>
</div>
{/* <div className="col-lg-4 col-md-12">
<BlogSidebar />
</div> */}
</div>
</div>
</div>
</>
);
};
export default details;
export async function getServerSideProps({ params }) {
console.log("params", params.slug);
const query = {
filters: {
slug: {
$eq: params?.slug,
},
},
populate: [
"HeroImage",
"ThumbnailImage",
],
};
const queryString = QueryString.stringify(query, {
encodeValuesOnly: true,
});
const endpoint = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/blogs?${queryString}`;
const response = await axios.get(endpoint);
const blog = response.data.data;
return {
props: {
blog,
},
};
}