### Start Zudoku Development Server

Source: https://zudoku.dev/docs/quickstart

Launch the local development server to preview your Zudoku documentation site. The site runs at http://localhost:3000 with hot reloading enabled for real-time changes.

```bash
npm run dev
```

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

### Build Production Zudoku Site

Source: https://zudoku.dev/docs/quickstart

Create an optimized production build of your Zudoku documentation site for deployment to a live environment.

```bash
npm run build
```

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

### Navigate to Zudoku Project Directory

Source: https://zudoku.dev/docs/quickstart

Change into the newly created Zudoku project directory to access project files and run development commands.

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

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

### Install @shikijs/transformers

Source: https://shiki.style/packages/transformers

Provides installation commands for the @shikijs/transformers package using various package managers including npm, yarn, pnpm, bun, and deno.

```bash
npm i -D @shikijs/transformers
```

```bash
yarn add -D @shikijs/transformers
```

```bash
pnpm add -D @shikijs/transformers
```

```bash
bun add -D @shikijs/transformers
```

```bash
deno add npm:@shikijs/transformers
```

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

### Create Zudoku Project with npm

Source: https://zudoku.dev/docs/quickstart

Initialize a new Zudoku project using the npm create command. The CLI provides interactive prompts to configure your project and select from available templates including API documentation and developer portals.

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

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

### Zudoku Configuration Example - TypeScript

Source: https://context7_llms

Provides an example of a Zudoku configuration file.  It sets up navigation, redirects, API integration, and documentation file paths.

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

const config: ZudokuConfig = {
  navigation: [
    {
      type: "category",
      label: "Documentation",
      items: ["introduction", "example"],
    },
    { type: "link", to: "api", label: "API Reference" },
  ],
  redirects: [{ from: "/", to: "/docs/introduction" }],
  apis: {
    type: "file",
    input: "./apis/openapi.yaml",
    path: "/api",
  },
  docs: {
    files: "/pages/**/*.{md,mdx}",
  },
};

export default config;
```

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

### Create and Start Vite Development Server

Source: https://vite.dev/

This snippet demonstrates how to create and start a Vite development server using its fully typed API. It imports the `createServer` function from 'vite' and uses it to instantiate a server with user-defined configuration options. The server is then started, and its URLs are printed to the console.

```javascript
import { createServer } from 'vite'

const server = await createServer({
  // user config options
})

await server.listen()
server.printUrls()
```

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

### Prerender Configuration Examples (TypeScript)

Source: https://context7_llms

This TypeScript code shows examples of configuring the `prerender` option in `zudoku.build.ts`. It includes examples for setting a fixed number of workers and calculating workers based on the number of available CPU cores.

```typescript
import os from "node:os";

export default {
  prerender: {
    workers: 4, // Fixed number of workers
  },
};
```

```typescript
import os from "node:os";

export default {
  prerender: {
    workers: Math.floor(os.cpus().length * 0.75), // Use 75% of available cores
  },
};
```

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

### Complete Zudoku Footer Configuration Example

Source: https://context7_llms

An example demonstrating the combination of various footer configuration options, including columns, social links, copyright, logo, and positioning.

```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"
  }
}
```

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

### Example `llms.txt` Output (Markdown)

Source: https://context7_llms

An example of the generated `llms.txt` file, which provides a summary of documentation pages with links. This file is created when `llmsTxt: true` is enabled in the configuration.

```markdown
# Documentation

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

```

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

### Markdown Headers Example

Source: https://context7_llms

Provides examples of markdown syntax for different header levels (H1, H2, H3).

```markdown
# H1 Header

## H2 Header

### H3 Header
```

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

### Slot System Usage Example

Source: https://context7_llms

Provides a practical example of using Slot.Target and Slot.Source within a React component. This demonstrates how to define a slot and inject custom content into it for rendering.

```tsx
function MyCustomPage() {
  return (
    <div>
      <h1>My Page</h1>

      {/* Render slot content here */}
      <Slot.Target name="custom-page-header" />

      {/* Inject content into a slot */}
      <Slot.Source name="custom-page-header">
        <div className="bg-blue-100 p-4 rounded">Custom header content</div>
      </Slot.Source>

      <p>Page content here...</p>
    </div>
  );
}
```

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

### Install Azure AD Dependencies (npm)

Source: https://context7_llms

This command installs the necessary `@azure/msal-browser` package, which is a client-side authentication library for Microsoft identity platform applications, enabling browser-based single sign-on flows.

```bash
npm install @azure/msal-browser

