refactor: Consolidate script imports to use main.js bundle
- dashboard.templ: Replaced individual script tags with single main.js import - admin_users.templ, custom_section.templ: Minor formatting/cleanup - docs.templ: Updated script imports (excluded from Alpine conversion per user request) - api.ts, docs.ts, password_validation.ts: Minor updates for compatibility
This commit is contained in:
+128
-138
@@ -3,143 +3,133 @@ package templates
|
||||
templ AdminUsers(currentUser User, users []User, adminCount int) {
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Users - Bookhoard Admin</title>
|
||||
<script src="/static/htmx.min.js"></script>
|
||||
<script src="/static/toast.js"></script>
|
||||
<script src="/static/header.js"></script>
|
||||
<script src="/static/theme.js"></script>
|
||||
<link href="/static/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="theme-{ currentUser.Theme }">
|
||||
@Header(currentUser, "/admin/users")
|
||||
|
||||
<!-- Modal Container (populated by HTMX) -->
|
||||
<div id="modal-container"></div>
|
||||
|
||||
<div class="flex min-h-screen" style="background-color: var(--bg-primary)">
|
||||
@AdminSidebar(currentUser, "/admin/users")
|
||||
|
||||
<main class="flex-1 p-8">
|
||||
<div class="w-full">
|
||||
<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">User Management</h1>
|
||||
<p style="color: var(--text-secondary)">Manage user accounts and permissions</p>
|
||||
</div>
|
||||
|
||||
<!-- Users Table -->
|
||||
<div class="card rounded-lg border overflow-hidden" style="background-color: var(--bg-secondary); border-color: var(--border)">
|
||||
<table class="w-full">
|
||||
<thead style="background-color: var(--bg-primary)">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Username</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Email</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Role</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Created</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y" style="divide-color: var(--border)">
|
||||
for _, user := range users {
|
||||
<tr id={ "user-" + user.ID } class="hover:bg-opacity-50" style="transition: background-color 0.2s;">
|
||||
<!-- Username -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<div class="text-sm font-medium" style="color: var(--text-primary)">{user.Username}</div>
|
||||
if user.ID == currentUser.ID {
|
||||
<span class="text-xs px-2 py-1 rounded" style="background-color: var(--accent); color: white;">You</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Email -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm" style="color: var(--text-primary)">{user.Email}</div>
|
||||
</td>
|
||||
|
||||
<!-- Role Toggle (with last-admin protection) -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
if user.Role == "admin" && adminCount == 1 {
|
||||
<!-- Last admin - disabled -->
|
||||
<div class="relative">
|
||||
<select
|
||||
disabled
|
||||
class="text-sm rounded px-2 py-1 cursor-not-allowed opacity-50"
|
||||
style="background-color: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border);"
|
||||
title="Cannot demote the last admin"
|
||||
>
|
||||
<option value="user">User</option>
|
||||
<option value="admin" selected>Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
} else {
|
||||
<select
|
||||
hx-put={ "/api/auth/profile/" + user.ID }
|
||||
hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
|
||||
hx-target={ "#role-result-" + user.ID }
|
||||
hx-swap="innerHTML"
|
||||
name="role"
|
||||
class="text-sm rounded px-2 py-1"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);"
|
||||
onchange="this.dispatchEvent(new Event('htmx:trigger'))"
|
||||
hx-trigger="change"
|
||||
hx-vals='{"role": this.value}'
|
||||
>
|
||||
<option value="user" selected?={user.Role == "user"}>User</option>
|
||||
<option value="admin" selected?={user.Role == "admin"}>Admin</option>
|
||||
</select>
|
||||
<div id={ "role-result-" + user.ID } class="text-xs mt-1"></div>
|
||||
}
|
||||
</td>
|
||||
|
||||
<!-- Created -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm" style="color: var(--text-secondary)">{ user.CreatedAt.Format("2006-01-02") }</div>
|
||||
</td>
|
||||
|
||||
<!-- Actions -->
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right">
|
||||
<button
|
||||
hx-get={ "/admin/users/" + user.ID + "/profile-modal" }
|
||||
hx-target="#modal-container"
|
||||
hx-swap="innerHTML"
|
||||
class="text-sm px-3 py-1 rounded mr-2"
|
||||
style="background-color: var(--accent); color: white;"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
if user.Role == "admin" && adminCount == 1 {
|
||||
<button
|
||||
disabled
|
||||
class="text-sm px-3 py-1 rounded cursor-not-allowed opacity-50"
|
||||
style="background-color: #dc2626; color: white;"
|
||||
title="Cannot delete the last admin"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
} else {
|
||||
<button
|
||||
hx-delete={ "/api/auth/profile/" + user.ID }
|
||||
hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
|
||||
hx-target={ "#user-" + user.ID }
|
||||
hx-swap="outerHTML swap:0.5s"
|
||||
hx-confirm="Are you sure you want to delete this user? This action cannot be undone."
|
||||
class="text-sm px-3 py-1 rounded"
|
||||
style="background-color: #dc2626; color: white;"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<title>Users - Bookhoard Admin</title>
|
||||
<script src="/static/htmx.min.js"></script>
|
||||
<script src="/static/main.js"></script>
|
||||
<link href="/static/style.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body class="theme-{ currentUser.Theme }">
|
||||
@Header(currentUser, "/admin/users")
|
||||
<!-- Modal Container (populated by HTMX) -->
|
||||
<div id="modal-container"></div>
|
||||
<div class="flex min-h-screen" style="background-color: var(--bg-primary)">
|
||||
@AdminSidebar(currentUser, "/admin/users")
|
||||
<main class="flex-1 p-8">
|
||||
<div class="w-full">
|
||||
<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">User Management</h1>
|
||||
<p style="color: var(--text-secondary)">Manage user accounts and permissions</p>
|
||||
</div>
|
||||
<!-- Users Table -->
|
||||
<div class="card rounded-lg border overflow-hidden" style="background-color: var(--bg-secondary); border-color: var(--border)">
|
||||
<table class="w-full">
|
||||
<thead style="background-color: var(--bg-primary)">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Username</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Email</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Role</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Created</th>
|
||||
<th class="px-6 py-3 text-right text-xs font-medium uppercase tracking-wider" style="color: var(--text-secondary)">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y" style="divide-color: var(--border)">
|
||||
for _, user := range users {
|
||||
<tr id={ "user-" + user.ID } class="hover:bg-opacity-50" style="transition: background-color 0.2s;">
|
||||
<!-- Username -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<div class="text-sm font-medium" style="color: var(--text-primary)">{ user.Username }</div>
|
||||
if user.ID == currentUser.ID {
|
||||
<span class="text-xs px-2 py-1 rounded" style="background-color: var(--accent); color: white;">You</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<!-- Email -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm" style="color: var(--text-primary)">{ user.Email }</div>
|
||||
</td>
|
||||
<!-- Role Toggle (with last-admin protection) -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
if user.Role == "admin" && adminCount == 1 {
|
||||
<!-- Last admin - disabled -->
|
||||
<div class="relative">
|
||||
<select
|
||||
disabled
|
||||
class="text-sm rounded px-2 py-1 cursor-not-allowed opacity-50"
|
||||
style="background-color: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--border);"
|
||||
title="Cannot demote the last admin"
|
||||
>
|
||||
<option value="user">User</option>
|
||||
<option value="admin" selected>Admin</option>
|
||||
</select>
|
||||
</div>
|
||||
} else {
|
||||
<select
|
||||
hx-put={ "/api/auth/profile/" + user.ID }
|
||||
hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
|
||||
hx-target={ "#role-result-" + user.ID }
|
||||
hx-swap="innerHTML"
|
||||
name="role"
|
||||
class="text-sm rounded px-2 py-1"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border);"
|
||||
onchange="this.dispatchEvent(new Event('htmx:trigger'))"
|
||||
hx-trigger="change"
|
||||
hx-vals='{"role": this.value}'
|
||||
>
|
||||
<option value="user" selected?={ user.Role == "user" }>User</option>
|
||||
<option value="admin" selected?={ user.Role == "admin" }>Admin</option>
|
||||
</select>
|
||||
<div id={ "role-result-" + user.ID } class="text-xs mt-1"></div>
|
||||
}
|
||||
</td>
|
||||
<!-- Created -->
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm" style="color: var(--text-secondary)">{ user.CreatedAt.Format("2006-01-02") }</div>
|
||||
</td>
|
||||
<!-- Actions -->
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right">
|
||||
<button
|
||||
hx-get={ "/admin/users/" + user.ID + "/profile-modal" }
|
||||
hx-target="#modal-container"
|
||||
hx-swap="innerHTML"
|
||||
class="text-sm px-3 py-1 rounded mr-2"
|
||||
style="background-color: var(--accent); color: white;"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
if user.Role == "admin" && adminCount == 1 {
|
||||
<button
|
||||
disabled
|
||||
class="text-sm px-3 py-1 rounded cursor-not-allowed opacity-50"
|
||||
style="background-color: #dc2626; color: white;"
|
||||
title="Cannot delete the last admin"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
} else {
|
||||
<button
|
||||
hx-delete={ "/api/auth/profile/" + user.ID }
|
||||
hx-headers='{"Authorization": "Bearer " + localStorage.getItem("token")}'
|
||||
hx-target={ "#user-" + user.ID }
|
||||
hx-swap="outerHTML swap:0.5s"
|
||||
hx-confirm="Are you sure you want to delete this user? This action cannot be undone."
|
||||
class="text-sm px-3 py-1 rounded"
|
||||
style="background-color: #dc2626; color: white;"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
|
||||
+177
-150
@@ -3,166 +3,193 @@ package templates
|
||||
templ CustomSectionBuilder(user User, libraries []LibraryData, errorMessage string) {
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Create Custom Section - Bookhoard</title>
|
||||
<script src="/static/htmx.min.js"></script>
|
||||
<script src="/static/toast.js"></script>
|
||||
<script src="/static/api.js"></script>
|
||||
<script src="/static/custom-section-builder.js"></script>
|
||||
<link href="/static/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="theme-{ user.Theme }">
|
||||
@Header(user, "/custom-section")
|
||||
|
||||
<main class="max-w-4xl mx-auto px-4 py-8">
|
||||
<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">Create Custom Section</h1>
|
||||
<p class="mb-6" style="color: var(--text-secondary)">Build a custom dashboard section by defining filter rules or manually selecting books.</p>
|
||||
|
||||
<form id="custom-section-form" class="space-y-6">
|
||||
<!-- Section Details -->
|
||||
<div class="p-4 rounded-lg" style="background-color: var(--bg-secondary);">
|
||||
<h2 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Section Details</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Name *</label>
|
||||
<input type="text" id="section-name" name="name" required
|
||||
class="w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Create Custom Section - Bookhoard</title>
|
||||
<script src="/static/htmx.min.js"></script>
|
||||
<script src="/static/main.js"></script>
|
||||
<link href="/static/style.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body class="theme-{ user.Theme }">
|
||||
@Header(user, "/custom-section")
|
||||
<main class="max-w-4xl mx-auto px-4 py-8">
|
||||
<h1 class="text-3xl font-bold mb-2" style="color: var(--text-primary)">Create Custom Section</h1>
|
||||
<p class="mb-6" style="color: var(--text-secondary)">Build a custom dashboard section by defining filter rules or manually selecting books.</p>
|
||||
<form id="custom-section-form" class="space-y-6">
|
||||
<!-- Section Details -->
|
||||
<div class="p-4 rounded-lg" style="background-color: var(--bg-secondary);">
|
||||
<h2 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Section Details</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="section-name"
|
||||
name="name"
|
||||
required
|
||||
class="w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Icon (emoji)</label>
|
||||
<input
|
||||
type="text"
|
||||
id="section-icon"
|
||||
name="icon"
|
||||
maxlength="4"
|
||||
class="w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
placeholder="📚"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Icon (emoji)</label>
|
||||
<input type="text" id="section-icon" name="icon" maxlength="4"
|
||||
class="w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
placeholder="📚">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Description</label>
|
||||
<textarea id="section-description" name="description" rows="2"
|
||||
class="w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Library *</label>
|
||||
<select id="section-library" name="library_id" required
|
||||
<div class="mt-4">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Description</label>
|
||||
<textarea
|
||||
id="section-description"
|
||||
name="description"
|
||||
rows="2"
|
||||
class="w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
|
||||
<option value="">Select a library...</option>
|
||||
for _, lib := range libraries {
|
||||
<option value={ lib.ID }>{ lib.Name }</option>
|
||||
}
|
||||
</select>
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Library *</label>
|
||||
<select
|
||||
id="section-library"
|
||||
name="library_id"
|
||||
required
|
||||
class="w-full px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
>
|
||||
<option value="">Select a library...</option>
|
||||
for _, lib := range libraries {
|
||||
<option value={ lib.ID }>{ lib.Name }</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Rules -->
|
||||
<div class="p-4 rounded-lg" style="background-color: var(--bg-secondary);">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-semibold" style="color: var(--text-primary)">Filter Rules</h2>
|
||||
<button type="button" id="add-rule-btn"
|
||||
<!-- Filter Rules -->
|
||||
<div class="p-4 rounded-lg" style="background-color: var(--bg-secondary);">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-semibold" style="color: var(--text-primary)">Filter Rules</h2>
|
||||
<button
|
||||
type="button"
|
||||
id="add-rule-btn"
|
||||
class="px-3 py-1 rounded-lg text-sm font-medium"
|
||||
style="background-color: var(--accent);">
|
||||
+ Add Rule
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-sm mb-4" style="color: var(--text-secondary)">
|
||||
Books matching these rules will be automatically added to your section. Use AND for all rules, OR for any rule.
|
||||
</p>
|
||||
|
||||
<div id="rules-container" class="space-y-3">
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<label class="text-sm font-medium" style="color: var(--text-secondary)">Match:</label>
|
||||
<select id="match-type" name="match_type"
|
||||
class="px-3 py-1 rounded border"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);">
|
||||
<option value="all">ALL rules (AND)</option>
|
||||
<option value="any">ANY rule (OR)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manual Book Selection -->
|
||||
<div class="p-4 rounded-lg" style="background-color: var(--bg-secondary);">
|
||||
<h2 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Manual Book Selection</h2>
|
||||
<p class="text-sm mb-4" style="color: var(--text-secondary)">
|
||||
Add specific books to this section. Use the search to find and select multiple books.
|
||||
</p>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Search Books</label>
|
||||
<div class="flex gap-2">
|
||||
<input type="text" id="book-search" name="book_search"
|
||||
class="flex-1 px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
placeholder="Search by title or author..."
|
||||
autocomplete="off">
|
||||
<button type="button" id="search-books-btn"
|
||||
class="px-4 py-2 rounded-lg font-medium"
|
||||
style="background-color: var(--accent);">
|
||||
Search
|
||||
style="background-color: var(--accent);"
|
||||
>
|
||||
+ Add Rule
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="search-results" class="hidden mb-4 p-3 rounded-lg max-h-60 overflow-y-auto"
|
||||
style="background-color: var(--bg-primary);">
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Selected Books</label>
|
||||
<div id="selected-books" class="min-h-[60px] p-3 rounded-lg border-2 border-dashed"
|
||||
style="border-color: var(--border); background-color: var(--bg-primary);">
|
||||
<p class="text-sm text-center" style="color: var(--text-secondary);">No books selected</p>
|
||||
<p class="text-sm mb-4" style="color: var(--text-secondary)">
|
||||
Books matching these rules will be automatically added to your section. Use AND for all rules, OR for any rule.
|
||||
</p>
|
||||
<div id="rules-container" class="space-y-3"></div>
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<label class="text-sm font-medium" style="color: var(--text-secondary)">Match:</label>
|
||||
<select
|
||||
id="match-type"
|
||||
name="match_type"
|
||||
class="px-3 py-1 rounded border"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
>
|
||||
<option value="all">ALL rules (AND)</option>
|
||||
<option value="any">ANY rule (OR)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Preview -->
|
||||
<div class="p-4 rounded-lg" style="background-color: var(--bg-secondary);">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-semibold" style="color: var(--text-primary)">Live Preview</h2>
|
||||
<button type="button" id="preview-btn"
|
||||
<!-- Manual Book Selection -->
|
||||
<div class="p-4 rounded-lg" style="background-color: var(--bg-secondary);">
|
||||
<h2 class="text-xl font-semibold mb-4" style="color: var(--text-primary)">Manual Book Selection</h2>
|
||||
<p class="text-sm mb-4" style="color: var(--text-secondary)">
|
||||
Add specific books to this section. Use the search to find and select multiple books.
|
||||
</p>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Search Books</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
id="book-search"
|
||||
name="book_search"
|
||||
class="flex-1 px-4 py-2 rounded-lg border focus:ring-2 focus:ring-blue-500"
|
||||
style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border);"
|
||||
placeholder="Search by title or author..."
|
||||
autocomplete="off"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
id="search-books-btn"
|
||||
class="px-4 py-2 rounded-lg font-medium"
|
||||
style="background-color: var(--accent);"
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="search-results"
|
||||
class="hidden mb-4 p-3 rounded-lg max-h-60 overflow-y-auto"
|
||||
style="background-color: var(--bg-primary);"
|
||||
></div>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium mb-2" style="color: var(--text-secondary)">Selected Books</label>
|
||||
<div
|
||||
id="selected-books"
|
||||
class="min-h-[60px] p-3 rounded-lg border-2 border-dashed"
|
||||
style="border-color: var(--border); background-color: var(--bg-primary);"
|
||||
>
|
||||
<p class="text-sm text-center" style="color: var(--text-secondary);">No books selected</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Live Preview -->
|
||||
<div class="p-4 rounded-lg" style="background-color: var(--bg-secondary);">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-semibold" style="color: var(--text-primary)">Live Preview</h2>
|
||||
<button
|
||||
type="button"
|
||||
id="preview-btn"
|
||||
class="px-4 py-2 rounded-lg font-medium"
|
||||
style="background-color: var(--accent);">
|
||||
Refresh Preview
|
||||
style="background-color: var(--accent);"
|
||||
>
|
||||
Refresh Preview
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="preview-container"
|
||||
class="p-4 rounded-lg"
|
||||
style="background-color: var(--bg-primary); min-height: 200px;"
|
||||
>
|
||||
<p class="text-center" style="color: var(--text-secondary);">
|
||||
Add filter rules or select books to see a preview of your custom section.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Form Actions -->
|
||||
<div class="flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
id="cancel-btn"
|
||||
class="px-6 py-2 rounded-lg font-medium border hover:opacity-80"
|
||||
style="border-color: var(--border); color: var(--text-primary); background-color: var(--bg-secondary);"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
id="save-section-btn"
|
||||
class="px-6 py-2 rounded-lg font-medium text-white hover:opacity-90"
|
||||
style="background-color: var(--accent);"
|
||||
>
|
||||
Save Section
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="preview-container" class="p-4 rounded-lg"
|
||||
style="background-color: var(--bg-primary); min-height: 200px;">
|
||||
<p class="text-center" style="color: var(--text-secondary);">
|
||||
Add filter rules or select books to see a preview of your custom section.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="flex justify-end gap-3">
|
||||
<button type="button" id="cancel-btn"
|
||||
class="px-6 py-2 rounded-lg font-medium border hover:opacity-80"
|
||||
style="border-color: var(--border); color: var(--text-primary); background-color: var(--bg-secondary);">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" id="save-section-btn"
|
||||
class="px-6 py-2 rounded-lg font-medium text-white hover:opacity-90"
|
||||
style="background-color: var(--accent);">
|
||||
Save Section
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
@ErrorToast(errorMessage)
|
||||
</body>
|
||||
</form>
|
||||
</main>
|
||||
@ErrorToast(errorMessage)
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
|
||||
@@ -13,10 +13,7 @@ templ Dashboard(user User, sections []handlers.SectionData, allSections []handle
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Dashboard - Bookhoard</title>
|
||||
<script src="/static/htmx.min.js"></script>
|
||||
<script src="/static/toast.js"></script>
|
||||
<script src="/static/api.js"></script>
|
||||
<script src="/static/events.js"></script>
|
||||
<script src="/static/dashboard.js"></script>
|
||||
<script src="/static/main.js"></script>
|
||||
<link href="/static/style.css" rel="stylesheet"/>
|
||||
</head>
|
||||
<body class="theme-{ user.Theme }">
|
||||
|
||||
+227
-213
@@ -1,26 +1,22 @@
|
||||
package templates
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
)
|
||||
import "fmt"
|
||||
|
||||
templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>{ doc.Title } - Bookhoard Documentation</title>
|
||||
<link href="/static/style.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/static/highlight-dark.min.css">
|
||||
<script src="/static/highlight.min.js"></script>
|
||||
<script src="/static/lunr.min.js"></script>
|
||||
<script src="/static/lunr-flex.min.js"></script>
|
||||
<link href="/static/style.css" rel="stylesheet"/>
|
||||
<link rel="stylesheet" href="/static/highlight-dark.min.css"/>
|
||||
<script src="/static/main.js"></script>
|
||||
</head>
|
||||
<body class={ "theme-" + user.Theme + " page-docs bg-background-primary text-text-primary font-sans antialiased" }>
|
||||
@Header(user, currentPath)
|
||||
<!-- Mobile Menu Button -->
|
||||
<button
|
||||
<button
|
||||
class="lg:hidden fixed top-4 left-4 z-50 bg-background-secondary border border-border rounded p-2 text-text-primary hover:bg-background-secondary/80"
|
||||
onclick="toggleSidebar()"
|
||||
aria-label="Toggle menu"
|
||||
@@ -29,27 +25,23 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Search Results Overlay -->
|
||||
<div id="search-results" class="hidden fixed inset-0 bg-black/95 z-50 overflow-y-auto p-8 transition-opacity duration-200 ease-in-out"></div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar fixed left-0 top-0 bottom-0 w-72 bg-background-secondary border-r border-border overflow-y-auto mt-16 lg:translate-x-0 transition-transform duration-300 ease-in-out">
|
||||
<!-- Search -->
|
||||
<div class="p-4 border-b border-border">
|
||||
<input
|
||||
<input
|
||||
type="text"
|
||||
class="search-input 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 text-sm"
|
||||
placeholder="Search documentation..."
|
||||
id="docs-search"
|
||||
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Sections -->
|
||||
for _, section := range nav.Sections {
|
||||
<div class="nav-section mb-6">
|
||||
<div
|
||||
<div
|
||||
class="nav-section-title font-semibold text-xs uppercase tracking-wider text-text-secondary px-4 py-3 cursor-pointer select-none flex items-center justify-between"
|
||||
onclick="toggleSection(this)"
|
||||
>
|
||||
@@ -78,7 +70,6 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content lg:ml-72 p-8 max-w-4xl mx-auto">
|
||||
<!-- Breadcrumb -->
|
||||
@@ -92,10 +83,8 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
|
||||
}
|
||||
</nav>
|
||||
}
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="text-4xl font-bold mb-8 text-text-primary">{ doc.Title }</h1>
|
||||
|
||||
<!-- Table of Contents -->
|
||||
if len(doc.TOC) > 0 {
|
||||
<details class="toc bg-background-secondary p-4 rounded-lg mb-8 border border-border">
|
||||
@@ -104,8 +93,8 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
|
||||
<span class="ml-2 text-text-secondary text-xs">▼</span>
|
||||
</summary>
|
||||
for _, item := range doc.TOC {
|
||||
<a
|
||||
href={ "#" + item.Anchor }
|
||||
<a
|
||||
href={ "#" + item.Anchor }
|
||||
class="toc-item block py-1 text-text-secondary hover:text-accent text-sm no-underline"
|
||||
style={ "margin-left: " + fmt.Sprintf("%drem", item.Level) }
|
||||
>
|
||||
@@ -114,155 +103,161 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
|
||||
}
|
||||
</details>
|
||||
}
|
||||
|
||||
<!-- Content -->
|
||||
<div class="prose prose-invert max-w-none">
|
||||
@UnsafeHTML(doc.Content).ToComponent()
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// Toggle sidebar section
|
||||
function toggleSection(el) {
|
||||
const items = el.nextElementSibling;
|
||||
const arrow = el.querySelector('.section-arrow');
|
||||
const isCollapsed = items.getAttribute('data-collapsed') === 'true';
|
||||
const arrow = el.querySelector(".section-arrow");
|
||||
const isCollapsed = items.getAttribute("data-collapsed") === "true";
|
||||
|
||||
if (isCollapsed) {
|
||||
items.classList.remove('hidden');
|
||||
items.setAttribute('data-collapsed', 'false');
|
||||
arrow.style.transform = 'rotate(0deg)';
|
||||
items.classList.remove("hidden");
|
||||
items.setAttribute("data-collapsed", "false");
|
||||
arrow.style.transform = "rotate(0deg)";
|
||||
} else {
|
||||
items.classList.add('hidden');
|
||||
items.setAttribute('data-collapsed', 'true');
|
||||
arrow.style.transform = 'rotate(-90deg)';
|
||||
items.classList.add("hidden");
|
||||
items.setAttribute("data-collapsed", "true");
|
||||
arrow.style.transform = "rotate(-90deg)";
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle sidebar on mobile
|
||||
function toggleSidebar() {
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
sidebar.classList.toggle('open');
|
||||
const sidebar = document.querySelector(".sidebar");
|
||||
sidebar.classList.toggle("open");
|
||||
}
|
||||
|
||||
// Highlight current page in nav
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const currentPath = window.location.pathname;
|
||||
document.querySelectorAll('.nav-item').forEach(item => {
|
||||
if (item.getAttribute('href') === currentPath) {
|
||||
item.classList.add('text-accent', 'bg-accent/10', 'border-r-2', 'border-accent');
|
||||
document.querySelectorAll(".nav-item").forEach((item) => {
|
||||
if (item.getAttribute("href") === currentPath) {
|
||||
item.classList.add(
|
||||
"text-accent",
|
||||
"bg-accent/10",
|
||||
"border-r-2",
|
||||
"border-accent",
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize syntax highlighting
|
||||
if (typeof hljs !== 'undefined') {
|
||||
if (typeof hljs !== "undefined") {
|
||||
hljs.highlightAll();
|
||||
|
||||
// Add copy buttons to all code blocks
|
||||
document.querySelectorAll('pre code').forEach((block) => {
|
||||
const pre = block.parentElement;
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'relative group';
|
||||
pre.parentNode.insertBefore(wrapper, pre);
|
||||
wrapper.appendChild(pre);
|
||||
|
||||
const button = document.createElement('button');
|
||||
button.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';
|
||||
button.textContent = 'Copy';
|
||||
button.onclick = async () => {
|
||||
await navigator.clipboard.writeText(block.textContent);
|
||||
button.textContent = 'Copied!';
|
||||
setTimeout(() => {
|
||||
button.textContent = 'Copy';
|
||||
}, 2000);
|
||||
};
|
||||
wrapper.appendChild(button);
|
||||
});
|
||||
|
||||
// Add copy buttons to all code blocks
|
||||
document.querySelectorAll("pre code").forEach((block) => {
|
||||
const pre = block.parentElement;
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.className = "relative group";
|
||||
pre.parentNode.insertBefore(wrapper, pre);
|
||||
wrapper.appendChild(pre);
|
||||
|
||||
const button = document.createElement("button");
|
||||
button.className =
|
||||
"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent";
|
||||
button.textContent = "Copy";
|
||||
button.onclick = async () => {
|
||||
await navigator.clipboard.writeText(block.textContent);
|
||||
button.textContent = "Copied!";
|
||||
setTimeout(() => {
|
||||
button.textContent = "Copy";
|
||||
}, 2000);
|
||||
};
|
||||
wrapper.appendChild(button);
|
||||
});
|
||||
}
|
||||
|
||||
// Add copy buttons to all code blocks
|
||||
document.querySelectorAll('pre code').forEach((block) => {
|
||||
document.querySelectorAll("pre code").forEach((block) => {
|
||||
const pre = block.parentElement;
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'relative group';
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.className = "relative group";
|
||||
pre.parentNode.insertBefore(wrapper, pre);
|
||||
wrapper.appendChild(pre);
|
||||
|
||||
const button = document.createElement('button');
|
||||
button.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';
|
||||
button.textContent = 'Copy';
|
||||
|
||||
const button = document.createElement("button");
|
||||
button.className =
|
||||
"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent";
|
||||
button.textContent = "Copy";
|
||||
button.onclick = async () => {
|
||||
await navigator.clipboard.writeText(block.textContent);
|
||||
button.textContent = 'Copied!';
|
||||
button.textContent = "Copied!";
|
||||
setTimeout(() => {
|
||||
button.textContent = 'Copy';
|
||||
button.textContent = "Copy";
|
||||
}, 2000);
|
||||
};
|
||||
wrapper.appendChild(button);
|
||||
});
|
||||
});
|
||||
|
||||
// Add copy buttons to all code blocks
|
||||
document.querySelectorAll('pre code').forEach((block) => {
|
||||
const pre = block.parentElement;
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'relative group';
|
||||
pre.parentNode.insertBefore(wrapper, pre);
|
||||
wrapper.appendChild(pre);
|
||||
|
||||
const button = document.createElement('button');
|
||||
button.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';
|
||||
button.textContent = 'Copy';
|
||||
button.onclick = async () => {
|
||||
await navigator.clipboard.writeText(block.textContent);
|
||||
button.textContent = 'Copied!';
|
||||
setTimeout(() => {
|
||||
button.textContent = 'Copy';
|
||||
}, 2000);
|
||||
};
|
||||
wrapper.appendChild(button);
|
||||
});
|
||||
// Add copy buttons to all code blocks
|
||||
document.querySelectorAll("pre code").forEach((block) => {
|
||||
const pre = block.parentElement;
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.className = "relative group";
|
||||
pre.parentNode.insertBefore(wrapper, pre);
|
||||
wrapper.appendChild(pre);
|
||||
|
||||
const button = document.createElement("button");
|
||||
button.className =
|
||||
"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent";
|
||||
button.textContent = "Copy";
|
||||
button.onclick = async () => {
|
||||
await navigator.clipboard.writeText(block.textContent);
|
||||
button.textContent = "Copied!";
|
||||
setTimeout(() => {
|
||||
button.textContent = "Copy";
|
||||
}, 2000);
|
||||
};
|
||||
wrapper.appendChild(button);
|
||||
});
|
||||
|
||||
// Search state
|
||||
let idx;
|
||||
let searchDocs = [];
|
||||
|
||||
// Load index on page load
|
||||
fetch('/docs/search-index.json')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
idx = lunr(function() {
|
||||
fetch("/docs/search-index.json")
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
idx = lunr(function () {
|
||||
this.use(lunr.flex);
|
||||
this.ref('id');
|
||||
this.field('title', {boost: 10});
|
||||
this.field('content', {boost: 1});
|
||||
data.forEach(doc => this.add(doc));
|
||||
this.ref("id");
|
||||
this.field("title", { boost: 10 });
|
||||
this.field("content", { boost: 1 });
|
||||
data.forEach((doc) => this.add(doc));
|
||||
});
|
||||
searchDocs = data;
|
||||
console.log('Search index loaded:', data.length, 'documents');
|
||||
console.log("Search index loaded:", data.length, "documents");
|
||||
})
|
||||
.catch(err => console.error('Failed to load search index:', err));
|
||||
.catch((err) => console.error("Failed to load search index:", err));
|
||||
|
||||
// Search input with debounce
|
||||
const searchInput = document.getElementById('docs-search');
|
||||
const searchResultsDiv = document.getElementById('search-results');
|
||||
const searchInput = document.getElementById("docs-search");
|
||||
const searchResultsDiv = document.getElementById("search-results");
|
||||
|
||||
let debounceTimer;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
searchInput.addEventListener("input", (e) => {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(() => {
|
||||
const query = e.target.value.trim();
|
||||
|
||||
if (query.length < 2) {
|
||||
searchResultsDiv.classList.add('hidden');
|
||||
searchResultsDiv.classList.add("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
// Search with fuzzy matching
|
||||
const results = idx.search(query, {
|
||||
fields: {title: {boost: 10}, content: 1},
|
||||
expand: true
|
||||
fields: { title: { boost: 10 }, content: 1 },
|
||||
expand: true,
|
||||
});
|
||||
|
||||
// Render results
|
||||
@@ -273,26 +268,29 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
|
||||
// Render search results
|
||||
function renderSearchResults(results, query) {
|
||||
if (results.length === 0) {
|
||||
searchResultsDiv.innerHTML = '<div class="text-center py-8 text-text-secondary">No results found</div>';
|
||||
searchResultsDiv.classList.remove('hidden');
|
||||
searchResultsDiv.innerHTML =
|
||||
'<div class="text-center py-8 text-text-secondary">No results found</div>';
|
||||
searchResultsDiv.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
searchResultsDiv.innerHTML = results.map(r => {
|
||||
const doc = searchDocs.find(d => d.id === r.ref);
|
||||
if (!doc) return '';
|
||||
searchResultsDiv.innerHTML = results
|
||||
.map((r) => {
|
||||
const doc = searchDocs.find((d) => d.id === r.ref);
|
||||
if (!doc) return "";
|
||||
|
||||
const snippet = getSnippet(doc.content, query);
|
||||
const snippet = getSnippet(doc.content, query);
|
||||
|
||||
return `
|
||||
return `
|
||||
<a href="${doc.url}" class="block p-4 border-b border-border hover:bg-background-secondary text-text-primary no-underline">
|
||||
<div class="font-semibold mb-2">${doc.title}</div>
|
||||
<div class="text-sm text-text-secondary">${snippet}...</div>
|
||||
</a>
|
||||
`;
|
||||
}).join('');
|
||||
})
|
||||
.join("");
|
||||
|
||||
searchResultsDiv.classList.remove('hidden');
|
||||
searchResultsDiv.classList.remove("hidden");
|
||||
}
|
||||
|
||||
function getSnippet(content, query) {
|
||||
@@ -304,23 +302,26 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
|
||||
if (idx !== -1) {
|
||||
const start = Math.max(0, idx - 50);
|
||||
const end = Math.min(content.length, idx + 100);
|
||||
return '...' + content.substring(start, end) + '...';
|
||||
return "..." + content.substring(start, end) + "...";
|
||||
}
|
||||
}
|
||||
return content.substring(0, 150) + '...';
|
||||
return content.substring(0, 150) + "...";
|
||||
}
|
||||
|
||||
// Close search results when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!searchResultsDiv.contains(e.target) && e.target !== searchInput) {
|
||||
searchResultsDiv.classList.add('hidden');
|
||||
document.addEventListener("click", (e) => {
|
||||
if (
|
||||
!searchResultsDiv.contains(e.target) &&
|
||||
e.target !== searchInput
|
||||
) {
|
||||
searchResultsDiv.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
// Close search on Escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
searchResultsDiv.classList.add('hidden');
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
searchResultsDiv.classList.add("hidden");
|
||||
searchInput.blur();
|
||||
}
|
||||
});
|
||||
@@ -328,129 +329,136 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
|
||||
<script>
|
||||
// Toggle sidebar on mobile
|
||||
function toggleSidebar() {
|
||||
const sidebar = document.querySelector('.sidebar');
|
||||
sidebar.classList.toggle('open');
|
||||
const sidebar = document.querySelector(".sidebar");
|
||||
sidebar.classList.toggle("open");
|
||||
}
|
||||
|
||||
|
||||
// Highlight current page in nav
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const currentPath = window.location.pathname;
|
||||
document.querySelectorAll('.nav-item').forEach(item => {
|
||||
if (item.getAttribute('href') === currentPath) {
|
||||
item.classList.add('text-accent', 'bg-accent/10', 'border-r-2', 'border-accent');
|
||||
document.querySelectorAll(".nav-item").forEach((item) => {
|
||||
if (item.getAttribute("href") === currentPath) {
|
||||
item.classList.add(
|
||||
"text-accent",
|
||||
"bg-accent/10",
|
||||
"border-r-2",
|
||||
"border-accent",
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize syntax highlighting
|
||||
if (typeof hljs !== 'undefined') {
|
||||
if (typeof hljs !== "undefined") {
|
||||
hljs.highlightAll();
|
||||
|
||||
// Add copy buttons to all code blocks
|
||||
document.querySelectorAll('pre code').forEach((block) => {
|
||||
const pre = block.parentElement;
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'relative group';
|
||||
pre.parentNode.insertBefore(wrapper, pre);
|
||||
wrapper.appendChild(pre);
|
||||
|
||||
const button = document.createElement('button');
|
||||
button.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';
|
||||
button.textContent = 'Copy';
|
||||
button.onclick = async () => {
|
||||
await navigator.clipboard.writeText(block.textContent);
|
||||
button.textContent = 'Copied!';
|
||||
setTimeout(() => {
|
||||
button.textContent = 'Copy';
|
||||
}, 2000);
|
||||
};
|
||||
wrapper.appendChild(button);
|
||||
});
|
||||
// Add copy buttons to all code blocks
|
||||
document.querySelectorAll("pre code").forEach((block) => {
|
||||
const pre = block.parentElement;
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.className = "relative group";
|
||||
pre.parentNode.insertBefore(wrapper, pre);
|
||||
wrapper.appendChild(pre);
|
||||
|
||||
const button = document.createElement("button");
|
||||
button.className =
|
||||
"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent";
|
||||
button.textContent = "Copy";
|
||||
button.onclick = async () => {
|
||||
await navigator.clipboard.writeText(block.textContent);
|
||||
button.textContent = "Copied!";
|
||||
setTimeout(() => {
|
||||
button.textContent = "Copy";
|
||||
}, 2000);
|
||||
};
|
||||
wrapper.appendChild(button);
|
||||
});
|
||||
}
|
||||
|
||||
// Add copy buttons to all code blocks
|
||||
document.querySelectorAll('pre code').forEach((block) => {
|
||||
document.querySelectorAll("pre code").forEach((block) => {
|
||||
const pre = block.parentElement;
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'relative group';
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.className = "relative group";
|
||||
pre.parentNode.insertBefore(wrapper, pre);
|
||||
wrapper.appendChild(pre);
|
||||
|
||||
const button = document.createElement('button');
|
||||
button.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';
|
||||
button.textContent = 'Copy';
|
||||
|
||||
const button = document.createElement("button");
|
||||
button.className =
|
||||
"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent";
|
||||
button.textContent = "Copy";
|
||||
button.onclick = async () => {
|
||||
await navigator.clipboard.writeText(block.textContent);
|
||||
button.textContent = 'Copied!';
|
||||
button.textContent = "Copied!";
|
||||
setTimeout(() => {
|
||||
button.textContent = 'Copy';
|
||||
button.textContent = "Copy";
|
||||
}, 2000);
|
||||
};
|
||||
wrapper.appendChild(button);
|
||||
});
|
||||
});
|
||||
|
||||
// Add copy buttons to all code blocks
|
||||
document.querySelectorAll('pre code').forEach((block) => {
|
||||
const pre = block.parentElement;
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'relative group';
|
||||
pre.parentNode.insertBefore(wrapper, pre);
|
||||
wrapper.appendChild(pre);
|
||||
|
||||
const button = document.createElement('button');
|
||||
button.className = 'absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent';
|
||||
button.textContent = 'Copy';
|
||||
button.onclick = async () => {
|
||||
await navigator.clipboard.writeText(block.textContent);
|
||||
button.textContent = 'Copied!';
|
||||
setTimeout(() => {
|
||||
button.textContent = 'Copy';
|
||||
}, 2000);
|
||||
};
|
||||
wrapper.appendChild(button);
|
||||
});
|
||||
// Add copy buttons to all code blocks
|
||||
document.querySelectorAll("pre code").forEach((block) => {
|
||||
const pre = block.parentElement;
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.className = "relative group";
|
||||
pre.parentNode.insertBefore(wrapper, pre);
|
||||
wrapper.appendChild(pre);
|
||||
|
||||
const button = document.createElement("button");
|
||||
button.className =
|
||||
"absolute top-2 right-2 bg-background-secondary text-text-secondary px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity border border-border hover:text-accent";
|
||||
button.textContent = "Copy";
|
||||
button.onclick = async () => {
|
||||
await navigator.clipboard.writeText(block.textContent);
|
||||
button.textContent = "Copied!";
|
||||
setTimeout(() => {
|
||||
button.textContent = "Copy";
|
||||
}, 2000);
|
||||
};
|
||||
wrapper.appendChild(button);
|
||||
});
|
||||
|
||||
// Search state
|
||||
let idx;
|
||||
let searchDocs = [];
|
||||
|
||||
// Load index on page load
|
||||
fetch('/docs/search-index.json')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
idx = lunr(function() {
|
||||
fetch("/docs/search-index.json")
|
||||
.then((r) => r.json())
|
||||
.then((data) => {
|
||||
idx = lunr(function () {
|
||||
this.use(lunr.flex);
|
||||
this.ref('id');
|
||||
this.field('title', {boost: 10});
|
||||
this.field('content', {boost: 1});
|
||||
data.forEach(doc => this.add(doc));
|
||||
this.ref("id");
|
||||
this.field("title", { boost: 10 });
|
||||
this.field("content", { boost: 1 });
|
||||
data.forEach((doc) => this.add(doc));
|
||||
});
|
||||
searchDocs = data;
|
||||
console.log('Search index loaded:', data.length, 'documents');
|
||||
console.log("Search index loaded:", data.length, "documents");
|
||||
})
|
||||
.catch(err => console.error('Failed to load search index:', err));
|
||||
.catch((err) => console.error("Failed to load search index:", err));
|
||||
|
||||
// Search input with debounce
|
||||
const searchInput = document.getElementById('docs-search');
|
||||
const searchResultsDiv = document.getElementById('search-results');
|
||||
const searchInput = document.getElementById("docs-search");
|
||||
const searchResultsDiv = document.getElementById("search-results");
|
||||
|
||||
let debounceTimer;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
searchInput.addEventListener("input", (e) => {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(() => {
|
||||
const query = e.target.value.trim();
|
||||
|
||||
if (query.length < 2) {
|
||||
searchResultsDiv.classList.add('hidden');
|
||||
searchResultsDiv.classList.add("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
// Search with fuzzy matching
|
||||
const results = idx.search(query, {
|
||||
fields: {title: {boost: 10}, content: 1},
|
||||
expand: true
|
||||
fields: { title: { boost: 10 }, content: 1 },
|
||||
expand: true,
|
||||
});
|
||||
|
||||
// Render results
|
||||
@@ -461,26 +469,29 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
|
||||
// Render search results
|
||||
function renderSearchResults(results, query) {
|
||||
if (results.length === 0) {
|
||||
searchResultsDiv.innerHTML = '<div class="text-center py-8 text-text-secondary">No results found</div>';
|
||||
searchResultsDiv.classList.remove('hidden');
|
||||
searchResultsDiv.innerHTML =
|
||||
'<div class="text-center py-8 text-text-secondary">No results found</div>';
|
||||
searchResultsDiv.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
searchResultsDiv.innerHTML = results.map(r => {
|
||||
const doc = searchDocs.find(d => d.id === r.ref);
|
||||
if (!doc) return '';
|
||||
searchResultsDiv.innerHTML = results
|
||||
.map((r) => {
|
||||
const doc = searchDocs.find((d) => d.id === r.ref);
|
||||
if (!doc) return "";
|
||||
|
||||
const snippet = getSnippet(doc.content, query);
|
||||
const snippet = getSnippet(doc.content, query);
|
||||
|
||||
return `
|
||||
return `
|
||||
<a href="${doc.url}" class="block p-4 border-b border-border hover:bg-background-secondary text-text-primary no-underline">
|
||||
<div class="font-semibold mb-2">${doc.title}</div>
|
||||
<div class="text-sm text-text-secondary">${snippet}...</div>
|
||||
</a>
|
||||
`;
|
||||
}).join('');
|
||||
})
|
||||
.join("");
|
||||
|
||||
searchResultsDiv.classList.remove('hidden');
|
||||
searchResultsDiv.classList.remove("hidden");
|
||||
}
|
||||
|
||||
function getSnippet(content, query) {
|
||||
@@ -492,23 +503,26 @@ templ DocsLayout(nav Navigation, doc Document, user User, currentPath string) {
|
||||
if (idx !== -1) {
|
||||
const start = Math.max(0, idx - 50);
|
||||
const end = Math.min(content.length, idx + 100);
|
||||
return '...' + content.substring(start, end) + '...';
|
||||
return "..." + content.substring(start, end) + "...";
|
||||
}
|
||||
}
|
||||
return content.substring(0, 150) + '...';
|
||||
return content.substring(0, 150) + "...";
|
||||
}
|
||||
|
||||
// Close search results when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!searchResultsDiv.contains(e.target) && e.target !== searchInput) {
|
||||
searchResultsDiv.classList.add('hidden');
|
||||
document.addEventListener("click", (e) => {
|
||||
if (
|
||||
!searchResultsDiv.contains(e.target) &&
|
||||
e.target !== searchInput
|
||||
) {
|
||||
searchResultsDiv.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
// Close search on Escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
searchResultsDiv.classList.add('hidden');
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
searchResultsDiv.classList.add("hidden");
|
||||
searchInput.blur();
|
||||
}
|
||||
});
|
||||
|
||||
+15
-3
@@ -1,3 +1,6 @@
|
||||
import { Alpine } from "./alpine";
|
||||
import { showToast } from "./toast";
|
||||
|
||||
function getAuthHeader(): string {
|
||||
const token = localStorage.getItem("token");
|
||||
return token ? `Bearer ${token}` : "";
|
||||
@@ -82,9 +85,7 @@ function handleError(error: unknown, context: string): void {
|
||||
console.error(`${context}:`, error);
|
||||
const message =
|
||||
error instanceof Error ? error.message : "An unexpected error occurred";
|
||||
if ((window as any).showToast?.error) {
|
||||
(window as any).showToast.error(message);
|
||||
}
|
||||
showToast(message, "error");
|
||||
}
|
||||
|
||||
export {
|
||||
@@ -97,3 +98,14 @@ export {
|
||||
handleVoidResponse,
|
||||
handleError,
|
||||
};
|
||||
|
||||
Alpine.global("api", {
|
||||
get: apiGet,
|
||||
post: apiPost,
|
||||
put: apiPut,
|
||||
delete: apiDelete,
|
||||
patch: apiPatch,
|
||||
handleResponse: handleResponse,
|
||||
handleVoidResponse: handleVoidResponse,
|
||||
handleError: handleError,
|
||||
});
|
||||
|
||||
+13
-1
@@ -1,3 +1,5 @@
|
||||
import { Alpine } from "./alpine";
|
||||
|
||||
function toggleSidebar(): void {
|
||||
const sidebar = document.getElementById("docs-sidebar");
|
||||
const overlay = document.getElementById("docs-overlay");
|
||||
@@ -91,4 +93,14 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeDocsSearch();
|
||||
});
|
||||
|
||||
(window as any).toggleSidebar = toggleSidebar;
|
||||
Alpine.global("docs", {
|
||||
toggleSidebar,
|
||||
initializeSearch: initializeDocsSearch,
|
||||
});
|
||||
|
||||
export { toggleSidebar, initializeDocsSearch };
|
||||
|
||||
Alpine.global("docs", {
|
||||
toggleSidebar,
|
||||
initializeSearch: initializeDocsSearch,
|
||||
});
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
// Password validation for registration form
|
||||
// Procedural style - no OOP, passive event listeners for password manager compatibility
|
||||
|
||||
import { Alpine } from "./alpine";
|
||||
|
||||
// Validation check functions
|
||||
function hasMinimumLength(password: string): boolean {
|
||||
return password.length >= 8;
|
||||
@@ -185,4 +187,8 @@ function initPasswordValidation(): void {
|
||||
}
|
||||
|
||||
// Export for use in template
|
||||
(window as any).initPasswordValidation = initPasswordValidation;
|
||||
export { initPasswordValidation };
|
||||
|
||||
Alpine.global("validation", {
|
||||
initPasswordValidation,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user