{ModuleName} Documentation

# Documentation Style Guide When generating HTML documentation for Elixir modules, all documentation files go in `asset/docs/`. ## CSS Theme Use the external dark theme stylesheet: `` See `asset/docs/whatsapp.html` as the reference for external CSS usage. ## HTML Structure ```html {ModuleName} Documentation

``` ## Color Variables Defined in `asset/css/docs-dark.css` — that file is the single source of truth for all color values. Do not duplicate them here. See the CSS file for the full `:root` variable list. ## Layout Colors (how to apply the variables) - Body background: `var(--bg-primary)` - Content sections / cards: `var(--bg-secondary)` with `1px solid var(--border-color)` - Header gradient: `linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%)` - Headings: `h2` uses `var(--text-primary)`, `h3` uses `var(--accent-cyan)` - Tables: `th` background `var(--bg-primary)`, text `var(--text-muted)`; `td` text `var(--text-secondary)` - Feature cards: background `var(--bg-primary)`, title color `var(--accent-purple)` - Alert/callout boxes: use `rgba()` tinted backgrounds with 4px left border - Info: `rgba(59, 130, 246, 0.1)` border `var(--accent-blue)` - Warning: `rgba(234, 179, 8, 0.1)` border `var(--accent-yellow)` - Inline `code`: color `var(--accent-cyan)`, background `rgba(6, 182, 212, 0.1)` - Flow diagrams: `.arrow` color `var(--accent-blue)` - Responsive: single-column feature grid below 768px ## Syntax-Highlighted Code Blocks All Elixir code inside `

` must use `` elements with CSS classes for
syntax coloring. The code block background is `var(--bg-code)`, default text is `var(--text-primary)`.

**Required CSS classes:**

```css
.code-comment  { color: var(--text-muted); }    /* # comments */
.code-keyword  { color: var(--accent-purple); }  /* def, defmodule, case, if, do, end, fn */
.code-string   { color: var(--accent-green); }   /* "strings" */
.code-atom     { color: var(--accent-cyan); }    /* :atoms, true, false, nil, module names */
.code-number   { color: var(--accent-yellow); }  /* 42, 3.14 */
.code-function { color: var(--accent-blue); }    /* function calls: Foo.bar(), bar() */
```

**Example:**

```html
# Start a chat session
{:ok, pid} = ServerChat.start_link(user_id: 1)

# Send a message
{:ok, reply} = ServerChat.chat(pid, "Hello!")
```

**Colorizing rules:**
- Every code example must be colorized — never use plain uncolored `` blocks
- Comments (`#`) get `.code-comment`
- All atoms (`:ok`, `:error`, `true`, `false`, `nil`, keyword keys like `user_id:`) get `.code-atom`
- Module-qualified calls (`Foo.bar(...)`) and bare function calls get `.code-function`
- String literals in double quotes get `.code-string`
- Integer and float literals get `.code-number`
- Elixir keywords (`def`, `defmodule`, `defp`, `case`, `cond`, `if`, `unless`, `do`, `end`,
  `fn`, `when`, `use`, `require`, `import`, `alias`) get `.code-keyword`
- Variables, operators, punctuation, and pipes remain uncolored (default `var(--text-primary)`)

## Required Sections (in order)

1. **Header** — `` with emoji + module name as plain text in ``, subtitle in ``.
   **Do NOT wrap the module name in a `` tag** inside `
`.
   Correct: `ServerChat.Provider
` / Wrong: `ServerChat.Provider`
2. **Navigation** — `` with anchor links to every `` section
3. **Overview** — what the module does, how it fits in the system, key design decisions
4. **Features** — grid of `.feature-card` elements, each with `
` + short ``
5. **Configuration** (if applicable) — env vars, config.exs snippets, `.alert-info` boxes
6. **Usage** — code examples for the most common workflows
7. **API Reference** — one `
` per public function with description, params, returns, code example
8. **Internals / Flow** (if applicable) — `.flow-diagram` with arrows
9. **Troubleshooting** (if applicable) — common errors with fixes
10. **Related Documentation** — links to related modules and external docs
11. **Footer** — source file path and `Last updated: YYYY-MM-DD`

## Content Rules

- Every public function gets its own subsection under API Reference
- Include at least one `` Elixir example per function
- Use `.alert-info` for tips, `.alert-warning` for gotchas, `.alert-success` for example output
- Use `` for structured data (config options, message formats, model lists)
- Use `.flow-diagram` for multi-step processes
- All code examples must be valid Elixir

## Markdown Documentation

When generating a companion `.md` file, follow `asset/docs/server_chat.md`:

- Title: `# ModuleName`
- One-line description
- Sections: Overview, Features (table), Configuration, Public API (one `###` per function),
  GenServer State (table), Database Schema (table if applicable), Dependencies (table)
- Use fenced Elixir code blocks for all examples
- Use tables (`| Col | Col |`) for structured data