Frontend update
This commit is contained in:
56
client/src/routes/wiki/Wiki.jsx
Normal file
56
client/src/routes/wiki/Wiki.jsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
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 { api } from '../../api/client.js'
|
||||
|
||||
const ROMAN = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII']
|
||||
|
||||
// Short blurbs for the seeded categories (the list endpoint returns title/slug only).
|
||||
const BLURBS = {
|
||||
'new-player-guide': 'First steps, basic survival, and early goals.',
|
||||
'maps-atlas': 'Regions, towns, routes, and travel notes.',
|
||||
systems: 'Shard mechanics and custom features.',
|
||||
items: 'Equipment, treasures, rewards, and curiosities.',
|
||||
monsters: 'Creatures, bosses, spawns, and dangers.',
|
||||
crafting: 'Professions, materials, recipes, and tools.',
|
||||
lore: 'Stories, places, factions, and mysteries.',
|
||||
rules: 'Player conduct, shard expectations, and policies.',
|
||||
}
|
||||
|
||||
export default function Wiki() {
|
||||
const { loading, error, data } = useAsync(() => api.wiki())
|
||||
const pages = data || []
|
||||
|
||||
return (
|
||||
<PublicLayout section="wiki">
|
||||
<div className="shell page-body">
|
||||
<PageHeader
|
||||
center
|
||||
eyebrow="Knowledge base"
|
||||
title="Mysticmoon Wiki"
|
||||
lead="A calm starting point for shard guides, maps, systems, items, monsters, crafting, lore, and rules."
|
||||
/>
|
||||
{loading && <Loading />}
|
||||
{error && <ErrorState message="Could not load the wiki right now." />}
|
||||
{!loading && !error && pages.length === 0 && <EmptyState>No wiki pages yet.</EmptyState>}
|
||||
<section className="grid-4">
|
||||
{pages.map((p, i) => (
|
||||
<Link key={p.slug} to={`/wiki/${p.slug}`} className="card" style={{ padding: 22 }}>
|
||||
<span className="display" style={{ color: 'var(--accent)', fontSize: '1.4rem', marginBottom: 10 }}>
|
||||
{ROMAN[i] || i + 1}
|
||||
</span>
|
||||
<h3 className="display" style={{ margin: '0 0 6px', fontSize: '1.1rem', color: 'var(--head)' }}>
|
||||
{p.title}
|
||||
</h3>
|
||||
<p className="muted" style={{ margin: 0, fontSize: '0.92rem' }}>
|
||||
{BLURBS[p.slug] || 'Open the guide →'}
|
||||
</p>
|
||||
</Link>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
</PublicLayout>
|
||||
)
|
||||
}
|
||||
107
client/src/routes/wiki/WikiArticle.jsx
Normal file
107
client/src/routes/wiki/WikiArticle.jsx
Normal file
@@ -0,0 +1,107 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user