@prauga/flexdoc-backend 2.1.0

package/dist/templates/parameters.njk

@@ -0,0 +1,64 @@
+{% if operation.parameters and operation.parameters.length > 0 %}
+<div class="mb-8">
+    <button class="flex items-center gap-2 text-lg font-semibold text-gray-900 dark:text-white mb-4 hover:text-primary-600 dark:hover:text-primary-400 transition-colors" 
+            data-toggle="parameters-{{ getOperationId(path, method, operation) }}">
+        <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        Parameters
+    </button>
+    
+    <div id="parameters-{{ getOperationId(path, method, operation) }}" class="collapsible-content expanded">
+        <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-6 border border-gray-200 dark:border-gray-600">
+            <div class="space-y-4">
+                {% for param in operation.parameters %}
+                <div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+                    <div class="flex items-center gap-2 mb-2">
+                        <code class="font-mono font-medium text-gray-900 dark:text-white">{{ param.name }}</code>
+                        <span class="px-2 py-1 text-xs font-medium rounded-md 
+                            {% if param.in == 'path' %}bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300
+                            {% elif param.in == 'query' %}bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300
+                            {% elif param.in == 'header' %}bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300
+                            {% else %}bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300{% endif %}">
+                            {{ param.in }}
+                        </span>
+                        {% if param.required %}
+                        <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 rounded-md">
+                            required
+                        </span>
+                        {% endif %}
+                    </div>
+                    
+                    {% if param.description %}
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">{{ param.description }}</p>
+                    {% endif %}
+                    
+                    {% if param.schema %}
+                    <div class="flex items-center gap-2 text-sm">
+                        <span class="text-gray-500 dark:text-gray-400">Type:</span>
+                        <code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-gray-900 dark:text-white">
+                            {{ param.schema.type }}{% if param.schema.format %} ({{ param.schema.format }}){% endif %}
+                        </code>
+                        {% if param.schema.enum %}
+                        <span class="text-gray-500 dark:text-gray-400">•</span>
+                        <span class="text-gray-500 dark:text-gray-400">Enum:</span>
+                        <code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-gray-900 dark:text-white">
+                            {{ param.schema.enum | join(', ') }}
+                        </code>
+                        {% endif %}
+                    </div>
+                    {% endif %}
+                    
+                    {% if param.schema and param.schema.example %}
+                    <div class="mt-3">
+                        <span class="text-sm text-gray-500 dark:text-gray-400 mb-1 block">Example:</span>
+                        <code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-gray-900 dark:text-white text-sm">
+                            {{ param.schema.example }}
+                        </code>
+                    </div>
+                    {% endif %}
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}

package/dist/templates/request-body.njk

@@ -0,0 +1,63 @@
+{% if operation.requestBody %}
+<div class="mb-8">
+    <button class="flex items-center gap-2 text-lg font-semibold text-gray-900 dark:text-white mb-4 hover:text-primary-600 dark:hover:text-primary-400 transition-colors" 
+            data-toggle="request-body-{{ getOperationId(path, method, operation) }}">
+        <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        Request Body
+        {% if operation.requestBody.required %}
+        <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300 rounded-md">
+            required
+        </span>
+        {% endif %}
+    </button>
+    
+    <div id="request-body-{{ getOperationId(path, method, operation) }}" class="collapsible-content">
+        <div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-6 border border-gray-200 dark:border-gray-600">
+            {% if operation.requestBody.description %}
+            <p class="text-gray-600 dark:text-gray-400 mb-4">{{ operation.requestBody.description }}</p>
+            {% endif %}
+            
+            {% if operation.requestBody.content %}
+            <div class="space-y-4">
+                {% for contentType, content in operation.requestBody.content %}
+                <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+                    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
+                        <div class="flex items-center gap-2">
+                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Content Type:</span>
+                            <code class="bg-gray-100 dark:bg-gray-600 px-2 py-1 rounded text-sm text-gray-900 dark:text-white">
+                                {{ contentType }}
+                            </code>
+                        </div>
+                    </div>
+                    
+                    <div class="p-4">
+                        {% if content.schema %}
+                        <div class="code-block">
+                            <pre class="text-gray-300">{{ renderSchema(content.schema) | safe }}</pre>
+                        </div>
+                        {% endif %}
+                        
+                        {% if content.example %}
+                        <div class="mt-4">
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Example:</span>
+                                <button class="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors" 
+                                        data-copy="{{ renderExample(content.example) }}">
+                                    <i data-lucide="copy" class="w-3 h-3 inline mr-1"></i>
+                                    Copy
+                                </button>
+                            </div>
+                            <div class="code-block">
+                                <pre class="text-gray-300">{{ renderExample(content.example) | safe }}</pre>
+                            </div>
+                        </div>
+                        {% endif %}
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+{% endif %}