```

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

### Advanced Stepper Example

Source: https://context7_llms

An advanced example showcasing the Stepper component with detailed descriptions for each step, including sub-lists and code execution commands. It highlights how to enrich steps with more information.

```tsx
<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 Markdown Example

Source: https://context7_llms

Provides the Markdown/MDX syntax for the advanced Stepper example. This shows how to structure content within MDX files to leverage the Stepper component's capabilities.

```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>
```

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

### Override Install Command in vercel.json

Source: https://vercel.com/docs/projects/project-configuration

This example demonstrates overriding the 'installCommand' property in the vercel.json file. This allows you to specify a custom install command for the project. In the example, it sets the install command to 'npm install', overriding the default install command or the one specified in the project settings. An empty string would skip the install command.

```json
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "installCommand": "npm install"
}
```

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

### Create Cloudflare Pages Project with pnpm

Source: https://developers.cloudflare.com/pages/get-started/c3

This command uses pnpm to generate a new Cloudflare Pages project. It prompts for the installation of 'create-cloudflare' and guides the user through project setup. Specifying '--platform=pages' is essential for creating a Pages project.

```bash
pnpm create cloudflare@latest --platform=pages
```

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

### UserInfo Request Example (HTTP)

Source: https://openid.net/specs/openid-connect-core-1_0.html

An example of an HTTP GET request to the UserInfo Endpoint. It specifies the HTTP method, host, and includes the Access Token in the Authorization header.

```HTTP
GET /userinfo HTTP/1.1
Host: server.example.com
Authorization: Bearer SlAV32hkKG
```

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

### TOML Configuration File

Source: https://zudoku.dev/docs/components/syntax-highlight

TOML format example showing package metadata and dependencies. Demonstrates TOML syntax with sections and version specifications.

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

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

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

### User Agent GET Request to Authorization Endpoint

Source: https://openid.net/specs/openid-connect-core-1_0.html

Example of a GET request sent by the User Agent to the Authorization Server's /authorize endpoint, following an HTTP 302 redirect. This request contains the parameters required for authentication and authorization.

```http
GET /authorize? response_type=code &scope=openid%20profile%20email &client_id=s6BhdRkqt3 &state=af0ifjsldkj &redirect_uri=https%3A%2F%2Fclient.example.org%2Fcb HTTP/1.1
Host: server.example.com
```

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

### Authorization Request Example (response_type=id_token) - HTTP

Source: https://openid.net/specs/openid-connect-core-1_0.html

This example shows an HTTP GET request for an implicit flow using response_type=id_token. It specifies necessary parameters for authentication and authorization. The response is an HTTP 302 redirect containing an ID Token in the URL fragment.

```http
GET /authorize? response_type=id_token &
client_id=s6BhdRkqt3 &
redirect_uri=https%3A%2F%2Fclient.example.org%2Fcb &
scope=openid%20profile%20email &
nonce=n-0S6_WzA2Mj &
state=af0ifjsldkj HTTP/1.1
Host: server.example.com

HTTP/1.1 302 Found
Location: https://client.example.org/cb# id_token=eyJraWQiOiIxZTlnZGs3IiwiYWxnIjoiUlMyNTYifQ. ewogImlzcyI6ICJodHRwczovL3NlcnZlci5leGFtcGxlLmNvbSIsCiAic3ViIjogIjI0ODI4OTc2MTAwMSIsCiAiYXVkIjogInM2QmhkUmtxdDMiLAogIm5vbmNlIjogIm4tMFM2X1d6QTJNaiIsCiAiZXhwIjogMTMxMTI4MTk3MCwKICJpYXQiOiAxMzExMjgwOTcwLAogIm5hbWUiOiAiSmFuZSBEb2UiLAogImdpdmVuX25hbWUiOiAiSmFu ZSIsCiAiZmFtaWx5X25hbWUiOiAiRG9lIiwKICJnZW5kZXIiOiAiZmVtYWxlIiwKICJiaXJ0aGRhdGUiOiAiMDAwMC0xMC0zMSIsCiAiZW1haWwiOiAiamFu ZWRvZUBleGFtcGxlLmNvbSIsCiAicGljdHVyZSI6ICJodHRwOi8vZXhhbXBsZS5jb20vamFu ZWRvZS9tZS5qcGciCn0. NTibBYW_ZoNHGm4ZrWCqYA9oJaxr1AVrJCze6FEcac4t_EOQiJFbD2nVEPkUXPuM shKjjTn7ESLIFUnfHq8UKTGibIC8uqrBgQAcUQFMeWeg-PkLvDTHk43Dn4_aNrxh mWwMNQfkjqx3wd2Fvta9j8yG2Qn790Gwb5psGcmBhqMJUUnFrGpyxQDhFIzzodmP okM7tnUxBNj-JuES_4CE-BvZICH4jKLp0TMu-WQsVst0ss-vY2RPdU1MzL59mq_e Kk8Rv9XhxIr3WteA2ZlrgVyT0cwH3hlCnRUsLfHtIEb8k1Y_WaqKUu3DaKPxqRi6 u0rN7RO2uZYPzC454xe-mg &state=af0ifjsldkj
```

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

