📚 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",[165],"fe0a3e38-5b87-11f1-85a5-ee650bb23af1","icon.svg","fe0a3f00-5b87-11f1-85a5-ee650bb23af1",4,["D",1780077506588],"\n",[172],"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",[179],"pulls","branches","forks","envVars",{"_192":62,"_194":62},"connections",{"_192":62,"_193":62},"count","unfilledCount","emptyCount",{"_42":178,"_32":179,"_30":180,"_136":-5,"_40":41,"_39":181,"_138":25,"_37":221,"_13":62,"_33":34,"_35":183,"_24":48,"_141":-5,"_203":222,"_27":223},{"_42":171,"_32":172,"_30":173,"_136":-5,"_40":41,"_39":174,"_138":25,"_37":218,"_13":62,"_33":20,"_35":176,"_24":48,"_141":-5,"_203":219,"_27":220},{"_42":164,"_32":165,"_30":166,"_136":-5,"_40":41,"_39":167,"_138":25,"_37":215,"_13":62,"_33":20,"_35":169,"_24":48,"_141":-5,"_203":216,"_27":217},{"_42":157,"_32":158,"_30":57,"_136":-5,"_40":41,"_39":159,"_138":25,"_37":212,"_13":62,"_33":161,"_35":162,"_24":48,"_141":-5,"_203":213,"_27":214},{"_42":150,"_32":151,"_30":152,"_136":-5,"_40":41,"_39":153,"_138":25,"_37":209,"_13":62,"_33":20,"_35":155,"_24":48,"_141":-5,"_203":210,"_27":211},{"_42":143,"_32":144,"_30":145,"_136":-5,"_40":41,"_39":146,"_138":25,"_37":206,"_13":62,"_33":20,"_35":148,"_24":48,"_141":-5,"_203":207,"_27":208},{"_42":133,"_32":134,"_30":135,"_136":-5,"_40":41,"_39":137,"_138":25,"_37":202,"_13":62,"_33":34,"_35":140,"_24":48,"_141":-5,"_203":204,"_27":205},["D",1780077567147],"children",[],[134],["D",1780077527887],[],[144],["D",1780077492734],[],[151],["D",1780077490633],[],[158],["D",1780077501608],[],[165],["D",1780077506588],[],[172],["D",1780077557158],[],[179],["D",1780077469406],["D",1789501878689],{"_98":97,"_104":36},{"_98":97,"_99":36,"_100":36,"_18":55,"_101":102,"_103":48},{"_13":14,"_32":88,"_42":41,"_89":43,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":44,"_96":97},"ctx",{"_81":-5,"_123":262,"_263":264,"_265":266,"_267":48,"_268":48,"_269":48,"_270":25,"_271":-5,"_272":-7,"_273":-7,"_274":62,"_275":48,"_276":48,"_277":-5,"_278":48,"_279":48,"_280":48,"_281":-5},"ENV",{"_233":234,"_235":236,"_237":88,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261},"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 · v9