Zudoku

https://github.com/zuplo/zudoku
Admin
Framework for building high quality, interactive API documentation.
Tokens:150,686
Snippets:1,750
Trust Score:9.8
License:MIT
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### CodeTabs Sync Example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/code-tabs.mdx

An example of using syncKey to synchronize package manager installation commands.

```sh
pnpm add zudoku
```

```sh
npm install zudoku
```

--------------------------------

### Create a new Zudoku app interactively

Source: https://github.com/zuplo/zudoku/blob/main/packages/create-zudoku/README.md

Run one of these commands to start the interactive setup. You will be prompted for the project name and whether to use TypeScript.

```bash
npm create zudoku@latest
# or
yarn create zudoku
# or
pnpm create zudoku
# or
bunx create-zudoku
```

--------------------------------

### Create and run a Zudoku project

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/quickstart.md

These commands create a new Zudoku project, navigate into it, and start the development server. The CLI prompts for project setup, and the dev server runs at http://localhost:3000 with hot reloading.

```bash
npm create zudoku@latest
```

```bash
cd your-project-name
```

```bash
npm run dev
```

--------------------------------

### Interactive TypeScript prompt

Source: https://github.com/zuplo/zudoku/blob/main/packages/create-zudoku/README.md

During interactive setup, you will be asked whether to use TypeScript. Select Yes to install the necessary types/dependencies and create a new TypeScript project.

```bash
✔ Would you like to use TypeScript? … No / Yes
```

--------------------------------

### Install Nx globally

Source: https://github.com/zuplo/zudoku/blob/main/CONTRIBUTING.md

Installs the latest version of Nx globally, as required by the project setup.

```bash
pnpm add --global nx@latest
```

--------------------------------

### PHP example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of PHP code highlighting.

```php
<?php
class User {
    public function __construct(
        public readonly int $id,
        public readonly string $name,
        public readonly string $email
    ) {}

    public function getDisplayName(): string {
        return ucfirst($this->name);
    }
}
```

--------------------------------

### Start the development server

Source: https://github.com/zuplo/zudoku/blob/main/packages/create-zudoku/templates/zuplo/README-template.md

Starts the local development server with live-reload to see changes in real-time.

```bash
npm run docs
```

--------------------------------

### Bash example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of Bash script highlighting.

```bash
#!/bin/bash

# Install and build
npm install

if [ "$NODE_ENV" = "production" ]; then
  npm run build
else
  npm run dev
fi
```

--------------------------------

### GraphQL example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of GraphQL schema highlighting.

```graphql
type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  user(id: ID!): User
  users: [User!]!
}

type Mutation {
  createUser(name: String!, email: String!): User!
}
```

--------------------------------

### C# example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of C# code highlighting.

```csharp
using System;
using System.Linq;

public class UserService {
    private readonly List<User> _users = new();

    public async Task<User?> GetUserAsync(int id) {
        await Task.Delay(100);
        return _users.FirstOrDefault(u => u.Id == id);
    }
}
```

--------------------------------

### Install build-time dependencies

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/guides/mermaid.mdx

Install the necessary packages and browser binaries for build-time Mermaid rendering.

```bash
npm install rehype-mermaid
npm install -D playwright
npx playwright install
```

--------------------------------

### Rust example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of Rust code highlighting.

```rust
use std::collections::HashMap;

fn main() {
    let mut scores = HashMap::new();
    scores.insert(String::from("Blue"), 10);
    scores.insert(String::from("Red"), 50);

    println!("Team scores: {:?}", scores);
}
```

--------------------------------

### Ruby example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of Ruby code highlighting.

```ruby
class TodoList
  attr_reader :name, :items

  def initialize(name)
    @name = name
    @items = []
  end

  def add_item(description)
    @items << { description: description, completed: false }
  end
end
```

--------------------------------

### YAML example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of YAML code highlighting.

```yaml
name: zudoku
version: 1.0.0
scripts:
  dev: vite
  build: vite build
```

--------------------------------

### Complete site configuration example in zudoku.config.tsx

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/configuration/site.md

Comprehensive example showing all available site configuration options: title, logo, custom 404 page, and banner.

```tsx
{
  site: {
    title: "My API Documentation",
    logo: {
      src: {
        light: "/images/logo-light.svg",
        dark: "/images/logo-dark.svg"
      },
      alt: "Company Logo",
      width: "100px",
    },
    notFoundPage: <NotFound />,
    banner: {
      message: "Welcome to our documentation!",
      color: "info",
      dismissible: true
    },
  }
}
```