### Rust HashMap Example

Source: https://zudoku.dev/docs/components/syntax-highlight

Rust program demonstrating HashMap usage with mutable variables and String keys. Shows basic Rust syntax for collection initialization and iteration.

```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);
}
```

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

### Example HTTP Request (Implicit Flow)

Source: https://openid.net/specs/openid-connect-core-1_0.html

This example demonstrates an HTTP GET request within the Implicit Flow. The request includes parameters such as response_type, client_id, redirect_uri, scope, state, and nonce. It illustrates how the User Agent sends a request to the Authorization Server.

```HTTP
GET /authorize?response_type=id_token%20token
&client_id=s6BhdRkqt3
&redirect_uri=https%3A%2F%2Fclient.example.org%2Fcb
&scope=openid%20profile
&state=af0ifjsldkj
&nonce=n-0S6_WzA2Mj HTTP/1.1
Host: server.example.com
```

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

### Render Indentation Guides in Code Blocks

Source: https://shiki.style/packages/transformers

The `transformerRenderIndentGuides` renders indentation levels as spans with the class `indent`. This visually represents code structure and nesting, improving readability, especially in languages with significant whitespace sensitivity. Example shown in JavaScript.

```javascript
function func() {
  console.log(1);

  for (const i of []) {
    console.log(2);
  }
}
```

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

### Transformer Notation Diff Example

Source: https://shiki.style/packages/transformers

Shows how to use `transformerNotationDiff` with `// [!code ++]` and `// [!code --]` directives to mark added and removed lines in code snippets. The example includes the markdown code and expected rendered output.

```typescript
console.log('hewwo')
// [!code --]
console.log('hello')
// [!code ++]
console.log('goodbye')

```

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

### Create Development Server

Source: https://vite.dev/

This snippet demonstrates how to create and start a Vite development server.

```APIDOC
## POST /createServer

### Description
Creates and starts a Vite development server.

### Method
POST

### Endpoint
/createServer

### Parameters
#### Request Body
- **config** (object) - Optional - User configuration options for Vite.

### Request Example
```json
{
  "config": {
    "//": "user config options"
  }
}
```

### Response
#### Success Response (200)
- **server** (ViteDevServer) - The created Vite development server instance.

#### Response Example
```json
{
  "server": "ViteDevServer instance"
}
```

### Usage
```javascript
import { createServer } from 'vite'

async function startServer(config) {
  const server = await createServer(config);
  await server.listen();
  server.printUrls();
  return server;
}

// Example usage:
// startServer({
//   // user config options
// }).then(server => {
//   console.log('Vite server started');
// });
```
```

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

### Authorization Request Example (response_type=code) - HTTP

Source: https://openid.net/specs/openid-connect-core-1_0.html

This example demonstrates an HTTP GET request for an authorization code flow. It includes parameters such as client_id, redirect_uri, scope, nonce, and state. The expected response is an HTTP 302 Found, redirecting to the client's callback URI with an authorization code.

