|  | 
|  | 1 | +<!DOCTYPE html> | 
|  | 2 | +<html lang="en"> | 
|  | 3 | +<head> | 
|  | 4 | +    <meta charset="UTF-8"> | 
|  | 5 | +    <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 
|  | 6 | +    <title>Devtron API Documentation</title> | 
|  | 7 | +    <style> | 
|  | 8 | +        body { | 
|  | 9 | +            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | 
|  | 10 | +            line-height: 1.6; | 
|  | 11 | +            margin: 0; | 
|  | 12 | +            padding: 20px; | 
|  | 13 | +            background-color: #f5f5f5; | 
|  | 14 | +        } | 
|  | 15 | +        .container { | 
|  | 16 | +            max-width: 1200px; | 
|  | 17 | +            margin: 0 auto; | 
|  | 18 | +            background: white; | 
|  | 19 | +            padding: 30px; | 
|  | 20 | +            border-radius: 8px; | 
|  | 21 | +            box-shadow: 0 2px 10px rgba(0,0,0,0.1); | 
|  | 22 | +        } | 
|  | 23 | +        h1 { | 
|  | 24 | +            color: #2c3e50; | 
|  | 25 | +            text-align: center; | 
|  | 26 | +            margin-bottom: 30px; | 
|  | 27 | +            font-size: 2.5em; | 
|  | 28 | +        } | 
|  | 29 | +        .description { | 
|  | 30 | +            text-align: center; | 
|  | 31 | +            color: #7f8c8d; | 
|  | 32 | +            margin-bottom: 40px; | 
|  | 33 | +            font-size: 1.1em; | 
|  | 34 | +        } | 
|  | 35 | +        .stats { | 
|  | 36 | +            background: #ecf0f1; | 
|  | 37 | +            padding: 20px; | 
|  | 38 | +            border-radius: 6px; | 
|  | 39 | +            margin-bottom: 30px; | 
|  | 40 | +            text-align: center; | 
|  | 41 | +        } | 
|  | 42 | +        .stats h2 { | 
|  | 43 | +            margin: 0 0 15px 0; | 
|  | 44 | +            color: #34495e; | 
|  | 45 | +        } | 
|  | 46 | +        .stats-grid { | 
|  | 47 | +            display: grid; | 
|  | 48 | +            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | 
|  | 49 | +            gap: 20px; | 
|  | 50 | +            margin-top: 15px; | 
|  | 51 | +        } | 
|  | 52 | +        .stat-item { | 
|  | 53 | +            background: white; | 
|  | 54 | +            padding: 15px; | 
|  | 55 | +            border-radius: 6px; | 
|  | 56 | +            border-left: 4px solid #3498db; | 
|  | 57 | +        } | 
|  | 58 | +        .stat-number { | 
|  | 59 | +            font-size: 2em; | 
|  | 60 | +            font-weight: bold; | 
|  | 61 | +            color: #3498db; | 
|  | 62 | +        } | 
|  | 63 | +        .stat-label { | 
|  | 64 | +            color: #7f8c8d; | 
|  | 65 | +            font-size: 0.9em; | 
|  | 66 | +        } | 
|  | 67 | +        .categories { | 
|  | 68 | +            display: grid; | 
|  | 69 | +            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | 
|  | 70 | +            gap: 20px; | 
|  | 71 | +        } | 
|  | 72 | +        .category { | 
|  | 73 | +            background: #f8f9fa; | 
|  | 74 | +            border-radius: 6px; | 
|  | 75 | +            padding: 20px; | 
|  | 76 | +            border: 1px solid #e9ecef; | 
|  | 77 | +        } | 
|  | 78 | +        .category h3 { | 
|  | 79 | +            color: #2c3e50; | 
|  | 80 | +            margin-top: 0; | 
|  | 81 | +            border-bottom: 2px solid #3498db; | 
|  | 82 | +            padding-bottom: 10px; | 
|  | 83 | +        } | 
|  | 84 | +        .api-list { | 
|  | 85 | +            list-style: none; | 
|  | 86 | +            padding: 0; | 
|  | 87 | +        } | 
|  | 88 | +        .api-list li { | 
|  | 89 | +            margin: 8px 0; | 
|  | 90 | +        } | 
|  | 91 | +        .api-list a { | 
|  | 92 | +            color: #3498db; | 
|  | 93 | +            text-decoration: none; | 
|  | 94 | +            padding: 5px 10px; | 
|  | 95 | +            border-radius: 4px; | 
|  | 96 | +            transition: background-color 0.2s; | 
|  | 97 | +            display: inline-block; | 
|  | 98 | +        } | 
|  | 99 | +        .api-list a:hover { | 
|  | 100 | +            background-color: #e3f2fd; | 
|  | 101 | +            text-decoration: underline; | 
|  | 102 | +        } | 
|  | 103 | +        .footer { | 
|  | 104 | +            text-align: center; | 
|  | 105 | +            margin-top: 40px; | 
|  | 106 | +            padding-top: 20px; | 
|  | 107 | +            border-top: 1px solid #ecf0f1; | 
|  | 108 | +            color: #7f8c8d; | 
|  | 109 | +        } | 
|  | 110 | +        .timestamp { | 
|  | 111 | +            font-size: 0.9em; | 
|  | 112 | +            color: #95a5a6; | 
|  | 113 | +        } | 
|  | 114 | +        .errors-section { | 
|  | 115 | +            background: #fff5f5; | 
|  | 116 | +            border: 1px solid #fed7d7; | 
|  | 117 | +            border-radius: 6px; | 
|  | 118 | +            padding: 20px; | 
|  | 119 | +            margin: 20px 0; | 
|  | 120 | +        } | 
|  | 121 | +        .errors-section h3 { | 
|  | 122 | +            color: #c53030; | 
|  | 123 | +            margin-top: 0; | 
|  | 124 | +        } | 
|  | 125 | +        .error-list { | 
|  | 126 | +            background: white; | 
|  | 127 | +            border-radius: 4px; | 
|  | 128 | +            padding: 15px; | 
|  | 129 | +            font-family: monospace; | 
|  | 130 | +            font-size: 0.9em; | 
|  | 131 | +        } | 
|  | 132 | +    </style> | 
|  | 133 | +</head> | 
|  | 134 | +<body> | 
|  | 135 | +    <div class="container"> | 
|  | 136 | +        <h1>🚀 Devtron API Documentation</h1> | 
|  | 137 | +        <div class="description"> | 
|  | 138 | +            Comprehensive API documentation for Devtron - Kubernetes-native software delivery platform | 
|  | 139 | +        </div> | 
|  | 140 | +         | 
|  | 141 | +        <div class="stats"> | 
|  | 142 | +            <h2>📊 Documentation Statistics</h2> | 
|  | 143 | +            <div class="stats-grid"> | 
|  | 144 | +                <div class="stat-item"> | 
|  | 145 | +                    <div class="stat-number" id="total-apis">0</div> | 
|  | 146 | +                    <div class="stat-label">Total APIs</div> | 
|  | 147 | +                </div> | 
|  | 148 | +                <div class="stat-item"> | 
|  | 149 | +                    <div class="stat-number" id="categories-count">0</div> | 
|  | 150 | +                    <div class="stat-label">Categories</div> | 
|  | 151 | +                </div> | 
|  | 152 | +                <div class="stat-item"> | 
|  | 153 | +                    <div class="stat-number" id="success-count">0</div> | 
|  | 154 | +                    <div class="stat-label">Successfully Generated</div> | 
|  | 155 | +                </div> | 
|  | 156 | +            </div> | 
|  | 157 | +        </div> | 
|  | 158 | +         | 
|  | 159 | +        <div class="categories" id="categories"> | 
|  | 160 | +            <!-- Categories will be populated by JavaScript --> | 
|  | 161 | +        </div> | 
|  | 162 | +         | 
|  | 163 | +        <div class="footer"> | 
|  | 164 | +            <p>Generated using <a href="https://redocly.com/" target="_blank">Redocly</a></p> | 
|  | 165 | +            <p class="timestamp">Last updated: <span id="timestamp"></span></p> | 
|  | 166 | +        </div> | 
|  | 167 | +    </div> | 
|  | 168 | + | 
|  | 169 | +    <script> | 
|  | 170 | +        // API data structure | 
|  | 171 | +        const apiData = { | 
|  | 172 | +        }; | 
|  | 173 | + | 
|  | 174 | +        // Function to populate the page | 
|  | 175 | +        function populatePage() { | 
|  | 176 | +            const categoriesContainer = document.getElementById('categories'); | 
|  | 177 | +            const categories = {}; | 
|  | 178 | +             | 
|  | 179 | +            // Group APIs by category | 
|  | 180 | +            Object.values(apiData).forEach(api => { | 
|  | 181 | +                if (!categories[api.category]) { | 
|  | 182 | +                    categories[api.category] = []; | 
|  | 183 | +                } | 
|  | 184 | +                categories[api.category].push(api); | 
|  | 185 | +            }); | 
|  | 186 | +             | 
|  | 187 | +            // Create category sections | 
|  | 188 | +            Object.keys(categories).sort().forEach(category => { | 
|  | 189 | +                const categoryDiv = document.createElement('div'); | 
|  | 190 | +                categoryDiv.className = 'category'; | 
|  | 191 | +                 | 
|  | 192 | +                const categoryTitle = document.createElement('h3'); | 
|  | 193 | +                categoryTitle.textContent = category; | 
|  | 194 | +                categoryDiv.appendChild(categoryTitle); | 
|  | 195 | +                 | 
|  | 196 | +                const apiList = document.createElement('ul'); | 
|  | 197 | +                apiList.className = 'api-list'; | 
|  | 198 | +                 | 
|  | 199 | +                // Sort APIs within category by title | 
|  | 200 | +                categories[category].sort((a, b) => a.title.localeCompare(b.title)).forEach(api => { | 
|  | 201 | +                    const listItem = document.createElement('li'); | 
|  | 202 | +                    const link = document.createElement('a'); | 
|  | 203 | +                    link.href = api.filename; | 
|  | 204 | +                    link.textContent = api.title; | 
|  | 205 | +                    link.target = '_blank'; | 
|  | 206 | +                    listItem.appendChild(link); | 
|  | 207 | +                    apiList.appendChild(listItem); | 
|  | 208 | +                }); | 
|  | 209 | +                 | 
|  | 210 | +                categoryDiv.appendChild(apiList); | 
|  | 211 | +                categoriesContainer.appendChild(categoryDiv); | 
|  | 212 | +            }); | 
|  | 213 | +             | 
|  | 214 | +            // Update statistics | 
|  | 215 | +            document.getElementById('total-apis').textContent = Object.keys(apiData).length; | 
|  | 216 | +            document.getElementById('categories-count').textContent = Object.keys(categories).length; | 
|  | 217 | +            document.getElementById('success-count').textContent = Object.keys(apiData).length; | 
|  | 218 | +            document.getElementById('timestamp').textContent = new Date().toLocaleString(); | 
|  | 219 | +        } | 
|  | 220 | +         | 
|  | 221 | +        // Initialize the page | 
|  | 222 | +        document.addEventListener('DOMContentLoaded', populatePage); | 
|  | 223 | +    </script> | 
|  | 224 | +</body> | 
|  | 225 | +</html> | 
0 commit comments