Bookhoard/bookhoard
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

perf(templates): add defer attribute to main.js script tags across all pages

Browse Source 
- 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
This commit is contained in:
john-okeefe
2026-03-12 15:44:15 -04:00
parent 48eaa2d286
commit 533f8747e3
7 changed files with 26 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/header.templ
+14 -14
View File
@@ -1,7 +1,7 @@
package templates
templ Header(user User, currentPath string) {
<nav class="border-b header-nav" style="border-color: var(--border); background-color: var(--bg-secondary);">
<nav x-data="theme" class="border-b header-nav" style="border-color: var(--border); background-color: var(--bg-secondary);">
<div x-data="{}" x-init="console.log('Alpine is working!', $el)"></div>
<div class="w-full px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
@@ -70,7 +70,7 @@ templ Header(user User, currentPath string) {
<h3 class="text-sm font-semibold mb-3" style="color: var(--text-primary)">Select Theme</h3>
<div class="space-y-2">
<button
@click="$store.theme.changeTheme('tokyo-night'); themeDropdownOpen = false"
@click="changeTheme('tokyo-night'); themeDropdownOpen = false"
class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary); background-color: var(--bg-primary);"
>
@@ -78,7 +78,7 @@ templ Header(user User, currentPath string) {
Tokyo Night
</button>
<button
@click="$store.theme.changeTheme('dracula'); themeDropdownOpen = false"
@click="changeTheme('dracula'); themeDropdownOpen = false"
class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary); background-color: var(--bg-primary);"
>
@@ -86,7 +86,7 @@ templ Header(user User, currentPath string) {
Dracula
</button>
<button
@click="$store.theme.changeTheme('nord'); themeDropdownOpen = false"
@click="changeTheme('nord'); themeDropdownOpen = false"
class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary); background-color: var(--bg-primary);"
>
@@ -94,7 +94,7 @@ templ Header(user User, currentPath string) {
Nord
</button>
<button
@click="$store.theme.changeTheme('solarized-dark'); themeDropdownOpen = false"
@click="changeTheme('solarized-dark'); themeDropdownOpen = false"
class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary); background-color: var(--bg-primary);"
>
@@ -102,7 +102,7 @@ templ Header(user User, currentPath string) {
Solarized Dark
</button>
<button
@click="$store.theme.changeTheme('monokai'); themeDropdownOpen = false"
@click="changeTheme('monokai'); themeDropdownOpen = false"
class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary); background-color: var(--bg-primary);"
>
@@ -110,7 +110,7 @@ templ Header(user User, currentPath string) {
Monokai
</button>
<button
@click="$store.theme.changeTheme('one-dark-pro'); themeDropdownOpen = false"
@click="changeTheme('one-dark-pro'); themeDropdownOpen = false"
class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary); background-color: var(--bg-primary);"
>
@@ -118,7 +118,7 @@ templ Header(user User, currentPath string) {
One Dark Pro
</button>
<button
@click="$store.theme.changeTheme('material-dark'); themeDropdownOpen = false"
@click="changeTheme('material-dark'); themeDropdownOpen = false"
class="w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary); background-color: var(--bg-primary);"
>
@@ -128,7 +128,7 @@ templ Header(user User, currentPath string) {
<div class="border-t pt-2 mt-2" style="border-color: var(--border);">
<p class="text-xs mb-2" style="color: var(--text-secondary)">Bookshelf Background</p>
<button
@click="$store.theme.changeWoodPaneling('none'); themeDropdownOpen = false"
@click="changeWoodPaneling('none'); themeDropdownOpen = false"
class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary);"
data-wood="none"
@@ -136,7 +136,7 @@ templ Header(user User, currentPath string) {
None
</button>
<button
@click="$store.theme.changeWoodPaneling('wood-light'); themeDropdownOpen = false"
@click="changeWoodPaneling('wood-light'); themeDropdownOpen = false"
class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary);"
data-wood="wood-light"
@@ -148,7 +148,7 @@ templ Header(user User, currentPath string) {
Wood Light
</button>
<button
@click="$store.theme.changeWoodPaneling('wood-dark'); themeDropdownOpen = false"
@click="changeWoodPaneling('wood-dark'); themeDropdownOpen = false"
class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary);"
data-wood="wood-dark"
@@ -160,7 +160,7 @@ templ Header(user User, currentPath string) {
Wood Dark
</button>
<button
@click="$store.theme.changeWoodPaneling('wood-mahogany'); themeDropdownOpen = false"
@click="changeWoodPaneling('wood-mahogany'); themeDropdownOpen = false"
class="wood-paneling-btn w-full text-left px-3 py-2 rounded hover:opacity-80 transition-opacity"
style="color: var(--text-primary);"
data-wood="wood-mahogany"
@@ -208,7 +208,7 @@ templ Header(user User, currentPath string) {
}
<div class="border-t my-1" style="border-color: var(--border);"></div>
<button
@click="$store.header.logout(); userMenuOpen = false"
@click="logout(); userMenuOpen = false"
class="block w-full text-left px-4 py-2 text-sm hover:opacity-80"
style="color: var(--text-primary); background-color: var(--bg-secondary);"
>
@@ -261,5 +261,5 @@ templ Header(user User, currentPath string) {
</div>
</div>
</nav>
<script src="/static/main.js" defer defer></script>
<script src="/static/main.js" defer></script>
}