```http
GET /authorize? response_type=code &
client_id=s6BhdRkqt3 &
redirect_uri=https%3A%2F%2Fclient.example.org%2Fcb &
scope=openid%20profile%20email &
nonce=n-0S6_WzA2Mj &
state=af0ifjsldkj HTTP/1.1
Host: server.example.com

HTTP/1.1 302 Found
Location: https://client.example.org/cb? code=Qcb0Orv1zh30vL1MPRsbm-diHiMwcLyZvn1arpZv-Jxf_11jnpEX3Tgfvk &
state=af0ifjsldkj
```

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

### Hybrid Flow Authentication Request Example (HTTP)

Source: https://openid.net/specs/openid-connect-core-1_0.html

This example demonstrates an HTTP GET request to the authorization server using the Hybrid Flow. It specifies the response type, client ID, redirect URI, scopes, and a nonce for security. The response_type 'code id_token' indicates a hybrid flow.

```HTTP
GET /authorize? response_type=code%20id_token &
client_id=s6BhdRkqt3 &
redirect_uri=https%3A%2F%2Fclient.example.org%2Fcb &
scope=openid%20profile%20email &
nonce=n-0S6_WzA2Mj &
state=af0ifjsldkj HTTP/1.1
Host: server.example.com
```

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

### Configure Page Redirects

Source: https://context7_llms

Implements page redirects to control resource names in URLs. This example sets up redirects from the root and a documentation base path to the introduction page.

```typescript
{
  // ...
  "redirects": [
    { "from": "/", "to": "/documentation/introduction" },
    { "from": "/documentation", "to": "/documentation/introduction" }
  ]
  // ...
}
```

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

### JSON Package Configuration File

Source: https://zudoku.dev/docs/components/syntax-highlight

Example JSON file showing a typical npm package.json configuration. Includes package metadata and build scripts for development and production.

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

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

### Regex Path Matching Redirect

Source: https://vercel.com/docs/projects/project-configuration

This example uses regular expression path matching to redirect paths starting with '/post/' followed by one or more digits to '/news/'. This allows for more specific pattern-based redirects.

```json
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "redirects": [
    {
      "source": "/post/:path(\\d{1,})",
      "destination": "/news/:path*"
    }
  ]
}
```

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

### Example .env File for Vite

Source: https://vite.dev/guide/env-and-mode.html

Illustrates the structure of a `.env` file used by Vite to load environment variables. It defines key-value pairs, where the keys are prefixed with `VITE_` to be exposed to the client-side code, and demonstrates how to define variables, and how to use environment variables.

```text
VITE_SOME_KEY=123
DB_PASSWORD=foobar
KEY=123
NEW_KEY1=test$foo # test
NEW_KEY2=test\$foo # test$foo
NEW_KEY3=test$KEY # test123
```

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

### GET /authorize with response_type=id_token

Source: https://openid.net/specs/openid-connect-core-1_0.html

This example shows an authorization request using the 'id_token' response type, typically used for implicit flows. The ID Token is returned directly to the client via the redirect.

