UI/UX Improvements: Modern design + hashtag system + cover images
- Added modern CSS design system with better typography - Created hashtag/tag functionality with auto-tagging - Improved homepage with hero section and trending tags - Enhanced article pages with full-width cover images - Added tag pages for filtering articles by hashtag - Better mobile responsive design - Smoother animations and transitions - Auto-tag system analyzes content and assigns relevant tags - 30+ predefined AI-related tags (ChatGPT, OpenAI, etc.)
This commit is contained in:
Zeya Phyo
336
frontend/app/article/[slug]/page-improved.tsx
Normal file
336
frontend/app/article/[slug]/page-improved.tsx
Normal file
@@ -0,0 +1,336 @@
|
||||
import { sql } from '@vercel/postgres'
|
||||
import { notFound } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
|
||||
async function getArticleWithTags(slug: string) {
|
||||
try {
|
||||
const { rows } = await sql`
|
||||
SELECT
|
||||
a.*,
|
||||
c.name as category_name,
|
||||
c.name_burmese as category_name_burmese,
|
||||
c.slug as category_slug,
|
||||
COALESCE(
|
||||
array_agg(t.name_burmese) FILTER (WHERE t.id IS NOT NULL),
|
||||
ARRAY[]::VARCHAR[]
|
||||
) as tags_burmese,
|
||||
COALESCE(
|
||||
array_agg(t.slug) FILTER (WHERE t.id IS NOT NULL),
|
||||
ARRAY[]::VARCHAR[]
|
||||
) as tag_slugs
|
||||
FROM articles a
|
||||
JOIN categories c ON a.category_id = c.id
|
||||
LEFT JOIN article_tags at ON a.id = at.article_id
|
||||
LEFT JOIN tags t ON at.tag_id = t.id
|
||||
WHERE a.slug = ${slug} AND a.status = 'published'
|
||||
GROUP BY a.id, c.id
|
||||
`
|
||||
|
||||
if (rows.length === 0) return null
|
||||
|
||||
// Increment view count
|
||||
await sql`SELECT increment_view_count(${slug})`
|
||||
|
||||
return rows[0]
|
||||
} catch (error) {
|
||||
console.error('Error fetching article:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
async function getRelatedArticles(articleId: number) {
|
||||
try {
|
||||
const { rows } = await sql`SELECT * FROM get_related_articles(${articleId}, 6)`
|
||||
return rows
|
||||
} catch (error) {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export default async function ImprovedArticlePage({ params }: { params: { slug: string } }) {
|
||||
const article = await getArticleWithTags(params.slug)
|
||||
|
||||
if (!article) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const relatedArticles = await getRelatedArticles(article.id)
|
||||
const publishedDate = new Date(article.published_at).toLocaleDateString('my-MM', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Hero Cover Image */}
|
||||
{article.featured_image && (
|
||||
<div className="relative h-[70vh] w-full overflow-hidden">
|
||||
<Image
|
||||
src={article.featured_image}
|
||||
alt={article.title_burmese}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
|
||||
|
||||
<div className="absolute inset-0 flex items-end">
|
||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 w-full">
|
||||
{/* Category */}
|
||||
<Link
|
||||
href={`/category/${article.category_slug}`}
|
||||
className="inline-block mb-4 px-4 py-2 bg-primary rounded-full text-white font-semibold text-sm hover:bg-primary-dark transition-colors"
|
||||
>
|
||||
{article.category_name_burmese}
|
||||
</Link>
|
||||
|
||||
{/* Title */}
|
||||
<h1 className="text-5xl md:text-6xl font-bold text-white mb-6 font-burmese leading-tight">
|
||||
{article.title_burmese}
|
||||
</h1>
|
||||
|
||||
{/* Meta */}
|
||||
<div className="flex flex-wrap items-center gap-4 text-white/90">
|
||||
<span className="font-burmese">{publishedDate}</span>
|
||||
<span>•</span>
|
||||
<span className="font-burmese">{article.reading_time} မိနစ်</span>
|
||||
<span>•</span>
|
||||
<span>{article.view_count} views</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Article Content */}
|
||||
<article className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
{/* Tags */}
|
||||
{article.tags_burmese && article.tags_burmese.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-8 pb-8 border-b">
|
||||
{article.tags_burmese.map((tag: string, idx: number) => (
|
||||
<Link
|
||||
key={idx}
|
||||
href={`/tag/${article.tag_slugs[idx]}`}
|
||||
className="tag tag-burmese"
|
||||
>
|
||||
#{tag}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Article Body */}
|
||||
<div className="article-content">
|
||||
<div dangerouslySetInnerHTML={{ __html: formatContent(article.content_burmese) }} />
|
||||
|
||||
{/* Additional Images Gallery */}
|
||||
{article.images && article.images.length > 1 && (
|
||||
<div className="my-12">
|
||||
<h3 className="text-2xl font-bold mb-6 font-burmese">ဓာတ်ပုံများ</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{article.images.slice(1).map((img: string, idx: number) => (
|
||||
<div key={idx} className="relative h-56 rounded-xl overflow-hidden image-zoom">
|
||||
<Image
|
||||
src={img}
|
||||
alt={`${article.title_burmese} - ${idx + 2}`}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Videos */}
|
||||
{article.videos && article.videos.length > 0 && (
|
||||
<div className="my-12">
|
||||
<h3 className="text-2xl font-bold mb-6 font-burmese">ဗီဒီယိုများ</h3>
|
||||
<div className="space-y-6">
|
||||
{article.videos.map((video: string, idx: number) => (
|
||||
<div key={idx} className="relative aspect-video rounded-xl overflow-hidden bg-gray-900 shadow-xl">
|
||||
{renderVideo(video)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Source Attribution */}
|
||||
{article.source_articles && article.source_articles.length > 0 && (
|
||||
<div className="mt-16 p-8 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl shadow-lg">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4 font-burmese flex items-center">
|
||||
<svg className="w-7 h-7 mr-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
မူရင်းသတင်းရင်းမြစ်များ
|
||||
</h3>
|
||||
<p className="text-sm text-gray-700 mb-6 font-burmese leading-relaxed">
|
||||
ဤဆောင်းပါးကို အောက်ပါမူရင်းသတင်းများမှ စုစည်း၍ မြန်မာဘာသာသို့ ပြန်ဆိုထားခြင်း ဖြစ်ပါသည်။ အားလုံးသော အကြွေးအရ မူရင်းစာရေးသူများနှင့် ထုတ်ပြန်သူများကို သက်ဆိုင်ပါသည်။
|
||||
</p>
|
||||
<div className="space-y-4">
|
||||
{article.source_articles.map((source: any, index: number) => (
|
||||
<div key={index} className="bg-white p-5 rounded-xl shadow-sm hover:shadow-md transition-shadow border border-gray-100">
|
||||
<div className="flex items-start gap-4">
|
||||
<span className="flex-shrink-0 w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold">
|
||||
{index + 1}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<a
|
||||
href={source.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:text-primary-dark font-medium break-words hover:underline"
|
||||
>
|
||||
{source.title}
|
||||
</a>
|
||||
{source.author && source.author !== 'Unknown' && (
|
||||
<p className="text-sm text-gray-600 mt-2">
|
||||
<span className="font-burmese font-semibold">စာရေးသူ:</span> {source.author}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<a
|
||||
href={source.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex-shrink-0 text-primary hover:text-primary-dark"
|
||||
title="Open source"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Share Section */}
|
||||
<div className="mt-12 py-8 border-y border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-burmese text-gray-700 font-semibold">မျှဝေပါ:</p>
|
||||
<div className="flex gap-3">
|
||||
<button className="px-4 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition-colors">
|
||||
Facebook
|
||||
</button>
|
||||
<button className="px-4 py-2 bg-sky-500 text-white rounded-full hover:bg-sky-600 transition-colors">
|
||||
Twitter
|
||||
</button>
|
||||
<button className="px-4 py-2 bg-green-600 text-white rounded-full hover:bg-green-700 transition-colors">
|
||||
WhatsApp
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{/* Related Articles */}
|
||||
{relatedArticles.length > 0 && (
|
||||
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 bg-gray-50">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-10 font-burmese">
|
||||
ဆက်စပ်ဆောင်းပါးများ
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{relatedArticles.map((related: any) => (
|
||||
<Link
|
||||
key={related.id}
|
||||
href={`/article/${related.slug}`}
|
||||
className="card card-hover"
|
||||
>
|
||||
{related.featured_image && (
|
||||
<div className="relative h-48 w-full image-zoom">
|
||||
<Image
|
||||
src={related.featured_image}
|
||||
alt={related.title_burmese}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-6">
|
||||
<h3 className="font-bold text-gray-900 font-burmese line-clamp-2 hover:text-primary transition-colors text-lg mb-3">
|
||||
{related.title_burmese}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 font-burmese line-clamp-2">
|
||||
{related.excerpt_burmese}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function formatContent(content: string): string {
|
||||
let formatted = content
|
||||
.replace(/\n\n/g, '</p><p>')
|
||||
.replace(/## (.*?)\n/g, '<h2>$1</h2>')
|
||||
.replace(/### (.*?)\n/g, '<h3>$1</h3>')
|
||||
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
|
||||
.replace(/\*(.*?)\*/g, '<em>$1</em>')
|
||||
|
||||
return `<p>${formatted}</p>`
|
||||
}
|
||||
|
||||
function renderVideo(videoUrl: string) {
|
||||
let videoId = null
|
||||
|
||||
if (videoUrl.includes('youtube.com/watch')) {
|
||||
const match = videoUrl.match(/v=([^&]+)/)
|
||||
videoId = match ? match[1] : null
|
||||
} else if (videoUrl.includes('youtu.be/')) {
|
||||
const match = videoUrl.match(/youtu\.be\/([^?]+)/)
|
||||
videoId = match ? match[1] : null
|
||||
} else if (videoUrl.includes('youtube.com/embed/')) {
|
||||
const match = videoUrl.match(/embed\/([^?]+)/)
|
||||
videoId = match ? match[1] : null
|
||||
}
|
||||
|
||||
if (videoId) {
|
||||
return (
|
||||
<iframe
|
||||
src={`https://www.youtube.com/embed/${videoId}`}
|
||||
className="w-full h-full"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<iframe
|
||||
src={videoUrl}
|
||||
className="w-full h-full"
|
||||
allowFullScreen
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: { slug: string } }) {
|
||||
const article = await getArticleWithTags(params.slug)
|
||||
|
||||
if (!article) {
|
||||
return {
|
||||
title: 'Article Not Found',
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${article.title_burmese} - Burmddit`,
|
||||
description: article.excerpt_burmese,
|
||||
openGraph: {
|
||||
title: article.title_burmese,
|
||||
description: article.excerpt_burmese,
|
||||
images: article.featured_image ? [article.featured_image] : [],
|
||||
},
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user