fix(about): values grid 2x2 layout + Astro v6 content API

- about.astro: change .values-grid from 4 columns to 2x2 (max-width 900px)
  for visual balance with 4 cards. Drop the duplicate 2-col breakpoint
  that became redundant after the desktop change.
- about.astro: switch from deprecated entry.render() to render(entry)
  to match Astro v6 content collection API.
- content.config.ts: pages collection glob pattern '**/*.{md,mdx}'
  silently matched zero files when the collection only had root-level
  files; switch to '*.{md,mdx}' so the loader actually picks up
  about.md and home.md.
This commit is contained in:
Kunthawat Greethong
2026-06-08 00:21:05 +07:00
parent 3f1c0061c7
commit ca7f99ed41
2 changed files with 99 additions and 11 deletions

View File

@@ -12,6 +12,7 @@ const services = defineCollection({
badge: z.string(), badge: z.string(),
category: z.string(), category: z.string(),
objective: z.string(), objective: z.string(),
short_desc: z.string().optional(), // NEW: short description
usp_free_server: z.string().optional(), usp_free_server: z.string().optional(),
usp_content_edit: z.string().optional(), usp_content_edit: z.string().optional(),
}), }),
@@ -25,13 +26,29 @@ const portfolio = defineCollection({
schema: z.object({ schema: z.object({
name: z.string(), name: z.string(),
url: z.string().optional(), url: z.string().optional(),
category: z.string(), // webdev | ecommerce | marketing category: z.string(), // webdev | ecommerce | marketing | ai-consult | automation
category_label: z.string(), category_label: z.string(),
industry: z.string().optional(), // NEW: industry for filtering industry: z.string().optional(), // industry for filtering
thumbnail: z.string(), thumbnail: z.string().optional(), // optional now
description: z.string(), description: z.string().optional(),
what_we_did: z.string().optional(), // NEW: separate from description what_we_did: z.string().optional(),
result: z.string().optional(), // NEW: outcome metric result: z.string().optional(),
featured: z.boolean().optional(), // NEW: show on home page
order: z.number().optional(), // NEW: display order
case_study: z.boolean().optional(), // NEW: full case study body
}),
});
// =============================================================================
// PAGES — static page content (about, home, etc.)
// =============================================================================
const pages = defineCollection({
loader: glob({ pattern: '*.{md,mdx}', base: './src/content/pages' }),
schema: z.object({
title: z.string().optional(),
subtitle: z.string().optional(),
hero_badge: z.string().optional(),
badge: z.string().optional(),
}), }),
}); });
@@ -85,4 +102,5 @@ export const collections = {
faq, faq,
settings, settings,
blog, blog,
pages,
}; };

View File

@@ -4,17 +4,31 @@ import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import PageHero from '../components/PageHero.astro'; import PageHero from '../components/PageHero.astro';
import Icon from '../components/Icon.astro'; import Icon from '../components/Icon.astro';
import { getEntry, render } from 'astro:content';
import type { CollectionEntry } from 'astro:content';
const about = await getEntry('pages', 'about') as CollectionEntry<'pages'>;
const { Content } = await render(about);
--- ---
<Base title="เกี่ยวกับเรา | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot"> <Base title="เกี่ยวกับเรา | MoreminiMore | รับทำเว็บไซต์ SEO AI Chatbot">
<Navigation /> <Navigation />
<PageHero <PageHero
badge="เกี่ยวกับเรา" badge={about.data.hero_badge}
title="เิ่มยอดขาย ลดต้นทุน ลดเวลา — ให้ธุรกิจคุณ" title="เิ่มจากตรงนี้"
subtitle="บริษัท มอร์มินิมอร์ จำกัด — นโยบายของเราคือสร้างระบบที่ทำให้ลูกค้ามีกำไรมากขึ้น ไม่ใช่ทำเว็บไซต์ออกมาเยอะแล้วลืม เราเป็น Partner ที่นั่งทำงานข้างคุณจนระบบติดและใช้งานได้จริง" subtitle="บริษัท มอร์มินิมอร์ จำกัด — นโยบายของเราคือสร้างระบบที่ทำให้ลูกค้ามีกำไรมากขึ้น ไม่ใช่ทำเว็บไซต์ออกมาเยอะแล้วลืม เราเป็น Partner ที่นั่งทำงานข้างคุณจนระบบติดและใช้งานได้จริง"
/> />
<!-- ABOUT CONTENT (from about.md) -->
<section class="section">
<div class="container">
<article class="about-content">
<Content />
</article>
</div>
</section>
<!-- STORY SECTION --> <!-- STORY SECTION -->
<section class="section story-section"> <section class="section story-section">
<div class="container"> <div class="container">
@@ -177,6 +191,61 @@ import Icon from '../components/Icon.astro';
.section-soft { background: var(--color-bg-alt); } .section-soft { background: var(--color-bg-alt); }
.section-yellow { background: var(--color-primary); } .section-yellow { background: var(--color-primary); }
/* ABOUT CONTENT (from markdown) */
.about-content {
max-width: 760px;
margin: 0 auto;
font-size: 16px;
line-height: 1.8;
color: var(--color-gray-700);
}
.about-content :global(h1) {
font-family: var(--font-display);
font-size: 36px;
font-weight: 900;
color: var(--color-black);
margin-bottom: 24px;
}
.about-content :global(h2) {
font-family: var(--font-display);
font-size: 26px;
font-weight: 800;
color: var(--color-black);
margin: 48px 0 16px;
padding-top: 24px;
border-top: 1px solid var(--color-gray-200);
}
.about-content :global(h3) {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
color: var(--color-black);
margin: 32px 0 12px;
}
.about-content :global(p) {
margin-bottom: 16px;
}
.about-content :global(strong) {
color: var(--color-black);
font-weight: 700;
}
.about-content :global(blockquote) {
border-left: 4px solid var(--color-primary);
padding: 16px 20px;
margin: 24px 0;
background: var(--color-bg-alt);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-style: italic;
}
.about-content :global(ul),
.about-content :global(ol) {
padding-left: 24px;
margin-bottom: 16px;
}
.about-content :global(li) {
margin-bottom: 8px;
}
.section-badge { .section-badge {
display: inline-block; display: inline-block;
background: var(--color-primary); background: var(--color-primary);
@@ -257,11 +326,13 @@ import Icon from '../components/Icon.astro';
margin-top: 8px; margin-top: 8px;
} }
/* VALUES */ /* VALUES — 2x2 grid for visual balance with 4 cards */
.values-grid { .values-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 24px; gap: 24px;
max-width: 900px;
margin: 0 auto;
} }
.value-card { .value-card {
background: var(--color-white); background: var(--color-white);
@@ -384,7 +455,6 @@ import Icon from '../components/Icon.astro';
/* RESPONSIVE */ /* RESPONSIVE */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.story-grid { grid-template-columns: 1fr; gap: 40px; } .story-grid { grid-template-columns: 1fr; gap: 40px; }
.values-grid { grid-template-columns: repeat(2, 1fr); }
.process-grid { grid-template-columns: repeat(2, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); }
} }
@media (max-width: 640px) { @media (max-width: 640px) {