```APIDOC
## GET /authorize?response_type=id_token

### Description
This endpoint initiates an authorization request for an ID Token, often used in implicit or hybrid flows. The ID Token is returned directly in the redirect URI fragment.

### Method
GET

### Endpoint
/authorize

### Query Parameters
- **response_type** (string) - Required - Value must be 'id_token'.
- **client_id** (string) - Required - The client identifier.
- **redirect_uri** (string) - Required - The redirect URI registered with the authorization server.
- **scope** (string) - Required - The scope of the request, must include 'openid'.
- **nonce** (string) - Optional - A string value used to associate a client session with an ID Token and to mitigate replay attacks.
- **state** (string) - Required - An opaque value used by the client to maintain state between the request and callback.

### Request Example
```
GET /authorize?response_type=id_token&client_id=s6BhdRkqt3&redirect_uri=https%3A%2F%2Fclient.example.org%2Fcb&scope=openid%20profile%20email&nonce=n-0S6_WzA2Mj&state=af0ifjsldkj HTTP/1.1
Host: server.example.com
```

### Response
#### Success Response (302 Found)
- **Location** (string) - The redirect URI with the ID Token and state parameter in the URI fragment.

#### Response Example
```
HTTP/1.1 302 Found
Location: https://client.example.org/cb#id_token=eyJraWQiOiIxZTlnZGs3IiwiYWxnIjoiUlMyNTYifQ. ewogImlzcyI6ICJodHRwczovL3NlcnZlci5leGFtcGxlLmNvbSIsCiAic3ViIjogIjI0ODI4OTc2MTAwMSIsCiAiYXVkIjogInM2QmhkUmtxdDMiLAogIm5vbmNlIjogIm4tMFM2X1d6QTJNaiIsCiAiZXhwIjogMTMxMTI4MTk3MCwKICJpYXQiOiAxMzExMjgwOTcwLAogIm5hbWUiOiAiSmFuZSBEb2UiLAogImdpdmVuX25hbWUiOiAiSmFuZSIsCiAiZmFtaWx5X25hbWUiOiAiRG9lIiwKICJnZW5kZXIiOiAiZmVtYWxlIiwKICJiaXJ0aGRhdGUiOiAiMDAwMC0xMC0zMSIsCiAiZW1haWwiOiAiamFuZWRvZUBleGFtcGxlLmNvbSIsCiAicGljdHVyZSI6ICJodHRwOi8vZXhhbXBsZS5jb20vamFu ZWRvZS9tZS5qcGciCn0.NTibBYW_ZoNHGm4ZrWCqYA9oJaxr1AVrJCze6FEcac4t_EOQiJFbD2nVEPkUXPuMshKjjTn7ESLIFUnfHq8UKTGibIC8uqrBgQAcUQFMeWeg-PkLvDTHk43Dn4_aNrxh mWwMNQfkjqx3wd2Fvta9j8yG2Qn790Gwb5psGcmBhqMJUUnFrGpyxQDhFIzzodmPokM7tnUxBNj-JuES_4CE-BvZICH4jKLp0TMu-WQsVst0ss-vY2RPdU1MzL59mq_eKk8Rv9XhxIr3WteA2ZlrgVyT0cwH3hlCnRUsLfHtIEb8k1Y_WaqKUu3DaKPxqRi6u0rN7RO2uZYPzC454xe-mg&state=af0ifjsldkj
```

### ID Token Structure

The ID Token is a signed JWT, consisting of three base64url-encoded segments separated by '.' characters:

1.  **Header**: Contains JOSE Header Parameters. Example: `{"kid":"1e9gdk7","alg":"RS256"}`.
    -   `alg`: The algorithm used to sign the JWT (e.g., `RS256`).
    -   `kid`: Key ID for identifying the key used to verify the signature.

2.  **Claims**: Contains the ID Token claims. Example: `{"iss": "https://server.example.com", ...}`.

3.  **Signature**: The signature of the JWT.
```

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

### GET /authorize with response_type=code

Source: https://openid.net/specs/openid-connect-core-1_0.html

This example demonstrates an authorization request using the 'code' response type, which is used for authorization code flows. The server redirects the user agent back to the client with an authorization code.

```APIDOC
## GET /authorize?response_type=code

### Description
This endpoint initiates the authorization code flow. The client requests an authorization code from the authorization server, which will be exchanged for an access token.

### Method
GET

### Endpoint
/authorize

### Query Parameters
- **response_type** (string) - Required - Value must be 'code'.
- **client_id** (string) - Required - The client identifier.
- **redirect_uri** (string) - Required - The redirect URI registered with the authorization server.
- **scope** (string) - Required - The scope of the request (e.g., 'openid profile email').
- **nonce** (string) - Optional - A string value used to associate a client session with an ID Token and to mitigate replay attacks.
- **state** (string) - Required - An opaque value used by the client to maintain state between the request and callback.

### Request Example
```
GET /authorize?response_type=code&client_id=s6BhdRkqt3&redirect_uri=https%3A%2F%2Fclient.example.org%2Fcb&scope=openid%20profile%20email&nonce=n-0S6_WzA2Mj&state=af0ifjsldkj HTTP/1.1
Host: server.example.com
```

### Response
#### Success Response (302 Found)
- **Location** (string) - The redirect URI with the authorization code and state parameter.

#### Response Example
```
HTTP/1.1 302 Found
Location: https://client.example.org/cb?code=Qcb0Orv1zh30vL1MPRsbm-diHiMwcLyZvn1arpZv-Jxf_11jnpEX3Tgfvk&state=af0ifjsldkj
```
```

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

