feat: Implement Phase 2 features including blog, collections, saved listings, manifest, and api cron sync
This commit is contained in:
AyrisAI
@@ -0,0 +1,192 @@
|
||||
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'
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ locale: string; slug: string }>
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: Props) {
|
||||
const { slug } = await params
|
||||
const post = await mockDb.getBlogPostBySlug(slug)
|
||||
if (!post) return {}
|
||||
|
||||
return {
|
||||
title: `${post.titleTr} — Marmaris Local`,
|
||||
description: post.contentTr.substring(0, 150)
|
||||
}
|
||||
}
|
||||
|
||||
// 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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user