--------------------------------

### Complete footer configuration example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/configuration/footer.mdx

A complete example showing all footer options: position, columns, social links, copyright, and logo.

```tsx
footer: {
  position: "center",
  columns: [
    {
      title: "Product",
      position: "start",
      links: [
        { label: "Features", href: "/features" },
        { label: "Pricing", href: "/pricing" },
        { label: "Documentation", href: "/docs" }
      ]
    },
    {
      title: "Resources",
      position: "center",
      links: [
        { label: "Blog", href: "/blog" },
        { label: "Support", href: "/support" },
        { label: "GitHub", href: "https://github.com/yourusername" } // Auto-detected as external
      ]
    }
  ],
  social: [
    { icon: "github", href: "https://github.com/yourusername" },
    { icon: "linkedin", href: "https://linkedin.com/company/yourcompany", label: "LinkedIn" }
  ],
  copyright: `© ${new Date().getFullYear()} YourCompany LLC. All rights reserved.`,
  logo: {
    src: {
      light: "/images/logo-light.svg",
      dark: "/images/logo-dark.svg"
    },
    alt: "Company Logo",
    width: "100px"
  }
}
```

--------------------------------

### Add timestamp to all examples with transformExamples

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/guides/transforming-examples.md

Practical example showing how to add a timestamp to all examples. The transformExamples function receives an options object with content and type properties.

```tsx
const config: ZudokuConfig = {
  defaults: {
    apis: {
      transformExamples: ({ content, type }) => {
        // Example: Add a timestamp to all examples
        const timestamp = new Date().toISOString();

        return content.map((contentItem) => ({
          ...contentItem,
          example: {
            ...contentItem.example,
            timestamp,
            // You can modify other example properties here
          },
        }));
      },
    },
  },
};
```

--------------------------------

### MDX example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of MDX code highlighting.

```mdx
import { Button } from "./Button";

# Welcome to MDX

<Button onClick={() => alert("Hello!")}>Click me</Button>
```

--------------------------------

### Python example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of Python code highlighting.

```python
import asyncio
from typing import List, Optional

class DataProcessor:
    def __init__(self, name: str):
        self.name = name

    async def process_items(self, items: List[str]) -> dict:
        results = [await self._process(item) for item in items]
        return {"processed": len(results), "items": results}
```

--------------------------------

### Run development server with pnpm

Source: https://github.com/zuplo/zudoku/blob/main/examples/cloudflare-ssr/README.md

Starts the development server.

```bash
pnpm dev
```

--------------------------------

### Install Vercel CLI

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/deploy/vercel.md

Installs the Vercel CLI globally so you can deploy your Zudoku documentation from the command line.

```bash
npm i -g vercel
```

--------------------------------

### Install dependencies

Source: https://github.com/zuplo/zudoku/blob/main/packages/create-zudoku/templates/zuplo/README-template.md

Installs the project dependencies using npm.

```bash
npm install
```

--------------------------------

### TOML example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of TOML code highlighting.

```toml
[package]
name = "zudoku"
version = "1.0.0"

[dependencies]
react = "^19.0.0"
```

--------------------------------

### Complete frontmatter example for markdown documentation

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/markdown/frontmatter.md

Complete example showing multiple frontmatter properties used together in a markdown file named documentation.md.

```md
---
title: Advanced Configuration Guide
description: Learn how to configure advanced features in Zudoku
category: Configuration
sidebar_label: Advanced Config
sidebar_icon: settings
toc: true
disable_pager: false
draft: false
---

This page content follows the frontmatter...
```

--------------------------------

### XML app.xml

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

An XML configuration file example.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <appSettings>
    <add key="ApplicationName" value="Zudoku" />
    <add key="Version" value="1.0.0" />
  </appSettings>
  <modules>
    <module name="Auth" enabled="true" />
    <module name="Logging" enabled="true" />
  </modules>
</configuration>
```

--------------------------------

### JSON example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of JSON code highlighting.

```json
{
  "name": "zudoku",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}