### C# User Service with LINQ

Source: https://zudoku.dev/docs/components/syntax-highlight

C# class demonstrating async methods, LINQ queries, and generic List usage. Shows async Task patterns and FirstOrDefault filtering method.

```C#
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);
  }
}
```

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

### Render Whitespace in Code Blocks

Source: https://shiki.style/packages/transformers

The `transformerRenderWhitespace` renders tabs and spaces as distinct spans with classes `tab` and `space`. This aids in visualizing whitespace characters, which can be crucial for understanding code formatting. Example shown in JavaScript.

```javascript
function block( ) {
  space( )
		tab( ) 
}
```

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

### YAML Package Configuration

Source: https://zudoku.dev/docs/components/syntax-highlight

YAML format example showing package metadata and scripts configuration. Demonstrates YAML syntax for hierarchical configuration data.

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

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

### Checkout Code: Checkout HEAD^

Source: https://github.com/actions/checkout

This example checks out the commit before the current HEAD. First fetches a fetch-depth of 2 to get the needed history, then uses git checkout to specify the previous commit (HEAD^).

```YAML
- uses: actions/checkout@v5
  with:
    fetch-depth: 2
- run: git checkout HEAD^
```

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

### Markdown Document Example

Source: https://zudoku.dev/docs/components/syntax-highlight

Sample Markdown document demonstrating text formatting (bold, italic), lists, and hyperlinks. Shows basic Markdown syntax for documentation.

```Markdown
# Hello World

This is **bold** and _italic_ text.

- Item 1
- Item 2

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

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

### File-Based Routing Example (Text)

Source: https://context7_llms

Illustrates Zudoku's file-based routing for documentation pages, showing how Markdown and MDX files are mapped to URL paths based on their directory structure.

```text
pages/
├── introduction.md         → /introduction
├── quickstart.mdx          → /quickstart
├── guides/
│   ├── getting-started.md  → /guides/getting-started
│   └── advanced.md         → /guides/advanced
└── api/
    └── reference.md        → /api/reference
```

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

### Install and Use Vercel CLI for Production Deployment

Source: https://vercel.com/docs/deployments/overview

This snippet demonstrates how to install the Vercel CLI globally and perform an initial production deployment from your project's root directory. It links your local project to Vercel and creates a production deployment, adding a .vercel directory for project and organization IDs.

```bash
npm i -g vercel

vercel --prod
```

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

### Mark Lines with Error and Warning Levels

Source: https://shiki.style/packages/transformers

The `transformerNotationErrorLevel` permits marking lines with error and warning levels using `// [!code error]` and `// [!code warning]`. This visually indicates problematic or important lines in code examples. Supported in TypeScript.

```typescript
console.log('No errors or warnings')
console.error('Error') // [!code error]
console.warn('Warning') // [!code warning]
```

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

### Highlight words using meta string (JavaScript)

Source: https://shiki.style/packages/transformers

The `transformerMetaWordHighlight` transformer highlights words based on a provided meta string. It takes a code snippet and a meta string as input and outputs highlighted code. The example shows basic JavaScript code highlighting.

```javascript
const msg = 'Hello World'
console.log(msg)
console.log(msg) // prints Hello World
```

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

### Complete Slot System Usage Example

Source: https://zudoku.dev/docs/components/slot

Demonstrates a complete usage example of the Slot system with both Slot.Target and Slot.Source components in a custom React page, showing how to render and inject content dynamically.

```typescript
function MyCustomPage() {
  return (
    <div>
      <h1>My Page</h1>
      {/* Render slot content here */}
      <Slot.Target name="page-header" />
      {/* Inject content into a slot */}
      <Slot.Source name="page-header">
        Custom header content
      </Slot.Source>
      <p>Page content here...</p>
    </div>
  );
}
```

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

### Add Timestamp to API Examples

Source: https://context7_llms

This example demonstrates how to transform API examples by adding a dynamic timestamp to each example's content. It maps over the `content` array provided to the `transformExamples` function and injects the current ISO timestamp into the `example` object.

```typescript
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
          },
        }));
      },
    },
  },
};
```

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

### Create Headings with Markdown

