froggy-docs 1.0.8 → 1.1.0

package/bin/froggy_docs.dart

@@ -14,6 +14,12 @@ void main(List<String> arguments) async {
     help: 'Port for server',
     defaultsTo: '8080',
   );
+  parser.addOption(
+    'proxy',
+    abbr: 'x',
+    help: 'Proxy API requests to this URL (e.g., http://localhost:3000)',
+    defaultsTo: '',
+  );
 
   try {
     final results = parser.parse(arguments);
@@ -24,10 +30,14 @@ void main(List<String> arguments) async {
       watcher.startWatching(Directory.current.path);
     } else if (results.command?.name == 'serve') {
       final port = int.parse(results['port'] as String);
+      final proxyUrl = results['proxy'] as String;
       print('🐸 Starting FroggyDocs server with live reload...');
+      if (proxyUrl.isNotEmpty) {
+        print('🔄 Proxy enabled: API requests will be forwarded to $proxyUrl');
+      }
 
       // Start server and watcher
-      await startServer(port: port);
+      await startServer(port: port, proxyUrl: proxyUrl);
       final watcher = WatcherEngine();
       watcher.startWatching(Directory.current.path);
     }

package/frontend/web/app.js

@@ -0,0 +1,251 @@
+let apiData = null;
+let isDark = false;
+let searchQuery = '';
+let authHeader = '';
+const responses = {};
+const loading = {};
+const requestBodyValues = {};
+const expandedEndpoints = {};
+
+const methodColors = {
+    GET: '#61affe',
+    POST: '#49cc90',
+    PUT: '#fca130',
+    DELETE: '#f93e3e',
+    PATCH: '#50e3c2'
+};
+
+async function loadData() {
+    try {
+        const resp = await fetch('/froggy_docs.json');
+        if (resp.ok) {
+            apiData = await resp.json();
+            render();
+        }
+    } catch (e) {
+        console.error('Failed to load API data:', e);
+    }
+}
+
+function getEndpointsByTag() {
+    const byTag = {};
+    const paths = apiData?.paths || {};
+    for (const [path, methods] of Object.entries(paths)) {
+        for (const [method, spec] of Object.entries(methods)) {
+            const tags = spec.tags || ['Untagged'];
+            for (const tag of tags) {
+                if (!byTag[tag]) byTag[tag] = [];
+                byTag[tag].push({ path, method, spec });
+            }
+        }
+    }
+    return byTag;
+}
+
+function render() {
+    document.getElementById('docTitle').textContent = apiData?.info?.title || 'API Documentation';
+    renderSidebar();
+    renderApiList();
+}
+
+function renderSidebar() {
+    const byTag = getEndpointsByTag();
+    const filtered = Object.entries(byTag).filter(([tag, endpoints]) => {
+        if (searchQuery === '') return true;
+        if (tag.toLowerCase().includes(searchQuery.toLowerCase())) return true;
+        return endpoints.some(ep => ep.path.toLowerCase().includes(searchQuery.toLowerCase()));
+    });
+
+    let html = '';
+    for (const [tag, endpoints] of filtered) {
+        const tagMatchesSearch = searchQuery === '' || tag.toLowerCase().includes(searchQuery.toLowerCase());
+        const tagFiltered = searchQuery === '' || tagMatchesSearch 
+            ? endpoints 
+            : endpoints.filter(ep => ep.path.toLowerCase().includes(searchQuery.toLowerCase()));
+        
+        if (searchQuery !== '' && tagFiltered.length === 0) continue;
+
+        html += `
+            <div class="tag-group">
+                <div class="tag-header">▶ ${tag}</div>
+                <div class="tag-endpoints">
+                    ${tagFiltered.map(ep => `
+                        <a class="nav-item" href="#${ep.method.toUpperCase()}-${ep.path}">
+                            <span class="method-tag ${ep.method.toUpperCase()}" style="background:${methodColors[ep.method.toUpperCase()] || '#666'}">${ep.method.toUpperCase()}</span>
+                            <span>${ep.path}</span>
+                        </a>
+                    `).join('')}
+                </div>
+            </div>
+        `;
+    }
+    document.getElementById('navList').innerHTML = html;
+}
+
+function renderApiList() {
+    if (!apiData) {
+        document.getElementById('apiList').innerHTML = '<div class="api-section"><p>Loading...</p></div>';
+        return;
+    }
+
+    const paths = apiData.paths || {};
+    let html = '';
+    for (const [path, methods] of Object.entries(paths)) {
+        for (const [method, spec] of Object.entries(methods)) {
+            html += renderEndpoint(path, method, spec);
+        }
+    }
+    document.getElementById('apiList').innerHTML = html;
+}
+
+function renderEndpoint(path, method, spec) {
+    const key = `${method}-${path}`;
+    const props = spec.requestBody?.content?.['application/json']?.schema?.properties;
+    const hasAuth = spec.security != null;
+    const isExpanded = expandedEndpoints[key] || false;
+    const savedValues = requestBodyValues[key] || {};
+
+    let paramsHtml = '';
+    if (props && Object.keys(props).length > 0) {
+        paramsHtml = `
+            <h3 class="section-title">Parameters</h3>
+            <table class="params-table">
+                <thead><tr><th>Field</th><th>Type</th><th>Description</th></tr></thead>
+                <tbody>
+                    ${Object.entries(props).map(([name, prop]) => `
+                        <tr>
+                            <td><b>${name}</b></td>
+                            <td><span class="type-label">${prop.type || 'string'}</span></td>
+                            <td>${prop.description || '-'}</td>
+                        </tr>
+                    `).join('')}
+                </tbody>
+            </table>
+        `;
+    }
+
+    return `
+        <section class="api-section" id="${method.toUpperCase()}-${path}">
+            <div class="endpoint-header">
+                <span class="method-tag ${method.toUpperCase()}" style="background:${methodColors[method.toUpperCase()] || '#666'}">${method.toUpperCase()}</span>
+                <span class="path-text">${path}</span>
+                ${hasAuth ? '<span class="auth-badge">🔒 Auth</span>' : ''}
+            </div>
+            <p class="api-description">${spec.summary || 'No description'}</p>
+            
+            ${props && Object.keys(props).length > 0 ? `
+                <button class="try-it-out-btn ${isExpanded ? '' : 'secondary'}" onclick="toggleBody('${key}')">
+                    ${isExpanded ? 'Hide Request Body' : 'Show Request Body'}
+                </button>
+                ${isExpanded ? `
+                    <h3 class="section-title">Request Body</h3>
+                    <div class="request-body-form">
+                        ${Object.entries(props).map(([name, prop]) => `
+                            <div class="form-field">
+                                <label>${name} (${prop.type || 'string'})</label>
+                                ${prop.description ? `<span class="field-desc">${prop.description}</span>` : ''}
+                                <input type="text" class="form-input" placeholder="${prop.default || ''}" 
+                                    value="${savedValues[name] || ''}" 
+                                    oninput="saveBodyValue('${key}', '${name}', this.value)">
+                            </div>
+                        `).join('')}
+                    </div>
+                ` : ''}
+            ` : ''}
+
+            <button class="try-it-out-btn" onclick="executeRequest('${method}', '${path}', ${hasAuth}, ${props ? JSON.stringify(props).replace(/"/g, '&quot;') : 'null'})">
+                ${loading[key] ? 'Loading...' : 'Try It Out'}
+            </button>
+
+            ${responses[key] ? `
+                <div class="response-section">
+                    <h4>Response:</h4>
+                    <pre class="response-body">${responses[key]}</pre>
+                </div>
+            ` : ''}
+
+            ${paramsHtml}
+        </section>
+    `;
+}
+
+function toggleBody(key) {
+    expandedEndpoints[key] = !expandedEndpoints[key];
+    renderApiList();
+}
+
+function saveBodyValue(key, field, value) {
+    if (!requestBodyValues[key]) requestBodyValues[key] = {};
+    requestBodyValues[key][field] = value;
+}
+
+async function executeRequest(method, path, hasAuth, props) {
+    const key = `${method}-${path}`;
+    loading[key] = true;
+    renderApiList();
+
+    try {
+        const headers = { 'Content-Type': 'application/json' };
+        if (authHeader) headers['Authorization'] = authHeader;
+
+        let body = '{}';
+        if (props && Object.keys(props).length > 0) {
+            const bodyData = {};
+            const savedValues = requestBodyValues[key] || {};
+            for (const [name, prop] of Object.entries(props)) {
+                const value = savedValues[name] || prop.default || '';
+                if (value) bodyData[name] = prop.type === 'number' ? Number(value) : value;
+            }
+            body = JSON.stringify(bodyData);
+        }
+
+        let resp;
+        const url = `${window.location.origin}${path}`;
+        const options = { method, headers };
+
+        if (method !== 'GET' && method !== 'DELETE') {
+            options.body = body;
+        }
+
+        resp = await fetch(url, options);
+
+        let responseText;
+        try {
+            const json = await resp.json();
+            responseText = JSON.stringify(json, null, 2);
+        } catch {
+            responseText = await resp.text();
+        }
+
+        responses[key] = resp.ok ? responseText : `Error ${resp.status}: ${responseText}`;
+    } catch (e) {
+        responses[key] = `Error: ${e.message}`;
+    }
+
+    loading[key] = false;
+    renderApiList();
+}
+
+document.getElementById('searchInput').addEventListener('input', (e) => {
+    searchQuery = e.target.value;
+    render();
+});
+
+document.getElementById('authInput').addEventListener('input', (e) => {
+    authHeader = e.target.value;
+});
+
+document.getElementById('themeToggle').addEventListener('click', () => {
+    isDark = !isDark;
+    document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+    document.getElementById('themeToggle').textContent = isDark ? '☀️' : '🌙';
+});
+
+if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    isDark = true;
+    document.documentElement.setAttribute('data-theme', 'dark');
+    document.getElementById('themeToggle').textContent = '☀️';
+}
+
+loadData();
+setInterval(loadData, 3000);

