ede8e32591
- Add product detail page ([slug].astro) with table rendering - Display productTables from site-config.ts on product pages - Add responsive font scaling for large screens (1280px+) - Base font scales from 16px to 24px on 4K displays - All text elements use responsive sizing (md/lg/xl breakpoints) - Tables styled with green headers and alternating rows - Add comprehensive documentation (FIXES_SUMMARY.md) Fixes: - Product specification tables now visible on product pages - Font too small on large screens - now responsive
52 lines
1.7 KiB
Plaintext
52 lines
1.7 KiB
Plaintext
---
|
|
import type { CollectionEntry } from 'astro:content';
|
|
|
|
interface Props {
|
|
post: CollectionEntry<'blog'>;
|
|
}
|
|
|
|
const { post } = Astro.props;
|
|
const { title, excerpt, date, author, category, categories, image, featuredImage } = post.data;
|
|
|
|
// Support both 'category' and 'categories' field names
|
|
const postCategory = category || (Array.isArray(categories) ? categories[0] : 'ทั่วไป');
|
|
// Support both 'image' and 'featuredImage' field names
|
|
const postImage = image || featuredImage || '/images/2021/03/ppr-pipe_000C.jpg';
|
|
---
|
|
|
|
<a href={`/blog/${post.slug}`} class="card group">
|
|
<div class="relative aspect-video bg-secondary-100 overflow-hidden">
|
|
<img
|
|
src={postImage}
|
|
alt={title}
|
|
class="object-cover w-full h-48 group-hover:scale-105 transition-transform duration-300"
|
|
loading="lazy"
|
|
/>
|
|
<div class="absolute top-4 left-4">
|
|
<span class="industrial-badge">{postCategory}</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<time class="text-sm text-secondary-500">
|
|
{new Date(date).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
|
|
</time>
|
|
|
|
<h3 class="mt-2 text-xl font-bold text-secondary-900 group-hover:text-primary-600 transition-colors line-clamp-2">
|
|
{title}
|
|
</h3>
|
|
|
|
{excerpt && (
|
|
<p class="mt-3 text-secondary-600 text-sm line-clamp-3">
|
|
{excerpt}
|
|
</p>
|
|
)}
|
|
|
|
<div class="mt-4 flex items-center text-primary-600 font-medium">
|
|
<span>อ่านต่อ</span>
|
|
<svg class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</a>
|