package/dist/templates/responses.njk

@@ -0,0 +1,78 @@
+{% if operation.responses %}
+<div class="mb-8">
+    <button class="flex items-center gap-2 text-lg font-semibold text-gray-900 dark:text-white mb-4 hover:text-primary-600 dark:hover:text-primary-400 transition-colors" 
+            data-toggle="responses-{{ getOperationId(path, method, operation) }}">
+        <i data-lucide="chevron-down" class="w-5 h-5"></i>
+        Responses
+    </button>
+    
+    <div id="responses-{{ getOperationId(path, method, operation) }}" class="collapsible-content">
+        <div class="space-y-4">
+            {% for statusCode, response in operation.responses %}
+            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+                <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-600">
+                    <div class="flex items-center gap-3">
+                        <span class="px-3 py-1 text-sm font-bold rounded-lg border {{ getStatusCodeClass(statusCode) }}">
+                            {{ statusCode }}
+                        </span>
+                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                            {{ getStatusText(statusCode) }}
+                        </span>
+                        {% if response.description %}
+                        <span class="text-sm text-gray-600 dark:text-gray-400">• {{ response.description }}</span>
+                        {% endif %}
+                    </div>
+                </div>
+                
+                {% if response.content %}
+                <div class="p-6">
+                    {% for contentType, content in response.content %}
+                    <div class="mb-4 last:mb-0">
+                        <div class="flex items-center gap-2 mb-3">
+                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Content Type:</span>
+                            <code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm text-gray-900 dark:text-white">
+                                {{ contentType }}
+                            </code>
+                        </div>
+                        
+                        {% if content.schema %}
+                        <div class="mb-4">
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Schema:</span>
+                                <button class="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors" 
+                                        data-copy="{{ renderSchema(content.schema) }}">
+                                    <i data-lucide="copy" class="w-3 h-3 inline mr-1"></i>
+                                    Copy
+                                </button>
+                            </div>
+                            <div class="code-block">
+                                <pre class="text-gray-300">{{ renderSchema(content.schema) | safe }}</pre>
+                            </div>
+                        </div>
+                        {% endif %}
+                        
+                        {% if content.example %}
+                        <div>
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Example:</span>
+                                <button class="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors" 
+                                        data-copy="{{ renderExample(content.example) }}">
+                                    <i data-lucide="copy" class="w-3 h-3 inline mr-1"></i>
+                                    Copy
+                                </button>
+                            </div>
+                            <div class="code-block">
+                                <pre class="text-gray-300">{{ renderExample(content.example) | safe }}</pre>
+                            </div>
+                        </div>
+                        {% endif %}
+                    </div>
+                    {% endfor %}
+                </div>
+                {% endif %}
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+{% endif %}

package/dist/templates/sidebar.njk