```

--------------------------------

### Install dependencies with pnpm

Source: https://github.com/zuplo/zudoku/blob/main/examples/cloudflare-ssr/README.md

Installs project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Complete navigationRules example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/guides/navigation-rules.mdx

Complete example configuration used in the Cosmo Cargo demo. It sorts the Shipments category, inserts a doc before the first matching item, inserts a link after the last item, and modifies an item's icon.

```tsx
navigationRules: [
  {
    type: "sort",
    match: "Shipments",
    by: (a, b) => a.label.localeCompare(b.label),
  },
  {
    type: "insert",
    match: "Shipments/Shipment",
    position: "before",
    items: [
      {
        type: "doc",
        file: "api-shipments/getting-started",
        icon: "plane-takeoff",
      },
    ],
  },
  {
    type: "insert",
    match: "Shipments/-1",
    position: "after",
    items: [
      {
        type: "link",
        label: "System Status",
        to: "/status",
        icon: "satellite",
      },
    ],
  },
  {
    type: "modify",
    match: "Shipments/1",
    set: { icon: "box" },
  },
],
```

--------------------------------

### TypeScript example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of TypeScript code highlighting.

```typescript
interface User {
  name: string;
  age: number;
}

const greet = (user: User): string => `Hello, ${user.name}!`;
```

--------------------------------

### Install rehype-mermaid package

Source: https://github.com/zuplo/zudoku/blob/main/examples/mermaid/pages/build-time.mdx

Install the rehype-mermaid package to enable Mermaid diagram generation in Zudoku.

```bash
npm install rehype-mermaid
```

--------------------------------

### Install playwright browsers

Source: https://github.com/zuplo/zudoku/blob/main/examples/mermaid/pages/build-time.mdx

Install the browsers required by playwright for rendering diagrams.

```bash
npx playwright install
```

--------------------------------

### JavaScript example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of JavaScript code highlighting.

```javascript
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10));
```

--------------------------------

### Generated llms.txt example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/configuration/llms.md

Example llms.txt file generated when llmsTxt is enabled. Shows the H1 title, blockquote description, optional instructions, and a Documentation section with links to pages.

```markdown
# Acme API

> Build and operate integrations with the Acme API.

Use these docs when creating or debugging an Acme integration. Start with the quickstart, then
consult the API reference for request and response schemas.

## Documentation

- [Quickstart](/docs/quickstart.md): Get started with Zudoku
- [Writing](/docs/writing.md): A guide to writing documentation
```

--------------------------------

### Zuplo Echo example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/playground.mdx

Example using the Zuplo Echo API to test the POST /hello-world/{name} endpoint with headers, path params, query params, and body.

```tsx
<OpenPlaygroundButton
  server="https://echo.zuplo.io/"
  url="/hello-world/{name}"
  headers={[
    {
      name: "X-Zudoku-Playground",
      defaultValue: "Hello World",
    },
  ]}
  pathParams={[{ name: "name", defaultValue: "John" }]}
  queryParams={[
    { name: "age", defaultValue: "30" },
    { name: "city", defaultValue: "New York" },
  ]}
  body={JSON.stringify({ message: "Hello World" })}
  method="POST"
/>
```

--------------------------------

### Advanced Stepper Example with Markdown Source

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/stepper.mdx

Advanced stepper example with detailed steps, an info callout, a bulleted list, and a shell command block. The second block is the Markdown source shown in a collapsible details element.

```mdx
<Stepper>

1. **Identify the Problem**

   Begin by identifying the problem you're trying to solve. This foundational step ensures you're
   building the right solution for your needs.

1. **Plan Your Project**

   Define your project requirements and goals. This ensures you're building the right solution for
   your needs.

   :::info

   Make sure you have gathered all the information you need before you start planning your project.

   :::

1. **Build Your Solution**

   With a solid plan in place, start implementing your solution. Break down complex tasks into
   manageable pieces and track your progress.
   - Create component structure
   - Implement core functionality
   - Add styling and polish

1. **Test and Deploy** 🚀

   ```sh
   pnpm build
   pnpm test
   pnpm deploy --prod
   ```

</Stepper>
```

```mdx
<Stepper>

1. **Identify the Problem**

   Begin by identifying the problem you're trying to solve. This foundational step ensures you're
   building the right solution for your needs.

1. **Plan Your Project**

   Define your project requirements and goals. This ensures you're building the right solution for
   your needs.

   :::info

   Make sure you have gathered all the information you need before you start planning your project.

   :::

1. **Build Your Solution**

   With a solid plan in place, start implementing your solution. Break down complex tasks into
   manageable pieces and track your progress.
   - Create component structure
   - Implement core functionality
   - Add styling and polish

1. **Test and Deploy** 🚀

<!-- prettier-ignore-start -->
   ```sh

   pnpm build 
   pnpm test 
   pnpm deploy --prod

   ```
