1+ ` ` ` bash
12#! /bin/bash
23
34# Script to generate HTML documentation from all API specs using Redocly
@@ -72,29 +73,123 @@ cat > "$INDEX_FILE" << 'EOF'
7273<meta name="viewport" content="width=device-width, initial-scale=1.0">
7374<title>Devtron API Documentation</title>
7475<style>
75- body { font-family: Arial, sans-serif; margin: 20px; background: #f8f9fa; color: #333; }
76- h1 { text-align: center; color: #2c3e50; }
77- h2 { text-align: center; margin-top: 40px; color: #34495e; }
78- .container { max-width: 1200px; margin: auto; }
79- .grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 20px; }
80- .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; }
81- .card a { text-decoration: none; color: #1a73e8; font-weight: bold; }
82- .card a:hover { text-decoration: underline; }
83- .footer { margin-top: 40px; font-size: 0.9rem; color: #666; text-align: center; }
84- .footer a { color: #1a73e8; text-decoration: none; }
85- .footer a:hover { text-decoration: underline; }
86- .timestamp { font-style: italic; }
87- @media(max-width: 1024px){ .card { width: calc(33.33% - 20px); } }
88- @media(max-width: 768px){ .card { width: calc(50% - 20px); } }
89- @media(max-width: 480px){ .card { width: 100%; } }
76+ /* General body and container styles */
77+ body {
78+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
79+ margin: 0;
80+ padding: 0;
81+ background-color: #f0f2f5;
82+ color: #2c3e50;
83+ }
84+ .container {
85+ max-width: 1200px;
86+ margin: 20px auto;
87+ padding: 0 20px;
88+ }
89+ /* Header styles */
90+ .header {
91+ background-color: #ffffff;
92+ padding: 20px;
93+ border-bottom: 1px solid #dfe3e8;
94+ text-align: center;
95+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
96+ }
97+ .header-title {
98+ font-size: 2.5rem;
99+ font-weight: 600;
100+ color: #3b5998;
101+ margin: 0;
102+ display: flex;
103+ align-items: center;
104+ justify-content: center;
105+ }
106+ .header-title img {
107+ height: 40px;
108+ margin-right: 10px;
109+ }
110+ .header-subtitle {
111+ font-size: 1rem;
112+ color: #606770;
113+ margin-top: 10px;
114+ }
115+ /* Grid and card styles */
116+ .grid {
117+ display: grid;
118+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
119+ gap: 20px;
120+ margin-top: 20px;
121+ }
122+ .card {
123+ background-color: #ffffff;
124+ border-radius: 8px;
125+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
126+ overflow: hidden;
127+ padding: 20px;
128+ }
129+ .card-header {
130+ font-size: 1.25rem;
131+ font-weight: 600;
132+ color: #3b5998;
133+ padding-bottom: 10px;
134+ margin-bottom: 15px;
135+ border-bottom: 2px solid #3b5998;
136+ }
137+ .card-list {
138+ list-style: none;
139+ padding: 0;
140+ margin: 0;
141+ }
142+ .card-list li {
143+ margin-bottom: 10px;
144+ }
145+ .card-list a {
146+ text-decoration: none;
147+ color: #1877f2;
148+ font-size: 1rem;
149+ transition: color 0.2s ease-in-out;
150+ }
151+ .card-list a:hover {
152+ color: #3b5998;
153+ text-decoration: underline;
154+ }
155+ /* Footer styles */
156+ .footer {
157+ margin-top: 40px;
158+ padding: 20px 0;
159+ text-align: center;
160+ border-top: 1px solid #dfe3e8;
161+ color: #606770;
162+ }
163+ .footer a {
164+ color: #1877f2;
165+ text-decoration: none;
166+ }
167+ .footer a:hover {
168+ text-decoration: underline;
169+ }
170+ .timestamp {
171+ font-style: italic;
172+ font-size: 0.9rem;
173+ color: #8d949e;
174+ }
90175</style>
91176</head>
92177<body>
178+ <div class="header">
179+ <h1 class="header-title">
180+ <img src="https://devtron.ai/assets/icons/logo-full.svg" alt="Devtron Logo">
181+ Devtron API Documentation
182+ </h1>
183+ <p class="header-subtitle">Comprehensive API documentation for Devtron - Kubernetes-native software delivery platform</p>
184+ </div>
93185<div class="container">
94- <h1>🚀 Devtron API Documentation</h1>
95- <div id="categories"></div>
186+ <div class="grid" id="categories"></div>
96187<div class="footer">
97- <p><a href="https://devtron.ai/" target="_blank">Devtron</a></p>
188+ <p>
189+ <a href="https://devtron.ai/" target="_blank">Devtron</a> |
190+ <a href="https://docs.devtron.ai/" target="_blank">Documentation</a> |
191+ <a href="https://github.com/devtron-labs/devtron" target="_blank">GitHub</a>
192+ </p>
98193<p class="timestamp">Last updated: <span id="timestamp"></span></p>
99194</div>
100195</div>
@@ -132,26 +227,28 @@ function populatePage() {
132227 });
133228
134229 Object.keys(categories).sort().forEach(cat => {
135- const heading = document.createElement('h2');
136- heading.textContent = cat;
137- container.appendChild(heading);
230+ const card = document.createElement('div');
231+ card.className = "card";
138232
139- const grid = document.createElement('div');
140- grid.className = "grid";
233+ const cardHeader = document.createElement('div');
234+ cardHeader.className = "card-header";
235+ cardHeader.textContent = cat;
236+ card.appendChild(cardHeader);
141237
142- categories[cat].sort((a,b)=>a.title.localeCompare(b.title)).forEach(api => {
143- const card = document.createElement('div');
144- card.className = "card";
238+ const list = document.createElement('ul');
239+ list.className = "card-list";
145240
241+ categories[cat].sort((a, b) => a.title.localeCompare(b.title)).forEach(api => {
242+ const listItem = document.createElement('li');
146243 const a = document.createElement('a');
147244 a.href = api.filename;
148245 a.textContent = api.title;
149-
150- card.appendChild(a);
151- grid.appendChild(card);
246+ listItem.appendChild(a);
247+ list.appendChild(listItem);
152248 });
153249
154- container.appendChild(grid);
250+ card.appendChild(list);
251+ container.appendChild(card);
155252 });
156253
157254 document.getElementById('timestamp').textContent = new Date().toLocaleString();
182279
183280echo -e " ${GREEN} ✅ README created: $OUTPUT_DIR /README.md${NC} "
184281echo -e " ${GREEN} 🎉 API documentation generation complete!${NC} "
282+ ` ` `
0 commit comments