Source: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

Demonstrates how to create headings of different levels using the Markdown syntax. The number of '#' symbols determines the heading level and size.

```markdown
# A first-level heading
## A second-level heading
### A third-level heading
```

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

### Configure Headers in vercel.json

Source: https://vercel.com/docs/projects/project-configuration

This example demonstrates how to use the 'headers' property in vercel.json to add a custom header based on a request header's value. The configuration adds the 'x-authorized: true' header if the 'X-Custom-Header' request header starts with 'valid' and ends with 'value'. This allows for conditional header setting based on request characteristics.

```json
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "headers": [
    {
      "source": "/:path*",
      "has": [
        {
          "type": "header",
          "key": "X-Custom-Header",
          "value": {
            "pre": "valid",
            "suf": "value"
          }
        }
      ],
      "headers": [
        {
          "key": "x-authorized",
          "value": "true"
        }
      ]
    }
  ]
}
```

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

### Create Zudoku Project with npm

Source: https://context7_llms

Command to create a new Zudoku project using npm. This command initiates an interactive setup process to scaffold a new Zudoku application.

```bash
npm create zudoku@latest

```

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

### Conditionally Transform API Examples

Source: https://context7_llms

This code snippet shows how to conditionally transform API examples based on authentication status. If a user is authenticated, the full example is shown; otherwise, sensitive data is removed from the example.

```typescript
transformExamples: ({ content, auth, type }) => {
  const isAuthenticated = auth.isAuthenticated;

  return content.map((contentItem) => ({
    ...contentItem,
    example: isAuthenticated
      ? contentItem.example // Show full example for authenticated users
      : { ...contentItem.example, sensitiveData: undefined }, // Hide sensitive data for unauthenticated users
  }));
};
```

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

### Zudoku Build Configuration Example (TypeScript)

Source: https://context7_llms

This TypeScript code provides a basic configuration for the `zudoku.build.ts` file, which is used to transform API schemas during the build process. It includes examples of using processors, remarkPlugins, and rehypePlugins to customize the build.

```typescript
import type { ZudokuBuildConfig } from "zudoku";

const buildConfig: ZudokuBuildConfig = {
  processors: [
    async ({ schema }) => {
      // Transform your schema here
      return schema;
    },
  ],
  remarkPlugins: [],
  rehypePlugins: [],
};

export default buildConfig;
```

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

### Highlight Specific Lines in Code Snippets

Source: https://shiki.style/packages/transformers

The `transformerNotationHighlight` allows highlighting specific lines within code blocks using a special comment `// [!code highlight]` or `// [!code highlight:N]` to highlight N lines. This is useful for drawing attention to critical parts of code examples. It works with TypeScript and other languages.

```typescript
console.log('Not highlighted')
console.log('Highlighted') // [!code highlight]
console.log('Not highlighted')
```

```typescript
// [!code highlight:3]
console.log('Highlighted')
console.log('Highlighted')
console.log('Not highlighted')
```

```typescript
console.log('Not highlighted')
// [!code highlight:1]
console.log('Highlighted')
console.log('Not highlighted')
```

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

### Markdown Tables Example

Source: https://context7_llms

Shows markdown syntax for creating simple tables with headers and rows.

```markdown
| Column 1 | Column 2 |
| -------- | -------- |
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |
```

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

### Configure Request Header Matching with Conditional Rewrites in vercel.json

Source: https://vercel.com/docs/projects/project-configuration

Demonstrates how to set up a rewrite rule that matches specific HTTP headers using conditional logic. The example shows routing to '/end' only when the 'X-Custom-Header' header value starts with 'valid' and ends with 'value'. The 'has' property supports matching against headers, cookies, hosts, and query parameters with optional regex capture groups.

```json
{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "rewrites": [
    {
      "source": "/start",
      "destination": "/end",
      "has": [
        {
          "type": "header",
          "key": "X-Custom-Header",
          "value": {
            "pre": "valid",
            "suf": "value"
          }
        }
      ]
    }
  ]
}
```

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

### Generated llms.txt Output Format

Source: https://zudoku.dev/docs/configuration/llms

Example output format of the generated llms.txt file containing links to all documentation pages. This file provides a summary index that LLMs can use to discover available documentation.

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