Initial Burmddit deployment - AI news aggregator in Burmese

frontend/app/article/[slug]/page.tsx

@@ -0,0 +1,325 @@
+import { sql } from '@vercel/postgres'
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import Image from 'next/image'
+
+async function getArticle(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
+      FROM articles a
+      JOIN categories c ON a.category_id = c.id
+      WHERE a.slug = ${slug} AND a.status = 'published'
+    `
+    
+    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}, 5)`
+    return rows
+  } catch (error) {
+    return []
+  }
+}
+
+export default async function ArticlePage({ params }: { params: { slug: string } }) {
+  const article = await getArticle(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="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      {/* Breadcrumb */}
+      <nav className="mb-6 text-sm">
+        <Link href="/" className="text-primary-600 hover:text-primary-700">
+          ပင်မစာမျက်နှာ
+        </Link>
+        <span className="mx-2 text-gray-400">/</span>
+        <Link 
+          href={`/category/${article.category_slug}`}
+          className="text-primary-600 hover:text-primary-700 font-burmese"
+        >
+          {article.category_name_burmese}
+        </Link>
+        <span className="mx-2 text-gray-400">/</span>
+        <span className="text-gray-600 font-burmese">{article.title_burmese}</span>
+      </nav>
+
+      {/* Article Header */}
+      <article className="bg-white rounded-lg shadow-lg overflow-hidden">
+        {/* Category Badge */}
+        <div className="p-6 pb-0">
+          <Link 
+            href={`/category/${article.category_slug}`}
+            className="inline-block px-3 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium font-burmese mb-4 hover:bg-primary-200"
+          >
+            {article.category_name_burmese}
+          </Link>
+        </div>
+
+        {/* Featured Image */}
+        {article.featured_image && (
+          <div className="relative h-96 w-full">
+            <Image
+              src={article.featured_image}
+              alt={article.title_burmese}
+              fill
+              className="object-cover"
+              priority
+            />
+          </div>
+        )}
+
+        {/* Article Content */}
+        <div className="p-6 lg:p-12">
+          {/* Title */}
+          <h1 className="text-4xl font-bold text-gray-900 mb-4 font-burmese leading-tight">
+            {article.title_burmese}
+          </h1>
+
+          {/* Meta Info */}
+          <div className="flex items-center text-sm text-gray-600 mb-8 pb-8 border-b">
+            <span className="font-burmese">{publishedDate}</span>
+            <span className="mx-3">•</span>
+            <span className="font-burmese">{article.reading_time} မိနစ်</span>
+            <span className="mx-3">•</span>
+            <span className="font-burmese">{article.view_count} ကြည့်ရှုမှု</span>
+          </div>
+
+          {/* Article Body */}
+          <div className="article-content prose prose-lg max-w-none">
+            <div dangerouslySetInnerHTML={{ __html: formatContent(article.content_burmese) }} />
+            
+            {/* 🔥 Additional Images Gallery */}
+            {article.images && article.images.length > 1 && (
+              <div className="mt-8 mb-8">
+                <h3 className="text-xl font-bold mb-4 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-48 rounded-lg overflow-hidden">
+                      <Image
+                        src={img}
+                        alt={`${article.title_burmese} - ဓာတ်ပုံ ${idx + 2}`}
+                        fill
+                        className="object-cover hover:scale-105 transition-transform duration-200"
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+            
+            {/* 🔥 Videos */}
+            {article.videos && article.videos.length > 0 && (
+              <div className="mt-8 mb-8">
+                <h3 className="text-xl font-bold mb-4 font-burmese">ဗီဒီယိုများ</h3>
+                <div className="space-y-4">
+                  {article.videos.map((video: string, idx: number) => (
+                    <div key={idx} className="relative aspect-video rounded-lg overflow-hidden bg-gray-900">
+                      {renderVideo(video)}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* ⭐ SOURCE ATTRIBUTION - THIS IS THE KEY PART! */}
+          {article.source_articles && article.source_articles.length > 0 && (
+            <div className="mt-12 pt-8 border-t-2 border-gray-200 bg-gray-50 p-6 rounded-lg">
+              <h3 className="text-xl font-bold text-gray-900 mb-4 font-burmese flex items-center">
+                <svg className="w-6 h-6 mr-2 text-primary-600" 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-600 mb-4 font-burmese">
+                ဤဆောင်းပါးကို အောက်ပါမူရင်းသတင်းများမှ စုစည်း၍ မြန်မာဘာသာသို့ ပြန်ဆိုထားခြင်း ဖြစ်ပါသည်။ အားလုံးသော အကြွေးအရ မူရင်းစာရေးသူများနှင့် ထုတ်ပြန်သူများကို သက်ဆိုင်ပါသည်။
+              </p>
+              <ul className="space-y-3">
+                {article.source_articles.map((source: any, index: number) => (
+                  <li key={index} className="bg-white p-4 rounded border border-gray-200 hover:border-primary-300 transition-colors">
+                    <div className="flex items-start">
+                      <span className="flex-shrink-0 w-6 h-6 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center text-sm font-bold mr-3">
+                        {index + 1}
+                      </span>
+                      <div className="flex-1">
+                        <a 
+                          href={source.url} 
+                          target="_blank" 
+                          rel="noopener noreferrer"
+                          className="text-primary-600 hover:text-primary-700 font-medium break-words"
+                        >
+                          {source.title}
+                        </a>
+                        {source.author && source.author !== 'Unknown' && (
+                          <p className="text-sm text-gray-600 mt-1">
+                            <span className="font-burmese">စာရေးသူ:</span> {source.author}
+                          </p>
+                        )}
+                        <p className="text-xs text-gray-500 mt-1 break-all">
+                          {source.url}
+                        </p>
+                      </div>
+                      <a
+                        href={source.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="ml-2 text-primary-600 hover:text-primary-700"
+                      >
+                        <svg className="w-5 h-5" 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>
+                  </li>
+                ))}
+              </ul>
+              <div className="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded">
+                <p className="text-sm text-gray-700 font-burmese">
+                  <strong>မှတ်ချက်:</strong> ဤဆောင်းပါးသည် သတင်းမျာ လုံးစုစည်းကာ ပြန်ဆိုထားခြင်း ဖြစ်ပါသည်။ အသေးစိတ် အချက်အလက်များနှင့် မူရင်းအကြောင်းအရာများအတွက် အထက်ပါမူရင်းသတင်းရင်းမြစ်များကို ကြည့်ရှုပါ။
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Disclaimer */}
+          <div className="mt-6 p-4 bg-gray-100 rounded text-sm text-gray-600 font-burmese">
+            <p>
+              <strong>ပြန်ဆိုသူမှတ်ချက်:</strong> ဤဆောင်းပါးကို AI နည်းပညာဖြင့် အင်္ဂလိပ်ဘာသာမှ မြန်မာဘာသာသို့ ပြန်ဆိုထားပါသည်။ နည်းပညာဝေါဟာရများကို တတ်နိုင်သမျှ အင်္ဂလိပ်ဘာသာဖြင့် ထားရှိထားပါသည်။
+            </p>
+          </div>
+        </div>
+      </article>
+
+      {/* Related Articles */}
+      {relatedArticles.length > 0 && (
+        <div className="mt-12">
+          <h2 className="text-2xl font-bold text-gray-900 mb-6 font-burmese">
+            ဆက်စပ်ဆောင်းပါးများ
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {relatedArticles.map((related: any) => (
+              <Link
+                key={related.id}
+                href={`/article/${related.slug}`}
+                className="bg-white rounded-lg shadow hover:shadow-lg transition-shadow p-4"
+              >
+                {related.featured_image && (
+                  <div className="relative h-32 w-full mb-3 rounded overflow-hidden">
+                    <Image
+                      src={related.featured_image}
+                      alt={related.title_burmese}
+                      fill
+                      className="object-cover"
+                    />
+                  </div>
+                )}
+                <h3 className="font-semibold text-gray-900 font-burmese line-clamp-2 hover:text-primary-600">
+                  {related.title_burmese}
+                </h3>
+                <p className="text-sm text-gray-600 font-burmese mt-2 line-clamp-2">
+                  {related.excerpt_burmese}
+                </p>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function formatContent(content: string): string {
+  // Convert markdown-like formatting to HTML
+  // This is a simple implementation - you might want to use a proper markdown parser
+  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) {
+  // Extract YouTube video ID
+  let videoId = null
+  
+  // Handle different YouTube URL formats
+  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
+      />
+    )
+  }
+  
+  // For other video formats, try generic iframe embed
+  return (
+    <iframe
+      src={videoUrl}
+      className="w-full h-full"
+      allowFullScreen
+    />
+  )
+}
+
+export async function generateMetadata({ params }: { params: { slug: string } }) {
+  const article = await getArticle(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] : [],
+    },
+  }
+}