Initial Burmddit deployment - AI news aggregator in Burmese

frontend/components/ArticleCard.tsx

@@ -0,0 +1,67 @@
+import Link from 'next/link'
+import Image from 'next/image'
+
+interface Article {
+  id: number
+  title_burmese: string
+  slug: string
+  excerpt_burmese: string
+  category_name_burmese: string
+  category_slug: string
+  reading_time: number
+  published_at: string
+  featured_image?: string
+}
+
+export default function ArticleCard({ article }: { article: Article }) {
+  const publishedDate = new Date(article.published_at).toLocaleDateString('my-MM', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+
+  return (
+    <article className="bg-white rounded-lg shadow hover:shadow-lg transition-shadow duration-200 overflow-hidden article-card">
+      <Link href={`/article/${article.slug}`}>
+        {article.featured_image && (
+          <div className="relative h-48 w-full">
+            <Image
+              src={article.featured_image}
+              alt={article.title_burmese}
+              fill
+              className="object-cover"
+            />
+          </div>
+        )}
+        
+        <div className="p-6">
+          {/* Category Badge */}
+          <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-3 hover:bg-primary-200"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {article.category_name_burmese}
+          </Link>
+
+          {/* Title */}
+          <h2 className="text-xl font-bold text-gray-900 mb-2 font-burmese hover:text-primary-600 line-clamp-2">
+            {article.title_burmese}
+          </h2>
+
+          {/* Excerpt */}
+          <p className="text-gray-600 mb-4 font-burmese line-clamp-3 leading-relaxed">
+            {article.excerpt_burmese}
+          </p>
+
+          {/* Meta */}
+          <div className="flex items-center text-sm text-gray-500 space-x-4">
+            <span>{publishedDate}</span>
+            <span>•</span>
+            <span className="font-burmese">{article.reading_time} မိနစ်</span>
+          </div>
+        </div>
+      </Link>
+    </article>
+  )
+}

frontend/components/CategoryNav.tsx

@@ -0,0 +1,23 @@
+const categories = [
+  { name: 'AI သတင်းများ', slug: 'ai-news', icon: '📰' },
+  { name: 'သင်ခန်းစာများ', slug: 'tutorials', icon: '📚' },
+  { name: 'အကြံပြုချက်များ', slug: 'tips-tricks', icon: '💡' },
+  { name: 'လာမည့်အရာများ', slug: 'upcoming', icon: '🚀' },
+]
+
+export default function CategoryNav() {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+      {categories.map((category) => (
+        <a
+          key={category.slug}
+          href={`/category/${category.slug}`}
+          className="bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-200 text-center"
+        >
+          <div className="text-3xl mb-2">{category.icon}</div>
+          <h3 className="font-semibold text-gray-900 font-burmese">{category.name}</h3>
+        </a>
+      ))}
+    </div>
+  )
+}

frontend/components/Footer.tsx

@@ -0,0 +1,72 @@
+export default function Footer() {
+  return (
+    <footer className="bg-gray-900 text-white mt-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {/* About */}
+          <div>
+            <h3 className="text-lg font-bold mb-4 font-burmese">Burmddit အကြောင်း</h3>
+            <p className="text-gray-400 text-sm font-burmese">
+              AI နှင့် နည်းပညာဆိုင်ရာ သတင်းများကို မြန်မာဘာသာဖြင့် နေ့စဉ် ထုတ်ပြန်ပေးသော ပလက်ဖောင်း
+            </p>
+          </div>
+
+          {/* Links */}
+          <div>
+            <h3 className="text-lg font-bold mb-4 font-burmese">အမျိုးအစားများ</h3>
+            <ul className="space-y-2 text-sm">
+              <li>
+                <a href="/category/ai-news" className="text-gray-400 hover:text-white font-burmese">
+                  AI သတင်းများ
+                </a>
+              </li>
+              <li>
+                <a href="/category/tutorials" className="text-gray-400 hover:text-white font-burmese">
+                  သင်ခန်းစာများ
+                </a>
+              </li>
+              <li>
+                <a href="/category/tips-tricks" className="text-gray-400 hover:text-white font-burmese">
+                  အကြံပြုချက်များ
+                </a>
+              </li>
+              <li>
+                <a href="/category/upcoming" className="text-gray-400 hover:text-white font-burmese">
+                  လာမည့်အရာများ
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          {/* Contact */}
+          <div>
+            <h3 className="text-lg font-bold mb-4">Contact</h3>
+            <p className="text-gray-400 text-sm">
+              Built with ❤️ for Myanmar tech community
+            </p>
+            <div className="mt-4 flex space-x-4">
+              <a href="#" className="text-gray-400 hover:text-white">
+                <span className="sr-only">Twitter</span>
+                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+                </svg>
+              </a>
+              <a href="#" className="text-gray-400 hover:text-white">
+                <span className="sr-only">GitHub</span>
+                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+                  <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-8 pt-8 border-t border-gray-800 text-center">
+          <p className="text-gray-400 text-sm">
+            © {new Date().getFullYear()} Burmddit. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
+  )
+}

frontend/components/Header.tsx

@@ -0,0 +1,54 @@
+import Link from 'next/link'
+
+export default function Header() {
+  return (
+    <header className="bg-white shadow-sm sticky top-0 z-50">
+      <nav className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          {/* Logo */}
+          <Link href="/" className="flex items-center space-x-2">
+            <span className="text-2xl font-bold text-primary-600">B</span>
+            <span className="text-xl font-bold text-gray-900 font-burmese">
+              Burmddit
+            </span>
+          </Link>
+
+          {/* Navigation */}
+          <div className="hidden md:flex space-x-8">
+            <Link 
+              href="/" 
+              className="text-gray-700 hover:text-primary-600 font-medium font-burmese"
+            >
+              ပင်မစာမျက်နှာ
+            </Link>
+            <Link 
+              href="/category/ai-news" 
+              className="text-gray-700 hover:text-primary-600 font-medium font-burmese"
+            >
+              AI သတင်းများ
+            </Link>
+            <Link 
+              href="/category/tutorials" 
+              className="text-gray-700 hover:text-primary-600 font-medium font-burmese"
+            >
+              သင်ခန်းစာများ
+            </Link>
+            <Link 
+              href="/category/tips-tricks" 
+              className="text-gray-700 hover:text-primary-600 font-medium font-burmese"
+            >
+              အကြံပြုချက်များ
+            </Link>
+          </div>
+
+          {/* Search Icon */}
+          <button className="p-2 text-gray-600 hover:text-primary-600">
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+          </button>
+        </div>
+      </nav>
+    </header>
+  )
+}

frontend/components/TrendingSection.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link'
+
+interface TrendingArticle {
+  id: number
+  title_burmese: string
+  slug: string
+  view_count: number
+  category_name_burmese: string
+}
+
+export default function TrendingSection({ articles }: { articles: TrendingArticle[] }) {
+  if (articles.length === 0) return null
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <h3 className="text-lg font-bold text-gray-900 mb-4 font-burmese flex items-center">
+        <svg className="w-5 h-5 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clipRule="evenodd" />
+        </svg>
+        လူကြိုက်များသော
+      </h3>
+      <ol className="space-y-3">
+        {articles.map((article, index) => (
+          <li key={article.id} className="flex items-start space-x-3">
+            <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">
+              {index + 1}
+            </span>
+            <Link 
+              href={`/article/${article.slug}`}
+              className="flex-1 text-gray-700 hover:text-primary-600 font-burmese text-sm line-clamp-2 leading-snug"
+            >
+              {article.title_burmese}
+            </Link>
+          </li>
+        ))}
+      </ol>
+    </div>
+  )
+}