Design system  /  Product pages

Product pages.

What every Conduction app's docs site looks like. Same chassis as openregister.conduction.nl: Docusaurus classic, @conduction/docusaurus-preset, a lean landing page, four canonical content folders, and Redocusaurus for the API reference. The website pages live next door under website pages.

FrameworkDocusaurus · classic Preset@conduction/docusaurus-preset FoldersFeatures · Integrations · Technical · UseCases APIRedocusaurus · OpenAPI LanguagesNL + EN
Anatomy

Five surfaces, one repo.

A Conduction product page is a Docusaurus site that lives in docs/ inside the app repo. The landing page (src/pages/index.js) is lean: hero, three to five feature cards, install CTA. Everything else is Markdown in folders that map directly to the top-nav and the autogenerated sidebar.

The four canonical content folders carry the four product-page jobs: UseCases for sales (why), Features for what it does, Integrations for how it talks to other systems, Technical for how it's built. The API reference is the Redocusaurus plug-in mounted at /api, fed by static/oas/*.json.

Every app must ship both nl and en; the locale dropdown lives in the navbar, sourced from the preset.

docs/
  src/pages/ // landing page (lean React)
  UseCases/ // sales · why-buy
  Features/ // what it does
  Integrations/ // how it talks to X
  Technical/ // how it's built
  static/oas/ // OpenAPI → /api
  i18n/nl/ // Dutch translations
  index.md // docs intro
  installation.md
  docusaurus.config.js
  sidebars.js // autogenerated
Tiles · 7 surfaces
01 · Landing

Product landing page

The lean home of the docs site. Detail-hero with hex glyph, install + GitHub CTAs, three to five feature cards (WidgetShelf), short value blocks. No marketing fluff; this is for someone who already arrived from a search or from connext.conduction.nl.

src/pages/index.js
02 · Docs intro

Introduction / overview

The first page of the docs sidebar: index.md or intro.md. Core concepts, key-features table, basic workflow diagram, links into the rest of the docs. The "what is this thing" anchor for the developer audience.

index.md · intro.md
03 · User documentation

User & install guide

End-user tutorials and install steps. Tutorial sidebar on the left, callouts, screenshots, copy-able command blocks. Folder lives at user/ + user-guide/, plus the installation.md root file.

user/ · user-guide/
04 · Technical documentation

Architecture & ADRs

How it's built. Architecture diagrams, ADRs, data model, deployment notes, contributor guides. The page a senior dev opens before they decide to integrate. Lives in Technical/ + technical/ + development/.

Technical/ · development/
05 · Sales · features

Feature pages

One Markdown file per shippable feature. Benefits up front, sub-features as a checklist, screenshots, "pairs well with" cross-links to other apps. The page sales people send when a prospect asks "but does it…". Lives in Features/.

Features/
06 · Integrations

Integration pages

One page per upstream or downstream system: xWiki, n8n, Keycloak, Forum Standaardisatie, ADFS. What it does, how to connect it, what configuration each side needs. Lives in Integrations/.

Integrations/
07 · API reference

OpenAPI · Redocusaurus

Redocusaurus plug-in mounted at /api. Three-pane Redoc layout: endpoint list left, doc middle, request samples right. Fed by static/oas/{app}.json with the official OpenAPI spec. One JSON, one route, zero hand-written reference pages.

redocusaurus · /api