docs: Update manga EPUB implementation guide

- Add markdownlint disable directives for linting - Update SQL examples for consistency - Update templ examples for panel detection integration - Update TypeScript examples for reader shell configuration
2026-04-12 20:44:02 -04:00
parent 03f7c15445
commit a13d2cc3bb
1 changed files with 67 additions and 64 deletions
@@ -1,3 +1,6 @@
+<!-- markdownlint-disable MD010 -->
+<!-- markdownlint-disable MD013 -->
+
 # Manga EPUB and Panel Detection Implementation

 **Status:** Ready to implement  
@@ -841,58 +844,58 @@ import "foliate-js/view.js";
 import { Alpine } from "../alpine";

 document.addEventListener("alpine:init", () => {
-	Alpine.data("readerShell", () => ({
-		enablePanelDetection: false,
-		libraryType: '',
-		formatGroup: '',
-		mangaType: '',
-		readingDirection: '',
-		panelDetector: null,
+  Alpine.data("readerShell", () => ({
+    enablePanelDetection: false,
+    libraryType: "",
+    formatGroup: "",
+    mangaType: "",
+    readingDirection: "",
+    panelDetector: null,

-		initReader(config: any) {
-			this.enablePanelDetection = config.enablePanelDetection;
-			this.libraryType = config.libraryType;
-			this.formatGroup = config.formatGroup;
-			this.mangaType = config.mangaType;
-			this.readingDirection = config.readingDirection;
+    initReader(config: any) {
+      this.enablePanelDetection = config.enablePanelDetection;
+      this.libraryType = config.libraryType;
+      this.formatGroup = config.formatGroup;
+      this.mangaType = config.mangaType;
+      this.readingDirection = config.readingDirection;

-			console.log("Reader initialized with:", {
-				panelDetection: this.enablePanelDetection,
-				library: this.libraryType,
-				format: this.formatGroup
-			});
+      console.log("Reader initialized with:", {
+        panelDetection: this.enablePanelDetection,
+        library: this.libraryType,
+        format: this.formatGroup,
+      });

-			// Only load panel detection if enabled
-			if (this.enablePanelDetection) {
-				this.loadPanelDetection();
-			}
-		},
+      // Only load panel detection if enabled
+      if (this.enablePanelDetection) {
+        this.loadPanelDetection();
+      }
+    },

-		async loadPanelDetection() {
-			try {
-				// Dynamic import to only load when needed
-				const { PanelDetector } = await import('foliate-js/panel-detection.js');
-				this.panelDetector = new PanelDetector();
-				console.log("Panel detection loaded successfully");
-			} catch (error) {
-				console.error("Failed to load panel detection:", error);
-			}
-		},
+    async loadPanelDetection() {
+      try {
+        // Dynamic import to only load when needed
+        const { PanelDetector } = await import("foliate-js/panel-detection.js");
+        this.panelDetector = new PanelDetector();
+        console.log("Panel detection loaded successfully");
+      } catch (error) {
+        console.error("Failed to load panel detection:", error);
+      }
+    },

-		nextPage() {
-			const view = document.querySelector("#reader-view");
-			// @ts-ignore - foliate custom element
-			view?.next?.();
-		},
+    nextPage() {
+      const view = document.querySelector("#reader-view");
+      // @ts-ignore - foliate custom element
+      view?.next?.();
+    },

-		previousPage() {
-			const view = document.querySelector("#reader-view");
-			// @ts-ignore - foliate custom element
-			view?.prev?.();
-		}
-	}));
+    previousPage() {
+      const view = document.querySelector("#reader-view");
+      // @ts-ignore - foliate custom element
+      view?.prev?.();
+    },
+  }));

-	Alpine.start();
+  Alpine.start();
 });
 ```