fix: convert homepage text fields to richtext for live editing

Change field types from "text" to "richtext" and wrap content in PortableText
components. This enables proper inline live editing instead of jumping to backend.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kunthawat Greethong
2026-04-30 13:40:49 +07:00
parent 8094cec877
commit be63c72048
2 changed files with 177 additions and 33 deletions

View File

@@ -1,5 +1,6 @@
---
import { getEmDashEntry } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "../layouts/Base.astro";
const { entry: homepage } = await getEmDashEntry("homepage", "main");
@@ -17,9 +18,9 @@ const d = homepage.data;
<h1 class="hero-title" {...homepage.edit.hero_headline}>
{d.hero_headline.split('\n').map((line: string) => <><span>{line}</span><br /></>)}
</h1>
<p class="hero-subtitle" {...homepage.edit.hero_subtitle}>
{d.hero_subtitle}
</p>
<div class="hero-subtitle" {...homepage.edit.hero_subtitle}>
<PortableText value={d.hero_subtitle} />
</div>
<div class="hero-actions">
<a href={d.hero_button_url} class="btn btn-primary" {...homepage.edit.hero_button_text}>
<span class="btn-icon">
@@ -75,7 +76,7 @@ const d = homepage.data;
</svg>
</div>
<h3 class="feature-title" {...homepage.edit.feature_1_title}>{d.feature_1_title}</h3>
<p class="feature-desc" {...homepage.edit.feature_1_description}>{d.feature_1_description}</p>
<div class="feature-desc" {...homepage.edit.feature_1_description}><PortableText value={d.feature_1_description} /></div>
</div>
<div class="feature-card">
<div class="feature-icon">
@@ -85,7 +86,7 @@ const d = homepage.data;
</svg>
</div>
<h3 class="feature-title" {...homepage.edit.feature_2_title}>{d.feature_2_title}</h3>
<p class="feature-desc" {...homepage.edit.feature_2_description}>{d.feature_2_description}</p>
<div class="feature-desc" {...homepage.edit.feature_2_description}><PortableText value={d.feature_2_description} /></div>
</div>
<div class="feature-card">
<div class="feature-icon">
@@ -94,7 +95,7 @@ const d = homepage.data;
</svg>
</div>
<h3 class="feature-title" {...homepage.edit.feature_3_title}>{d.feature_3_title}</h3>
<p class="feature-desc" {...homepage.edit.feature_3_description}>{d.feature_3_description}</p>
<div class="feature-desc" {...homepage.edit.feature_3_description}><PortableText value={d.feature_3_description} /></div>
</div>
<div class="feature-card">
<div class="feature-icon">
@@ -104,7 +105,7 @@ const d = homepage.data;
</svg>
</div>
<h3 class="feature-title" {...homepage.edit.feature_4_title}>{d.feature_4_title}</h3>
<p class="feature-desc" {...homepage.edit.feature_4_description}>{d.feature_4_description}</p>
<div class="feature-desc" {...homepage.edit.feature_4_description}><PortableText value={d.feature_4_description} /></div>
</div>
<div class="feature-card">
<div class="feature-icon">
@@ -114,7 +115,7 @@ const d = homepage.data;
</svg>
</div>
<h3 class="feature-title" {...homepage.edit.feature_5_title}>{d.feature_5_title}</h3>
<p class="feature-desc" {...homepage.edit.feature_5_description}>{d.feature_5_description}</p>
<div class="feature-desc" {...homepage.edit.feature_5_description}><PortableText value={d.feature_5_description} /></div>
</div>
<div class="feature-card">
<div class="feature-icon">
@@ -126,7 +127,7 @@ const d = homepage.data;
</svg>
</div>
<h3 class="feature-title" {...homepage.edit.feature_6_title}>{d.feature_6_title}</h3>
<p class="feature-desc" {...homepage.edit.feature_6_description}>{d.feature_6_description}</p>
<div class="feature-desc" {...homepage.edit.feature_6_description}><PortableText value={d.feature_6_description} /></div>
</div>
</div>
</section>
@@ -135,7 +136,7 @@ const d = homepage.data;
<section class="comparison">
<div class="section-header">
<h2 class="section-title" {...homepage.edit.comparison_title}>{d.comparison_title}</h2>
<p class="section-subtitle" {...homepage.edit.comparison_subtitle}>{d.comparison_subtitle}</p>
<div class="section-subtitle" {...homepage.edit.comparison_subtitle}><PortableText value={d.comparison_subtitle} /></div>
</div>
<div class="comparison-table">
<div class="comparison-header">
@@ -180,7 +181,7 @@ const d = homepage.data;
<section class="cta">
<div class="cta-content">
<h2 class="cta-title" {...homepage.edit.cta_title}>{d.cta_title}</h2>
<p class="cta-subtitle" {...homepage.edit.cta_subtitle}>{d.cta_subtitle}</p>
<div class="cta-subtitle" {...homepage.edit.cta_subtitle}><PortableText value={d.cta_subtitle} /></div>
<div class="cta-actions">
<a href={d.cta_button_url} class="btn btn-primary btn-large" {...homepage.edit.cta_button_text}>{d.cta_button_text}</a>
</div>