Claude
a2590812e0
Replace the plain textarea for the homepage_teaser setting with the shared TipTap rich-text editor, and render the teaser as sanitized HTML in the portal hero's default layout. - SettingsAdmin: teaser field now uses RichTextEditor (lazy-loaded, code-split like PostEditor); rich fields render in a <div> wrapper instead of <label>. - HeroElement: text-block lines flagged `html` render sanitized HTML. - heroLayout: the default-layout teaser line is now an HTML line. - admin.controller: sanitize homepage_teaser against the body allowlist on save. - theme.css: collapse the teaser's nested block margins in the hero. Closes #48 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
109 lines
4.0 KiB
JavaScript
109 lines
4.0 KiB
JavaScript
// Shared hero-layout helpers used by the public portal and the admin editor.
|
|
|
|
export const DEFAULT_HERO_IMAGE = '/assets/img/uomysticmoon-main-hero.png'
|
|
|
|
// The original hand-tuned multi-gradient hero background (used only for the
|
|
// untouched default so the live page is byte-for-byte unchanged until edited).
|
|
export const HERO_BG =
|
|
"linear-gradient(90deg,rgba(11,15,20,0.34) 0%,rgba(11,15,20,0.5) 36%,rgba(11,15,20,0.78) 62%,rgba(11,15,20,0.66) 100%),linear-gradient(180deg,rgba(11,15,20,0.08) 0%,rgba(11,15,20,0.72) 100%),url('" +
|
|
DEFAULT_HERO_IMAGE +
|
|
"')"
|
|
|
|
// Single-stop dark overlay driven by the editor's opacity slider.
|
|
export function buildOverlay(opacity) {
|
|
return `linear-gradient(180deg,rgba(11,15,20,${opacity * 0.15}) 0%,rgba(11,15,20,${opacity}) 100%)`
|
|
}
|
|
|
|
// Background style for a layout. When `isDefault` and no custom image is set, use
|
|
// the exact original gradient stack; otherwise compose the overlay over the image.
|
|
export function heroBackground(layout, { isDefault = false } = {}) {
|
|
const bg = layout.background || {}
|
|
const backgroundImage =
|
|
isDefault && !bg.image_url
|
|
? HERO_BG
|
|
: `${buildOverlay(layout.overlay?.opacity ?? 0.72)}, url('${bg.image_url || DEFAULT_HERO_IMAGE}')`
|
|
return {
|
|
backgroundColor: 'var(--bg-deep)',
|
|
backgroundImage,
|
|
backgroundPosition: `${bg.position_x || 'left'} ${bg.position_y || 'center'}`,
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundSize: bg.size || 'cover',
|
|
}
|
|
}
|
|
|
|
// Parse a stored layout string; return null if missing/malformed/wrong version.
|
|
export function parseLayout(str) {
|
|
try {
|
|
const l = str ? JSON.parse(str) : null
|
|
return l && l.version === 1 && Array.isArray(l.elements) ? l : null
|
|
} catch {
|
|
return null
|
|
}
|
|
}
|
|
|
|
// The current hardcoded hero as a HeroLayout, so the page is unchanged until
|
|
// staff publish their own. Font sizes use the existing clamp() strings so the
|
|
// default stays responsive (editor-created text uses px).
|
|
export function defaultLayout(teaser) {
|
|
return {
|
|
version: 1,
|
|
background: { image_url: null, position_x: 'left', position_y: 'center', size: 'cover' },
|
|
overlay: { opacity: 0.72 },
|
|
elements: [
|
|
{
|
|
id: 'default-text',
|
|
type: 'text_block',
|
|
x: 50,
|
|
y: 42,
|
|
z: 1,
|
|
anchor: 'center',
|
|
props: {
|
|
align: 'center',
|
|
width: 760,
|
|
lines: [
|
|
{ text: 'Private shard project', tag: 'span', fontSize: '0.74rem', color: '#c2d2e6', weight: 700, letterSpacing: '0.22em', transform: 'uppercase', font: 'sans' },
|
|
{ text: 'UOMysticmoon', tag: 'h1', fontSize: 'clamp(3rem,8.5vw,5.75rem)', color: 'var(--head)', weight: 600, letterSpacing: '0.02em', lineHeight: 1, font: 'display', marginTop: 14 },
|
|
{ text: 'A private Ultima Online world in progress', tag: 'p', fontSize: '1.32rem', color: '#dbe2ea', italic: true, marginTop: 22 },
|
|
{ text: teaser, tag: 'div', html: true, fontSize: '1.06rem', color: '#c4cdd8', maxWidth: 600, marginTop: 22 },
|
|
],
|
|
},
|
|
},
|
|
{
|
|
id: 'default-buttons',
|
|
type: 'buttons',
|
|
x: 50,
|
|
y: 72,
|
|
z: 2,
|
|
anchor: 'center',
|
|
props: {
|
|
align: 'center',
|
|
gap: 12,
|
|
items: [
|
|
{ label: 'Enter the Website', to: '/site', variant: 'primary' },
|
|
{ label: 'Open the Wiki', to: '/wiki', variant: 'ghost' },
|
|
],
|
|
},
|
|
},
|
|
{
|
|
id: 'default-quick-links',
|
|
type: 'buttons',
|
|
x: 50,
|
|
y: 85,
|
|
z: 3,
|
|
anchor: 'center',
|
|
props: {
|
|
align: 'center',
|
|
gap: 10,
|
|
items: [
|
|
{ label: 'News', to: '/site/news', variant: 'ghost' },
|
|
{ label: 'Screenshots', to: '/site/screenshots', variant: 'ghost' },
|
|
{ label: 'Five on Friday', to: '/site/five-on-friday', variant: 'ghost' },
|
|
{ label: 'Monthly Newsletter', to: '/site/newsletter', variant: 'ghost' },
|
|
{ label: 'About', to: '/site/about', variant: 'ghost' },
|
|
],
|
|
},
|
|
},
|
|
],
|
|
}
|
|
}
|