<!-- prettier-ignore-end -->

</Stepper>
```

--------------------------------

### Initialize Zudoku project via CLI

Source: https://github.com/zuplo/zudoku/blob/main/README.md

Use the Zudoku CLI to quickly scaffold a new API documentation project.

```bash
npm create zudoku@latest
```

--------------------------------

### Install pnpm globally

Source: https://github.com/zuplo/zudoku/blob/main/CONTRIBUTING.md

Installs the pnpm package manager globally, which is required for the project setup.

```bash
npm install -g pnpm
```

--------------------------------

### Run development server with npm, yarn, or pnpm

Source: https://github.com/zuplo/zudoku/blob/main/packages/create-zudoku/templates/default/ts/README-template.md

Use one of these commands to start the development server. The commands are alternatives; choose the one that matches your package manager.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```

--------------------------------

### JSON Placeholder example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/playground.mdx

Example using the JSON Placeholder API to test the GET /photos endpoint, with custom button text.

```tsx
<OpenPlaygroundButton server="https://jsonplaceholder.typicode.com" url="/photos" method="GET">
  Test Photos Endpoint
</OpenPlaygroundButton>
```

--------------------------------

### Set x-zudoku-collapsed on tags

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/openapi-extensions/x-zudoku-collapsed.md

Shows how to set x-zudoku-collapsed on tag objects in an OpenAPI document. Getting Started is expanded by default while Advanced starts collapsed.

```yaml
tags:
  - name: Getting Started
    x-zudoku-collapsed: false
  - name: Advanced
    x-zudoku-collapsed: true
```

--------------------------------

### Set up a new Vercel project

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/deploy/vercel.md

Initializes a new Vercel project in the root of your docs directory. It prompts for project name and code location, then sets up deployment.

```bash
vercel
```

--------------------------------

### x-zudoku-playground-enabled OpenAPI extension example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/openapi-extensions/x-zudoku-playground-enabled.md

Shows how to set the x-zudoku-playground-enabled extension at the Operation Object level to control playground visibility per operation. The example sets it to true for GET /users and false for POST /webhooks/trigger, overriding the global disablePlayground setting.

```yaml
paths:
  /users:
    get:
      summary: List users
      x-zudoku-playground-enabled: true
      responses:
        "200":
          description: Successful response
  /webhooks/trigger:
    post:
      summary: Trigger webhook
      x-zudoku-playground-enabled: false
      responses:
        "200":
          description: Accepted
```

--------------------------------

### YAML example of x-code-samples extension

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/openapi-extensions/x-code-samples.md

Shows how to add custom code samples to an API operation using the x-code-samples extension. The example defines a GET /users operation with three samples: curl, Python, and JavaScript. Each sample uses the 'source' property to embed the code snippet.

```yaml
paths:
  /users:
    get:
      summary: List users
      x-code-samples:
        - lang: curl
          label: cURL
          source: |
            curl -X GET https://api.example.com/users \
              -H "Authorization: Bearer $TOKEN"
        - lang: python
          label: Python
          source: |
            import requests

            response = requests.get(
                "https://api.example.com/users",
                headers={"Authorization": f"Bearer {token}"},
            )
        - lang: javascript
          label: JavaScript
          source: |
            const response = await fetch("https://api.example.com/users", {
              headers: { Authorization: `Bearer ${token}` },
            });
      responses:
        "200":
          description: Successful response
```

--------------------------------

### create-zudoku --help output

Source: https://github.com/zuplo/zudoku/blob/main/packages/create-zudoku/README.md

Shows the full CLI usage and all available options for non-interactive project creation. Use this to configure TypeScript, JavaScript, ESLint, import alias, package manager, examples, and more.

```bash
Usage: create-zudoku [project-directory] [options]

Options:
  -V, --version                        output the version number
  --ts, --typescript

    Initialize as a TypeScript project. (default)

  --js, --javascript

    Initialize as a JavaScript project.

  --eslint

    Initialize with ESLint config.

  --import-alias <alias-to-configure>

    Specify import alias to use (default "@/*").

  --empty

    Initialize an empty project.

  --use-npm

    Explicitly tell the CLI to bootstrap the application using npm

  --use-pnpm

    Explicitly tell the CLI to bootstrap the application using pnpm

  --use-yarn

    Explicitly tell the CLI to bootstrap the application using Yarn

  --use-bun

    Explicitly tell the CLI to bootstrap the application using Bun

  -e, --example [name]|[github-url]

    An example to bootstrap the app with. You can use an example name
    from the official Zudoku repo or a GitHub URL. The URL can use
    any branch and/or subdirectory

  --example-path <path-to-example>

    In a rare case, your GitHub URL might contain a branch name with
    a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar).
    In this case, you must specify the path to the example separately:
    --example-path foo/bar

  --reset-preferences

    Explicitly tell the CLI to reset any stored preferences

  --skip-install

    Explicitly tell the CLI to skip installing packages

  --yes

    Use previous preferences or defaults for all options that were not
    explicitly specified, without prompting.

  -h, --help                           display help for command
```

