const { useState, useEffect, useRef, useMemo } = React;
// ——— Tweaks wiring ——————————————————————————————————————————
function useSiteTheme() {
const defaults = window.TWEAK_DEFAULTS || {};
const [tweaks, setTweak] = useTweaks(defaults);
useEffect(() => {
const r = document.documentElement;
r.style.setProperty('--bg', tweaks.bgColor || '#EDE4D3');
r.style.setProperty('--gold', tweaks.accentColor || '#8B6B3D');
r.style.setProperty('--gold-deep', shadeColor(tweaks.accentColor || '#8B6B3D', -28));
r.style.setProperty('--body', tweaks.bodyColor || '#2B1810');
r.style.setProperty('--body-2', shadeColor(tweaks.bodyColor || '#2B1810', 12));
r.style.setProperty('--serif', `'${tweaks.fontSerif || 'Cormorant Garamond'}', Georgia, serif`);
const washEl = document.querySelector('.bg-wash-wrap');
if (washEl) washEl.style.opacity = ((tweaks.bgOpacity || 100) / 100) * 0.06;
document.querySelectorAll('.hero-title').forEach(el => {
el.style.fontSize = `clamp(${Math.round(68 * (tweaks.heroSize / 100))}px, ${10 * (tweaks.heroSize / 100)}vw, ${Math.round(132 * (tweaks.heroSize / 100))}px)`;
});
}, [tweaks]);
return { tweaks, setTweak };
}
function shadeColor(hex, pct) {
try {
let r = parseInt(hex.slice(1,3),16), g = parseInt(hex.slice(3,5),16), b = parseInt(hex.slice(5,7),16);
r = Math.max(0, Math.min(255, r + pct)); g = Math.max(0, Math.min(255, g + pct)); b = Math.max(0, Math.min(255, b + pct));
return `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`;
} catch { return hex; }
}
const SERIF_OPTIONS = [
'Cormorant Garamond',
'Playfair Display',
'EB Garamond',
'Libre Baskerville',
];
function TweaksLayer() {
const { tweaks, setTweak } = useSiteTheme();
return (
setTweak('bgColor', v)} />
setTweak('accentColor', v)} />
setTweak('bodyColor', v)} />
setTweak('bgOpacity', v)} />
setTweak('fontSerif', v)} />
setTweak('heroSize', v)} />
);
}
// ——— Tiny hash-router ————————————————————————————————————————
function parseHash() {
const h = (window.location.hash || '#/').replace(/^#/, '');
const parts = h.split('/').filter(Boolean);
if (parts.length === 0) return { name: 'home' };
if (parts[0] === 'escritos' && parts.length === 1) return { name: 'escritos' };
if (parts[0] === 'escritos' && parts[1]) return { name: 'poem', slug: parts[1] };
if (parts[0] === 'sobre') return { name: 'about' };
return { name: 'home' };
}
function navigate(path) {
window.location.hash = path;
window.scrollTo({ top: 0, behavior: 'instant' });
}
function useRoute() {
const [route, setRoute] = useState(parseHash());
useEffect(() => {
const onHash = () => setRoute(parseHash());
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
return route;
}
// ——— Placeholder imagery (botanical color washes) ————————————
const IMG_PALETTES = {
lavender: { a: '#B9A9CE', b: '#8B7AA8', c: '#F1E9DA', label: 'lavanda' },
olive: { a: '#B8C09A', b: '#7A8F66', c: '#F2EAD4', label: 'olivos' },
fig: { a: '#8A6A4E', b: '#5C3F2A', c: '#E8DBC5', label: 'higuera' },
geraniums:{ a: '#C97560', b: '#9A4330', c: '#F5E5D4', label: 'geranios' },
letters: { a: '#D9C6A5', b: '#A3885E', c: '#F3E8D2', label: 'cartas' },
citrus: { a: '#D9A25E', b: '#A57235', c: '#F5E8CC', label: 'membrillo' },
jasmine: { a: '#E8DDCC', b: '#B9A98A', c: '#FBF5E8', label: 'jazmín' },
almond: { a: '#E6D1C8', b: '#B88C7A', c: '#F6EADF', label: 'almendro' },
poppy: { a: '#D96A58', b: '#A13A28', c: '#F3DCC7', label: 'amapolas' },
};
function PlaceholderImage({ variant = 'lavender', label = '' }) {
const p = IMG_PALETTES[variant] || IMG_PALETTES.lavender;
// Soft botanical pattern: gradient base + leaf ring + label
return (
{(label || p.label).toUpperCase()}
);
}
// ——— Common ————————————————————————————————————————————————
function Divider() {
return (
);
}
function ScrollReveal({ children, delay = 0, className = '' }) {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
if (!ref.current) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setTimeout(() => setShown(true), delay);
io.disconnect();
}
});
},
{ threshold: 0.15 }
);
io.observe(ref.current);
return () => io.disconnect();
}, [delay]);
return (
{children}
);
}
// ——— Nav ————————————————————————————————————————————————————
function Nav({ route }) {
const [scrolled, setScrolled] = useState(false);
const [mobileOpen, setMobileOpen] = useState(false);
useEffect(() => {
const fn = () => setScrolled(window.scrollY > 40);
window.addEventListener('scroll', fn, { passive: true });
fn();
return () => window.removeEventListener('scroll', fn);
}, []);
useEffect(() => { setMobileOpen(false); }, [route]);
const links = [
['Inicio', '/', 'home'],
['Escritos', '/escritos', 'escritos'],
['Sobre mí', '/sobre', 'about'],
];
const activeKey = route.name === 'poem' ? 'escritos' : route.name;
return (
<>
{links.map(([label, path, key]) => (
navigate(path)}>
{label}
))}
);
}
// ——— Custom select ——————————————————————————————————————
function CustomSelect({ value, options, onChange, ariaLabel }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
document.addEventListener('mousedown', onDoc);
document.addEventListener('keydown', onKey);
return () => {
document.removeEventListener('mousedown', onDoc);
document.removeEventListener('keydown', onKey);
};
}, [open]);
const current = options.find(o => String(o.value) === String(value));
return (
setOpen(v => !v)}>
{current ? current.label : ''}
{open && (
{options.map(o => (
{ onChange(o.value); setOpen(false); }}>
{o.label}
))}
)}
);
}
// ——— Hero ———————————————————————————————————————————————————
function Hero() {
return (
— un jardín de palabras —
Auropoesía
Poesía de Aurelia
Versos escritos despacio, a la luz de la ventana,
navigate('/escritos')}>
Leer los escritos
);
}
// ——— Home: featured row ——————————————————————————————————————
function HomeFeatured() {
const featured = window.POEMS.slice(0, 3);
return (
Escritos recientes
Tres del cuaderno
{featured.map((p, i) => (
))}
navigate('/escritos')}>
Ver todos los escritos
);
}
// ——— About ——————————————————————————————————————————————————
function About() {
return (
Sobre mí
Un jardín, una libreta,
Me llamo Aurelia. Nací en un pueblo de Cuenca donde los veranos olían a higo maduro
y las ventanas se dejaban abiertas hasta muy tarde. Toda mi vida he escrito poemas —
a lápiz, en libretas de hule, entre la lista de la compra y las recetas de mi madre.
Fui maestra durante cuarenta y dos años. Enseñé a leer a tres generaciones de niños,
pero solo ahora — con las manos algo más lentas y el tiempo por fin mío — me atrevo
a compartir lo que guardé siempre en el cajón de abajo.
Bienvenido a mi jardín.
— Aurelia
);
}
// ——— Poem card —————————————————————————————————————————————
function PoemCard({ poem, index = 0 }) {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
if (!ref.current) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setTimeout(() => setShown(true), (index % 2) * 60);
io.disconnect();
}
});
},
{ threshold: 0.12 }
);
io.observe(ref.current);
return () => io.disconnect();
}, [index]);
return (
navigate('/escritos/' + poem.slug)}
role="link" tabIndex={0}
onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); navigate('/escritos/' + poem.slug); } }}
aria-label={`Leer ${poem.title}`}>
{poem.year}
{poem.title}
{poem.excerpt}
Leer el poema
→
);
}
// ——— Escritos (index with search + year filter + pagination) ———
const PER_PAGE = 12;
function Escritos() {
const [q, setQ] = useState('');
const [year, setYear] = useState('all');
const [page, setPage] = useState(1);
const years = useMemo(() => {
const s = new Set(window.POEMS.map(p => p.year));
return [...s].sort((a, b) => b - a);
}, []);
const filtered = useMemo(() => {
const needle = q.trim().toLowerCase();
return window.POEMS.filter(p => {
if (year !== 'all' && String(p.year) !== String(year)) return false;
if (!needle) return true;
const hay = [p.title, p.body, p.excerpt, ...(p.tags || [])].join(' ').toLowerCase();
return hay.includes(needle);
});
}, [q, year]);
useEffect(() => { setPage(1); }, [q, year]);
const totalPages = Math.max(1, Math.ceil(filtered.length / PER_PAGE));
const curPage = Math.min(page, totalPages);
const pageItems = filtered.slice((curPage - 1) * PER_PAGE, curPage * PER_PAGE);
return (
Escritos
El cuaderno,
Poemas reunidos a lo largo de los años. Busca por palabra,
filtra por año, o simplemente déjate llevar.
{/* Filter bar */}
({ value: y, label: String(y) })),
]}
/>
{/* Grid */}
{pageItems.length === 0 ? (
No hay escritos que coincidan con esa búsqueda.
) : (
{pageItems.map((p, i) => (
))}
);
}
function Pagination({ page, totalPages, onPage }) {
// Build page tokens with ellipses: 1 ... p-1 p p+1 ... N
const tokens = [];
const push = (t) => tokens.push(t);
const set = new Set();
const add = (n) => { if (n >= 1 && n <= totalPages && !set.has(n)) { set.add(n); push(n); } };
add(1);
for (let i = page - 1; i <= page + 1; i++) add(i);
add(totalPages);
// sort and inject ellipses
const sorted = [...set].sort((a, b) => a - b);
const withDots = [];
for (let i = 0; i < sorted.length; i++) {
if (i > 0 && sorted[i] - sorted[i - 1] > 1) withDots.push('…');
withDots.push(sorted[i]);
}
return (
onPage(page - 1)}>← Anterior
{withDots.map((t, i) =>
t === '…'
? ·
: onPage(t)}>{t}
)}
onPage(page + 1)}>Siguiente →
);
}
// ——— Poem page ——————————————————————————————————————————————
function PoemPage({ slug }) {
const poem = window.POEMS.find(p => p.slug === slug);
if (!poem) {
return (
404
Este poema se extravió en el cajón.
navigate('/escritos')}>
← Volver a los escritos
);
}
return (
{poem.title}
{poem.year}
{poem.body}
— Aurelia
navigate('/escritos')}>
← Volver a los escritos
);
}
// ——— Footer —————————————————————————————————————————————————
function Footer() {
const year = new Date().getFullYear();
return (
);
}
// ——— App ————————————————————————————————————————————————————
function App() {
const route = useRoute();
return (
<>
{route.name === 'home' && (
<>