Wiki Phase 3: internal links, backlinks, and tags
Connectivity phase of the wiki upgrade (see WIKI_UPGRADE.md). Schema (additive new tables): wiki_tags, wiki_page_tags, wiki_links. Internal links & backlinks: - new wiki.links.js parses a saved body for /wiki/<slug> (and data-wiki-slug) targets; wiki_links is rebuilt on every save - article shows a "Linked from" section (published backlinks) and renders links to non-existent pages as red links (server returns missing_links) - editor gains an internal-link picker listing existing pages Tags: - pages accept a tags[] array; tags upsert on save, page tag-set is replaced, and orphaned tags are auto-pruned (on save and delete) - public/admin list filter by ?tag=; /wiki/tags lists tags with published counts - article shows tag chips; the index has a flat tag-filtered view; editor has a comma-separated tags field Verified end-to-end: A->B backlink appears, red link detected, link index rebuilds on edit, tag filtering + chips + pruning all work. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -15,8 +15,9 @@ function slugify(text) {
|
||||
}
|
||||
|
||||
// Parse the stored body HTML: sanitize (defense in depth — the server also
|
||||
// sanitizes on save), then assign ids to <h2> headings and collect a TOC.
|
||||
function buildArticle(body) {
|
||||
// sanitizes on save), assign ids to <h2> headings and collect a TOC, and mark
|
||||
// internal links to pages that don't exist as "red links".
|
||||
function buildArticle(body, missing) {
|
||||
if (!body) return { html: '', toc: [] }
|
||||
if (typeof window === 'undefined' || !window.DOMParser) return { html: '', toc: [] }
|
||||
const safe = DOMPurify.sanitize(body)
|
||||
@@ -27,13 +28,22 @@ function buildArticle(body) {
|
||||
h.id = id
|
||||
toc.push({ id, label: h.textContent })
|
||||
})
|
||||
doc.querySelectorAll('a[href^="/wiki/"]').forEach((a) => {
|
||||
const target = a.getAttribute('href').replace(/^\/wiki\//, '').replace(/[#?].*$/, '')
|
||||
a.removeAttribute('target') // internal links stay in-app
|
||||
if (missing.has(target)) {
|
||||
a.classList.add('wiki-red-link')
|
||||
a.setAttribute('title', 'This page does not exist yet')
|
||||
}
|
||||
})
|
||||
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])
|
||||
const missing = useMemo(() => new Set(page?.missing_links || []), [page])
|
||||
const { html, toc } = useMemo(() => buildArticle(page?.body, missing), [page, missing])
|
||||
|
||||
return (
|
||||
<PublicLayout section="wiki">
|
||||
@@ -100,6 +110,15 @@ export default function WikiArticle() {
|
||||
<p className="sans" style={{ margin: '18px 0 0', color: 'var(--dim)', fontSize: '0.78rem', letterSpacing: '0.04em' }}>
|
||||
Last updated {longDate(page.updated_at) || '—'}
|
||||
</p>
|
||||
{page.tags && page.tags.length > 0 && (
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 14 }}>
|
||||
{page.tags.map((t) => (
|
||||
<Link key={t.slug} to={`/wiki?tag=${t.slug}`} className="wiki-tag">
|
||||
#{t.label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div style={{ height: 1, background: 'var(--line)', margin: '30px 0' }} />
|
||||
{html ? (
|
||||
<div className="prose" dangerouslySetInnerHTML={{ __html: html }} />
|
||||
@@ -107,6 +126,28 @@ export default function WikiArticle() {
|
||||
<p className="muted">This page has no content yet.</p>
|
||||
)}
|
||||
|
||||
{page.backlinks && page.backlinks.length > 0 && (
|
||||
<section
|
||||
style={{ marginTop: 40, borderTop: '1px solid var(--line)', paddingTop: 22 }}
|
||||
>
|
||||
<p
|
||||
className="sans"
|
||||
style={{ margin: '0 0 12px', color: 'var(--accent)', fontSize: '0.66rem', fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase' }}
|
||||
>
|
||||
Linked from
|
||||
</p>
|
||||
<ul style={{ margin: 0, paddingLeft: 18, fontFamily: 'var(--sans)', fontSize: '0.92rem' }}>
|
||||
{page.backlinks.map((b) => (
|
||||
<li key={b.slug} style={{ marginBottom: 6 }}>
|
||||
<Link to={`/wiki/${b.slug}`} style={{ color: 'var(--accent)', textDecoration: 'none' }}>
|
||||
{b.title}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<nav style={{ display: 'flex', justifyContent: 'flex-start', marginTop: 40 }}>
|
||||
<Link to="/wiki" className="pill">
|
||||
← All wiki pages
|
||||
|
||||
Reference in New Issue
Block a user