@@ -45,6 +45,8 @@ convert_spec_to_html() {
4545    mkdir -p " $( dirname " $output_file " ) " 
4646
4747    echo  -e " ${BLUE} 📄 Converting: $spec_file ${NC} " 
48+     echo  -e " ${BLUE}     → Output: ${relative_path% .* } .html${NC} " 
49+ 
4850    if  redocly build-docs " $spec_file " " $output_file " > /dev/null 2>&1 ;  then 
4951        echo  -e " ${GREEN} ✅ Success: $output_file ${NC} " 
5052        (( success_count++ )) 
@@ -78,7 +80,21 @@ cat > "$INDEX_FILE" << 'EOF'
7880        body { font-family: Arial, sans-serif; margin: 20px; background: #f8f9fa; color: #333; } 
7981        h1 { text-align: center; color: #2c3e50; margin-bottom: 40px; } 
8082        .container { max-width: 1200px; margin: auto; } 
81-         .categories-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 20px; } 
83+         .categories-grid { 
84+             display: flex; 
85+             flex-wrap: wrap; 
86+             justify-content: center; 
87+             gap: 30px; 
88+             margin-top: 20px; 
89+             align-items: stretch; /* Ensures all cards stretch to same height */ 
90+         } 
91+ 
92+         /* Single card centering */ 
93+         .categories-grid.single-card { 
94+             justify-content: center; 
95+             max-width: 400px; 
96+             margin: 20px auto; 
97+         } 
8298
8399        /* Category Cards */ 
84100        .category-card { 
@@ -87,15 +103,26 @@ cat > "$INDEX_FILE" << 'EOF'
87103            padding: 25px; 
88104            width: calc(33.33% - 30px); 
89105            min-width: 300px; 
106+             max-width: 400px; 
107+             height: auto; 
108+             min-height: 300px; /* Minimum height for consistency */ 
90109            box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
91110            border: 1px solid #e1e5e9; 
92111            transition: transform 0.2s ease, box-shadow 0.2s ease; 
112+             display: flex; 
113+             flex-direction: column; 
93114        } 
94115        .category-card:hover { 
95116            transform: translateY(-2px); 
96117            box-shadow: 0 6px 20px rgba(0,0,0,0.15); 
97118        } 
98119
120+         /* Single card styling */ 
121+         .category-card.single { 
122+             width: 100%; 
123+             max-width: 400px; 
124+         } 
125+ 
99126        /* Category Headers */ 
100127        .category-header { 
101128            color: #2c3e50; 
@@ -112,6 +139,9 @@ cat > "$INDEX_FILE" << 'EOF'
112139            display: flex; 
113140            flex-direction: column; 
114141            gap: 8px; 
142+             flex-grow: 1; /* Takes up remaining space in the card */ 
143+             overflow-y: auto; /* Allows scrolling if too many links */ 
144+             max-height: 400px; /* Maximum height before scrolling */ 
115145        } 
116146        .api-link { 
117147            display: block; 
@@ -145,14 +175,23 @@ cat > "$INDEX_FILE" << 'EOF'
145175        .timestamp { font-style: italic; } 
146176
147177        /* 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; } } 
178+         @media(max-width: 1024px){ 
179+             .category-card { width: calc(50% - 30px); } 
180+             .categories-grid.single-card { max-width: 500px; } 
181+         } 
182+         @media(max-width: 768px){ 
183+             .category-card { width: 100%; min-width: unset; max-width: none; } 
184+             .categories-grid.single-card { max-width: 100%; margin: 20px 0; } 
185+         } 
186+         @media(max-width: 480px){ 
187+             .category-card { margin: 0 10px; } 
188+             .categories-grid { gap: 20px; } 
189+         } 
151190    </style> 
152191</head> 
153192<body> 
154193    <div class="container"> 
155-         <h1>🚀  Devtron API Documentation</h1> 
194+         <h1> Devtron API Documentation</h1> 
156195        <div id="categories" class="categories-grid"></div> 
157196        <div class="footer"> 
158197            <p><a href="https://devtron.ai/" target="_blank">Devtron</a></p> 
@@ -175,7 +214,10 @@ for spec_file in "${spec_files[@]}"; do
175214    display_category=$( echo " $category " |  sed ' s/[-_]/ /g' |  sed ' s/\([a-z]\)\([A-Z]\)/\1 \2/g' |  sed ' s/\b\w/\U&/g' ) 
176215    title=$( grep -m 1 ' ^[[:space:]]*title:' " $spec_file " |  sed ' s/^[[:space:]]*title:[[:space:]]*//' |  tr -d ' "' ||  echo  " ${relative_path% .* } " ) 
177216
217+     #  Only include if HTML file was successfully generated
178218    if  [[ -f  " $OUTPUT_DIR /$html_file " ;  then 
219+         #  Ensure proper relative path from index.html to the generated HTML file
220+         #  Since index.html is in docs/api-docs/ and HTML files maintain folder structure
179221        echo  "  \" ${category} _$( basename " ${relative_path% .* } " ) \" : {\" category\" : \" ${display_category} \" , \" title\" : \" ${title} \" , \" filename\" : \" ${html_file} \" }," >>  " $INDEX_FILE " 
180222    fi 
181223done 
@@ -197,12 +239,24 @@ cat >> "$INDEX_FILE" << 'EOF'
197239                categories[api.category].push(api); 
198240            }); 
199241
242+             const categoryNames = Object.keys(categories).sort(); 
243+ 
244+             // Add class for single card centering 
245+             if (categoryNames.length === 1) { 
246+                 container.classList.add('single-card'); 
247+             } 
248+ 
200249            // Create category cards 
201-             Object.keys(categories).sort() .forEach(categoryName => { 
250+             categoryNames .forEach(categoryName => { 
202251                // Create category card 
203252                const categoryCard = document.createElement('div'); 
204253                categoryCard.className = 'category-card'; 
205254
255+                 // Add single class if only one card 
256+                 if (categoryNames.length === 1) { 
257+                     categoryCard.classList.add('single'); 
258+                 } 
259+ 
206260                // Create category header 
207261                const categoryHeader = document.createElement('div'); 
208262                categoryHeader.className = 'category-header'; 
@@ -218,11 +272,19 @@ cat >> "$INDEX_FILE" << 'EOF'
218272                    .sort((a, b) => a.title.localeCompare(b.title)) 
219273                    .forEach(api => { 
220274                        const apiLink = document.createElement('a'); 
275+                         // Ensure proper relative path 
221276                        apiLink.href = api.filename; 
222277                        apiLink.textContent = api.title; 
223278                        apiLink.className = 'api-link'; 
224279                        apiLink.title = `View ${api.title} API documentation`; 
225280
281+                         // Add click handler to check if file exists 
282+                         apiLink.addEventListener('click', function(e) { 
283+                             // Let the browser handle the navigation normally 
284+                             // This is just for debugging - remove in production if needed 
285+                             console.log(`Navigating to: ${api.filename}`); 
286+                         }); 
287+ 
226288                        linksContainer.appendChild(apiLink); 
227289                    }); 
228290
0 commit comments