📚 Offline Reader

\n online\n

\n\n

Tap a book to read. Saved books work fully offline.

\n\n \n

\n \n

\n \n \n \n

\n\n

\n\n \n\n\n",[169],"fe0a3e38-5b87-11f1-85a5-ee650bb23af1","icon.svg","fe0a3f00-5b87-11f1-85a5-ee650bb23af1",4,["D",1780077506588],"\n",[176],"1c6f44c2-5b88-11f1-88bc-ee650bb23af1","app.js","1c6f4580-5b88-11f1-88bc-ee650bb23af1",6,["D",1780077557158],"// ---- Tiny IndexedDB wrapper for storing book text offline ----\nconst DB_NAME = \"offline-reader\";\nconst STORE = \"books\";\n\nfunction openDB() {\n return new Promise((resolve, reject) => {\n const req = indexedDB.open(DB_NAME, 1);\n req.onupgradeneeded = () => req.result.createObjectStore(STORE, { keyPath: \"id\" });\n req.onsuccess = () => resolve(req.result);\n req.onerror = () => reject(req.error);\n });\n}\nasync function idbGet(id) {\n const db = await openDB();\n return new Promise((res, rej) => {\n const tx = db.transaction(STORE, \"readonly\").objectStore(STORE).get(id);\n tx.onsuccess = () => res(tx.result);\n tx.onerror = () => rej(tx.error);\n });\n}\nasync function idbPut(value) {\n const db = await openDB();\n return new Promise((res, rej) => {\n const tx = db.transaction(STORE, \"readwrite\").objectStore(STORE).put(value);\n tx.onsuccess = () => res();\n tx.onerror = () => rej(tx.error);\n });\n}\nasync function idbKeys() {\n const db = await openDB();\n return new Promise((res, rej) => {\n const tx = db.transaction(STORE, \"readonly\").objectStore(STORE).getAllKeys();\n tx.onsuccess = () => res(tx.result);\n tx.onerror = () => rej(tx.error);\n });\n}\n\n// ---- DOM refs ----\nconst grid = document.getElementById(\"book-grid\");\nconst reader = document.getElementById(\"reader\");\nconst library = document.getElementById(\"library\");\nconst libHeader = document.getElementById(\"library-header\");\nconst readerContent = document.getElementById(\"reader-content\");\nconst readerTitle = document.getElementById(\"reader-title\");\nconst netStatus = document.getElementById(\"net-status\");\nconst progressFill = document.getElementById(\"progress-fill\");\nconst toastEl = document.getElementById(\"toast\");\n\nconst THEMES = [\"sepia\", \"light\", \"dark\"];\nlet savedSet = new Set();\nlet catalog = [];\n\nfunction toast(msg) {\n toastEl.textContent = msg;\n toastEl.classList.add(\"show\");\n clearTimeout(toast._t);\n toast._t = setTimeout(() => toastEl.classList.remove(\"show\"), 2000);\n}\n\nfunction updateNet() {\n const on = navigator.onLine;\n netStatus.textContent = on ? \"online\" : \"offline\";\n netStatus.className = \"net \" + (on ? \"online\" : \"offline\");\n}\naddEventListener(\"online\", () => { updateNet(); toast(\"Back online\"); });\naddEventListener(\"offline\", () => { updateNet(); toast(\"Offline — saved books still work\"); });\n\n// ---- Library ----\nasync function loadLibrary() {\n savedSet = new Set(await idbKeys());\n let fromNet = false;\n try {\n const res = await fetch(\"/api/books\");\n catalog = await res.json();\n localStorage.setItem(\"catalog\", JSON.stringify(catalog));\n fromNet = true;\n } catch {\n catalog = JSON.parse(localStorage.getItem(\"catalog\") || \"[]\");\n }\n // If offline and no cached catalog, fall back to whatever is saved.\n if (!catalog.length && savedSet.size) {\n catalog = [...savedSet].map((id) => ({ id, title: id, author: \"\" }));\n }\n renderLibrary();\n}\n\nfunction renderLibrary() {\n grid.innerHTML = \"\";\n if (!catalog.length) {\n grid.innerHTML = '

