121 lines
3.9 KiB
TypeScript
121 lines
3.9 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { notFound } from "next/navigation";
|
|
import { blogs } from "@/data/blogs";
|
|
|
|
interface Props {
|
|
params: Promise<{ slug: string }>;
|
|
}
|
|
|
|
export async function generateStaticParams() {
|
|
return blogs.map((blog) => ({
|
|
slug: blog.slug,
|
|
}));
|
|
}
|
|
|
|
export async function generateMetadata({ params }: Props) {
|
|
const { slug } = await params;
|
|
const blog = blogs.find((b) => b.slug === slug);
|
|
if (!blog) return { title: "Blog Not Found" };
|
|
|
|
return {
|
|
title: `${blog.title} | VG Fence Products`,
|
|
description: blog.excerpt,
|
|
alternates: {
|
|
canonical: `/blog/${blog.slug}`
|
|
}
|
|
};
|
|
}
|
|
|
|
export default async function BlogDetailPage({ params }: Props) {
|
|
const { slug } = await params;
|
|
const blog = blogs.find((b) => b.slug === slug);
|
|
|
|
if (!blog) {
|
|
notFound();
|
|
}
|
|
|
|
// Split content into paragraphs to insert images in between
|
|
const paragraphs = blog.content.split('\n\n');
|
|
|
|
return (
|
|
<div className="blog-detail-page">
|
|
{/* ── INNER BANNER ── */}
|
|
<section className="detail-banner fade-up">
|
|
<div className="detail-banner-content">
|
|
<h1 className="detail-title">{blog.title}</h1>
|
|
<div className="banner-breadcrumb" style={{ marginTop: '30px', marginBottom: '0' }}>
|
|
<Link href="/">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
Home
|
|
</Link>
|
|
<span className="separator">/</span>
|
|
<Link href="/blog">Blog</Link>
|
|
<span className="separator">/</span>
|
|
<span>{blog.title}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── CONTENT SECTION ── */}
|
|
<section className="section detail-content-section">
|
|
<div className="detail-container">
|
|
{/* Big Image */}
|
|
<div className="big-image-wrap">
|
|
<Image
|
|
src={blog.image}
|
|
alt={blog.title}
|
|
width={1200}
|
|
height={600}
|
|
className="big-image"
|
|
/>
|
|
</div>
|
|
|
|
<div className="detail-body">
|
|
{/* First couple of paragraphs */}
|
|
{paragraphs.slice(0, Math.min(2, paragraphs.length)).map((p, i) => (
|
|
<p key={i}>{p}</p>
|
|
))}
|
|
|
|
{/* 2 Small Images (Left and Right) */}
|
|
<div className="split-images">
|
|
<div className="small-image-wrap">
|
|
<Image
|
|
src="/assets/about-fencing.png"
|
|
alt="Feature 1"
|
|
width={500}
|
|
height={350}
|
|
className="small-image"
|
|
/>
|
|
</div>
|
|
<div className="small-image-wrap">
|
|
<Image
|
|
src="/assets/manufacturing-hero.png"
|
|
alt="Feature 2"
|
|
width={500}
|
|
height={350}
|
|
className="small-image"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Remaining paragraphs */}
|
|
{paragraphs.slice(2).map((p, i) => (
|
|
<p key={i}>{p}</p>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom Button */}
|
|
<div className="detail-footer" style={{ marginTop: '60px', textAlign: 'center' }}>
|
|
<Link href="/blog" className="back-link" style={{ marginBottom: 0 }}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
|
|
Back to Blog
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
);
|
|
}
|