Pages
{pages.length} pages · {published} published
{menuFor &&
setMenuFor(null)} style={{ position: 'fixed', inset: 0, zIndex: 40 }}/>}
{['Page', 'URL', 'Status', 'Edited', 'Views 7d', ''].map((h, i) => )}
{pages.map((p, i) => (
go('website/editor')} style={{ position: 'relative', zIndex: menuFor === p.id ? 42 : 'auto', display: 'grid', gridTemplateColumns: '2fr 1.5fr 1fr 90px 90px 30px', gap: 12, padding: '12px 18px', borderBottom: i < pages.length - 1 ? `1px solid ${P.line}` : 'none', alignItems: 'center', cursor: 'pointer' }}
onMouseEnter={e => e.currentTarget.style.background = P.hover} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
{p.name}
{p.url}
{p.status}
{p.edited}
{p.views || '—'}
{ e.stopPropagation(); setMenuFor(menuFor === p.id ? null : p.id); }} style={{ cursor: 'pointer', display: 'inline-flex', padding: 3, borderRadius: 6, color: menuFor === p.id ? P.ink : P.ink4 }}>
{menuFor === p.id && (
e.stopPropagation()} style={{ position: 'absolute', top: 40, right: 12, zIndex: 41, background: P.card, border: `1px solid ${P.line}`, borderRadius: 10, boxShadow: P.shPop, padding: 5, width: 168 }}>
{menuItems(p).map((m, mi) => (
e.currentTarget.style.background = P.hover} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
{m[1]}
))}
)}
Opening a page row loads it in the visual editor. (Prototype: the editor always loads the Home model regardless of row.)
{editing &&
setEditing(null)} onSave={savePage}/>}
);
}
function PageEditor({ page, onClose, onSave }) {
const P = window.PX; const { toast } = window.useApp();
const isNew = !page;
const [name, setName] = React.useState(page ? page.name : '');
const [url, setUrl] = React.useState(page ? page.url : '');
const [status, setStatus] = React.useState(page ? page.status : 'Draft');
const slugify = (s) => '/' + s.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
const submit = () => {
if (!name.trim()) { toast('Give the page a name.', { tone: 'rose', icon: 'alert' }); return; }
onSave({ id: page ? page.id : undefined, name: name.trim(), url: (url.trim() || slugify(name)), status });
};
return (
Cancel{isNew ? 'Create page' : 'Save'}}>
{ setName(v); if (isNew && (!url || url === slugify(name))) setUrl(slugify(v)); }}/>
);
}
function SiteBlog() {
const P = window.PX; const { toast } = window.useApp();
const [posts, setPosts] = React.useState([
{ id: 1, title: 'The case for stubborn bread', status: 'Published', date: 'Feb 28', reads: 840, tags: ['bread', 'philosophy'], body: "Some breads take three days. Ours does. Here's why patience beats speed at the counter.", image: '#D9A84C' },
{ id: 2, title: 'Why we mill our own flour', status: 'Published', date: 'Feb 12', reads: 1240, tags: ['flour', 'process'], body: 'Freshly milled flour tastes different — and it changes how the dough behaves, too.', image: '#8C4A2A' },
{ id: 3, title: 'A class for nervous bakers', status: 'Published', date: 'Jan 30', reads: 620, tags: ['classes'], body: 'Our beginner class exists for one reason: sourdough scares people more than it should.', image: '#3A2A1C' },
{ id: 4, title: 'Behind the Saturday line', status: 'Draft', date: '—', reads: 0, tags: [], body: '', image: '#C99944' },
]);
const [editing, setEditing] = React.useState(null); // null | 'new' | post object
const published = posts.filter(p => p.status === 'Published').length;
const totalReads = posts.reduce((s, p) => s + p.reads, 0);
const savePost = (data, publish) => {
const status = publish ? 'Published' : 'Draft';
if (data.id) {
setPosts(ps => ps.map(p => p.id === data.id ? { ...p, ...data, status, date: publish && p.status !== 'Published' ? 'Just now' : p.date } : p));
} else {
const palette = ['#D9A84C', '#8C4A2A', '#3A2A1C', '#C99944', '#E0C080'];
setPosts(ps => [{ ...data, id: Date.now(), status, date: publish ? 'Just now' : '—', reads: 0, image: data.image || palette[ps.length % palette.length] }, ...ps]);
}
toast(publish ? 'Post published to honestloaves.com.' : 'Draft saved.', { tone: publish ? 'sage' : 'neutral', icon: publish ? 'check' : 'fileText' });
setEditing(null);
};
return (
Blog
{posts.length} posts · {published} published · {totalReads.toLocaleString()} reads this month
{posts.map((p) => (
setEditing(p)}>
{p.title}
{p.reads > 0 &&
{p.reads} reads · 4 min
}
))}
{editing &&
setEditing(null)} onSave={savePost}/>}
);
}
function BlogComposer({ post, onClose, onSave }) {
const P = window.PX;
const isNew = !post;
const [title, setTitle] = React.useState(post ? post.title : '');
const [body, setBody] = React.useState(post ? post.body : '');
const [tagsStr, setTagsStr] = React.useState(post ? post.tags.join(', ') : '');
const [publish, setPublish] = React.useState(post ? post.status === 'Published' : false);
const [cover, setCover] = React.useState(post ? post.image : null);
const tags = tagsStr.split(',').map(t => t.trim()).filter(Boolean);
const inputStyle = { width: '100%', boxSizing: 'border-box', border: `1px solid ${P.lineStrong}`, borderRadius: P.rCtl, padding: '9px 11px', fontSize: 13.5, color: P.ink, fontFamily: P.sans, background: P.card, outline: 'none' };
const COVER_COLORS = ['#D9A84C', '#8C4A2A', '#3A2A1C', '#C99944', '#E0C080', '#E8B860'];
const uploadCover = () => setCover(COVER_COLORS[Math.floor(Math.random() * COVER_COLORS.length)]);
const submit = () => onSave({ id: post ? post.id : undefined, title: title.trim() || 'Untitled post', body, tags, image: cover || undefined }, publish);
return (
{publish ? 'Will publish' : 'Draft'}}
title={isNew ? 'New post' : 'Edit post'} sub={isNew ? 'Write something worth reading.' : `Editing "${post.title}"`}
foot={<>Cancel{publish ? 'Publish' : 'Save draft'}}>
{cover ? (
Replace
setCover(null)}>Remove
) : (
Click to upload a cover image
)}