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

MANGA_EPUB_IMPLEMENTATION.md

@@ -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", () => ({
+  Alpine.data("readerShell", () => ({
-		enablePanelDetection: false,
+    enablePanelDetection: false,
-		libraryType: '',
+    libraryType: "",
-		formatGroup: '',
+    formatGroup: "",
-		mangaType: '',
+    mangaType: "",
-		readingDirection: '',
+    readingDirection: "",
-		panelDetector: null,
+    panelDetector: null,
 
-		initReader(config: any) {
+    initReader(config: any) {
-			this.enablePanelDetection = config.enablePanelDetection;
+      this.enablePanelDetection = config.enablePanelDetection;
-			this.libraryType = config.libraryType;
+      this.libraryType = config.libraryType;
-			this.formatGroup = config.formatGroup;
+      this.formatGroup = config.formatGroup;
-			this.mangaType = config.mangaType;
+      this.mangaType = config.mangaType;
-			this.readingDirection = config.readingDirection;
+      this.readingDirection = config.readingDirection;
 
-			console.log("Reader initialized with:", {
+      console.log("Reader initialized with:", {
-				panelDetection: this.enablePanelDetection,
+        panelDetection: this.enablePanelDetection,
-				library: this.libraryType,
+        library: this.libraryType,
-				format: this.formatGroup
+        format: this.formatGroup,
-			});
+      });
 
-			// Only load panel detection if enabled
+      // Only load panel detection if enabled
-			if (this.enablePanelDetection) {
+      if (this.enablePanelDetection) {
-				this.loadPanelDetection();
+        this.loadPanelDetection();
-			}
+      }
-		},
+    },
 
-		async loadPanelDetection() {
+    async loadPanelDetection() {
-			try {
+      try {
-				// Dynamic import to only load when needed
+        // Dynamic import to only load when needed
-				const { PanelDetector } = await import('foliate-js/panel-detection.js');
+        const { PanelDetector } = await import("foliate-js/panel-detection.js");
-				this.panelDetector = new PanelDetector();
+        this.panelDetector = new PanelDetector();
-				console.log("Panel detection loaded successfully");
+        console.log("Panel detection loaded successfully");
-			} catch (error) {
+      } catch (error) {
-				console.error("Failed to load panel detection:", error);
+        console.error("Failed to load panel detection:", error);
-			}
+      }
-		},
+    },
 
-		nextPage() {
+    nextPage() {
-			const view = document.querySelector("#reader-view");
+      const view = document.querySelector("#reader-view");
-			// @ts-ignore - foliate custom element
+      // @ts-ignore - foliate custom element
-			view?.next?.();
+      view?.next?.();
-		},
+    },
 
-		previousPage() {
+    previousPage() {
-			const view = document.querySelector("#reader-view");
+      const view = document.querySelector("#reader-view");
-			// @ts-ignore - foliate custom element
+      // @ts-ignore - foliate custom element
-			view?.prev?.();
+      view?.prev?.();
-		}
+    },
-	}));
+  }));
 
-	Alpine.start();
+  Alpine.start();
 });
 ```