Two components, one diagram
Platform overview ships as two React components depending on whether you need just the diagram or the section frame around it:
<PlatformDiagram/> the typed wrapper around the bespoke <platform-diagram> web component (the diagram itself)<PlatformOverview/> the cobalt-50 section with eyebrow + title + lede that wraps the diagram on landing.html
Compose them
import {PlatformOverview, PlatformDiagram} from '@conduction/docusaurus-preset/components';
<PlatformOverview
eyebrow="The platform"
title="Five components. Twenty-four apps. One Nextcloud workspace."
lede="Every ConNext app plugs into one of five categories..."
>
<PlatformDiagram
workspace={{logo: '/img/nextcloud-logo.svg', alt: 'Nextcloud', role: 'Workspace'}}
lists={[
{position: 'top', family: 'nextcloud', items: [/* Files, Mail, ... */]},
{position: 'top-left', family: 'core', label: 'Technical\nCore', items: [/* OpenRegister, ... */]},
{position: 'top-right', family: 'solutions', label: 'Solutions', items: [/* OpenWoo, ... */]},
{position: 'bottom-left', family: 'workspace', label: 'Workspace\nApps', items: [/* PipelinQ, ... */]},
{position: 'bottom-right', family: 'integrate', label: 'Integrated\nApps',
columns: 2, items: [/* OpenTalk, n8n, Mattermost, ... */]},
{position: 'bottom-center', family: 'builder', label: 'App\nBuilder', badge: 'COMING SOON',
items: [/* Build your own apps, ... */]},
]}
flows={[
{from: 'top-left:bottom', to: 'bottom-left:top', shape: 'straight'},
{from: 'bottom-center:left', to: 'bottom-left:bottom', shape: 'l-h'},
{from: 'bottom-right:bottom', to: 'bottom-left:bottom', shape: 'c-bracket-bottom', clearance: 280},
{from: 'top-left:top', to: 'top-right:top', shape: 'c-bracket-top', clearance: 240},
]}
/>
</PlatformOverview>Props
workspace {logo, alt, role} the centre tilelists array of {position, family, label?, badge?, columns?, items}item {name, meta, desc, brandColor?, icon}flows array of {from, to, shape, clearance?}
The runtime CSS+JS auto-load via <Head/> from inside the component; consumers don't need to remember the boilerplate.