In-App Help Center: CMS-Powered Documentation with Rich Content Rendering
Executive summary
DSM now has a built-in Help Center under /docs, where users can browse product documentation, guides, and references without leaving the app. Content is authored in a Strapi CMS and rendered with a polished reading experience (sidebar navigation, table of contents, breadcrumbs, code samples, images, and embedded video). This change has reached the QA environment.
Why this was needed
Previously the product had no integrated documentation surface, so users had no in-app place to find guides, references, or best practices. Maintaining help content also required developer involvement. This feature decouples content from code by sourcing it from a Strapi CMS, letting the team publish and update documentation independently while users access it directly inside DSM.
Client / user impact
- Users can open a self-service Help Center from the new "Get Help" action in the sidebar, or by visiting
/help(which now redirects to/docs). - Documentation is browsable via a navigation sidebar, a page table of contents with scroll tracking, and breadcrumbs, plus tag-based pages to group related topics.
- Pages support rich formatted content: callouts, code blocks with syntax highlighting, images with a lightbox, embedded/uploaded video, tables, tabs, accordions, and downloadable files.
- "Page not found" screens now guide users to the Help Center, and pages carry SEO metadata for better discoverability.
Technical scope
- Merges feature branch
feat-modern-help-section(PR #721) into the QA branch; ~3.8k lines added, almost entirely new files. - Adds a
/docsroute group: index,[slug]doc page, andtags/[slug]listing, with a dedicated docs layout. The[slug]page usesgenerateStaticParamsto pre-build known slugs andgenerateMetadatato map Strapi SEO fields onto Next.js metadata. - New documentation service (
src/services/documentation.services.ts, ~633 lines) fetches from Strapi atprocess.env.NEXT_PUBLIC_STRAPI_URL(defaulthttp://localhost:1337), hitting endpoints for doc pages (by slug/id/sidebar item), navigation tree, sidebar items, breadcrumbs, page navigation, tags, and tag filtering; includes data normalization and explicit 403 handling (Public-role/API-token guidance). Wired through TanStack Query hooks (documentation.queries.ts) and typed viadocumentation.types.ts. - New rendering components:
ContentRendererplus block renderers for RichText, Code (prism-react-renderer), Image (lightbox), Video (Vidstack, supports uploaded assets and external embeds), Table, Tabs, Accordion, Callout, and Downloadable; navigation viaDocumentationSidebar,TableOfContents(auto-expand/scrollspy),Breadcrumbs, andDocsFooter. next.config.ts: adds imageremotePatterns(AWS/S3 hosts, plus a placeholderyour-s3-bucket.comentry) and a permanent/help->/docsredirect; addsAppRoute.HELPand a sidebarSidebarBottom"Get Help" entry.- Adds dependencies (prism-react-renderer, Vidstack, etc.) in
package.json/pnpm-lock.yaml; minor chores in.npmrc(store-dir) and.claude/settings.local.json. - Includes a design/planning document only (
ai_docs/global-search-zero-cost-plan.md) for a future Command-K global search + assistant; that search/assistant feature is NOT implemented in this PR (no/api/searchor/api/assistanthandlers shipped).
Risk & mitigation
Moderate, mostly contained to the new /docs surface. The Help Center depends on a reachable, correctly-configured Strapi instance; a misconfigured NEXT_PUBLIC_STRAPI_URL, missing API token, or unset Public-role read access will surface as empty content or 403s (the service handles these gracefully rather than crashing). The default base URL points at localhost:1337 and next.config.ts includes a placeholder your-s3-bucket.com image host, so environment/image config must be verified per environment before promotion. Existing app areas are largely untouched apart from sidebar, not-found, and dashboard-layout tweaks; mitigation is to confirm the QA Strapi endpoint and image hosts and to smoke-test the docs pages end to end.
QA validation focus
- Confirm
NEXT_PUBLIC_STRAPI_URLis set to the QA Strapi instance and that doc content loads (not localhost/empty). - Verify the "Get Help" sidebar action and the
/help->/docsredirect both reach the Help Center. - Browse the docs index, open a doc page via the sidebar, and follow breadcrumbs; confirm the table of contents tracks scrolling and auto-expands.
- Open a tag page (
/docs/tags/<slug>) and confirm related pages list correctly. - Exercise each content block: rich text, code (highlighting + copy), images (lightbox), uploaded and embedded videos, tables, tabs, accordions, and downloadable files.
- Confirm images from S3/AWS hosts render (Next image config) and that an invalid/unknown slug shows the not-found screen with a working "Go to Help Center" link.
- Sanity-check that the documented Strapi 403/permission error path shows a graceful state rather than a crash.