Documentation

    Documentation

    Documentation

    Ring Platform Logo

    Завантаження документації...

    Підготовка контенту платформи Ring

    Ring Platform Logo

    Завантаження документації...

    Підготовка контенту платформи Ring

    Ring Platform Logo

    Завантаження документації...

    Підготовка контенту платформи Ring

    1. /
    2. /Documentation components

    Updated Jun 10, 20266 min listen

    1. /
    2. /Documentation components

    Updated Jun 10, 20266 min listen

    1. /
    2. /Documentation components

    Updated Jun 10, 20266 min listen

    Concepts, value, and typical clone scenarios — less code.

    Welcome to Ring
    Quick Reference
    Getting Started
    Prerequisites
    Installation
    Database migrations
    First Success Validation
    Troubleshooting
    Next Steps
    Architecture
    Backend modes and databases
    Data Model
    Authentication Architecture
    Email AI-CRM architecture
    PaymentConductor architecture
    Refcodes architecture
    News Kingdom architecture
    Proxy and internationalization
    Real Time
    Discovery Mutation Sync
    Security
    Features
    Doc System
    Authentication
    Email AI-CRM
    Entities
    Opportunities
    Notifications
    Push Notifications with FCM (Ring-Powered)
    Tunnel Protocol
    Web3 Wallet
    Multi-Vendor Store
    Inventory & Stock
    Vendor Management
    Commissions & Settlements
    Referral Codes (Refcodes)
    Affiliate & Referral Enablement
    Payment Integration
    PaymentConductor
    VideoConductor
    WayForPay Payment Integration
    News Module - Digital Newspaper Experience
    Member Blogs
    Scientific Editor
    Locale System
    Security & Compliance
    NFT Marketplace
    Token Staking System
    Performance Optimization Patterns
    Mobile Experience
    Wallet
    Wallet Security Tips
    API
    Authentication
    Email AI-CRM API
    Entities
    Opportunities
    Messaging API
    Notifications API
    Wallet API
    Store API
    Admin API
    CLI
    Customization
    Quick Start — Your First Ring Clone
    Customization Guide
    Database Backend Selection
    Token Economics Setup
    Payment Gateway Integration
    AI Agent Customization
    Reference Ring deployments
    Branding
    Features
    Localization
    Themes
    Components
    Web3
    Token launch jurisdictions
    Deployment
    Self-hosted deployment
    Vercel
    Docker
    Environment Configuration
    Monitoring & Analytics
    Performance Optimization
    Backup & Recovery
    Development
    Local Setup
    Code Structure
    Documentation components
    Community tooling
    Ring MCP Server
    Generative Images (ImageConductor)
    Autonomous Newsroom (Grok)
    OSS vs enterprise
    Whitelabel Navigation
    Best Practices
    Workflow
    Code Style
    Performance
    Testing
    Deployment
    Debugging
    Contributing
    MCP
    ring-image-create
    ring-video-create
    Roadmap
    Examples
    Quick Start
    Authentication
    Email AI-CRM developer guide
    API Integration Examples
    Web3 Integration
    White Label
    Real World
    API Examples (cURL)
    Integrations
    Ethereum wallets (Wagmi v3)

    Quick entry (CTOs · auditors · agents)

    Welcome — mission & audiences
    Quick Reference
    Getting started
    Architecture & Auth.js
    Backend modes & databases (DB_BACKEND_MODE)
    Self-hosted
    Ring MCP Tools
    Ring MCP Server
    Token economics
    Token launch jurisdictions
    Deploy (Docker · k8s)
    Security & compliance reads
    ringdom.org — LegioX homebase
    Source — MIT license (GitHub)

    Concepts, value, and typical clone scenarios — less code.

    Welcome to Ring
    Quick Reference
    Getting Started
    Prerequisites
    Installation
    Database migrations
    First Success Validation
    Troubleshooting
    Next Steps
    Architecture
    Backend modes and databases
    Data Model
    Authentication Architecture
    Email AI-CRM architecture
    PaymentConductor architecture
    Refcodes architecture
    News Kingdom architecture
    Proxy and internationalization
    Real Time
    Discovery Mutation Sync
    Security
    Features
    Doc System
    Authentication
    Email AI-CRM
    Entities
    Opportunities
    Notifications
    Push Notifications with FCM (Ring-Powered)
    Tunnel Protocol
    Web3 Wallet
    Multi-Vendor Store
    Inventory & Stock
    Vendor Management
    Commissions & Settlements
    Referral Codes (Refcodes)
    Affiliate & Referral Enablement
    Payment Integration
    PaymentConductor
    VideoConductor
    WayForPay Payment Integration
    News Module - Digital Newspaper Experience
    Member Blogs
    Scientific Editor
    Locale System
    Security & Compliance
    NFT Marketplace
    Token Staking System
    Performance Optimization Patterns
    Mobile Experience
    Wallet
    Wallet Security Tips
    API
    Authentication
    Email AI-CRM API
    Entities
    Opportunities
    Messaging API
    Notifications API
    Wallet API
    Store API
    Admin API
    CLI
    Customization
    Quick Start — Your First Ring Clone
    Customization Guide
    Database Backend Selection
    Token Economics Setup
    Payment Gateway Integration
    AI Agent Customization
    Reference Ring deployments
    Branding
    Features
    Localization
    Themes
    Components
    Web3
    Token launch jurisdictions
    Deployment
    Self-hosted deployment
    Vercel
    Docker
    Environment Configuration
    Monitoring & Analytics
    Performance Optimization
    Backup & Recovery
    Development
    Local Setup
    Code Structure
    Documentation components
    Community tooling
    Ring MCP Server
    Generative Images (ImageConductor)
    Autonomous Newsroom (Grok)
    OSS vs enterprise
    Whitelabel Navigation
    Best Practices
    Workflow
    Code Style
    Performance
    Testing
    Deployment
    Debugging
    Contributing
    MCP
    ring-image-create
    ring-video-create
    Roadmap
    Examples
    Quick Start
    Authentication
    Email AI-CRM developer guide
    API Integration Examples
    Web3 Integration
    White Label
    Real World
    API Examples (cURL)
    Integrations
    Ethereum wallets (Wagmi v3)

    Quick entry (CTOs · auditors · agents)

    Welcome — mission & audiences
    Quick Reference
    Getting started
    Architecture & Auth.js
    Backend modes & databases (DB_BACKEND_MODE)
    Self-hosted
    Ring MCP Tools
    Ring MCP Server
    Token economics
    Token launch jurisdictions
    Deploy (Docker · k8s)
    Security & compliance reads
    ringdom.org — LegioX homebase
    Source — MIT license (GitHub)

    Concepts, value, and typical clone scenarios — less code.

    Welcome to Ring
    Quick Reference
    Getting Started
    Prerequisites
    Installation
    Database migrations
    First Success Validation
    Troubleshooting
    Next Steps
    Architecture
    Backend modes and databases
    Data Model
    Authentication Architecture
    Email AI-CRM architecture
    PaymentConductor architecture
    Refcodes architecture
    News Kingdom architecture
    Proxy and internationalization
    Real Time
    Discovery Mutation Sync
    Security
    Features
    Doc System
    Authentication
    Email AI-CRM
    Entities
    Opportunities
    Notifications
    Push Notifications with FCM (Ring-Powered)
    Tunnel Protocol
    Web3 Wallet
    Multi-Vendor Store
    Inventory & Stock
    Vendor Management
    Commissions & Settlements
    Referral Codes (Refcodes)
    Affiliate & Referral Enablement
    Payment Integration
    PaymentConductor
    VideoConductor
    WayForPay Payment Integration
    News Module - Digital Newspaper Experience
    Member Blogs
    Scientific Editor
    Locale System
    Security & Compliance
    NFT Marketplace
    Token Staking System
    Performance Optimization Patterns
    Mobile Experience
    Wallet
    Wallet Security Tips
    API
    Authentication
    Email AI-CRM API
    Entities
    Opportunities
    Messaging API
    Notifications API
    Wallet API
    Store API
    Admin API
    CLI
    Customization
    Quick Start — Your First Ring Clone
    Customization Guide
    Database Backend Selection
    Token Economics Setup
    Payment Gateway Integration
    AI Agent Customization
    Reference Ring deployments
    Branding
    Features
    Localization
    Themes
    Components
    Web3
    Token launch jurisdictions
    Deployment
    Self-hosted deployment
    Vercel
    Docker
    Environment Configuration
    Monitoring & Analytics
    Performance Optimization
    Backup & Recovery
    Development
    Local Setup
    Code Structure
    Documentation components
    Community tooling
    Ring MCP Server
    Generative Images (ImageConductor)
    Autonomous Newsroom (Grok)
    OSS vs enterprise
    Whitelabel Navigation
    Best Practices
    Workflow
    Code Style
    Performance
    Testing
    Deployment
    Debugging
    Contributing
    MCP
    ring-image-create
    ring-video-create
    Roadmap
    Examples
    Quick Start
    Authentication
    Email AI-CRM developer guide
    API Integration Examples
    Web3 Integration
    White Label
    Real World
    API Examples (cURL)
    Integrations
    Ethereum wallets (Wagmi v3)

    Quick entry (CTOs · auditors · agents)

    Welcome — mission & audiences
    Quick Reference
    Getting started
    Architecture & Auth.js
    Backend modes & databases (DB_BACKEND_MODE)
    Self-hosted
    Ring MCP Tools
    Ring MCP Server
    Token economics
    Token launch jurisdictions
    Deploy (Docker · k8s)
    Security & compliance reads
    ringdom.org — LegioX homebase
    Source — MIT license (GitHub)
    Docs
    Development
    Docs
    Development
    Docs
    Development

    Documentation components

    Ring docs are MDX files rendered by next-mdx-remote/rsc with a shared component map in components/docs/mdx-docs-shared.tsx. Use these building blocks to write pages that work for developers (precise paths, code) and executives (outcomes, one diagram, clear navigation).

    Canonical paths: Content lives at docs/{locale}/{section}/{page}.mdx or docs/{locale}/{section}/index.mdx for hubs. Public URLs: /docs/... (locale prefix per next-intl as-needed). Resolver tries {slug}.mdx then {slug}/index.mdx at any depth. Malformed .mdx URLs and trailing /index segments normalize via next.config.mjs.

    Render pipeline

    Docs render path
    StageLocationRole
    Contentdocs/{locale}/title, description, MDX body
    Resolverlib/docs/docs-path.tsSlug → docs/{locale}/**; hub (foo/index.mdx) and leaf (foo.mdx); buildDocsHref(), scanDocsStaticParams()
    Componentscomponents/docs/mdx-docs-shared.tsxRegisters all JSX tags below
    SyntaxShiki (nord / tokyo-night)Server-side highlighting in <Code>

    Component quick reference

    ComponentBest forClient / server
    CalloutExecutive summary, warnings (DB_BACKEND_MODE, legal)Client
    MermaidOne system map + one sequence diagram per hub (avoid sprawl)Client
    Tabs / TabDeveloper vs Operator (or CEO) views on the same pageClient
    Cards / CardHub navigation to all child articlesServer-friendly
    Steps / StepInstall and deploy walkthroughsServer-friendly
    CodeShiki-highlighted config snippetsServer (async)
    MindMapConcept trees — use sparingly on hubs

    Fenced markdown code (```typescript) and fenced mermaid (```mermaid) are rewritten at build time to <Code> and <Mermaid> via rehype plugins.

    Callout

    Types: info | tip | success | warning | error | development | financing. Optional title. Unknown types fall back to info. Live gallery: Doc System.

    Under active development

    APIs and UI described in preview docs may change before release — pair with a GitHub issue or implementation log link when possible.

    Financing opportunity

    Use for grants, treasury programs, vendor funding, or affiliate revenue mechanics — link Wallet and opportunities docs.

    Executive summary pattern

    Lead hub pages with a one-paragraph outcome for operators and CEOs, then tables and a single system diagram.

    Mermaid

    Prefer one architecture map and one sequence diagram on hub pages. Additional diagrams belong on child articles.

    Example sequence

    Or a fenced block (converted automatically):

    Tabs and Tab

    Split audiences without duplicating entire pages. Pass items or rely on child <Tab value="…"> labels.

    • Point to file paths (lib/database/DatabaseService.ts)
    • Show Server Action and API contracts
    • Link to canonical EN deep dives

    Cards and Card

    Required pattern for section hub pages (index.mdx). Each card links to a child page from that section's meta.json.

    Architecture hub

    System map, Tabs, and links to all architecture children

    Backend modes

    Canonical DB_BACKEND_MODE reference

    Use href /docs/... without the library segment. Locale prefix is applied by the app router.

    Steps and Step

    MDX syntax

    Blank lines are required before <Steps>, before each <Step>, after each </Step>, and after </Steps>. Omitting them causes MDX parse errors.

    1. 1

      Install dependencies:

    2. 2

      Add the page to docs/en/{section}/meta.json pages[] and mirror UK/RU meta.json when translating.

    3. 3

      Verify at http://localhost:3000/docs/{section}/{page}.

    Code

    Server-rendered Shiki blocks. Prefer the code prop or template literal children:

    Inline code uses the markdown backtick form: DatabaseService, auth().

    MindMap

    Alias for Mermaid mindmap syntax. Use for concept hierarchies — not five mindmaps on one hub page.

    Timeline

    Client-only (react-chrono). Use for migration timelines and release notes.

    Document release history in prose + table if Timeline props are awkward in pure MDX; prefer Timeline on marketing or roadmap pages.

    RingMatcherOrchestration

    Symbolic AI-matcher hub for docs welcome pages: users orbit the matcher with offer-type badges (same taxonomy as the legacy synapse viz), a request icon flies in, the matcher routes to a provider via a joint line, the line straightens, then DM bubbles exchange. Props: locale (en | uk | ru), autoPlay, optional title / subtitle. Respects prefers-reduced-motion.

    RingAISynapseFlow (legacy)

    Heavy animated AI-matching visualization (Three.js logo, quantum lasers). Preserved in components/docs/ring-ai-synapse-flow.tsx but removed from docs index pages in favor of RingMatcherOrchestration. Do not embed on dense reference pages.

    CodeSandbox and Math

    ComponentWhen
    CodeSandbox/examples — Sandpack react-ts (or custom files) with live preview
    MathInline KaTeX: <Math>{E = mc^2}</Math>
    MathBlockDisplay equations in scientific / tokenomics docs

    Hub page checklist

    Use this when rewriting section indexes (e.g. Architecture):

    1. 1

      Executive Callout — who the page is for and the deployment default (Postgres-primary, PaymentConductor, etc.).

    2. 2

      Capability table — stack row per concern (data, auth, payments, realtime).

    3. 3

      One system Mermaid — logical layers, not emoji sprawl.

    4. 4

      Tabs — Developers vs Operators (or CEO vs engineering).

    5. 5

      Cards — every entry in section meta.json pages[] except index.

    6. 6

      Cross-links — customization, deployment env, LOCALE-GAPS policy for UK/RU.

    Authoring rules

    RuleWhy
    EN canonical unless LOCALE-GAPS marks UK/RU summaryAvoid drift on env tables and API bodies
    Frontmatter title + description requiredSEO and docs sidebar
    No fumadocs-ui importsMigrated to Ring components/docs/
    Test npm run dev after new MDXCatch Steps blank-line and Mermaid typos early
    Grep stale strings after stack bumpse.g. Next.js 16 in UK/RU backlog

    Related

    • Contributing — PR and content guidelines
    • Code structure — app layout vs features/
    • Architecture hub — reference hub using these components
    • Truth lens: AI-LEGIOX/legiox-truth-lens/ring-docs-specialist.nodus.json

    After adding or restructuring docs, update scripts/LOCALE-GAPS.md and run legiox-context-update when AI-CONTEXT should reflect new patterns.

    Documentation components

    Ring docs are MDX files rendered by next-mdx-remote/rsc with a shared component map in components/docs/mdx-docs-shared.tsx. Use these building blocks to write pages that work for developers (precise paths, code) and executives (outcomes, one diagram, clear navigation).

    Canonical paths: Content lives at docs/{locale}/{section}/{page}.mdx or docs/{locale}/{section}/index.mdx for hubs. Public URLs: /docs/... (locale prefix per next-intl as-needed). Resolver tries {slug}.mdx then {slug}/index.mdx at any depth. Malformed .mdx URLs and trailing /index segments normalize via next.config.mjs.

    Render pipeline

    Docs render path
    StageLocationRole
    Contentdocs/{locale}/title, description, MDX body
    Resolverlib/docs/docs-path.tsSlug → docs/{locale}/**; hub (foo/index.mdx) and leaf (foo.mdx); buildDocsHref(), scanDocsStaticParams()
    Componentscomponents/docs/mdx-docs-shared.tsxRegisters all JSX tags below
    SyntaxShiki (nord / tokyo-night)Server-side highlighting in <Code>

    Component quick reference

    ComponentBest forClient / server
    CalloutExecutive summary, warnings (DB_BACKEND_MODE, legal)Client
    MermaidOne system map + one sequence diagram per hub (avoid sprawl)Client
    Tabs / TabDeveloper vs Operator (or CEO) views on the same pageClient
    Cards / CardHub navigation to all child articlesServer-friendly
    Steps / StepInstall and deploy walkthroughsServer-friendly
    CodeShiki-highlighted config snippetsServer (async)
    MindMapConcept trees — use sparingly on hubs

    Fenced markdown code (```typescript) and fenced mermaid (```mermaid) are rewritten at build time to <Code> and <Mermaid> via rehype plugins.

    Callout

    Types: info | tip | success | warning | error | development | financing. Optional title. Unknown types fall back to info. Live gallery: Doc System.

    Under active development

    APIs and UI described in preview docs may change before release — pair with a GitHub issue or implementation log link when possible.

    Financing opportunity

    Use for grants, treasury programs, vendor funding, or affiliate revenue mechanics — link Wallet and opportunities docs.

    Executive summary pattern

    Lead hub pages with a one-paragraph outcome for operators and CEOs, then tables and a single system diagram.

    Mermaid

    Prefer one architecture map and one sequence diagram on hub pages. Additional diagrams belong on child articles.

    Example sequence

    Or a fenced block (converted automatically):

    Tabs and Tab

    Split audiences without duplicating entire pages. Pass items or rely on child <Tab value="…"> labels.

    • Point to file paths (lib/database/DatabaseService.ts)
    • Show Server Action and API contracts
    • Link to canonical EN deep dives

    Cards and Card

    Required pattern for section hub pages (index.mdx). Each card links to a child page from that section's meta.json.

    Architecture hub

    System map, Tabs, and links to all architecture children

    Backend modes

    Canonical DB_BACKEND_MODE reference

    Use href /docs/... without the library segment. Locale prefix is applied by the app router.

    Steps and Step

    MDX syntax

    Blank lines are required before <Steps>, before each <Step>, after each </Step>, and after </Steps>. Omitting them causes MDX parse errors.

    1. 1

      Install dependencies:

    2. 2

      Add the page to docs/en/{section}/meta.json pages[] and mirror UK/RU meta.json when translating.

    3. 3

      Verify at http://localhost:3000/docs/{section}/{page}.

    Code

    Server-rendered Shiki blocks. Prefer the code prop or template literal children:

    Inline code uses the markdown backtick form: DatabaseService, auth().

    MindMap

    Alias for Mermaid mindmap syntax. Use for concept hierarchies — not five mindmaps on one hub page.

    Timeline

    Client-only (react-chrono). Use for migration timelines and release notes.

    Document release history in prose + table if Timeline props are awkward in pure MDX; prefer Timeline on marketing or roadmap pages.

    RingMatcherOrchestration

    Symbolic AI-matcher hub for docs welcome pages: users orbit the matcher with offer-type badges (same taxonomy as the legacy synapse viz), a request icon flies in, the matcher routes to a provider via a joint line, the line straightens, then DM bubbles exchange. Props: locale (en | uk | ru), autoPlay, optional title / subtitle. Respects prefers-reduced-motion.

    RingAISynapseFlow (legacy)

    Heavy animated AI-matching visualization (Three.js logo, quantum lasers). Preserved in components/docs/ring-ai-synapse-flow.tsx but removed from docs index pages in favor of RingMatcherOrchestration. Do not embed on dense reference pages.

    CodeSandbox and Math

    ComponentWhen
    CodeSandbox/examples — Sandpack react-ts (or custom files) with live preview
    MathInline KaTeX: <Math>{E = mc^2}</Math>
    MathBlockDisplay equations in scientific / tokenomics docs

    Hub page checklist

    Use this when rewriting section indexes (e.g. Architecture):

    1. 1

      Executive Callout — who the page is for and the deployment default (Postgres-primary, PaymentConductor, etc.).

    2. 2

      Capability table — stack row per concern (data, auth, payments, realtime).

    3. 3

      One system Mermaid — logical layers, not emoji sprawl.

    4. 4

      Tabs — Developers vs Operators (or CEO vs engineering).

    5. 5

      Cards — every entry in section meta.json pages[] except index.

    6. 6

      Cross-links — customization, deployment env, LOCALE-GAPS policy for UK/RU.

    Authoring rules

    RuleWhy
    EN canonical unless LOCALE-GAPS marks UK/RU summaryAvoid drift on env tables and API bodies
    Frontmatter title + description requiredSEO and docs sidebar
    No fumadocs-ui importsMigrated to Ring components/docs/
    Test npm run dev after new MDXCatch Steps blank-line and Mermaid typos early
    Grep stale strings after stack bumpse.g. Next.js 16 in UK/RU backlog

    Related

    • Contributing — PR and content guidelines
    • Code structure — app layout vs features/
    • Architecture hub — reference hub using these components
    • Truth lens: AI-LEGIOX/legiox-truth-lens/ring-docs-specialist.nodus.json

    After adding or restructuring docs, update scripts/LOCALE-GAPS.md and run legiox-context-update when AI-CONTEXT should reflect new patterns.

    Documentation components

    Ring docs are MDX files rendered by next-mdx-remote/rsc with a shared component map in components/docs/mdx-docs-shared.tsx. Use these building blocks to write pages that work for developers (precise paths, code) and executives (outcomes, one diagram, clear navigation).

    Canonical paths: Content lives at docs/{locale}/{section}/{page}.mdx or docs/{locale}/{section}/index.mdx for hubs. Public URLs: /docs/... (locale prefix per next-intl as-needed). Resolver tries {slug}.mdx then {slug}/index.mdx at any depth. Malformed .mdx URLs and trailing /index segments normalize via next.config.mjs.

    Render pipeline

    Docs render path
    StageLocationRole
    Contentdocs/{locale}/title, description, MDX body
    Resolverlib/docs/docs-path.tsSlug → docs/{locale}/**; hub (foo/index.mdx) and leaf (foo.mdx); buildDocsHref(), scanDocsStaticParams()
    Componentscomponents/docs/mdx-docs-shared.tsxRegisters all JSX tags below
    SyntaxShiki (nord / tokyo-night)Server-side highlighting in <Code>

    Component quick reference

    ComponentBest forClient / server
    CalloutExecutive summary, warnings (DB_BACKEND_MODE, legal)Client
    MermaidOne system map + one sequence diagram per hub (avoid sprawl)Client
    Tabs / TabDeveloper vs Operator (or CEO) views on the same pageClient
    Cards / CardHub navigation to all child articlesServer-friendly
    Steps / StepInstall and deploy walkthroughsServer-friendly
    CodeShiki-highlighted config snippetsServer (async)
    MindMapConcept trees — use sparingly on hubs

    Fenced markdown code (```typescript) and fenced mermaid (```mermaid) are rewritten at build time to <Code> and <Mermaid> via rehype plugins.

    Callout

    Types: info | tip | success | warning | error | development | financing. Optional title. Unknown types fall back to info. Live gallery: Doc System.

    Under active development

    APIs and UI described in preview docs may change before release — pair with a GitHub issue or implementation log link when possible.

    Financing opportunity

    Use for grants, treasury programs, vendor funding, or affiliate revenue mechanics — link Wallet and opportunities docs.

    Executive summary pattern

    Lead hub pages with a one-paragraph outcome for operators and CEOs, then tables and a single system diagram.

    Mermaid

    Prefer one architecture map and one sequence diagram on hub pages. Additional diagrams belong on child articles.

    Example sequence

    Or a fenced block (converted automatically):

    Tabs and Tab

    Split audiences without duplicating entire pages. Pass items or rely on child <Tab value="…"> labels.

    • Point to file paths (lib/database/DatabaseService.ts)
    • Show Server Action and API contracts
    • Link to canonical EN deep dives

    Cards and Card

    Required pattern for section hub pages (index.mdx). Each card links to a child page from that section's meta.json.

    Architecture hub

    System map, Tabs, and links to all architecture children

    Backend modes

    Canonical DB_BACKEND_MODE reference

    Use href /docs/... without the library segment. Locale prefix is applied by the app router.

    Steps and Step

    MDX syntax

    Blank lines are required before <Steps>, before each <Step>, after each </Step>, and after </Steps>. Omitting them causes MDX parse errors.

    1. 1

      Install dependencies:

    2. 2

      Add the page to docs/en/{section}/meta.json pages[] and mirror UK/RU meta.json when translating.

    3. 3

      Verify at http://localhost:3000/docs/{section}/{page}.

    Code

    Server-rendered Shiki blocks. Prefer the code prop or template literal children:

    Inline code uses the markdown backtick form: DatabaseService, auth().

    MindMap

    Alias for Mermaid mindmap syntax. Use for concept hierarchies — not five mindmaps on one hub page.

    Timeline

    Client-only (react-chrono). Use for migration timelines and release notes.

    Document release history in prose + table if Timeline props are awkward in pure MDX; prefer Timeline on marketing or roadmap pages.

    RingMatcherOrchestration

    Symbolic AI-matcher hub for docs welcome pages: users orbit the matcher with offer-type badges (same taxonomy as the legacy synapse viz), a request icon flies in, the matcher routes to a provider via a joint line, the line straightens, then DM bubbles exchange. Props: locale (en | uk | ru), autoPlay, optional title / subtitle. Respects prefers-reduced-motion.

    RingAISynapseFlow (legacy)

    Heavy animated AI-matching visualization (Three.js logo, quantum lasers). Preserved in components/docs/ring-ai-synapse-flow.tsx but removed from docs index pages in favor of RingMatcherOrchestration. Do not embed on dense reference pages.

    CodeSandbox and Math

    ComponentWhen
    CodeSandbox/examples — Sandpack react-ts (or custom files) with live preview
    MathInline KaTeX: <Math>{E = mc^2}</Math>
    MathBlockDisplay equations in scientific / tokenomics docs

    Hub page checklist

    Use this when rewriting section indexes (e.g. Architecture):

    1. 1

      Executive Callout — who the page is for and the deployment default (Postgres-primary, PaymentConductor, etc.).

    2. 2

      Capability table — stack row per concern (data, auth, payments, realtime).

    3. 3

      One system Mermaid — logical layers, not emoji sprawl.

    4. 4

      Tabs — Developers vs Operators (or CEO vs engineering).

    5. 5

      Cards — every entry in section meta.json pages[] except index.

    6. 6

      Cross-links — customization, deployment env, LOCALE-GAPS policy for UK/RU.

    Authoring rules

    RuleWhy
    EN canonical unless LOCALE-GAPS marks UK/RU summaryAvoid drift on env tables and API bodies
    Frontmatter title + description requiredSEO and docs sidebar
    No fumadocs-ui importsMigrated to Ring components/docs/
    Test npm run dev after new MDXCatch Steps blank-line and Mermaid typos early
    Grep stale strings after stack bumpse.g. Next.js 16 in UK/RU backlog

    Related

    • Contributing — PR and content guidelines
    • Code structure — app layout vs features/
    • Architecture hub — reference hub using these components
    • Truth lens: AI-LEGIOX/legiox-truth-lens/ring-docs-specialist.nodus.json

    After adding or restructuring docs, update scripts/LOCALE-GAPS.md and run legiox-context-update when AI-CONTEXT should reflect new patterns.

    Client
    TimelineRelease / migration historyClient
    RingMatcherOrchestrationDocs hub default — lightweight AI matcher loop (SVG, locale-aware)Client
    RingAISynapseFlowLegacy heavy demo (Three.js) — preserved, avoid on reference pagesClient
    CodeSandboxRunnable examples in /examplesClient
    Math / MathBlockScientific editor, tokenomics equationsClient
    mdx
    
    <Callout type="warning" title="Security">
      Never commit `WAYFORPAY_SECRET_KEY` to the repository.
    </Callout>
    mdx
    
    <Mermaid title="Payment flow">
    {`sequenceDiagram
      User->>Ring: Checkout
      Ring->>WayForPay: Create session`}
    </Mermaid>
    mdx
    
    <Tabs items={['Developers', 'Operators']}>
    
    <Tab value="Developers">
    
    Content for engineers.
    
    </Tab>
    
    <Tab value="Operators">
    
    Content for deployers and CEOs.
    
    </Tab>
    
    </Tabs>
    mdx
    
    <Cards>
      <Card title="Page title" href="/docs/section/page">
        Short description for the card body.
      </Card>
    </Cards>
    mdx
    
    <Code language="bash" title="terminal">
    {`npm run dev`}
    </Code>
    mdx
    
    {/* Timeline expects items prop — use in dedicated client wrapper or examples */}
    mdx
    
    <RingMatcherOrchestration locale="uk" autoPlay={true} />
    Client
    TimelineRelease / migration historyClient
    RingMatcherOrchestrationDocs hub default — lightweight AI matcher loop (SVG, locale-aware)Client
    RingAISynapseFlowLegacy heavy demo (Three.js) — preserved, avoid on reference pagesClient
    CodeSandboxRunnable examples in /examplesClient
    Math / MathBlockScientific editor, tokenomics equationsClient
    mdx
    
    <Callout type="warning" title="Security">
      Never commit `WAYFORPAY_SECRET_KEY` to the repository.
    </Callout>
    mdx
    
    <Mermaid title="Payment flow">
    {`sequenceDiagram
      User->>Ring: Checkout
      Ring->>WayForPay: Create session`}
    </Mermaid>
    mdx
    
    <Tabs items={['Developers', 'Operators']}>
    
    <Tab value="Developers">
    
    Content for engineers.
    
    </Tab>
    
    <Tab value="Operators">
    
    Content for deployers and CEOs.
    
    </Tab>
    
    </Tabs>
    mdx
    
    <Cards>
      <Card title="Page title" href="/docs/section/page">
        Short description for the card body.
      </Card>
    </Cards>
    mdx
    
    <Code language="bash" title="terminal">
    {`npm run dev`}
    </Code>
    mdx
    
    {/* Timeline expects items prop — use in dedicated client wrapper or examples */}
    mdx
    
    <RingMatcherOrchestration locale="uk" autoPlay={true} />
    Client
    TimelineRelease / migration historyClient
    RingMatcherOrchestrationDocs hub default — lightweight AI matcher loop (SVG, locale-aware)Client
    RingAISynapseFlowLegacy heavy demo (Three.js) — preserved, avoid on reference pagesClient
    CodeSandboxRunnable examples in /examplesClient
    Math / MathBlockScientific editor, tokenomics equationsClient
    mdx
    
    <Callout type="warning" title="Security">
      Never commit `WAYFORPAY_SECRET_KEY` to the repository.
    </Callout>
    mdx
    
    <Mermaid title="Payment flow">
    {`sequenceDiagram
      User->>Ring: Checkout
      Ring->>WayForPay: Create session`}
    </Mermaid>
    mdx
    
    <Tabs items={['Developers', 'Operators']}>
    
    <Tab value="Developers">
    
    Content for engineers.
    
    </Tab>
    
    <Tab value="Operators">
    
    Content for deployers and CEOs.
    
    </Tab>
    
    </Tabs>
    mdx
    
    <Cards>
      <Card title="Page title" href="/docs/section/page">
        Short description for the card body.
      </Card>
    </Cards>
    mdx
    
    <Code language="bash" title="terminal">
    {`npm run dev`}
    </Code>
    mdx
    
    {/* Timeline expects items prop — use in dedicated client wrapper or examples */}
    mdx
    
    <RingMatcherOrchestration locale="uk" autoPlay={true} />