@@ -0,0 +1,117 @@
+<aside class="sidebar w-80 border-r flex flex-col fixed top-0 left-0 z-10 pt-16 h-screen overflow-y-auto pb-16">
+    <div class="px-6 pt-4 pb-2">
+        <!-- Search -->
+        <div class="relative mb-6">
+            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <i data-lucide="search" class="h-4 w-4 text-gray-400"></i>
+            </div>
+            <input id="search-input" 
+                   type="text" 
+                   class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm" 
+                   placeholder="Search endpoints...">
+        </div>
+        
+        <!-- API Info -->
+        {% if currentSpec and currentSpec.info %}
+        <div class="mb-6">
+            <div class="bg-gradient-to-br from-primary-50 to-primary-100 dark:from-primary-900/20 dark:to-primary-800/20 rounded-xl p-4 border border-primary-200 dark:border-primary-800">
+                <h3 class="font-semibold text-primary-900 dark:text-primary-100 mb-2">{{ currentSpec.info.title }}</h3>
+                {% if altDescription %}
+                <p class="text-sm text-primary-700 dark:text-primary-300 mb-3">{{ altDescription }}</p>
+                {% elif currentSpec.info.description %}
+                <p class="text-sm text-primary-700 dark:text-primary-300 mb-3">{{ currentSpec.info.description }}</p>
+                {% endif %}
+                
+                <div class="flex items-center justify-between text-xs">
+                    <span class="text-primary-600 dark:text-primary-400">Version {{ currentSpec.info.version }}</span>
+                    {% if currentSpec.servers and currentSpec.servers.length > 0 %}
+                    <span class="text-primary-600 dark:text-primary-400">{{ currentSpec.servers.length }} server{{ 's' if currentSpec.servers.length > 1 else '' }}</span>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        
+        <!-- Servers -->
+        {% if showServersInSidebar and currentSpec and currentSpec.servers and currentSpec.servers.length > 0 %}
+        <div class="mb-2">
+            <button class="tag-toggle flex items-center justify-between w-full text-left mb-3" data-target="servers">
+                <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Servers</h3>
+                <i data-lucide="chevron-right" class="w-4 h-4 text-gray-500"></i>
+            </button>
+            <div id="servers" class="collapsible-content">
+                <div class="space-y-2 max-h-40 overflow-auto pr-1 py-2">
+                    {% for server in currentSpec.servers %}
+                    <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
+                        <code class="text-sm text-primary-600 dark:text-primary-400 font-mono">{{ server.url }}</code>
+                        {% if server.description %}
+                        <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">{{ server.description }}</p>
+                        {% endif %}
+                    </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+    
+    <!-- Navigation -->
+    <nav class="px-4 pb-6 flex-1 overflow-y-auto min-h-0">
+        <button class="tag-toggle flex items-center justify-between w-full px-2 text-left mb-3" data-target="endpoints-list">
+            <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Endpoints</h3>
+            <i data-lucide="chevron-down" class="w-4 h-4 text-gray-500"></i>
+        </button>
+
+        <div id="endpoints-list" class="collapsible-content expanded">
+        
+        {% for tag, paths in taggedPaths %}
+        <div class="tag-section mb-4">
+            <button class="tag-toggle flex items-center justify-between w-full px-2 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" 
+                    data-target="tag-{{ tag | lower | replace(' ', '-') }}">
+                <div class="flex items-center gap-2">
+                    <i data-lucide="chevron-right" class="w-4 h-4 text-gray-500"></i>
+                    <h4 class="text-sm font-medium text-gray-900 dark:text-white capitalize">
+                        {% if tagGroups[tag] %}{{ tagGroups[tag] }}{% elseif tag == 'default' %}General{% else %}{{ tag }}{% endif %}
+                    </h4>
+                </div>
+                <span class="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded-full">
+                    {% set count = 0 %}
+                    {% for path, methods in paths %}
+                        {% for method, operation in methods %}
+                            {% set count = count + 1 %}
+                        {% endfor %}
+                    {% endfor %}
+                    {{ count }}
+                </span>
+            </button>
+            
+            <div id="tag-{{ tag | lower | replace(' ', '-') }}" class="collapsible-content ml-6 mt-2">
+                <div class="space-y-1">
+                    {% for path, methods in paths %}
+                    {% for method, operation in methods %}
+                    <a href="#{{ getOperationId(path, method, operation) }}" 
+                       class="endpoint-item endpoint-link group flex items-start px-2 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                       data-endpoint="{{ getOperationId(path, method, operation) }}">
+                        <span class="flex-shrink-0 mr-3 mt-0.5 px-2 py-1 text-xs font-bold rounded border method-{{ method }}">
+                            {{ method | upper }}
+                        </span>
+                        <div class="flex-1 min-w-0">
+                            <div class="font-mono text-sm text-gray-900 dark:text-white truncate group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
+                                {{ path }}
+                            </div>
+                            {% if operation.summary %}
+                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">
+                                {{ operation.summary }}
+                            </div>
+                            {% endif %}
+                        </div>
+                    </a>
+                    {% endfor %}
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+        </div>
+    </nav>
+</aside>