Make the hero Moon image configurable via props.src

The Moon stays a dedicated, first-class hero element — only its image
source becomes configurable. Adds optional src/alt props alongside the
existing size/glow.

- HeroElement: the moon renders props.src when present, else falls back to
  the default /assets/img/hero-moon.png. Size, glow, and animation are
  unchanged. alt is now props.alt (default '', same as before).
- HeroEditor MoonPanel: adds an image upload (reusing the existing shared
  api.admin.upload workflow, same as the image/background panels) that sets
  props.src, an alt-text field, and a "Use default" reset. Size/glow
  controls unchanged.

Fully backwards compatible: existing layouts with only size/glow and no
src render exactly as today via the fallback. No DB, API, or hero-JSON
changes; no migration.
This commit is contained in:
2026-07-02 23:38:03 -05:00
parent ea46b5d346
commit 6ab3e47d38
2 changed files with 44 additions and 5 deletions

View File

@@ -107,12 +107,15 @@ function content(element) {
case 'buttons':
return <Buttons props={element.props || {}} />
case 'moon': {
const size = element.props?.size || 96
const glow = element.props?.glow ?? 0.45
const props = element.props || {}
const size = props.size || 96
const glow = props.glow ?? 0.45
// Image source is configurable; old layouts with no src fall back to the
// default hero moon so they render exactly as before. Size/glow unchanged.
return (
<img
src={MOON_IMAGE}
alt=""
src={props.src || MOON_IMAGE}
alt={props.alt || ''}
draggable={false}
style={{
width: size,