fix: add hero_image live editing with Image component from emdash/ui

Use Image component instead of img tag. Add hero_image to hero-visual
container with {...homepage.edit.hero_image} for live editing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kunthawat Greethong
2026-04-30 11:45:22 +07:00
parent 1c928a1217
commit 07725f9023

View File

@@ -1,5 +1,6 @@
--- ---
import { getEmDashEntry } from "emdash"; import { getEmDashEntry } from "emdash";
import { Image } from "emdash/ui";
import Base from "../layouts/Base.astro"; import Base from "../layouts/Base.astro";
const { entry: homepage } = await getEmDashEntry("homepage", "main"); const { entry: homepage } = await getEmDashEntry("homepage", "main");
@@ -33,7 +34,11 @@ const d = homepage.data;
</a> </a>
</div> </div>
</div> </div>
<div class="hero-visual"> <div class="hero-visual" {...homepage.edit.hero_image}>
{d.hero_image?.src && (
<Image image={d.hero_image} />
)}
{!d.hero_image?.src && (
<div class="code-window"> <div class="code-window">
<div class="code-header"> <div class="code-header">
<span class="dot red"></span> <span class="dot red"></span>