--------------------------------

### Setup navigationRules in zudoku.config.tsx

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/guides/navigation-rules.mdx

Add a `navigationRules` array to your `zudoku.config.tsx` to customize the generated sidebar. The array is empty initially; rules are added as shown in the following examples.

```tsx
import type { ZudokuConfig } from "zudoku";

const config: ZudokuConfig = {
  apis: [{ type: "file", input: "./api.json", path: "api-shipments" }],
  navigation: [{ type: "link", label: "Shipments", to: "/api-shipments" }],
  navigationRules: [
    // rules go here
  ],
};
```

--------------------------------

### Build, preview, and deploy with pnpm

Source: https://github.com/zuplo/zudoku/blob/main/examples/cloudflare-ssr/pages/documentation/introduction.mdx

Commands to build, preview, and deploy the Zudoku SSR example to Cloudflare Workers.

```bash
# Build with SSR for Cloudflare
pnpm build

# Preview locally with Wrangler
pnpm preview

# Deploy to Cloudflare
pnpm deploy
```

--------------------------------

### Redirect object properties example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/guides/redirects.md

Shows the redirect object properties: from and to. The from path is the path you want to redirect away from; an absolute path starting with / is recommended. The to path is the destination where visitors will be sent. Trailing slashes in the from path are normalized automatically.

```ts
redirects: [{ from: "/old-page", to: "/new-page" }];
```

--------------------------------

### Insert a doc before a sidebar item

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/guides/navigation-rules.mdx

Use `type: "insert"` to add items before or after a matched sidebar item. The `match` string uses the tab label as the first segment and navigates into the sidebar tree. This inserts a "Getting Started" doc before the first item in the Shipments sidebar.

```tsx
navigationRules: [
  {
    type: "insert",
    match: "Shipments/0",
    position: "before",
    items: [
      {
        type: "doc",
        file: "api-shipments/getting-started",
        icon: "plane-takeoff",
      },
    ],
  },
],
```

--------------------------------

### Deploy to Cloudflare Pages with Wrangler CLI

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/deploy/cloudflare-pages.md

Builds the static documentation site, creates a new Cloudflare Pages project if needed, and deploys the generated dist folder. The site becomes live at <your-project-name>.pages.dev within a few seconds.

```bash
npm run build
```

```bash
npx wrangler pages project create
```

```bash
npx wrangler pages deploy ./dist
```

--------------------------------

### Complete theme configuration with registryUrl, light/dark colors, fonts, and customCss

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/customization/colors-theme.mdx

Comprehensive example combining multiple theming approaches: imports a base theme from a registry, overrides colors for light and dark modes, sets custom fonts, and adds custom component styling via customCss.

```ts
const config = {
  theme: {
    // Import base theme from registry
    registryUrl: "https://tweakcn.com/api/registry/theme/modern-blue",

    // Override specific colors
    light: {
      primary: "#0066cc",
      accent: "#f0f9ff",
    },
    dark: {
      primary: "#3399ff",
      accent: "#0c1b2e",
    },

    // Custom fonts
    fonts: {
      sans: "Inter",
      mono: "JetBrains Mono",
    },

    // Additional custom styling
    customCss: {
      ".hero-section": {
        background: "var(--primary)",
        color: "var(--primary-foreground)",
        padding: "2rem",
        "border-radius": "var(--radius)",
      },
    },
  },
};
```

--------------------------------

### Set basePath for documentation site

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/configuration/overview.md

Set the base path for the documentation site, useful for hosting under a specific path. A page defined as '/intro' would result in 'https://example.com/docs/intro'.

```ts
{
  basePath: "/docs",
  // A page defined as `/intro` would result in: https://example.com/docs/intro
}
```

--------------------------------

### File structure example for MDX pages

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/markdown/mdx.md

Shows the file structure with regular markdown (.md) and MDX (.mdx) files. MDX files work like markdown but support JSX.

