Claude
a5a8c1930c
Extend the wiki's RichTextEditor to the Posts editor and close the stored-XSS gap on public post bodies. - RichTextEditor: add `variant` prop — `full` (wiki), `post` (no internal wiki-page link picker), `minimal` (image-only, for Screenshots captions). Toolbar sections rendered conditionally. - PostEditor: replace the body textarea with a lazy-loaded RichTextEditor in Suspense; variant chosen by category (minimal for screenshots, post otherwise). - posts.model: sanitize body via shared cleanBody on create/update, treat an empty TipTap `<p></p>` as null, and auto-derive the excerpt from the body (max 280 chars) when left blank. - sanitizeHtml util: add deriveExcerpt() helper. - FiveOnFriday / NewsletterIssue: wrap dangerouslySetInnerHTML with DOMPurify.sanitize() as defense-in-depth on render. No schema or dependency changes. Verified end-to-end against the local stack: 24/24 API assertions and a full UI round-trip across all four post categories. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
51 lines
2.2 KiB
JavaScript
51 lines
2.2 KiB
JavaScript
import DOMPurify from 'dompurify'
|
|
import PublicLayout from '../../components/PublicLayout.jsx'
|
|
import PageHeader from '../../components/PageHeader.jsx'
|
|
import { Loading, ErrorState, EmptyState } from '../../components/PageState.jsx'
|
|
import { useAsync } from '../../lib/useAsync.js'
|
|
import { longDate } from '../../lib/format.js'
|
|
import { api } from '../../api/client.js'
|
|
|
|
export default function FiveOnFriday() {
|
|
const { loading, error, data } = useAsync(() => api.posts('five-on-friday'))
|
|
const issues = data || []
|
|
|
|
return (
|
|
<PublicLayout section="website">
|
|
<div className="shell-mid page-body">
|
|
<PageHeader
|
|
eyebrow="Community"
|
|
title="Five on Friday"
|
|
lead="Five short notes from the week — what we built, what is next, and one small thing we are excited about."
|
|
/>
|
|
<section style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
|
|
{loading && <Loading />}
|
|
{error && <ErrorState message="Could not load Five on Friday right now." />}
|
|
{!loading && !error && issues.length === 0 && (
|
|
<EmptyState>No Five on Friday posts yet — the first one is coming soon.</EmptyState>
|
|
)}
|
|
{issues.map((it) => (
|
|
<article key={it.id} className="panel" style={{ padding: 30 }}>
|
|
<div
|
|
className="sans"
|
|
style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18, fontSize: '0.74rem', letterSpacing: '0.08em', textTransform: 'uppercase' }}
|
|
>
|
|
<span style={{ color: 'var(--accent)', fontWeight: 700 }}>Five on Friday</span>
|
|
<span className="dim">{longDate(it.published_at || it.created_at)}</span>
|
|
</div>
|
|
<h2 className="display" style={{ margin: '0 0 12px', fontSize: '1.5rem', color: 'var(--head)' }}>
|
|
{it.title}
|
|
</h2>
|
|
{it.body ? (
|
|
<div className="prose" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(it.body) }} />
|
|
) : (
|
|
it.excerpt && <p style={{ margin: 0, color: 'var(--text)' }}>{it.excerpt}</p>
|
|
)}
|
|
</article>
|
|
))}
|
|
</section>
|
|
</div>
|
|
</PublicLayout>
|
|
)
|
|
}
|