No books available offline yet. Connect once to load the library.

';\n return;\n }\n for (const b of catalog) {\n const saved = savedSet.has(b.id);\n const el = document.createElement(\"button\");\n el.className = \"book\";\n el.innerHTML = `\n

${escapeHtml(b.title)}

${escapeHtml(b.author || \"\")}

${saved ? \"✓ Saved offline\" : \"☁ Tap to read & save\"}

`;\n el.onclick = () => openBook(b);\n grid.appendChild(el);\n }\n}\n\nfunction escapeHtml(s) {\n return String(s).replace(/[&<>\"']/g, (c) =>\n ({ \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\", \"'\": \"'\" }[c]));\n}\n\n// ---- Reader ----\nasync function openBook(b) {\n showReader(true);\n readerTitle.textContent = b.title;\n readerContent.innerHTML = '

Loading…

';\n history.pushState({ book: b.id }, \"\", \"#\" + b.id);\n\n let data = await idbGet(b.id);\n if (!data) {\n try {\n const res = await fetch(\"/api/book/\" + encodeURIComponent(b.id));\n if (!res.ok) throw new Error(\"status \" + res.status);\n data = await res.json();\n await idbPut(data);\n savedSet.add(b.id);\n toast(\"Saved for offline reading\");\n } catch (e) {\n readerContent.innerHTML =\n '

Couldn\\'t load this book. Connect to the internet and try once to save it offline.

';\n return;\n }\n }\n renderBookText(data.text);\n restoreProgress(b.id);\n}\n\nfunction renderBookText(text) {\n const paras = text.split(/\\n\\s*\\n/).map((p) => p.trim()).filter(Boolean);\n const frag = document.createDocumentFragment();\n for (const p of paras) {\n const el = document.createElement(\"p\");\n el.textContent = p;\n frag.appendChild(el);\n }\n readerContent.innerHTML = \"\";\n readerContent.appendChild(frag);\n readerContent.scrollTop = 0;\n}\n\nlet currentBookId = null;\nfunction restoreProgress(id) {\n currentBookId = id;\n const pct = parseFloat(localStorage.getItem(\"pos:\" + id) || \"0\");\n requestAnimationFrame(() => {\n const max = readerContent.scrollHeight - readerContent.clientHeight;\n readerContent.scrollTop = max * pct;\n });\n}\n\nreaderContent.addEventListener(\"scroll\", () => {\n const max = readerContent.scrollHeight - readerContent.clientHeight;\n const pct = max > 0 ? readerContent.scrollTop / max : 0;\n progressFill.style.width = (pct * 100).toFixed(1) + \"%\";\n if (currentBookId) localStorage.setItem(\"pos:\" + currentBookId, pct.toFixed(4));\n}, { passive: true });\n\nfunction showReader(show) {\n reader.classList.toggle(\"hidden\", !show);\n library.classList.toggle(\"hidden\", show);\n libHeader.classList.toggle(\"hidden\", show);\n if (!show) { currentBookId = null; renderLibrary(); }\n}\n\nfunction closeReader() {\n if (location.hash) history.back();\n else showReader(false);\n}\n\n// ---- Controls ----\ndocument.getElementById(\"back-btn\").onclick = closeReader;\naddEventListener(\"popstate\", () => {\n if (!location.hash) showReader(false);\n});\n\nlet fontSize = parseFloat(localStorage.getItem(\"font\") || \"1.15\");\nfunction applyFont() {\n document.documentElement.style.setProperty(\"--reader-font\", fontSize + \"rem\");\n localStorage.setItem(\"font\", String(fontSize));\n}\ndocument.getElementById(\"font-inc\").onclick = () => { fontSize = Math.min(2, fontSize + 0.1); applyFont(); };\ndocument.getElementById(\"font-dec\").onclick = () => { fontSize = Math.max(0.8, fontSize - 0.1); applyFont(); };\napplyFont();\n\nlet theme = localStorage.getItem(\"theme\") || \"sepia\";\nfunction applyTheme() {\n document.body.dataset.theme = theme;\n localStorage.setItem(\"theme\", theme);\n}\ndocument.getElementById(\"theme-btn\").onclick = () => {\n theme = THEMES[(THEMES.indexOf(theme) + 1) % THEMES.length];\n applyTheme();\n toast(\"Theme: \" + theme);\n};\napplyTheme();\n\n// ---- Boot ----\nupdateNet();\nloadLibrary().then(() => {\n // Deep-link support: open book if hash present\n const id = location.hash.slice(1);\n if (id) {\n const b = catalog.find((x) => x.id === id) || { id, title: id };\n openBook(b);\n }\n});\n\n// ---- Service worker ----\nif (\"serviceWorker\" in navigator) {\n navigator.serviceWorker.register(\"/sw.js\").catch(() => {});\n}\n",[183],"pulls","branches","forks","envVars",{"_196":61,"_198":61},"connections",{"_196":61,"_197":61},"count","unfilledCount","emptyCount",{"_42":182,"_32":183,"_30":184,"_137":-5,"_40":41,"_39":185,"_139":24,"_37":229,"_13":61,"_33":34,"_35":187,"_23":26,"_142":-5,"_208":230,"_27":231},{"_42":175,"_32":176,"_30":177,"_137":-5,"_40":41,"_39":178,"_139":24,"_37":226,"_13":61,"_33":20,"_35":180,"_23":26,"_142":-5,"_208":227,"_27":228},{"_42":168,"_32":169,"_30":170,"_137":-5,"_40":41,"_39":171,"_139":24,"_37":223,"_13":61,"_33":20,"_35":173,"_23":26,"_142":-5,"_208":224,"_27":225},{"_42":161,"_32":162,"_30":56,"_137":-5,"_40":41,"_39":163,"_139":24,"_37":220,"_13":61,"_33":165,"_35":166,"_23":26,"_142":-5,"_208":221,"_27":222},{"_42":154,"_32":155,"_30":156,"_137":-5,"_40":41,"_39":157,"_139":24,"_37":217,"_13":61,"_33":20,"_35":159,"_23":26,"_142":-5,"_208":218,"_27":219},{"_42":151,"_32":28,"_30":31,"_137":-5,"_40":41,"_39":14,"_139":26,"_37":214,"_13":61,"_33":34,"_35":36,"_23":26,"_142":-5,"_208":215,"_27":216},{"_42":144,"_32":145,"_30":146,"_137":-5,"_40":41,"_39":147,"_139":24,"_37":211,"_13":61,"_33":20,"_35":149,"_23":26,"_142":-5,"_208":212,"_27":213},{"_42":134,"_32":135,"_30":136,"_137":-5,"_40":41,"_39":138,"_139":24,"_37":207,"_13":61,"_33":34,"_35":141,"_23":26,"_142":-5,"_208":209,"_27":210},["D",1780077567147],"children",[],[135],["D",1780077527887],[],[145],["D",1780078064035],[],[28],["D",1780077492734],[],[155],["D",1780077490633],[],[162],["D",1780077501608],[],[169],["D",1780077506588],[],[176],["D",1780077557158],[],[183],["D",1780077469406],["D",1789501878689],{"_98":97,"_104":36},{"_98":97,"_99":36,"_100":36,"_18":54,"_101":102,"_103":26},{"_13":87,"_32":88,"_42":41,"_89":43,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":44,"_96":97},"ctx",{"_80":-5,"_123":270,"_271":272,"_273":274,"_275":26,"_276":26,"_277":26,"_278":24,"_279":-5,"_280":-7,"_281":-7,"_282":61,"_283":26,"_284":26,"_285":-5,"_286":26,"_287":26,"_288":26,"_289":-5},"ENV",{"_241":242,"_243":244,"_245":88,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v8