<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OpenCodeHub Documentation</title>
    <meta
      name="description"
      content="Complete documentation for OpenCodeHub - Self-hosted Git platform with stacked PRs, AI review, and CI/CD"
    />
    <link rel="icon" type="image/svg+xml" href="../public/logo.svg" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <!-- Header -->
    <header class="header">
      <a href="index.html" class="header-logo">
        <img src="../public/logo.svg" alt="OpenCodeHub" height="40" />
      </a>
      <nav class="header-nav">
        <a href="getting-started.html">Getting Started</a>
        <a href="deployment.html">Deployment</a>
        <a href="cli.html">CLI</a>
        <a href="api.html">API</a>
        <a
          href="https://github.com/swadhinbiswas/OpencodeHub"
          class="btn-github"
          target="_blank"
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
            <path
              d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"
            />
          </svg>
          GitHub
        </a>
      </nav>
    </header>

    <div class="layout">
      <!-- Sidebar -->
      <aside class="sidebar">
        <div class="sidebar-section">
          <div class="sidebar-title">Getting Started</div>
          <nav class="sidebar-nav">
            <a href="getting-started.html" class="sidebar-link active">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
              </svg>
              Quick Start
            </a>
            <a href="getting-started.html#installation" class="sidebar-link">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path
                  d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"
                />
              </svg>
              Installation
            </a>
            <a href="getting-started.html#configuration" class="sidebar-link">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <circle cx="12" cy="12" r="3" />
                <path
                  d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"
                />
              </svg>
              Configuration
            </a>
          </nav>
        </div>

        <div class="sidebar-section">
          <div class="sidebar-title">Deployment</div>
          <nav class="sidebar-nav">
            <a href="deployment.html" class="sidebar-link">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
                <path d="M8 21h8M12 17v4" />
              </svg>
              Overview
            </a>
            <a href="deployment.html#docker" class="sidebar-link">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path
                  d="M22 12.5c0 .5-.5 1-1 1h-2v-2h2c.5 0 1 .5 1 1zM2 12.5c0-.5.5-1 1-1h2v2H3c-.5 0-1-.5-1-1z"
                />
                <rect x="6" y="9" width="12" height="6" rx="1" />
                <rect x="8" y="11" width="2" height="2" />
                <rect x="11" y="11" width="2" height="2" />
                <rect x="14" y="11" width="2" height="2" />
              </svg>
              Docker
            </a>
            <a href="deployment.html#vercel" class="sidebar-link">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <polygon points="12 2 2 22 22 22" />
              </svg>
              Vercel
            </a>
            <a href="deployment.html#vps" class="sidebar-link">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
                <rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
                <line x1="6" y1="6" x2="6.01" y2="6" />
                <line x1="6" y1="18" x2="6.01" y2="18" />
              </svg>
              VPS / Linux
            </a>
          </nav>
        </div>

        <div class="sidebar-section">
          <div class="sidebar-title">CLI</div>
          <nav class="sidebar-nav">
            <a href="cli.html" class="sidebar-link">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <polyline points="4 17 10 11 4 5" />
                <line x1="12" y1="19" x2="20" y2="19" />
              </svg>
              CLI Reference
            </a>
            <a href="cli.html#stacked-prs" class="sidebar-link">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path
                  d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"
                />
                <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
              </svg>
              Stacked PRs
            </a>
          </nav>
        </div>

        <div class="sidebar-section">
          <div class="sidebar-title">API</div>
          <nav class="sidebar-nav">
            <a href="api.html" class="sidebar-link">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path
                  d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"
                />
                <polyline points="14 2 14 8 20 8" />
                <line x1="16" y1="13" x2="8" y2="13" />
                <line x1="16" y1="17" x2="8" y2="17" />
                <polyline points="10 9 9 9 8 9" />
              </svg>
              REST API
            </a>
            <a href="api.html#webhooks" class="sidebar-link">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path
                  d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"
                />
                <path
                  d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"
                />
              </svg>
              Webhooks
            </a>
          </nav>
        </div>
      </aside>

      <!-- Main Content -->
      <main class="main">
        <div class="content">
          <!-- Hero Section -->
          <section class="hero animate-fade-in">
            <h1>OpenCodeHub Documentation</h1>
            <p class="hero-subtitle">
              Everything you need to deploy, configure, and master OpenCodeHub -
              the self-hosted Git platform with stacked PRs, AI review, and
              CI/CD.
            </p>
            <div class="hero-buttons">
              <a href="getting-started.html" class="btn btn-primary">
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <polygon points="5 3 19 12 5 21 5 3" />
                </svg>
                Get Started
              </a>
              <a href="deployment.html" class="btn btn-secondary">
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path
                    d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"
                  />
                </svg>
                Deploy Now
              </a>
            </div>
          </section>

          <!-- Quick Install -->
          <section>
            <h2>⚡ Quick Install</h2>
            <p>Get OpenCodeHub running in minutes with Docker:</p>

            <div class="command-line">
              <span class="command-prompt">$</span>
              <span class="command-text"
                >git clone https://github.com/swadhinbiswas/OpencodeHub && cd
                OpenCodeHub</span
              >
              <button
                class="command-copy"
                onclick="
                  copyCommand(
                    this,
                    'git clone https://github.com/swadhinbiswas/OpencodeHub && cd OpenCodeHub',
                  )
                "
              >
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
                  <path
                    d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"
                  />
                </svg>
              </button>
            </div>

            <div class="command-line">
              <span class="command-prompt">$</span>
              <span class="command-text">docker-compose up -d</span>
              <button
                class="command-copy"
                onclick="copyCommand(this, 'docker-compose up -d')"
              >
                <svg
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
                  <path
                    d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"
                  />
                </svg>
              </button>
            </div>

            <p>
              Then visit <code>http://localhost:3000</code> in your browser.
            </p>
          </section>

          <!-- Features -->
          <section>
            <h2>✨ Key Features</h2>
            <div class="feature-grid">
              <div class="card">
                <h3 class="card-title">
                  <span>📚</span> Stacked Pull Requests
                </h3>
                <p class="card-description">
                  Break large changes into reviewable chunks. Ship faster with
                  dependent PRs that automatically update.
                </p>
              </div>
              <div class="card">
                <h3 class="card-title"><span>🤖</span> AI Code Review</h3>
                <p class="card-description">
                  Instant feedback from GPT-4 or Claude. Catch security issues,
                  bugs, and code smells automatically.
                </p>
              </div>
              <div class="card">
                <h3 class="card-title"><span>🔀</span> Smart Merge Queue</h3>
                <p class="card-description">
                  Stack-aware CI optimization. Batch PRs, auto-rebase, and merge
                  in the correct order.
                </p>
              </div>
              <div class="card">
                <h3 class="card-title"><span>⚡</span> CI/CD Pipelines</h3>
                <p class="card-description">
                  GitHub Actions-compatible workflows. Build, test, and deploy
                  with self-hosted runners.
                </p>
              </div>
              <div class="card">
                <h3 class="card-title"><span>🔒</span> Enterprise Security</h3>
                <p class="card-description">
                  Rate limiting, CSRF protection, audit logging, 2FA, and
                  encrypted secrets management.
                </p>
              </div>
              <div class="card">
                <h3 class="card-title"><span>💻</span> Powerful CLI</h3>
                <p class="card-description">
                  Stack-first workflows from your terminal. Manage PRs, sync
                  stacks, and more.
                </p>
              </div>
            </div>
          </section>

          <!-- Documentation Sections -->
          <section>
            <h2>📖 Documentation</h2>

            <div
              class="card"
              style="cursor: pointer"
              onclick="location.href = 'getting-started.html'"
            >
              <h3 class="card-title">🚀 Getting Started</h3>
              <p class="card-description">
                Install OpenCodeHub, create your first repository, and configure
                your environment.
              </p>
            </div>

            <div
              class="card"
              style="cursor: pointer"
              onclick="location.href = 'deployment.html'"
            >
              <h3 class="card-title">🌐 Deployment Guide</h3>
              <p class="card-description">
                Deploy to Docker, Vercel, VPS, or any cloud provider with
                production-ready configurations.
              </p>
            </div>

            <div
              class="card"
              style="cursor: pointer"
              onclick="location.href = 'cli.html'"
            >
              <h3 class="card-title">💻 CLI Reference</h3>
              <p class="card-description">
                Complete command reference for the OpenCodeHub CLI. Stack
                management, authentication, and more.
              </p>
            </div>

            <div
              class="card"
              style="cursor: pointer"
              onclick="location.href = 'api.html'"
            >
              <h3 class="card-title">🔌 API Documentation</h3>
              <p class="card-description">
                REST API reference, webhook events, and authentication for
                programmatic access.
              </p>
            </div>
          </section>

          <!-- Footer -->
          <footer
            style="
              margin-top: 4rem;
              padding-top: 2rem;
              border-top: 1px solid var(--border-primary);
              text-align: center;
              color: var(--text-muted);
            "
          >
            <p>
              Made with ❤️ by
              <a href="https://github.com/swadhinbiswas">Swadhin Biswas</a> •
              <a href="https://github.com/swadhinbiswas/OpencodeHub">GitHub</a>
              •
              <a
                href="https://github.com/swadhinbiswas/OpencodeHub/blob/main/LICENSE"
                >MIT License</a
              >
            </p>
          </footer>
        </div>
      </main>
    </div>

    <script>
      function copyCommand(button, text) {
        navigator.clipboard.writeText(text);
        button.classList.add("copied");
        setTimeout(() => button.classList.remove("copied"), 2000);
      }

      // Update active sidebar link based on current page
      document.querySelectorAll(".sidebar-link").forEach((link) => {
        if (link.href === window.location.href) {
          link.classList.add("active");
        }
      });
    </script>
  </body>
</html>