package/frontend/web/index.html

@@ -1,12 +1,34 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>FroggyDocs</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FroggyDocs - API Documentation</title>
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <script defer src="main.client.dart.js"></script>
+    <div class="app-container">
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <h2><span>🐸</span> FroggyDocs</h2>
+            </div>
+            <div class="search-container">
+                <input type="text" class="search-box" id="searchInput" placeholder="Search tags or endpoints...">
+            </div>
+            <nav class="nav-list" id="navList"></nav>
+        </aside>
+        <main class="main-content">
+            <header class="header">
+                <h1 id="docTitle">API Documentation</h1>
+                <button class="theme-toggle" id="themeToggle">🌙</button>
+            </header>
+            <div class="settings-section">
+                <div>Authorization: </div>
+                <input type="text" class="auth-input" id="authInput" placeholder="Bearer token">
+            </div>
+            <div id="apiList"></div>
+        </main>
+    </div>
+    <script src="app.js"></script>
 </body>
 </html>

package/lib/src/web_server.dart

@@ -5,10 +5,15 @@ import 'package:shelf/shelf.dart';
 import 'package:shelf/shelf_io.dart' as shelf_io;
 import 'package:shelf_router/shelf_router.dart';
 import 'package:path/path.dart' as p;
+import 'package:http/http.dart' as http;
 
 const defaultPort = 8080;
 
