@@ -76,26 +76,84 @@ cat > "$INDEX_FILE" << 'EOF'
7676    <title>Devtron API Documentation</title> 
7777    <style> 
7878        body { font-family: Arial, sans-serif; margin: 20px; background: #f8f9fa; color: #333; } 
79-         h1 { text-align: center; color: #2c3e50; } 
80-         h2 { text-align: center; margin-top: 40px; color: #34495e; } 
79+         h1 { text-align: center; color: #2c3e50; margin-bottom: 40px; } 
8180        .container { max-width: 1200px; margin: auto; } 
82-         .grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 20px; } 
83-         .card { background: #fff; border-radius: 8px; padding: 15px; width: calc(25% - 20px); box-shadow: 0 2px 6px rgba(0,0,0,0.1); text-align: center; } 
84-         .card a { text-decoration: none; color: #1a73e8; font-weight: bold; } 
85-         .card a:hover { text-decoration: underline; } 
86-         .footer { margin-top: 40px; font-size: 0.9rem; color: #666; text-align: center; } 
81+         .categories-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 20px; } 
82+ 
83+         /* Category Cards */ 
84+         .category-card { 
85+             background: #fff; 
86+             border-radius: 12px; 
87+             padding: 25px; 
88+             width: calc(33.33% - 30px); 
89+             min-width: 300px; 
90+             box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
91+             border: 1px solid #e1e5e9; 
92+             transition: transform 0.2s ease, box-shadow 0.2s ease; 
93+         } 
94+         .category-card:hover { 
95+             transform: translateY(-2px); 
96+             box-shadow: 0 6px 20px rgba(0,0,0,0.15); 
97+         } 
98+ 
99+         /* Category Headers */ 
100+         .category-header { 
101+             color: #2c3e50; 
102+             font-size: 1.4em; 
103+             font-weight: bold; 
104+             margin-bottom: 15px; 
105+             padding-bottom: 10px; 
106+             border-bottom: 2px solid #3498db; 
107+             text-align: center; 
108+         } 
109+ 
110+         /* API Links within Categories */ 
111+         .api-links { 
112+             display: flex; 
113+             flex-direction: column; 
114+             gap: 8px; 
115+         } 
116+         .api-link { 
117+             display: block; 
118+             padding: 8px 12px; 
119+             background: #f8f9fa; 
120+             border-radius: 6px; 
121+             text-decoration: none; 
122+             color: #1a73e8; 
123+             font-weight: 500; 
124+             transition: all 0.2s ease; 
125+             border-left: 3px solid transparent; 
126+         } 
127+         .api-link:hover { 
128+             background: #e3f2fd; 
129+             border-left-color: #1a73e8; 
130+             text-decoration: none; 
131+             transform: translateX(5px); 
132+         } 
133+ 
134+         /* Footer */ 
135+         .footer { 
136+             margin-top: 50px; 
137+             font-size: 0.9rem; 
138+             color: #666; 
139+             text-align: center; 
140+             padding-top: 20px; 
141+             border-top: 1px solid #e1e5e9; 
142+         } 
87143        .footer a { color: #1a73e8; text-decoration: none; } 
88144        .footer a:hover { text-decoration: underline; } 
89145        .timestamp { font-style: italic; } 
90-         @media(max-width: 1024px){ .card { width: calc(33.33% - 20px); } } 
91-         @media(max-width: 768px){ .card { width: calc(50% - 20px); } } 
92-         @media(max-width: 480px){ .card { width: 100%; } } 
146+ 
147+         /* Responsive Design */ 
148+         @media(max-width: 1024px){ .category-card { width: calc(50% - 30px); } } 
149+         @media(max-width: 768px){ .category-card { width: 100%; min-width: unset; } } 
150+         @media(max-width: 480px){ .category-card { margin: 0 10px; } } 
93151    </style> 
94152</head> 
95153<body> 
96154    <div class="container"> 
97155        <h1>🚀 Devtron API Documentation</h1> 
98-         <div id="categories"></div> 
156+         <div id="categories" class="categories-grid" ></div> 
99157        <div class="footer"> 
100158            <p><a href="https://devtron.ai/" target="_blank">Devtron</a></p> 
101159            <p class="timestamp">Last updated: <span id="timestamp"></span></p> 
@@ -133,32 +191,43 @@ cat >> "$INDEX_FILE" << 'EOF'
133191            const container = document.getElementById('categories'); 
134192            const categories = {}; 
135193
194+             // Group APIs by category 
136195            Object.values(apiData).forEach(api => { 
137196                if (!categories[api.category]) categories[api.category] = []; 
138197                categories[api.category].push(api); 
139198            }); 
140199
141-             Object.keys(categories).sort().forEach(cat => { 
142-                 const heading = document.createElement('h2'); 
143-                 heading.textContent = cat; 
144-                 container.appendChild(heading); 
145- 
146-                 const grid = document.createElement('div'); 
147-                 grid.className = "grid"; 
148- 
149-                 categories[cat].sort((a,b)=>a.title.localeCompare(b.title)).forEach(api => { 
150-                     const card = document.createElement('div'); 
151-                     card.className = "card"; 
152- 
153-                     const a = document.createElement('a'); 
154-                     a.href = api.filename; 
155-                     a.textContent = api.title; 
156- 
157-                     card.appendChild(a); 
158-                     grid.appendChild(card); 
159-                 }); 
160- 
161-                 container.appendChild(grid); 
200+             // Create category cards 
201+             Object.keys(categories).sort().forEach(categoryName => { 
202+                 // Create category card 
203+                 const categoryCard = document.createElement('div'); 
204+                 categoryCard.className = 'category-card'; 
205+ 
206+                 // Create category header 
207+                 const categoryHeader = document.createElement('div'); 
208+                 categoryHeader.className = 'category-header'; 
209+                 categoryHeader.textContent = categoryName; 
210+                 categoryCard.appendChild(categoryHeader); 
211+ 
212+                 // Create links container 
213+                 const linksContainer = document.createElement('div'); 
214+                 linksContainer.className = 'api-links'; 
215+ 
216+                 // Add API links to this category 
217+                 categories[categoryName] 
218+                     .sort((a, b) => a.title.localeCompare(b.title)) 
219+                     .forEach(api => { 
220+                         const apiLink = document.createElement('a'); 
221+                         apiLink.href = api.filename; 
222+                         apiLink.textContent = api.title; 
223+                         apiLink.className = 'api-link'; 
224+                         apiLink.title = `View ${api.title} API documentation`; 
225+ 
226+                         linksContainer.appendChild(apiLink); 
227+                     }); 
228+ 
229+                 categoryCard.appendChild(linksContainer); 
230+                 container.appendChild(categoryCard); 
162231            }); 
163232
164233            document.getElementById('timestamp').textContent = new Date().toLocaleString(); 
0 commit comments