feat(reader): Online ebook reading via vue-reader (foliate-js)

assets/ReadEbook.vue

@@ -0,0 +1,38 @@
+<template>
+  <div id="area" style="width: 100vw; height: 100vh; min-height: 95vh;">
+    <vue-reader
+        :url="props.file"
+        :showToc="true"
+        :getRendition="getRendition"
+        backgroundColor="#000"
+        @update:location="locationChange"
+        :location="getInitialLocation()"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({'file': String})
+import { VueReader } from 'vue-book-reader'
+const initialCfi = new URLSearchParams(window.location.search).get('cfi');
+
+const locationChange = (detail) => {
+  const { fraction } = detail
+  console.log('locationChange', fraction, detail)
+  history.pushState({fraction: fraction, }, document.title, "?cfi=" + encodeURIComponent(detail.cfi) + "#page="+ detail.location.current+"&percent=" + (fraction * 100).toFixed(2));
+}
+
+const getInitialLocation = () => {
+    return initialCfi ?? null
+}
+const getRendition = async (rendition) => {
+  rendition.renderer.setStyles([
+    `
+    html {
+      background: #000;
+      color: #fff;
+    }`,
+  ])
+}
+
+</script>

assets/read-ebook.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import ReadEBook from './ReadEbook.vue'
+
+document.addEventListener('DOMContentLoaded', () => {
+    const file = document.getElementById('mount').getAttribute('data-file')
+    createApp(ReadEBook, {file: file}).mount('#mount');
+});