-Future<void> startServer({int port = defaultPort}) async {
+String _proxyUrl = '';
+
+Future<void> startServer({int port = defaultPort, String proxyUrl = ''}) async {
+  _proxyUrl = proxyUrl;
+  
   final handler = const Pipeline()
       .addMiddleware(logRequests())
       .addHandler(_router.call);
@@ -137,8 +142,51 @@ Router get _router {
   // ═════════════════════════════════════════════════════════════
   // End of Demo/Mock API
   // In production: Remove lines 66-124 or connect to your real API
-  // The "Try It Out" button will call your actual API endpoints
-  // ═════════════════════════════════════════════════════════════
+// The "Try It Out" button will call your actual API endpoints
+  // ═══════════════════════════════════════════════════════════════
+
+  // Proxy API requests to backend server
+  router.all('/api/<path.*>', (Request request, String path) async {
+    if (_proxyUrl.isEmpty) {
+      return Response.notFound('{"error": "Proxy not configured. Use --proxy http://localhost:3000"');
+    }
+
+    try {
+      final targetUrl = '$_proxyUrl/api/$path';
+      final method = request.method;
+      final headers = <String, String>{};
+      
+      request.headers.forEach((key, value) {
+        if (key.toLowerCase() != 'host') {
+          headers[key] = value;
+        }
+      });
+
+      String? body;
+      if (method != 'GET' && method != 'HEAD') {
+        body = await request.readAsString();
+      }
+
+      final proxyResponse = await http.Request(method, Uri.parse(targetUrl))
+          .send();
+
+      final responseBody = await proxyResponse.stream.bytesToString();
+      
+      return Response(
+        proxyResponse.statusCode,
+        body: responseBody,
+        headers: {
+          'Content-Type': proxyResponse.headers['content-type'] ?? 'application/json',
+          ..._corsHeaders,
+        },
+      );
+    } catch (e) {
+      return Response.internalServerError(
+        body: '{"error": "Proxy error: $e"}',
+        headers: {'Content-Type': 'application/json'},
+      );
+    }
+  });
 
   router.get('/<path|[^/]+>', (Request request, String path) async {
     var file = File(p.join(deployDir, path));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "froggy-docs",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "Auto-generate API documentation from code annotations. Works with any programming language.",
   "author": "Kaung Mrat Thu <kaungmyatthuu.dev@gmail.com>",
   "homepage": "https://github.com/Kaung-Myat/froggydocs",

package/pubspec.yaml

@@ -19,6 +19,7 @@ dependencies:
   watcher: ^1.2.1
   shelf: ^1.4.2
   shelf_router: ^1.1.4
+  http: ^1.4.0
 
 dev_dependencies:
   lints: ^6.0.0

package/frontend/web/main.client.dart.js

@@ -1,81 +0,0 @@
-(function() {
-  var _currentDirectory = (function () {
-  var _url;
-  var lines = new Error().stack.split('\n');
-  function lookupUrl() {
-    if (lines.length > 2) {
-      var match = lines[1].match(/^\s+at (.+):\d+:\d+$/);
-      // Chrome.
-      if (match) return match[1];
-      // Chrome nested eval case.
-      match = lines[1].match(/^\s+at eval [(](.+):\d+:\d+[)]$/);
-      if (match) return match[1];
-      // Edge.
-      match = lines[1].match(/^\s+at.+\((.+):\d+:\d+\)$/);
-      if (match) return match[1];
-      // Firefox.
-      match = lines[0].match(/[<][@](.+):\d+:\d+$/)
-      if (match) return match[1];
-    }
-    // Safari.
-    return lines[0].match(/[@](.+):\d+:\d+$/)[1];
-  }
-  _url = lookupUrl();
-  var lastSlash = _url.lastIndexOf('/');
-  if (lastSlash == -1) return _url;
-  var currentDirectory = _url.substring(0, lastSlash + 1);
-  return currentDirectory;
-})();
-
-  var baseUrl = (function () {
-  // Attempt to detect --precompiled mode for tests, and set the base url
-  // appropriately, otherwise set it to '/'.
-  var pathParts = location.pathname.split("/");
-  if (pathParts[0] == "") {
-    pathParts.shift();
-  }
-  if (pathParts.length > 1 && pathParts[1] == "test") {
-    return "/" + pathParts.slice(0, 2).join("/") + "/";
-  }
-  // Attempt to detect base url using <base href> html tag
-  // base href should start and end with "/"
-  if (typeof document !== 'undefined') {
-    var el = document.getElementsByTagName('base');
-    if (el && el[0] && el[0].getAttribute("href") && el[0].getAttribute
-    ("href").startsWith("/") && el[0].getAttribute("href").endsWith("/")){
-      return el[0].getAttribute("href");
-    }
-  }
-  // return default value
-  return "/";
-}());
-
-
-  var mapperUri = baseUrl + "packages/build_web_compilers/src/dev_compiler_stack_trace/stack_trace_mapper.dart.js";
-  var requireUri = baseUrl +
-      "packages/build_web_compilers/src/dev_compiler/require.js";
-  var mainUri = _currentDirectory + "main.client.dart.bootstrap";
-
-  if (typeof document != 'undefined') {
-    var el = document.createElement("script");
-    el.defer = true;
-    el.async = false;
-    el.src = mapperUri;
-    document.head.appendChild(el);
-
-    el = document.createElement("script");
-    el.defer = true;
-    el.async = false;
-    el.src = requireUri;
-    el.setAttribute("data-main", mainUri);
-    document.head.appendChild(el);
-  } else {
-    importScripts(mapperUri, requireUri);
-    require.config({
-      baseUrl: baseUrl,
-    });
-    // TODO: update bootstrap code to take argument - dart-lang/build#1115
-    window = self;
-    require([mainUri + '.js']);
-  }
-})();