```text
docs/
├── my-page.md      # Regular markdown
├── my-mdx-page.mdx # MDX with JSX support

```

--------------------------------

### Markdown example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of Markdown code highlighting.

```markdown
# Hello World

This is **bold** and _italic_ text.

- Item 1
- Item 2

[Link to Zudoku](https://zudoku.dev)
```

--------------------------------

### Create the custom page file

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/guides/custom-pages.md

Run this command from the project root to create an empty file for the custom page component.

```bash
touch src/MyCustomPage.tsx
```

--------------------------------

### TSX example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of TSX code highlighting.

```tsx
export const App = () => {
  return <div>Hello, World!</div>;
};
```

--------------------------------

### ANSI terminal output example

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Example of ANSI terminal output highlighting.

```ansi
$ pnpm run build

> zudoku@1.0.0 build

[36mvite v7.0.5 [32mbuilding for production...[0m
[32m✓ 34 modules transformed.
[90mdist/[39m[32mindex.html                 [0m[90m0.46 kB[0m [33m│ gzip:  0.30 kB[0m
[90mdist/[39m[36massets/index-4sK2hL.css   [0m[90m24.67 kB[0m [33m│ gzip:  4.72 kB[0m
[90mdist/[39m[35massets/index-B1tPwS.js   [0m[90m143.18 kB[0m [33m│ gzip: 46.13 kB[0m
[34m✓ built in 1.23s
```

--------------------------------

### Configure syntax highlighting in zudoku.config.tsx

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/markdown/code-blocks.md

Configuration example for syntax highlighting in zudoku.config.tsx. Sets light and dark themes and extends the default languages with additional ones. Changes require a restart of Zudoku to take effect.

```tsx
import { defaultLanguages, type ZudokuConfig } from "zudoku";

const config: ZudokuConfig = {
  // ...
  syntaxHighlighting: {
    themes: {
      light: "vitesse-light",
      dark: "vitesse-dark",
    },
    // Extend default languages with additional ones
    // Aliases like "lisp" are resolved automatically
    languages: [...defaultLanguages, "rust", "ruby", "php", "powershell"],
  },
};
```

--------------------------------

### Install playwright package

Source: https://github.com/zuplo/zudoku/blob/main/examples/mermaid/pages/build-time.mdx

Install the playwright package as a dev dependency for diagram generation.

```bash
npm install -D playwright
```

--------------------------------

### Build Zudoku locally with npm run build

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/deploy/direct-upload.md

Run this command in the project root to generate a `dist` folder with static files for upload to your server.

```bash
npm run build
```

--------------------------------

### Run Cosmo Cargo dev server

Source: https://github.com/zuplo/zudoku/blob/main/CONTRIBUTING.md

Runs the 'Cosmo Cargo' sample project locally for development.

```bash
nx run cosmo-cargo:dev
```

--------------------------------

### Install @sentry/react

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/configuration/sentry.mdx

Install the optional Sentry dependency required to enable error tracking.

```bash
npm install --save @sentry/react
```

--------------------------------

### Import SyntaxHighlight component

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/components/syntax-highlight.mdx

Import the component from the zudoku UI library.

```tsx
import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight";
```

--------------------------------

### Vercel default project settings prompt

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/deploy/vercel.md

Shows the default Vercel project settings when no framework is detected. Accept these defaults and keep the Output Directory override disabled; Zudoku detects the VERCEL environment variable and emits a Build Output API deployment to .vercel/output.

```ansi
No framework detected. Default Project Settings:
- Build Command: `npm run vercel-build` or `npm run build`
- Development Command: None
- Install Command: `yarn install`, `pnpm install`, `npm install`, or `bun install`
- Output Directory: `public` if it exists, or `.`
? Want to modify these settings? (y/N)
```

--------------------------------

### Install Supabase dependencies

Source: https://github.com/zuplo/zudoku/blob/main/docs/pages/docs/configuration/authentication-supabase.md

Install the @supabase/supabase-js package required by Zudoku for the Supabase client and auth UI.

```bash
npm install @supabase/supabase-js

```

--------------------------------

### Build with SSR and Cloudflare adapter

Source: https://github.com/zuplo/zudoku/blob/main/examples/cloudflare-ssr/pages/documentation/introduction.mdx

Build command using the --experimental-ssr and --adapter cloudflare flags.

```bash
zudoku build --experimental-ssr --adapter cloudflare
```
Tokens:
Raw