Frontend update

2026-06-26 21:51:27 -05:00
parent eef79e2403
commit 6dba6a017c
48 changed files with 5004 additions and 0 deletions
--- a/client/src/routes/wiki/WikiArticle.jsx
+++ b/client/src/routes/wiki/WikiArticle.jsx
@@ -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>
+  )
+}