docs

Vortex Documentation Development

Documentation built with Docusaurus and React components.

Quick Start

yarn install           # Install dependencies
yarn start            # Start dev server
yarn build            # Build for production

Development Commands

# Development
yarn start            # Hot reloading dev server
yarn build            # Production build
yarn serve            # Serve built site locally

# Testing
yarn test             # Run all tests
yarn test:watch       # Tests in watch mode
yarn test:coverage    # Tests with coverage

# Quality
yarn lint             # Check code quality
yarn lint-fix         # Auto-fix issues
yarn spellcheck       # American English validation
yarn lint-prose       # Prose style checks (Vale)

Project Structure

docs/
├── content/                # MDX documentation files
├── src/components/         # React components (VerticalTabs, etc.)
├── tests/
│   └── unit/              # Jest tests
├── .vale/Vortex/          # Prose style rules
├── .vale.ini              # Prose style configuration
├── jest.config.js         # Test configuration
└── cspell.json           # Spellcheck configuration

Component Usage

VerticalTabs

import { VerticalTabs, VerticalTab, VerticalTabPanel } from '@site/src/components/VerticalTabs';

<VerticalTabs>
  <VerticalTab>💧 Title | Subtitle description</VerticalTab>
  <VerticalTabPanel>
    Content for this tab...
  </VerticalTabPanel>
</VerticalTabs>

Writing Tests

Example component test:

import { render, screen } from '@testing-library/react';

test('component renders correctly', () => {
  render(<Component />);
  expect(screen.getByText('Expected text')).toBeInTheDocument();
});

Content Guidelines

• Use American spelling (organize, color, behavior)
• Combine Markdown with React components in MDX
• Include practical bash/JavaScript examples

Pre-commit Checklist

yarn lint && yarn spellcheck && yarn lint-prose && yarn test && yarn build