Add font loader and update reader template for font loading

- Add font-loader.ts for managing 8 reading fonts with preload optimization
- Include fonts: Literata, Crimson Text, Source Serif 4, EB Garamond,
  Libertinus Serif, Noto Serif, Charis SIL, IBM Plex Serif
- Update reader.templ to include reader-fonts.css stylesheet
This commit is contained in:
2026-04-04 01:00:23 -04:00
parent d52937e578
commit 2eddc1b92b
2 changed files with 86 additions and 1 deletions
+13 -1
View File
@@ -10,6 +10,7 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{ metadata.Title } - Bookhoard Reader</title>
<link rel="manifest" href="/static/manifest.json"/>
<link href="/static/reader-fonts.css" rel="stylesheet"/>
<script src="/static/htmx.min.js"></script>
<link href="/static/style.css" rel="stylesheet"/>
</head>
@@ -56,7 +57,7 @@ templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
<!-- Top bar -->
<div class="fixed top-0 left-0 right-0 bg-opacity-95 backdrop-blur border-b z-40" style="background-color: var(--bg-primary);">
<div class="flex items-center justify-between px-4 py-3">
<a href="/media-items/{ metadata.media_item_id }" class="text-lg hover:underline">
<a href="/media-items/{ metadata.MediaItemID }" class="text-lg hover:underline">
Back
</a>
<h1 class="text-lg font-semibold">{ metadata.Title }</h1>
@@ -79,6 +80,17 @@ templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
<button data-action="toggle-toc" title="Table of Contents">📖</button>
<button data-action="add-bookmark" title="Bookmark">🏷️</button>
<button data-action="add-note" title="Note">📝</button>
<!-- Panel editor - shown for comics/manga -->
<button
x-data="panelEditor"
x-show="isComicOrManga"
@click="openPanelEditor(readerShell.currentPage)"
data-action="edit-panels"
title="Edit Panels"
class="p-2 rounded-lg hover:bg-gray-700"
>
🎨
</button>
</div>
</div>
</div>