## Template Placeholders

Replace these placeholders with your content:

**Header & Metadata:**

- `{{DOCUMENT_TITLE}}` - Page title (appears in browser tab)
- `{{DOCUMENT_DESCRIPTION}}` - Meta description for SEO
- `{{HEADER_TITLE}}` - Title shown in the header
- `{{HEADER_BADGE}}` - Optional badge text (e.g., "Installation Guide")
- `{{LOGO_URL}}` - URL to your logo/icon
- `{{ORGANIZATION_NAME}}` - Your organization name

**Content:**

- `{{MARKDOWN_CONTENT}}` - Insert your rendered Markdown HTML here

**Footer:**

- `{{CURRENT_YEAR}}` - Current year
- `{{FOOTER_TEXT}}` - Footer text (e.g., "All rights reserved.")

## Key Features

1. **Auto-Generated Navigation** - The sidebar is automatically built from your Markdown headings (H1-H6)
2. **Mobile Responsive** - Includes collapsible mobile menu
3. **Copy-to-Clipboard** - For code blocks with proper styling
4. **Active Link Highlighting** - Shows current section in sidebar
5. **Smooth Scrolling** - Enhanced user experience
6. **Professional Styling** - Clean, modern design with Tailwind CSS

## Usage Example

```html
<!-- Replace placeholders -->
<title>My API Documentation</title>
<h1>My API Documentation Guide</h1>
<img src="/logo.png" alt="My Company Logo" class="h-10 w-10">

<!-- Insert your rendered Markdown content -->
<article class="prose-custom">
    <h1>Getting Started</h1>
    <p>Welcome to our API...</p>
    <h2>Installation</h2>
    <p>To install...</p>
    <!-- etc. -->
</article>
```

## Code Block Enhancement

For enhanced code blocks with copy functionality, wrap them like this:

```html
<div class="code-container">
    <div class="code-header">
        <span class="code-lang">JavaScript</span>
        <button class="copy-button">
            <i class="fa-regular fa-copy"></i>
            <span>Copy</span>
        </button>
    </div>
    <pre><code>const example = "code here";</code></pre>
</div>
```