Documentation Hub
Frontend Architecture Lead — designed and owned the system end-to-end
Overview
King's engineering teams produce documentation across dozens of tools and formats — GitHub Markdown, AsciiDoc, MkDocs, and internal wikis. Before this system, there was no unified way to find, read, or maintain them. I designed and led the frontend architecture of the Documentation Hub: a platform that ingests documents from any source, normalises them through a processing pipeline, and presents them through a consistent, searchable interface.
The system now serves as the central knowledge platform for the entire organisation.
Architecture — Rendering Pipeline
Live Demo — Rendering Pipeline
Edit the Markdown on the left. The pipeline processes it in real time — GFM extensions, syntax highlighting, GitHub alerts — just like the production system.
The Challenge
The core challenge was heterogeneity: different document formats carry fundamentally different semantics, different link resolution rules, and different rendering requirements. The system needed to handle all of them correctly while remaining extensible for formats not yet anticipated.
Technical Highlights
Pipeline Architecture with 13+ Plugins
Built the document rendering pipeline on the unified ecosystem (remark/rehype). Instead of a monolithic renderer, each concern — syntax highlighting, Mermaid diagrams, internal link rewriting, XSS sanitisation, search term highlighting — is an isolated, composable plugin. Adding support for a new output requirement means writing one plugin, not modifying the core.
Strategy Pattern for Multi-Format Support
GFM Markdown and AsciiDoc have different loading, parsing, and link resolution semantics. I separated these into distinct loader strategies (GFMLoaderStrategy, AsciiDocLoaderStrategy) behind a shared interface. The rest of the system is format-agnostic — swapping in a new format requires implementing one interface, not forking the rendering path.
URL-Driven State Architecture
All document state — which doc, which version, which page — lives in the URL, never in React state. This means every view is deep-linkable, browser navigation works perfectly, and the system is trivially testable. There is no "sync problem" between the URL and the UI because they are the same thing.
Smart Link Rewriting Across Legacy Systems
Documents contain links written for three different resolution contexts: legacy Foundry URLs, AsciiDoc xrefs (root-relative), and GFM internal links (page-relative). I built a rewriting plugin that handles all three cases, automatically migrating legacy URLs to the new routing structure while preserving correct relative resolution for each format.
Full-Featured Markdown Editor with Live Preview
Built an in-platform editor using CodeMirror 6, with a real-time preview pane that runs the full rendering pipeline, a diff view for change review, auto-save to localStorage with debouncing, and navigation guard to prevent accidental data loss. The editor lazy-loads the CodeMirror bundle to avoid impacting initial page load.