swagger-openapi-sample/index.html at main · alokbash/swagger-openapi-sample · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Bookstore API Documentation</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Interactive API documentation for the Bookstore API using Swagger UI" />

  <!-- Swagger UI CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui.min.css" />

  <!-- Custom styles -->
  <style>
    body {
      margin: 0;
      background: #fafafa;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    #swagger-ui {
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px;
    }

    .topbar {
      display: none;
    }

    .swagger-ui .info .title {
      color: #3b4151;
    }

    /* Loading spinner */
    .loading-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50vh;
      flex-direction: column;
    }

    .spinner {
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
      margin-bottom: 20px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .error-container {
      padding: 20px;
      text-align: center;
      color: #e74c3c;
      background: #fff;
      border-radius: 8px;
      margin: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .error-container h2 {
      margin-top: 0;
    }

    .error-details {
      background: #f8f9fa;
      padding: 15px;
      border-radius: 4px;
      margin-top: 15px;
      font-family: 'Courier New', monospace;
      font-size: 14px;
      text-align: left;
    }
  </style>
</head>
<body>
  <div id="swagger-ui">
    <div class="loading-container">
      <div class="spinner"></div>
      <p>Loading API Documentation...</p>
    </div>
  </div>

  <!-- Swagger UI Bundle -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/5.17.14/swagger-ui-bundle.min.js"></script>

  <!-- JS-YAML for parsing YAML files -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>

  <script>
    // Configuration
    const CONFIG = {
      specUrl: './openapi.yaml',
      retryAttempts: 3,
      retryDelay: 1000
    };

    // Utility function to sleep
    const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));

    // Function to load and parse OpenAPI spec with retry logic
    async function loadOpenAPISpec(attempt = 1) {
      try {
        console.log(`Loading OpenAPI spec (attempt ${attempt}/${CONFIG.retryAttempts})...`);

        const response = await fetch(CONFIG.specUrl, {
          cache: 'no-cache',
          headers: {
            'Accept': 'application/x-yaml, text/yaml, text/plain, */*'
          }
        });

        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        const yamlText = await response.text();

        if (!yamlText.trim()) {
          throw new Error('OpenAPI spec file is empty');
        }

        // Parse YAML to JSON
        const spec = jsyaml.load(yamlText);

        if (!spec || typeof spec !== 'object') {
          throw new Error('Invalid OpenAPI specification format');
        }

        // Validate basic OpenAPI structure
        if (!spec.openapi && !spec.swagger) {
          throw new Error('Missing OpenAPI/Swagger version field');
        }

        console.log('OpenAPI spec loaded successfully:', spec.info?.title || 'Unknown API');

        // Initialize Swagger UI
        initializeSwaggerUI(spec);

      } catch (error) {
        console.error(`Error loading OpenAPI spec (attempt ${attempt}):`, error);

        if (attempt < CONFIG.retryAttempts) {
          console.log(`Retrying in ${CONFIG.retryDelay}ms...`);
          await sleep(CONFIG.retryDelay);
          return loadOpenAPISpec(attempt + 1);
        } else {
          showError(error);
        }
      }
    }

    // Initialize Swagger UI with the loaded spec
    function initializeSwaggerUI(spec) {
      try {
        SwaggerUIBundle({
          spec: spec,
          dom_id: '#swagger-ui',
          presets: [
            SwaggerUIBundle.presets.apis,
            SwaggerUIBundle.presets.standalone
          ],
          plugins: [
            SwaggerUIBundle.plugins.DownloadUrl
          ],
          layout: "BaseLayout",
          deepLinking: true,
          tryItOutEnabled: true,
          supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch', 'head', 'options'],
          validatorUrl: null, // Disable online validator
          docExpansion: 'list', // Show operations collapsed by default
          defaultModelsExpandDepth: 1,
          defaultModelExpandDepth: 1,
          showExtensions: true,
          showCommonExtensions: true,
          onComplete: function() {
            console.log('Swagger UI initialized successfully');

            // Add custom branding
            const title = document.querySelector('.info .title');
            if (title && spec.info?.title) {
              document.title = `${spec.info.title} - API Documentation`;
            }
          },
          onFailure: function(error) {
            console.error('Swagger UI initialization failed:', error);
            showError(new Error('Failed to initialize Swagger UI: ' + error.message));
          }
        });
      } catch (error) {
        console.error('Error initializing Swagger UI:', error);
        showError(error);
      }
    }

    // Show error message
    function showError(error) {
      const container = document.getElementById('swagger-ui');
      container.innerHTML = `
        <div class="error-container">
          <h2>⚠️ Error Loading API Documentation</h2>
          <p>We encountered an issue while loading the OpenAPI specification.</p>

          <div class="error-details">
            <strong>Error:</strong> ${error.message}
          </div>

          <h3>Troubleshooting Steps:</h3>
          <ul style="text-align: left; display: inline-block;">
            <li>Ensure <code>openapi.yaml</code> exists in the same directory as this HTML file</li>
            <li>Verify the YAML file is properly formatted (check for syntax errors)</li>
            <li>Make sure the file contains a valid OpenAPI 3.x specification</li>
            <li>If serving locally, ensure your server supports YAML files</li>
            <li>Check the browser console for additional error details</li>
          </ul>

          <p>
            <button onclick="location.reload()" style="
              background: #3498db;
              color: white;
              border: none;
              padding: 10px 20px;
              border-radius: 4px;
              cursor: pointer;
              font-size: 14px;
            ">
              🔄 Retry Loading
            </button>
          </p>
        </div>
      `;
    }

    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', loadOpenAPISpec);
    } else {
      loadOpenAPISpec();
    }

    // Handle service worker for offline support (optional)
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        // Register service worker if available
        // This can be implemented later for offline functionality
      });
    }
  </script>
</body>
</html>