210 lines
7.3 KiB
TypeScript
210 lines
7.3 KiB
TypeScript
import { mockDb } from '@/lib/mockDb'
|
||
import { Link } from '@/i18n/routing'
|
||
import { notFound } from 'next/navigation'
|
||
import { Calendar, Tag, ArrowLeft } from 'lucide-react'
|
||
import ListingCard from '@/components/ListingCard'
|
||
import type { Metadata } from 'next'
|
||
|
||
interface Props {
|
||
params: Promise<{ locale: string; slug: string }>
|
||
}
|
||
|
||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||
const { locale, slug } = await params
|
||
const post = await mockDb.getBlogPostBySlug(slug)
|
||
if (!post) return {}
|
||
|
||
const title = locale === 'en' ? post.titleEn : locale === 'ru' ? post.titleRu : post.titleTr
|
||
const content = locale === 'en' ? post.contentEn : locale === 'ru' ? post.contentRu : post.contentTr
|
||
const description = content.substring(0, 150)
|
||
const fullTitle = `${title} — Marmaris Local`
|
||
|
||
return {
|
||
title: fullTitle,
|
||
description,
|
||
openGraph: {
|
||
title: fullTitle,
|
||
description,
|
||
type: 'article',
|
||
...(post.coverImage ? { images: [{ url: post.coverImage }] } : {}),
|
||
},
|
||
twitter: {
|
||
card: 'summary_large_image',
|
||
title: fullTitle,
|
||
description,
|
||
},
|
||
}
|
||
}
|
||
|
||
// Lightweight safe Markdown to HTML parsing function
|
||
function renderMarkdownToHtml(md: string): string {
|
||
if (!md) return ''
|
||
let html = md
|
||
.replace(/&/g, '&')
|
||
.replace(/</g, '<')
|
||
.replace(/>/g, '>')
|
||
|
||
// Bold
|
||
html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
|
||
html = html.replace(/__(.*?)__/g, '<strong>$1</strong>')
|
||
|
||
// Italic
|
||
html = html.replace(/\*(.*?)\*/g, '<em>$1</em>')
|
||
html = html.replace(/_(.*?)_/g, '<em>$1</em>')
|
||
|
||
// Headings
|
||
html = html.replace(/^### (.*?)$/gm, '<h4 class="text-base font-heading font-bold text-pine mt-6 mb-2 lowercase">$1</h4>')
|
||
html = html.replace(/^## (.*?)$/gm, '<h3 class="text-lg font-heading font-extrabold text-pine mt-8 mb-3 lowercase">$1</h3>')
|
||
html = html.replace(/^# (.*?)$/gm, '<h2 class="text-xl font-heading font-extrabold text-pine mt-10 mb-4 lowercase">$1</h2>')
|
||
|
||
// Bullet Lists
|
||
html = html.replace(/^\* (.*?)$/gm, '<li class="ml-4 list-disc text-sm text-ink/80 leading-relaxed">$1</li>')
|
||
html = html.replace(/^- (.*?)$/gm, '<li class="ml-4 list-disc text-sm text-ink/80 leading-relaxed">$1</li>')
|
||
|
||
// Links
|
||
html = html.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" class="text-turquoise hover:underline" target="_blank" rel="noopener">$1</a>')
|
||
|
||
// Paragraphs
|
||
const blocks = html.split(/\n\n+/)
|
||
html = blocks.map(block => {
|
||
const trimmed = block.trim()
|
||
if (!trimmed) return ''
|
||
if (trimmed.startsWith('<h') || trimmed.startsWith('<li') || trimmed.startsWith('<ul') || trimmed.startsWith('<ol')) {
|
||
return trimmed
|
||
}
|
||
return `<p class="leading-relaxed mb-4 text-sm sm:text-base text-ink/80 font-medium">${trimmed.replace(/\n/g, '<br/>')}</p>`
|
||
}).join('\n')
|
||
|
||
return html
|
||
}
|
||
|
||
export default async function BlogPostDetailPage({ params }: Props) {
|
||
const { locale, slug } = await params
|
||
const post = await mockDb.getBlogPostBySlug(slug)
|
||
|
||
if (!post || post.deletedAt) {
|
||
notFound()
|
||
}
|
||
|
||
const title = locale === 'en' ? post.titleEn : locale === 'ru' ? post.titleRu : post.titleTr
|
||
const content = locale === 'en' ? post.contentEn : locale === 'ru' ? post.contentRu : post.contentTr
|
||
const htmlContent = renderMarkdownToHtml(content)
|
||
|
||
// Fetch associated listings
|
||
const relatedListings: any[] = []
|
||
if (post.relatedListingIds && post.relatedListingIds.length > 0) {
|
||
for (const listingId of post.relatedListingIds) {
|
||
const listing = await mockDb.getListingById(listingId)
|
||
if (listing) {
|
||
relatedListings.push(listing)
|
||
}
|
||
}
|
||
}
|
||
|
||
// schema.org Structured Data
|
||
const jsonLd = {
|
||
'@context': 'https://schema.org',
|
||
'@type': 'Article',
|
||
'headline': title,
|
||
'image': post.coverImage || 'https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=1200&auto=format&fit=crop&q=80',
|
||
'datePublished': post.publishedAt || post.createdAt,
|
||
'dateModified': post.updatedAt,
|
||
'author': {
|
||
'@type': 'Organization',
|
||
'name': 'Marmaris Local',
|
||
'url': 'https://marmarislocal.com'
|
||
},
|
||
'publisher': {
|
||
'@type': 'Organization',
|
||
'name': 'Marmaris Local',
|
||
'logo': {
|
||
'@type': 'ImageObject',
|
||
'url': 'https://marmarislocal.com/logo.png'
|
||
}
|
||
},
|
||
'description': content.substring(0, 150)
|
||
}
|
||
|
||
return (
|
||
<>
|
||
{/* Schema.org Article Structured Data */}
|
||
<script
|
||
type="application/ld+json"
|
||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||
/>
|
||
|
||
<div className="bg-stone min-h-screen py-10 px-4 sm:px-6 lg:px-8 font-sans">
|
||
<div className="max-w-3xl mx-auto space-y-8">
|
||
|
||
{/* Back Link */}
|
||
<Link
|
||
href="/blog"
|
||
className="inline-flex items-center gap-1.5 px-4 py-2 border border-pine/10 rounded-xl text-xs font-mono font-bold text-pine hover:bg-paper transition"
|
||
>
|
||
<ArrowLeft className="w-3.5 h-3.5" />
|
||
GERİ DÖN
|
||
</Link>
|
||
|
||
{/* Article Box */}
|
||
<article className="bg-paper border border-pine/8 rounded-3xl overflow-hidden shadow-sm">
|
||
{post.coverImage && (
|
||
<div className="h-[350px] relative overflow-hidden bg-stone border-b border-pine/5">
|
||
<img
|
||
src={post.coverImage}
|
||
alt={title}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<div className="p-6 sm:p-10 space-y-6">
|
||
|
||
{/* Meta */}
|
||
<div className="flex flex-wrap items-center gap-4 text-xs text-shutter font-mono border-b border-dashed border-pine/8 pb-4">
|
||
<span className="flex items-center gap-1.5">
|
||
<Calendar className="w-4 h-4" />
|
||
{post.publishedAt ? new Date(post.publishedAt).toLocaleDateString(locale === 'tr' ? 'tr-TR' : locale === 'ru' ? 'ru-RU' : 'en-US') : ''}
|
||
</span>
|
||
|
||
{post.tags.map((tag) => (
|
||
<span key={tag} className="flex items-center gap-1 bg-stone/50 px-2 py-0.5 rounded-md border border-pine/5">
|
||
<Tag className="w-3.5 h-3.5" />
|
||
{tag}
|
||
</span>
|
||
))}
|
||
</div>
|
||
|
||
{/* Title */}
|
||
<h1 className="text-2xl sm:text-3xl font-heading font-extrabold text-pine lowercase leading-tight">
|
||
{title}
|
||
</h1>
|
||
|
||
{/* Markdown Content */}
|
||
<div
|
||
className="markdown-content space-y-4"
|
||
dangerouslySetInnerHTML={{ __html: htmlContent }}
|
||
/>
|
||
|
||
</div>
|
||
</article>
|
||
|
||
{/* Related Listings Section (Internal Linking) */}
|
||
{relatedListings.length > 0 && (
|
||
<div className="space-y-6 pt-6">
|
||
<h3 className="text-xl font-heading font-extrabold text-pine lowercase border-b border-dashed border-pine/8 pb-3">
|
||
yazıda geçen mekanlar
|
||
</h3>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||
{relatedListings.map((listing) => (
|
||
<ListingCard key={listing.id} listing={listing} />
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
</div>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|