docs: Improve README for local development and standardize tab usage (#11865)

## Problem statement

- `<Tabs>` were not rendered in docs
- Missing steps in README for local dev

## How it was solved

- Enhance the README to better describe local development setup and
clean up formatting.
- Standardize the use of tabs across various components for consistency.

## Additional info

To not cause merge conflicts with
https://github.com/zitadel/zitadel/pull/11729 changes in
`/self-hosting/manage/configure/configure.mdx` were skipped
This commit is contained in:
Silvan
2026-03-23 14:39:07 +00:00
committed by GitHub
parent 70adaff793
commit 4bc899d052
9 changed files with 110 additions and 111 deletions
+55 -21
View File
@@ -8,6 +8,12 @@ Ensure you have followed the [root quick start](../../CONTRIBUTING.md#quick-star
### Local Development
Ensure all dependencies are installed:
```bash
pnpm install
```
Start the development server:
```bash
@@ -34,28 +40,61 @@ Key scripts for documentation workflows:
### Validation
* **Code Quality**: Run `pnpm lint` to check for syntax and style issues in JS/TS/MDX files.
* **Content Integrity**: Run `pnpm check:links` to validate content structure, including:
* Broken internal links
* Missing required front-matter (e.g., `title`)
* Image references
* **Code Quality**: Run `pnpm nx run @zitadel/docs:lint` to check for syntax and style issues in JS/TS/MDX files.
* **Content Integrity**: Run `pnpm nx run @zitadel/docs:check-links` to validate content structure, including:
* Broken internal links
* Missing required front-matter (e.g., `title`)
* Image references
### Troubleshooting
#### Issue: Nx configuration not found or "nx" command not found
If you see errors like:
```bash
NX Cannot find configuration for task @zitadel/zitadel:@zitadel/docs:generate
Pass --verbose to see the stacktrace.
```
or
```
pnpm nx run @zitadel/docs:dev
 ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL  Command "nx" not found
Did you mean "pnpm nx"?
```
**Root cause**: Your dependency cache or `node_modules` is out of sync.
**Solution**: Run these commands from the repository root in order:
1. **Clear node_modules**: `rm -rf node_modules` — removes the installed dependency folder
2. **Clear pnpm cache**: `pnpm cache delete` — clears pnpm's internal package cache
3. **Reinstall dependencies**: `pnpm install` — reinstalls all dependencies fresh
4. **Test the setup**: `pnpm nx run @zitadel/docs:generate` — verifies everything works
This resolves 99% of setup-related issues.
## Contributing
### Build Process
The docs build process automatically handling the following steps via `generate`:
1. Downloads required protoc plugins.
2. Generates gRPC documentation from proto files.
3. Generates API documentation from OpenAPI specs.
4. Generates index files for directory structures.
The docs build process automatically handles the following steps via `generate`:
1. Downloads required protoc plugins.
2. Generates gRPC documentation from proto files.
3. Generates API documentation from OpenAPI specs.
4. Generates index files for directory structures.
### Style Guide
- **Variables**: Use environment variables in code snippets where possible.
- **Embedded Content**: Use `_filename.mdx` for content embedded in other pages (not indexed individually).
- **Code Embedding**: Use the `file` property in code blocks to embed code from the repo.
- **Voice**: Use active voice and sentence case for titles.
* **Variables**: Use environment variables in code snippets where possible.
* **Embedded Content**: Use `_filename.mdx` for content embedded in other pages (not indexed individually).
* **Code Embedding**: Use the `file` property in code blocks to embed code from the repo.
* **Voice**: Use active voice and sentence case for titles.
Refer to the [Google Developer Style Guide](https://developers.google.com/style) for general guidelines.
@@ -64,9 +103,9 @@ Refer to the [Google Developer Style Guide](https://developers.google.com/style)
All documentation content is located in the `content` directory. Note that the system strictly accepts **only `.mdx` files**.
To add a new page:
1. Create a `.mdx` file in the appropriate subdirectory of [`content`](./content).
2. Register the new page in the sidebar settings at [`lib/sidebar-data.ts`](./lib/sidebar-data.ts) to make it accessible in the navigation.
1. Create a `.mdx` file in the appropriate subdirectory of [`content`](./content).
2. Register the new page in the sidebar settings at [`lib/sidebar-data.ts`](./lib/sidebar-data.ts) to make it accessible in the navigation.
### Pull Requests
@@ -75,9 +114,4 @@ Pass quality checks before submitting:
```bash
pnpm nx run @zitadel/docs:build
pnpm nx run @zitadel/docs:check:links
```
You can also run specific steps individually:
* `pnpm fetch:remote-content`
* `pnpm generate:api-reference`