108 lines
4.2 KiB
JavaScript
108 lines
4.2 KiB
JavaScript
import { useMemo } from 'react'
|
|
import { Link, useParams } from 'react-router-dom'
|
|
import PublicLayout from '../../components/PublicLayout.jsx'
|
|
import { Loading, ErrorState } from '../../components/PageState.jsx'
|
|
import { useAsync } from '../../lib/useAsync.js'
|
|
import { longDate } from '../../lib/format.js'
|
|
import { api } from '../../api/client.js'
|
|
|
|
function slugify(text) {
|
|
return text
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/(^-|-$)/g, '')
|
|
}
|
|
|
|
// Parse the stored body HTML: assign ids to <h2> headings and collect a TOC.
|
|
function buildArticle(body) {
|
|
if (!body) return { html: '', toc: [] }
|
|
if (typeof window === 'undefined' || !window.DOMParser) return { html: body, toc: [] }
|
|
const doc = new DOMParser().parseFromString(body, 'text/html')
|
|
const toc = []
|
|
doc.querySelectorAll('h2').forEach((h, i) => {
|
|
const id = slugify(h.textContent || '') || `section-${i}`
|
|
h.id = id
|
|
toc.push({ id, label: h.textContent })
|
|
})
|
|
return { html: doc.body.innerHTML, toc }
|
|
}
|
|
|
|
export default function WikiArticle() {
|
|
const { slug } = useParams()
|
|
const { loading, error, data: page } = useAsync(() => api.wikiPage(slug), [slug])
|
|
const { html, toc } = useMemo(() => buildArticle(page?.body), [page])
|
|
|
|
return (
|
|
<PublicLayout section="wiki">
|
|
<div className="shell page-body" style={{ paddingTop: 40 }}>
|
|
{loading && <Loading />}
|
|
{error && (
|
|
<ErrorState message={error.status === 404 ? 'That wiki page could not be found.' : 'Could not load this page.'} />
|
|
)}
|
|
{page && (
|
|
<div className={toc.length ? 'wiki-grid' : ''}>
|
|
{toc.length > 0 && (
|
|
<aside
|
|
style={{
|
|
position: 'sticky',
|
|
top: 90,
|
|
border: '1px solid var(--line)',
|
|
borderRadius: 10,
|
|
padding: 20,
|
|
background: 'rgba(11,22,48,0.32)',
|
|
}}
|
|
>
|
|
<p
|
|
className="sans"
|
|
style={{ margin: '0 0 12px', color: 'var(--accent)', fontSize: '0.66rem', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase' }}
|
|
>
|
|
On this page
|
|
</p>
|
|
<nav style={{ display: 'flex', flexDirection: 'column', gap: 9, fontFamily: 'var(--sans)', fontSize: '0.9rem' }}>
|
|
{toc.map((t) => (
|
|
<a
|
|
key={t.id}
|
|
href={`#${t.id}`}
|
|
style={{ color: 'var(--text)', textDecoration: 'none', borderLeft: '2px solid var(--line)', paddingLeft: 12 }}
|
|
>
|
|
{t.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
)}
|
|
|
|
<article style={!toc.length ? { maxWidth: 760, margin: '0 auto' } : undefined}>
|
|
<p className="sans" style={{ margin: '0 0 12px', display: 'flex', gap: 8, color: 'var(--dim)', fontSize: '0.82rem' }}>
|
|
<Link to="/wiki" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
|
|
Wiki
|
|
</Link>
|
|
<span>/</span>
|
|
<span>{page.title}</span>
|
|
</p>
|
|
<h1 className="display" style={{ margin: 0, fontSize: 'clamp(2.2rem,5vw,3.2rem)', lineHeight: 1.05, color: 'var(--head)' }}>
|
|
{page.title}
|
|
</h1>
|
|
<p className="sans" style={{ margin: '18px 0 0', color: 'var(--dim)', fontSize: '0.78rem', letterSpacing: '0.04em' }}>
|
|
Last updated {longDate(page.updated_at) || '—'}
|
|
</p>
|
|
<div style={{ height: 1, background: 'var(--line)', margin: '30px 0' }} />
|
|
{html ? (
|
|
<div className="prose" dangerouslySetInnerHTML={{ __html: html }} />
|
|
) : (
|
|
<p className="muted">This page has no content yet.</p>
|
|
)}
|
|
|
|
<nav style={{ display: 'flex', justifyContent: 'flex-start', marginTop: 40 }}>
|
|
<Link to="/wiki" className="pill">
|
|
← All wiki pages
|
|
</Link>
|
|
</nav>
|
|
</article>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</PublicLayout>
|
|
)
|
|
}
|