Version: Next

Web (Documentation)

The official LEIA documentation website. This contains the site you are reading right now. Built with Docusaurus 3, React 19, and TailwindCSS. Deployed to GitHub Pages at leia.ovh.

Tech Stack

Technology	Purpose
Docusaurus 3	Static site generator and documentation framework
React 19 + TypeScript	UI components and custom pages
TailwindCSS 3	Utility-first styling
@tailwindcss/typography	Prose styles for Markdown content
Framer Motion	Animations on the landing page
Mermaid.js	Diagram rendering inside docs
Prism	Code syntax highlighting
Lucide React	Icon library
MDX	Markdown with embedded React components
GitHub Pages	Hosting and deployment

Prerequisites

Node.js >= 18.x
npm

No environment variables are required for local development.

Project Structure

web/
├── docs/                        # All documentation content (Markdown / MDX)
│   ├── img/                     # Images organised by category
│   ├── introduction/            # Getting started docs
│   ├── installation/            # Simple guide to install and deploy LEIA
│   ├── tutorials/               # Step-by-step guides
│   └── contributing/            # This section
├── src/                         # React source code
│   ├── components/              # Landing page components (Hero, Features, About…)
│   ├── css/
│   │   └── custom.css           # Global styles (Tailwind imports + custom utilities)
│   ├── lib/
│   │   └── utils.ts             # Shared utility functions
│   ├── pages/
│   │   └── index.js             # Landing page entry point
│   └── theme/                   # Swizzled Docusaurus components
│       ├── Footer/              # Custom footer
│       ├── Navbar/              # Custom navbar
│       └── NavbarItem/          # Custom navbar items
├── static/                      # Static assets (logo, favicon, social card)
├── docusaurus.config.js         # Main Docusaurus configuration
├── sidebars.js                  # Sidebar structure definition
├── tailwind.config.js           # TailwindCSS configuration
└── package.json                 # Dependencies and npm scripts

Local Development

Fork and clone the repository:
```
git clone <your-fork-url>
cd web
```
Install dependencies:
```
npm install
```
Start the development server:
```
npm start
```

The site will be available at http://localhost:3000 with hot-reload enabled.

Available Scripts

Script	Command	Description
Dev server	`npm start`	Start local dev server with hot-reload
Build	`npm run build`	Build the production-ready static site
Serve	`npm run serve`	Serve the built site locally for testing
Deploy	`npm run deploy`	Build and push to the `gh-pages` branch
Clear cache	`npm run clear`	Delete the Docusaurus build cache
Write translations	`npm run write-translations`	Generate i18n translation files
Write heading IDs	`npm run write-heading-ids`	Auto-generate anchor IDs for headings
Lint Markdown	`npm run lint:md`	Check Markdown files for style issues
Lint Markdown (fix)	`npm run lint:md:fix`	Auto-fix Markdown style issues
Version docs	`npm run docs:version <version>`	Snapshot current docs as a new version

Adding or Updating Documentation

New Pages

Create a .md or .mdx file inside the appropriate docs/ category folder.
Add frontmatter at the top of the file:
```
---
sidebar_position: 2
---
```
Images go in docs/img/<category>/ and are referenced with relative paths:
```
![Alt text](../img/introduction/image.png)
```

Diagrams

Mermaid diagrams are supported out of the box. Use a fenced code block with the mermaid language tag:

```mermaid
graph LR
    A[Designer] --> B[Runner]
    B --> C[OpenAI]
```

Versioning

To snapshot the current docs as a new version:

npm run docs:version <version>

This creates a versioned_docs/version-<version>/ folder and adds the version to the version selector in the navbar.

Styling

Global styles live in src/css/custom.css.
Use predefined Tailwind classes and custom utilities such as .glass-card and .glass-panel.
Follow the LEIA brand: Vibrant Violet primary (#7c3aed), dark slate backgrounds.
Do not add inline styles. Use Tailwind classes or extend custom.css.

Contributing

Fork the repository and create a branch off main:
```
git checkout -b docs/my-change
```
Follow the project structure above when adding new documentation pages or sections.
Run the dev server and verify your changes locally before opening a PR:
```
npm start
```
Lint your Markdown files and fix any issues:
```
npm run lint:md:fix
```
Make sure the site builds without errors:
```
npm run build
```
Use Conventional Commits for your commit messages (docs:, feat:, fix:, etc.).
Open a Pull Request. Include screenshots for any visual or layout changes.

Tech Stack​

Prerequisites​

Project Structure​

Local Development​

Available Scripts​

Adding or Updating Documentation​

New Pages​

Diagrams​

Versioning​

Styling​

Contributing​