105 lines
3.8 KiB
JavaScript
105 lines
3.8 KiB
JavaScript
// pages/blog/[slug].js
|
|
import React, { Fragment } from 'react';
|
|
import { useRouter } from 'next/router';
|
|
import { useTranslation } from 'next-i18next';
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
|
|
import blogs from '../../api/blogs'; // Static metadata like images, author, etc.
|
|
import Link from 'next/link';
|
|
import bg from '/public/images/blog/banner-3.webp'
|
|
import PageTitle from '../../components/pagetitle/PageTitle';
|
|
import Navbar2 from '../../components/Navbar2/Navbar2';
|
|
import Footer from '../../components/footer/Footer';
|
|
import Scrollbar from '../../components/scrollbar/scrollbar';
|
|
import Image from 'next/image';
|
|
import blog from '../../utils/constant.utils';
|
|
|
|
const BlogSingle = () => {
|
|
const router = useRouter();
|
|
const { slug } = router.query;
|
|
|
|
const { t } = useTranslation(['blog', 'innerBanner']);
|
|
|
|
if (!slug) return null; // Avoid hydration mismatch on first load
|
|
|
|
// Localized content from blog.json
|
|
const blogContent = t(`posts.${slug}`, { returnObjects: true });
|
|
|
|
// Static metadata (images, date, author)
|
|
const blogMeta = blog.find(blog => blog.slug === slug);
|
|
|
|
if (!blogMeta || !blogContent?.title) {
|
|
return (
|
|
<div className="container text-center py-5">
|
|
<h2>Blog not found!</h2>
|
|
<Link href="/blog">← Back to Blog</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Fragment>
|
|
<Navbar2 />
|
|
<PageTitle pageTitle={blogContent.title} backgroundImage={bg} pagesub={t('blog-details.pageSub', { ns: 'innerBanner' })} />
|
|
|
|
<section className="wpo-blog-single-section section-padding">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col col-lg-12 col-12">
|
|
<div className="wpo-blog-content">
|
|
<div className={`post ${blogMeta.blClass}`}>
|
|
<div className="responsive-entry-media">
|
|
<Image
|
|
src={blogMeta.blogSingleImg}
|
|
alt={blogContent.title}
|
|
fill
|
|
style={{ objectFit: 'cover' }}
|
|
/>
|
|
</div>
|
|
{/* <div className="entry-meta">
|
|
<ul>
|
|
<li><i className="fi flaticon-calendar"></i> {blogMeta.create_at}</li>
|
|
<li><i className="fi ti-user"></i> By <Link href="/blog">{blogMeta.authorTitle}</Link></li>
|
|
</ul>
|
|
</div> */}
|
|
|
|
<h2 className='mt-3'>{blogContent.title}</h2>
|
|
<div dangerouslySetInnerHTML={{ __html: blogContent.description }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
<Scrollbar />
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export async function getStaticPaths() {
|
|
const locales = ['en', 'es'];
|
|
|
|
const paths = locales.flatMap(locale =>
|
|
blog.map(blog => ({
|
|
params: { slug: blog.slug },
|
|
locale,
|
|
}))
|
|
);
|
|
|
|
return {
|
|
paths,
|
|
fallback: false,
|
|
};
|
|
}
|
|
|
|
export async function getStaticProps({ locale }) {
|
|
return {
|
|
props: {
|
|
...(await serverSideTranslations(locale, ['common', 'menu', 'blog', 'footer', 'innerBanner', 'contact'])),
|
|
},
|
|
};
|
|
}
|
|
|
|
export default BlogSingle;
|