@@ -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