kunthawat/emdash-blog-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: enable live editing on homepage with {...homepage.edit.field} attributes

Browse Source 
Added {...homepage.edit.X} spread attributes to all editable elements
(hero, features, comparison, CTA sections). This is what the live
editing UI needs to enable inline editing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kunthawat Greethong
2026-04-30 11:32:53 +07:00
parent d0868d000c
commit 1c928a1217
1 changed files with 27 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/pages/index.astro
View File

@@ -3,17 +3,8 @@ import { getEmDashEntry } from "emdash";
import Base from "../layouts/Base.astro";
const { entry: homepage } = await getEmDashEntry("homepage", "main");
const { hero_headline, hero_subtitle, hero_button_text, hero_button_url, hero_image,
features_section_title, features_section_subtitle,
feature_1_title, feature_1_description, feature_1_icon,
feature_2_title, feature_2_description, feature_2_icon,
feature_3_title, feature_3_description, feature_3_icon,
feature_4_title, feature_4_description, feature_4_icon,
feature_5_title, feature_5_description, feature_5_icon,
feature_6_title, feature_6_description, feature_6_icon,
comparison_title, comparison_subtitle,
cta_title, cta_subtitle, cta_button_text, cta_button_url,
footer_tagline, footer_about_text, footer_copyright } = homepage.data;
Astro.cache.set(homepage.cacheHint);
const d = homepage.data;
---
<Base title="EmDash CMS - Self-Hosted for Astro" description="Fully self-hosted CMS for Astro. No cloud required, fully local, with admin panel, authentication, and plugin system.">
<main class="landing">
@@ -21,21 +12,21 @@ const { hero_headline, hero_subtitle, hero_button_text, hero_button_url, hero_im
<section class="hero">
<div class="hero-content">
<div class="badge">Open Source • 10k+ Stars</div>
<h1 class="hero-title">
{hero_headline.split('\n').map((line: string) => <><span>{line}</span><br /></>)}
<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">
{hero_subtitle}
<p class="hero-subtitle" {...homepage.edit.hero_subtitle}>
{d.hero_subtitle}
</p>
<div class="hero-actions">
<a href={hero_button_url} class="btn btn-primary">
<a href={d.hero_button_url} class="btn btn-primary" {...homepage.edit.hero_button_text}>
<span class="btn-icon">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2"/>
<path d="M3 9h18M9 21V9"/>
</svg>
</span>
{hero_button_text}
{d.hero_button_text}
</a>
<a href="https://github.com/emdash-cms/emdash" class="btn btn-secondary" target="_blank">
View on GitHub
@@ -69,8 +60,8 @@ const { hero_headline, hero_subtitle, hero_button_text, hero_button_url, hero_im
<!-- Features Section -->
<section class="features" id="features">
<div class="section-header">
<h2 class="section-title">{features_section_title}</h2>
<p class="section-subtitle">{features_section_subtitle}</p>
<h2 class="section-title" {...homepage.edit.features_section_title}>{d.features_section_title}</h2>
<p class="section-subtitle" {...homepage.edit.features_section_subtitle}>{d.features_section_subtitle}</p>
</div>
<div class="features-grid">
<div class="feature-card">
@@ -81,8 +72,8 @@ const { hero_headline, hero_subtitle, hero_button_text, hero_button_url, hero_im
<path d="M2 12l10 5 10-5"/>
</svg>
</div>
<h3 class="feature-title">{feature_1_title}</h3>
<p class="feature-desc">{feature_1_description}</p>
<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>
<div class="feature-card">
<div class="feature-icon">
@@ -91,8 +82,8 @@ const { hero_headline, hero_subtitle, hero_button_text, hero_button_url, hero_im
<path d="M3 9h18M9 21V9"/>
</svg>
</div>
<h3 class="feature-title">{feature_2_title}</h3>
<p class="feature-desc">{feature_2_description}</p>
<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>
<div class="feature-card">
<div class="feature-icon">
@@ -100,8 +91,8 @@ const { hero_headline, hero_subtitle, hero_button_text, hero_button_url, hero_im
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</div>
<h3 class="feature-title">{feature_3_title}</h3>
<p class="feature-desc">{feature_3_description}</p>
<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>
<div class="feature-card">
<div class="feature-icon">
@@ -110,8 +101,8 @@ const { hero_headline, hero_subtitle, hero_button_text, hero_button_url, hero_im
<path d="M12 6v6l4 2"/>
</svg>
</div>
<h3 class="feature-title">{feature_4_title}</h3>
<p class="feature-desc">{feature_4_description}</p>
<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>
<div class="feature-card">
<div class="feature-icon">
@@ -120,8 +111,8 @@ const { hero_headline, hero_subtitle, hero_button_text, hero_button_url, hero_im
<polyline points="8 6 2 12 8 18"/>
</svg>
</div>
<h3 class="feature-title">{feature_5_title}</h3>
<p class="feature-desc">{feature_5_description}</p>
<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>
<div class="feature-card">
<div class="feature-icon">
@@ -132,8 +123,8 @@ const { hero_headline, hero_subtitle, hero_button_text, hero_button_url, hero_im
<line x1="16" y1="17" x2="8" y2="17"/>
</svg>
</div>
<h3 class="feature-title">{feature_6_title}</h3>
<p class="feature-desc">{feature_6_description}</p>
<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>
</div>
</section>
@@ -141,8 +132,8 @@ const { hero_headline, hero_subtitle, hero_button_text, hero_button_url, hero_im
<!-- Comparison Section -->
<section class="comparison">
<div class="section-header">
<h2 class="section-title">{comparison_title}</h2>
<p class="section-subtitle">{comparison_subtitle}</p>
<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>
<div class="comparison-table">
<div class="comparison-header">
@@ -186,10 +177,10 @@ const { hero_headline, hero_subtitle, hero_button_text, hero_button_url, hero_im
<!-- CTA Section -->
<section class="cta">
<div class="cta-content">
<h2 class="cta-title">{cta_title}</h2>
<p class="cta-subtitle">{cta_subtitle}</p>
<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-actions">
<a href={cta_button_url} class="btn btn-primary btn-large">{cta_button_text}</a>
<a href={d.cta_button_url} class="btn btn-primary btn-large" {...homepage.edit.cta_button_text}>{d.cta_button_text}</a>
</div>
</div>
</section>