@@ -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 " -o " $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