john-okeefe
533f8747e3
- Add defer attribute to <script src="/static/main.js"> in 21 template files - Improves page load performance by allowing HTML parsing to continue without blocking - Maintains script execution order while enabling parallel resource loading - Remove duplicate defer attribute from header.templ line 264 - Add websocket.ts import to main.ts for module registration This optimization reduces page render blocking and improves perceived load times by allowing the browser to continue parsing HTML while the main.js bundle loads. The defer attribute ensures scripts execute in order after HTML parsing completes. Affected templates include: - Admin pages: admin, admin_library, admin_settings, admin_users - Content pages: analytics, bookshelf, collections, conflicts, custom_section - User pages: dashboard, devices, docs, index, login, profile, progress, queue, register - System pages: header, unlinked_books
82 lines
5.4 KiB
Templ
82 lines
5.4 KiB
Templ
package templates
|
|
|
|
templ APIExplorer(explorer APIExplorerData) {
|
|
if !explorer.IsLoggedIn {
|
|
// Show mode toggle and mock data
|
|
<div x-data="devices" class="border border-border rounded-lg p-6 mt-8 bg-background-secondary">
|
|
<div class="flex gap-2 mb-4">
|
|
<button class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer bg-accent text-white">Mock Data</button>
|
|
<button class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary opacity-50 cursor-not-allowed" disabled>Login to Try Real</button>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="mb-4">
|
|
<select disabled class="w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent">
|
|
<option value="GET" selected?={ explorer.Endpoint.Method == "GET" }>GET</option>
|
|
<option value="POST" selected?={ explorer.Endpoint.Method == "POST" }>POST</option>
|
|
<option value="PUT" selected?={ explorer.Endpoint.Method == "PUT" }>PUT</option>
|
|
<option value="DELETE" selected?={ explorer.Endpoint.Method == "DELETE" }>DELETE</option>
|
|
</select>
|
|
</div>
|
|
<h4 class="text-text-secondary mb-2 text-sm font-medium">Request Body (Example)</h4>
|
|
<pre class="bg-background-primary p-4 rounded-lg overflow-x-auto"><code class="text-text-primary text-sm">{ explorer.Endpoint.RequestBody }</code></pre>
|
|
</div>
|
|
<div class="mt-4">
|
|
<h4 class="text-text-secondary mb-2 text-sm font-medium">Response (Mock)</h4>
|
|
<pre class="bg-background-primary p-4 rounded-lg overflow-x-auto"><code class="text-text-primary text-sm">{ explorer.Endpoint.Response }</code></pre>
|
|
</div>
|
|
<div class="flex gap-2 mt-4">
|
|
<button @click="copyToClipboard(JSON.stringify({ explorer.Endpoint.RequestBody }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Request</button>
|
|
<button @click="copyToClipboard(JSON.stringify({ explorer.Endpoint.Response }, null, 2))" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Response</button>
|
|
</div>
|
|
</div>
|
|
} else {
|
|
// Show interactive explorer with real execution
|
|
<div class="border border-border rounded-lg p-6 mt-8 bg-background-secondary" x-data="apiExplorerDoc" x-init="initAPIExplorerDoc('{ explorer.Endpoint.Path }', '{ explorer.Endpoint.RequestBody }', '{ explorer.Endpoint.Response }')">
|
|
<div class="flex gap-2 mb-4">
|
|
<button class="mode-btn px-4 py-2 border border-border rounded bg-background-primary text-text-primary cursor-pointer hover:bg-background-secondary text-sm" id="mock-btn" @click="showDocMode('mock')">Mock Data</button>
|
|
<button class="mode-btn px-4 py-2 bg-accent text-white rounded cursor-pointer text-sm" id="real-btn" @click="showDocMode('real')">Try It Out</button>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="mb-4">
|
|
<select id="http-method" class="w-full px-3 py-2 rounded bg-background-primary text-text-primary border border-border focus:outline-none focus:ring-2 focus:ring-accent">
|
|
<option value="GET" selected?={ explorer.Endpoint.Method == "GET" }>GET</option>
|
|
<option value="POST" selected?={ explorer.Endpoint.Method == "POST" }>POST</option>
|
|
<option value="PUT" selected?={ explorer.Endpoint.Method == "PUT" }>PUT</option>
|
|
<option value="DELETE" selected?={ explorer.Endpoint.Method == "DELETE" }>DELETE</option>
|
|
</select>
|
|
</div>
|
|
<h4 class="text-text-secondary mb-2 text-sm font-medium">Request Body</h4>
|
|
<textarea id="request-body" placeholder="Edit request body..." class="w-full min-h-[150px] px-3 py-2 font-mono text-sm bg-background-primary text-text-primary border border-border rounded focus:outline-none focus:ring-2 focus:ring-accent">{ explorer.Endpoint.RequestBody }</textarea>
|
|
</div>
|
|
<button id="try-it-out" @click="tryDocEndpoint()" class="bg-accent text-white px-6 py-3 rounded cursor-pointer mt-4 hover:opacity-90">Try It Out</button>
|
|
<div class="api-response mt-4 hidden">
|
|
<div class="flex justify-between mb-2 text-sm">
|
|
<span id="response-status" class="font-semibold"></span>
|
|
<span id="response-time" class="text-text-secondary"></span>
|
|
</div>
|
|
<pre class="bg-background-primary p-4 rounded-lg overflow-x-auto"><code id="response-body" class="text-text-primary text-sm"></code></pre>
|
|
</div>
|
|
<div class="flex gap-2 mt-4 flex-wrap">
|
|
<button @click="copyDocRequest()" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Request</button>
|
|
<button @click="copyDocResponse()" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Copy Response</button>
|
|
<button @click="generateDocCURL()" class="px-4 py-2 border border-border rounded bg-background-primary text-text-primary hover:bg-background-secondary cursor-pointer text-sm">Generate cURL</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
// APIExplorerData holds data for the API explorer component
|
|
type APIExplorerData struct {
|
|
Endpoint EndpointInfo
|
|
IsLoggedIn bool
|
|
}
|
|
|
|
// EndpointInfo holds information about an API endpoint
|
|
type EndpointInfo struct {
|
|
Method string
|
|
Path string
|
|
RequestBody string
|
|
Response string
|
|
Description string
|
|
}
|