All updates
ProductionQAFrontend

In-App Help Center: CMS-Powered Documentation with Rich Content Rendering

PR #722pixbox-supportNov 25, 2025 · 12:17 UTC
QANov 14, 2025
ProductionNov 25, 2025

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 /docs route group: index, [slug] doc page, and tags/[slug] listing, with a dedicated docs layout. The [slug] page uses generateStaticParams to pre-build known slugs and generateMetadata to map Strapi SEO fields onto Next.js metadata.
  • New documentation service (src/services/documentation.services.ts, ~633 lines) fetches from Strapi at process.env.NEXT_PUBLIC_STRAPI_URL (default http://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 via documentation.types.ts.
  • New rendering components: ContentRenderer plus 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 via DocumentationSidebar, TableOfContents (auto-expand/scrollspy), Breadcrumbs, and DocsFooter.
  • next.config.ts: adds image remotePatterns (AWS/S3 hosts, plus a placeholder your-s3-bucket.com entry) and a permanent /help -> /docs redirect; adds AppRoute.HELP and a sidebar SidebarBottom "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/search or /api/assistant handlers 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_URL is set to the QA Strapi instance and that doc content loads (not localhost/empty).
  • Verify the "Get Help" sidebar action and the /help -> /docs redirect 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.