Підготовка контенту платформи Ring
Підготовка контенту платформи Ring
Підготовка контенту платформи Ring
Concepts, value, and typical clone scenarios — less code.
Concepts, value, and typical clone scenarios — less code.
Concepts, value, and typical clone scenarios — less code.
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.
| Stage | Location | Role |
|---|---|---|
| Content | docs/{locale}/ | title, description, MDX body |
| Resolver | lib/docs/docs-path.ts | Slug → docs/{locale}/**; hub (foo/index.mdx) and leaf (foo.mdx); buildDocsHref(), scanDocsStaticParams() |
| Components | components/docs/mdx-docs-shared.tsx | Registers all JSX tags below |
| Syntax | Shiki (nord / tokyo-night) | Server-side highlighting in <Code> |
| Component | Best for | Client / server |
|---|---|---|
| Callout | Executive summary, warnings (DB_BACKEND_MODE, legal) | Client |
| Mermaid | One system map + one sequence diagram per hub (avoid sprawl) | Client |
| Tabs / Tab | Developer vs Operator (or CEO) views on the same page | Client |
| Cards / Card | Hub navigation to all child articles | Server-friendly |
| Steps / Step | Install and deploy walkthroughs | Server-friendly |
| Code | Shiki-highlighted config snippets | Server (async) |
| MindMap | Concept 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.
Types: info | tip | success | warning | error | development | financing. Optional title. Unknown types fall back to info. Live gallery: Doc System.
APIs and UI described in preview docs may change before release — pair with a GitHub issue or implementation log link when possible.
Use for grants, treasury programs, vendor funding, or affiliate revenue mechanics — link Wallet and opportunities docs.
Lead hub pages with a one-paragraph outcome for operators and CEOs, then tables and a single system diagram.
Prefer one architecture map and one sequence diagram on hub pages. Additional diagrams belong on child articles.
Or a fenced block (converted automatically):
Split audiences without duplicating entire pages. Pass items or rely on child <Tab value="…"> labels.
lib/database/DatabaseService.ts)Required pattern for section hub pages (index.mdx). Each card links to a child page from that section's meta.json.
System map, Tabs, and links to all architecture children
Canonical DB_BACKEND_MODE reference
Use href /docs/... without the library segment. Locale prefix is applied by the app router.
Blank lines are required before <Steps>, before each <Step>, after each </Step>, and after </Steps>. Omitting them causes MDX parse errors.
Install dependencies:
Add the page to docs/en/{section}/meta.json pages[] and mirror UK/RU meta.json when translating.
Verify at http://localhost:3000/docs/{section}/{page}.
Server-rendered Shiki blocks. Prefer the code prop or template literal children:
Inline code uses the markdown backtick form: DatabaseService, auth().
Alias for Mermaid mindmap syntax. Use for concept hierarchies — not five mindmaps on one hub page.
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.
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.
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.
| Component | When |
|---|---|
| CodeSandbox | /examples — Sandpack react-ts (or custom files) with live preview |
| Math | Inline KaTeX: <Math>{E = mc^2}</Math> |
| MathBlock | Display equations in scientific / tokenomics docs |
Use this when rewriting section indexes (e.g. Architecture):
Executive Callout — who the page is for and the deployment default (Postgres-primary, PaymentConductor, etc.).
Capability table — stack row per concern (data, auth, payments, realtime).
One system Mermaid — logical layers, not emoji sprawl.
Tabs — Developers vs Operators (or CEO vs engineering).
Cards — every entry in section meta.json pages[] except index.
Cross-links — customization, deployment env, LOCALE-GAPS policy for UK/RU.
| Rule | Why |
|---|---|
| EN canonical unless LOCALE-GAPS marks UK/RU summary | Avoid drift on env tables and API bodies |
Frontmatter title + description required | SEO and docs sidebar |
No fumadocs-ui imports | Migrated to Ring components/docs/ |
Test npm run dev after new MDX | Catch Steps blank-line and Mermaid typos early |
| Grep stale strings after stack bumps | e.g. Next.js 16 in UK/RU backlog |
features/AI-LEGIOX/legiox-truth-lens/ring-docs-specialist.nodus.jsonAfter adding or restructuring docs, update scripts/LOCALE-GAPS.md and run legiox-context-update when AI-CONTEXT should reflect new patterns.
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.
| Stage | Location | Role |
|---|---|---|
| Content | docs/{locale}/ | title, description, MDX body |
| Resolver | lib/docs/docs-path.ts | Slug → docs/{locale}/**; hub (foo/index.mdx) and leaf (foo.mdx); buildDocsHref(), scanDocsStaticParams() |
| Components | components/docs/mdx-docs-shared.tsx | Registers all JSX tags below |
| Syntax | Shiki (nord / tokyo-night) | Server-side highlighting in <Code> |
| Component | Best for | Client / server |
|---|---|---|
| Callout | Executive summary, warnings (DB_BACKEND_MODE, legal) | Client |
| Mermaid | One system map + one sequence diagram per hub (avoid sprawl) | Client |
| Tabs / Tab | Developer vs Operator (or CEO) views on the same page | Client |
| Cards / Card | Hub navigation to all child articles | Server-friendly |
| Steps / Step | Install and deploy walkthroughs | Server-friendly |
| Code | Shiki-highlighted config snippets | Server (async) |
| MindMap | Concept 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.
Types: info | tip | success | warning | error | development | financing. Optional title. Unknown types fall back to info. Live gallery: Doc System.
APIs and UI described in preview docs may change before release — pair with a GitHub issue or implementation log link when possible.
Use for grants, treasury programs, vendor funding, or affiliate revenue mechanics — link Wallet and opportunities docs.
Lead hub pages with a one-paragraph outcome for operators and CEOs, then tables and a single system diagram.
Prefer one architecture map and one sequence diagram on hub pages. Additional diagrams belong on child articles.
Or a fenced block (converted automatically):
Split audiences without duplicating entire pages. Pass items or rely on child <Tab value="…"> labels.
lib/database/DatabaseService.ts)Required pattern for section hub pages (index.mdx). Each card links to a child page from that section's meta.json.
System map, Tabs, and links to all architecture children
Canonical DB_BACKEND_MODE reference
Use href /docs/... without the library segment. Locale prefix is applied by the app router.
Blank lines are required before <Steps>, before each <Step>, after each </Step>, and after </Steps>. Omitting them causes MDX parse errors.
Install dependencies:
Add the page to docs/en/{section}/meta.json pages[] and mirror UK/RU meta.json when translating.
Verify at http://localhost:3000/docs/{section}/{page}.
Server-rendered Shiki blocks. Prefer the code prop or template literal children:
Inline code uses the markdown backtick form: DatabaseService, auth().
Alias for Mermaid mindmap syntax. Use for concept hierarchies — not five mindmaps on one hub page.
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.
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.
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.
| Component | When |
|---|---|
| CodeSandbox | /examples — Sandpack react-ts (or custom files) with live preview |
| Math | Inline KaTeX: <Math>{E = mc^2}</Math> |
| MathBlock | Display equations in scientific / tokenomics docs |
Use this when rewriting section indexes (e.g. Architecture):
Executive Callout — who the page is for and the deployment default (Postgres-primary, PaymentConductor, etc.).
Capability table — stack row per concern (data, auth, payments, realtime).
One system Mermaid — logical layers, not emoji sprawl.
Tabs — Developers vs Operators (or CEO vs engineering).
Cards — every entry in section meta.json pages[] except index.
Cross-links — customization, deployment env, LOCALE-GAPS policy for UK/RU.
| Rule | Why |
|---|---|
| EN canonical unless LOCALE-GAPS marks UK/RU summary | Avoid drift on env tables and API bodies |
Frontmatter title + description required | SEO and docs sidebar |
No fumadocs-ui imports | Migrated to Ring components/docs/ |
Test npm run dev after new MDX | Catch Steps blank-line and Mermaid typos early |
| Grep stale strings after stack bumps | e.g. Next.js 16 in UK/RU backlog |
features/AI-LEGIOX/legiox-truth-lens/ring-docs-specialist.nodus.jsonAfter adding or restructuring docs, update scripts/LOCALE-GAPS.md and run legiox-context-update when AI-CONTEXT should reflect new patterns.
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.
| Stage | Location | Role |
|---|---|---|
| Content | docs/{locale}/ | title, description, MDX body |
| Resolver | lib/docs/docs-path.ts | Slug → docs/{locale}/**; hub (foo/index.mdx) and leaf (foo.mdx); buildDocsHref(), scanDocsStaticParams() |
| Components | components/docs/mdx-docs-shared.tsx | Registers all JSX tags below |
| Syntax | Shiki (nord / tokyo-night) | Server-side highlighting in <Code> |
| Component | Best for | Client / server |
|---|---|---|
| Callout | Executive summary, warnings (DB_BACKEND_MODE, legal) | Client |
| Mermaid | One system map + one sequence diagram per hub (avoid sprawl) | Client |
| Tabs / Tab | Developer vs Operator (or CEO) views on the same page | Client |
| Cards / Card | Hub navigation to all child articles | Server-friendly |
| Steps / Step | Install and deploy walkthroughs | Server-friendly |
| Code | Shiki-highlighted config snippets | Server (async) |
| MindMap | Concept 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.
Types: info | tip | success | warning | error | development | financing. Optional title. Unknown types fall back to info. Live gallery: Doc System.
APIs and UI described in preview docs may change before release — pair with a GitHub issue or implementation log link when possible.
Use for grants, treasury programs, vendor funding, or affiliate revenue mechanics — link Wallet and opportunities docs.
Lead hub pages with a one-paragraph outcome for operators and CEOs, then tables and a single system diagram.
Prefer one architecture map and one sequence diagram on hub pages. Additional diagrams belong on child articles.
Or a fenced block (converted automatically):
Split audiences without duplicating entire pages. Pass items or rely on child <Tab value="…"> labels.
lib/database/DatabaseService.ts)Required pattern for section hub pages (index.mdx). Each card links to a child page from that section's meta.json.
System map, Tabs, and links to all architecture children
Canonical DB_BACKEND_MODE reference
Use href /docs/... without the library segment. Locale prefix is applied by the app router.
Blank lines are required before <Steps>, before each <Step>, after each </Step>, and after </Steps>. Omitting them causes MDX parse errors.
Install dependencies:
Add the page to docs/en/{section}/meta.json pages[] and mirror UK/RU meta.json when translating.
Verify at http://localhost:3000/docs/{section}/{page}.
Server-rendered Shiki blocks. Prefer the code prop or template literal children:
Inline code uses the markdown backtick form: DatabaseService, auth().
Alias for Mermaid mindmap syntax. Use for concept hierarchies — not five mindmaps on one hub page.
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.
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.
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.
| Component | When |
|---|---|
| CodeSandbox | /examples — Sandpack react-ts (or custom files) with live preview |
| Math | Inline KaTeX: <Math>{E = mc^2}</Math> |
| MathBlock | Display equations in scientific / tokenomics docs |
Use this when rewriting section indexes (e.g. Architecture):
Executive Callout — who the page is for and the deployment default (Postgres-primary, PaymentConductor, etc.).
Capability table — stack row per concern (data, auth, payments, realtime).
One system Mermaid — logical layers, not emoji sprawl.
Tabs — Developers vs Operators (or CEO vs engineering).
Cards — every entry in section meta.json pages[] except index.
Cross-links — customization, deployment env, LOCALE-GAPS policy for UK/RU.
| Rule | Why |
|---|---|
| EN canonical unless LOCALE-GAPS marks UK/RU summary | Avoid drift on env tables and API bodies |
Frontmatter title + description required | SEO and docs sidebar |
No fumadocs-ui imports | Migrated to Ring components/docs/ |
Test npm run dev after new MDX | Catch Steps blank-line and Mermaid typos early |
| Grep stale strings after stack bumps | e.g. Next.js 16 in UK/RU backlog |
features/AI-LEGIOX/legiox-truth-lens/ring-docs-specialist.nodus.jsonAfter adding or restructuring docs, update scripts/LOCALE-GAPS.md and run legiox-context-update when AI-CONTEXT should reflect new patterns.
| Client |
| Timeline | Release / migration history | Client |
| RingMatcherOrchestration | Docs hub default — lightweight AI matcher loop (SVG, locale-aware) | Client |
| RingAISynapseFlow | Legacy heavy demo (Three.js) — preserved, avoid on reference pages | Client |
| CodeSandbox | Runnable examples in /examples | Client |
| Math / MathBlock | Scientific editor, tokenomics equations | Client |
<Callout type="warning" title="Security">
Never commit `WAYFORPAY_SECRET_KEY` to the repository.
</Callout>
<Mermaid title="Payment flow">
{`sequenceDiagram
User->>Ring: Checkout
Ring->>WayForPay: Create session`}
</Mermaid>
<Tabs items={['Developers', 'Operators']}>
<Tab value="Developers">
Content for engineers.
</Tab>
<Tab value="Operators">
Content for deployers and CEOs.
</Tab>
</Tabs>
<Cards>
<Card title="Page title" href="/docs/section/page">
Short description for the card body.
</Card>
</Cards>
<Code language="bash" title="terminal">
{`npm run dev`}
</Code>
{/* Timeline expects items prop — use in dedicated client wrapper or examples */}
<RingMatcherOrchestration locale="uk" autoPlay={true} />| Client |
| Timeline | Release / migration history | Client |
| RingMatcherOrchestration | Docs hub default — lightweight AI matcher loop (SVG, locale-aware) | Client |
| RingAISynapseFlow | Legacy heavy demo (Three.js) — preserved, avoid on reference pages | Client |
| CodeSandbox | Runnable examples in /examples | Client |
| Math / MathBlock | Scientific editor, tokenomics equations | Client |
<Callout type="warning" title="Security">
Never commit `WAYFORPAY_SECRET_KEY` to the repository.
</Callout>
<Mermaid title="Payment flow">
{`sequenceDiagram
User->>Ring: Checkout
Ring->>WayForPay: Create session`}
</Mermaid>
<Tabs items={['Developers', 'Operators']}>
<Tab value="Developers">
Content for engineers.
</Tab>
<Tab value="Operators">
Content for deployers and CEOs.
</Tab>
</Tabs>
<Cards>
<Card title="Page title" href="/docs/section/page">
Short description for the card body.
</Card>
</Cards>
<Code language="bash" title="terminal">
{`npm run dev`}
</Code>
{/* Timeline expects items prop — use in dedicated client wrapper or examples */}
<RingMatcherOrchestration locale="uk" autoPlay={true} />| Client |
| Timeline | Release / migration history | Client |
| RingMatcherOrchestration | Docs hub default — lightweight AI matcher loop (SVG, locale-aware) | Client |
| RingAISynapseFlow | Legacy heavy demo (Three.js) — preserved, avoid on reference pages | Client |
| CodeSandbox | Runnable examples in /examples | Client |
| Math / MathBlock | Scientific editor, tokenomics equations | Client |
<Callout type="warning" title="Security">
Never commit `WAYFORPAY_SECRET_KEY` to the repository.
</Callout>
<Mermaid title="Payment flow">
{`sequenceDiagram
User->>Ring: Checkout
Ring->>WayForPay: Create session`}
</Mermaid>
<Tabs items={['Developers', 'Operators']}>
<Tab value="Developers">
Content for engineers.
</Tab>
<Tab value="Operators">
Content for deployers and CEOs.
</Tab>
</Tabs>
<Cards>
<Card title="Page title" href="/docs/section/page">
Short description for the card body.
</Card>
</Cards>
<Code language="bash" title="terminal">
{`npm run dev`}
</Code>
{/* Timeline expects items prop — use in dedicated client wrapper or examples */}
<RingMatcherOrchestration locale="uk" autoPlay={true} />