127 lines
3.1 KiB
Plaintext
127 lines
3.1 KiB
Plaintext
---
|
|
import Layout from '../../layouts/Layout.astro';
|
|
import { getCollection } from 'astro:content';
|
|
|
|
const posts = await getCollection('blog');
|
|
const sortedPosts = posts.sort((a, b) =>
|
|
b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
|
|
);
|
|
---
|
|
|
|
<Layout title="บล็อก" description="บทความและความรู้ด้าน Digital Transformation, AI และการตลาดออนไลน์สำหรับ SMEs ไทย">
|
|
<section class="page-header">
|
|
<div class="container">
|
|
<h1>บล็อก</h1>
|
|
<p>บทความและความรู้ด้านเทคโนโลยีและการตลาดสำหรับธุรกิจ SMEs ไทย</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="blog-list">
|
|
<div class="container">
|
|
<div class="posts-grid">
|
|
{sortedPosts.map((post) => (
|
|
<article class="post-card">
|
|
<h2>
|
|
<a href={`/blog/${post.slug}`}>{post.data.title}</a>
|
|
</h2>
|
|
<p class="post-meta">
|
|
<span>{post.data.author}</span>
|
|
<span>•</span>
|
|
<time datetime={post.data.pubDate.toISOString()}>
|
|
{post.data.pubDate.toLocaleDateString('th-TH', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})}
|
|
</time>
|
|
</p>
|
|
<p class="post-description">{post.data.description}</p>
|
|
<div class="post-tags">
|
|
{post.data.tags?.slice(0, 3).map((tag) => (
|
|
<span class="tag">{tag}</span>
|
|
))}
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Layout>
|
|
|
|
<style>
|
|
.page-header {
|
|
background: var(--color-primary);
|
|
padding: 4rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.page-header h1 {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.blog-list {
|
|
padding: 4rem 0;
|
|
}
|
|
|
|
.posts-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 2rem;
|
|
}
|
|
|
|
.post-card {
|
|
background: var(--color-neutral);
|
|
border: 1px solid var(--color-light-gray);
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.post-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.post-card h2 {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.post-card h2 a {
|
|
color: var(--color-secondary);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.post-card h2 a:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.post-meta {
|
|
font-size: 0.875rem;
|
|
color: var(--color-dark-gray);
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.post-description {
|
|
color: var(--color-dark-gray);
|
|
line-height: 1.6;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.post-tags {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tag {
|
|
background: var(--color-light-gray);
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem;
|
|
color: var(--color-dark-gray);
|
|
}
|
|
</style> |