36112e4137
- Astro 5.x → Astro 6.1.2 - @astrojs/node 9.x → 10.x - Content config: src/content/config.ts → src/content.config.ts - Update to glob loader pattern for content collections - Replace post.slug with post.id for content loader - Replace post.render() with render(post)
320 lines
14 KiB
Plaintext
320 lines
14 KiB
Plaintext
---
|
|
import Layout from '../../layouts/Layout.astro';
|
|
import { getCollection } from 'astro:content';
|
|
|
|
export async function getStaticPaths() {
|
|
const posts = await getCollection('blog');
|
|
return posts.map(post => ({
|
|
params: { slug: post.id },
|
|
props: { post },
|
|
}));
|
|
}
|
|
|
|
const allPosts = await getCollection('blog');
|
|
const sortedPosts = allPosts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
|
|
|
|
const categories = [...new Set(allPosts.map(post => post.data.category))];
|
|
const tags = [...new Set(allPosts.flatMap(post => post.data.tags))];
|
|
|
|
// Map blog slugs to feature images
|
|
const featureImages: Record<string, string> = {
|
|
'5-ways-ai-increase-sales': '/images/blog/ai-sales-growth.jpg',
|
|
'ai-content-google-love': '/images/blog/ai-content-seo.jpg',
|
|
'ai-for-sme-thailand': '/images/blog/ai-sme-thailand.jpg',
|
|
'back-office-automation': '/images/blog/office-automation.jpg',
|
|
'chatbot-business-case-study': '/images/blog/chatbot-business.jpg',
|
|
'data-driven-marketing': '/images/blog/data-marketing.jpg',
|
|
'digital-transformation-guide': '/images/blog/digital-transformation.jpg',
|
|
'marketing-automation-guide': '/images/blog/marketing-automation.jpg',
|
|
'seo-2026-business-guide': '/images/blog/seo-guide.jpg',
|
|
'website-2026-must-have': '/images/blog/website-2026.jpg',
|
|
};
|
|
|
|
const formatDate = (date: Date) => {
|
|
return date.toLocaleDateString('th-TH', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
};
|
|
---
|
|
|
|
<Layout
|
|
title="บล็อก | MoreMiniMore - ความรู้เกี่ยวกับ AI และการตลาดดิจิทัล"
|
|
description="อ่านบทความและความรู้เกี่ยวกับ AI, Marketing Automation, SEO และ Digital Transformation สำหรับธุรกิจ SMEs ไทย"
|
|
>
|
|
<!-- Hero Section - Yellow Theme (matching homepage) -->
|
|
<section id="hero" class="reveal relative overflow-hidden min-h-[40vh] flex items-center">
|
|
<!-- Animated Background - Yellow theme for Blog -->
|
|
<div class="absolute inset-0 bg-gradient-to-br from-yellow-400 via-yellow-500 to-yellow-600">
|
|
<!-- Floating Shapes -->
|
|
<div class="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
|
|
<div class="absolute bottom-20 right-10 w-96 h-96 bg-yellow-300/20 rounded-full blur-3xl animate-float-2"></div>
|
|
<div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
|
|
<div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-yellow-200/20 rounded-full blur-2xl animate-float-1" style="animation-delay: 1.5s;"></div>
|
|
</div>
|
|
|
|
<!-- Floating dots -->
|
|
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
|
|
<div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
|
|
<div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
|
|
<div class="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style="animation-delay: 2s;"></div>
|
|
</div>
|
|
|
|
<!-- Grid Pattern -->
|
|
<div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>
|
|
|
|
<div class="container mx-auto px-4 relative z-10 py-16">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up">
|
|
บล็อก & ความรู้
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-white/80 max-w-2xl mx-auto animate-fade-in-up" style="animation-delay: 0.2s;">
|
|
ความรู้เกี่ยวกับ AI, การตลาดดิจิทัล และการเปลี่ยนแปลงทางธุรกิจสำหรับ SMEs ไทย
|
|
</p>
|
|
|
|
<!-- Search Box -->
|
|
<div class="max-w-2xl mx-auto mt-8 animate-fade-in-up" style="animation-delay: 0.4s;">
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
id="blog-search"
|
|
placeholder="ค้นหาบทความ..."
|
|
class="w-full px-6 py-4 pr-12 rounded-full border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white placeholder-white/70 focus:border-white focus:outline-none text-lg"
|
|
/>
|
|
<button class="absolute right-4 top-1/2 -translate-y-1/2 text-white/70 hover:text-white transition">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Category Filter -->
|
|
<section class="reveal py-8 bg-white border-b shadow-sm">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex flex-wrap gap-3 justify-center" id="category-filters">
|
|
<button
|
|
class="category-btn active px-5 py-2 rounded-full bg-yellow-500 text-white font-medium transition hover:bg-yellow-600"
|
|
data-category="all"
|
|
>
|
|
ทั้งหมด
|
|
</button>
|
|
{categories.map(category => (
|
|
<button
|
|
class="category-btn px-5 py-2 rounded-full bg-gray-100 text-gray-700 font-medium transition hover:bg-yellow-500 hover:text-white"
|
|
data-category={category}
|
|
>
|
|
{category}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Blog Grid -->
|
|
<section id="blog" class="reveal py-20 bg-gradient-to-b from-gray-50 to-white">
|
|
<div class="container mx-auto px-4">
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="blog-grid">
|
|
{sortedPosts.map((post, index) => (
|
|
<article
|
|
class="blog-card bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 group"
|
|
data-category={post.data.category}
|
|
data-tags={JSON.stringify(post.data.tags)}
|
|
style={`animation-delay: ${index * 0.1}s`}
|
|
>
|
|
<!-- Feature Image -->
|
|
<div class="relative h-48 overflow-hidden">
|
|
<img
|
|
src={featureImages[post.id] || '/images/blog/ai-sales-growth.jpg'}
|
|
alt={post.data.title}
|
|
class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
|
|
/>
|
|
<!-- Overlay -->
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
|
<!-- Category Badge -->
|
|
<span class="absolute top-4 left-4 bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-medium">
|
|
{post.data.category}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="text-sm text-gray-600">{formatDate(post.data.pubDate)}</span>
|
|
</div>
|
|
<h2 class="text-xl font-bold mb-3 line-clamp-2 group-hover:text-yellow-600 transition-colors">
|
|
<a href={`/blog/${post.id}`}>{post.data.title}</a>
|
|
</h2>
|
|
<p class="text-gray-700 mb-4 line-clamp-2">
|
|
{post.data.description}
|
|
</p>
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
{post.data.tags.slice(0, 3).map(tag => (
|
|
<span class="text-xs bg-gray-100 px-2 py-1 rounded text-gray-700">#{tag}</span>
|
|
))}
|
|
</div>
|
|
<a href={`/blog/${post.id}`} class="text-yellow-600 font-medium hover:text-yellow-800 inline-flex items-center gap-2 group-hover:gap-3 transition-all">
|
|
อ่านเพิ่มเติม →
|
|
</a>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
<!-- No Results Message -->
|
|
<div id="no-results" class="hidden text-center py-16">
|
|
<svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
<h3 class="text-2xl font-bold mb-2">ไม่พบบทความที่ค้นหา</h3>
|
|
<p class="text-gray-600">ลองค้นหาด้วยคำอื่นหรือเลือกหมวดหมู่อื่น</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tags Cloud -->
|
|
<section class="reveal py-12 bg-white">
|
|
<div class="container mx-auto px-4 max-w-4xl">
|
|
<h3 class="text-2xl font-bold mb-6 text-center">หัวข้อที่น่าสนใจ</h3>
|
|
<div class="flex flex-wrap gap-3 justify-center">
|
|
{tags.map(tag => (
|
|
<a href={`/blog?tag=${tag}`} class="px-4 py-2 bg-gray-100 rounded-full text-gray-700 hover:bg-yellow-500 hover:text-white transition">
|
|
#{tag}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section - Always Yellow -->
|
|
<section id="cta" class="reveal py-20 bg-primary">
|
|
<div class="container mx-auto px-4 text-center">
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
|
|
พร้อมเริ่มต้น Digital Transformation แล้วหรือยัง?
|
|
</h2>
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto text-gray-800">
|
|
ปรึกษาผู้เชี่ยวชาญของเราฟรี เราพร้อมช่วยคุณวางกลยุทธ์ที่เหมาะกับธุรกิจ
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="/contact-us" class="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-colors shadow-lg inline-flex items-center justify-center gap-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
|
</svg>
|
|
ติดต่อเรา
|
|
</a>
|
|
<a href="/web-development" class="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors shadow-lg inline-flex items-center justify-center gap-2">
|
|
ดูบริการ
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
|
|
<script>
|
|
// Category Filter
|
|
const categoryBtns = document.querySelectorAll('.category-btn');
|
|
const blogCards = document.querySelectorAll('.blog-card');
|
|
const noResults = document.getElementById('no-results');
|
|
const blogGrid = document.getElementById('blog-grid');
|
|
|
|
categoryBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
// Update active state
|
|
categoryBtns.forEach(b => {
|
|
b.classList.remove('active', 'bg-yellow-500', 'text-white');
|
|
b.classList.add('bg-gray-100', 'text-gray-700');
|
|
});
|
|
btn.classList.add('active', 'bg-yellow-500', 'text-white');
|
|
btn.classList.remove('bg-gray-100', 'text-gray-700');
|
|
|
|
const category = btn.getAttribute('data-category');
|
|
|
|
// Filter cards
|
|
let visibleCount = 0;
|
|
blogCards.forEach(card => {
|
|
const cardCategory = card.getAttribute('data-category');
|
|
if (category === 'all' || cardCategory === category) {
|
|
(card as HTMLElement).style.display = 'block';
|
|
(card as HTMLElement).style.animation = 'fadeInUp 0.5s ease forwards';
|
|
visibleCount++;
|
|
} else {
|
|
(card as HTMLElement).style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Show/hide no results message
|
|
if (visibleCount === 0) {
|
|
noResults?.classList.remove('hidden');
|
|
blogGrid?.classList.add('hidden');
|
|
} else {
|
|
noResults?.classList.add('hidden');
|
|
blogGrid?.classList.remove('hidden');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Search Functionality
|
|
const searchInput = document.getElementById('blog-search');
|
|
searchInput?.addEventListener('input', (e) => {
|
|
const searchTerm = (e.target as HTMLInputElement).value.toLowerCase();
|
|
|
|
let visibleCount = 0;
|
|
blogCards.forEach(card => {
|
|
const title = card.querySelector('h2')?.textContent?.toLowerCase() || '';
|
|
const description = card.querySelector('p')?.textContent?.toLowerCase() || '';
|
|
const tags = card.getAttribute('data-tags')?.toLowerCase() || '';
|
|
|
|
if (title.includes(searchTerm) || description.includes(searchTerm) || tags.includes(searchTerm)) {
|
|
(card as HTMLElement).style.display = 'block';
|
|
visibleCount++;
|
|
} else {
|
|
(card as HTMLElement).style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Show/hide no results message
|
|
if (visibleCount === 0) {
|
|
noResults?.classList.remove('hidden');
|
|
blogGrid?.classList.add('hidden');
|
|
} else {
|
|
noResults?.classList.add('hidden');
|
|
blogGrid?.classList.remove('hidden');
|
|
}
|
|
});
|
|
|
|
// URL parameter for tag filter
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const tagParam = urlParams.get('tag');
|
|
if (tagParam) {
|
|
const searchInput = document.getElementById('blog-search') as HTMLInputElement;
|
|
if (searchInput) {
|
|
searchInput.value = tagParam;
|
|
searchInput.dispatchEvent(new Event('input'));
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|