📚 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",[155],"fe0a3e38-5b87-11f1-85a5-ee650bb23af1","icon.svg","fe0a3f00-5b87-11f1-85a5-ee650bb23af1",4,["D",1780077506588],"\n",[162],"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",[169],"pulls","branches","forks","envVars",{"_182":42,"_184":42},"connections",{"_182":42,"_183":42},"count","unfilledCount","emptyCount",{"_18":168,"_20":169,"_118":170,"_120":-5,"_121":71,"_122":171,"_124":38,"_22":211,"_68":42,"_126":127,"_128":173,"_130":26,"_131":-5,"_193":212,"_88":213},{"_18":161,"_20":162,"_118":163,"_120":-5,"_121":71,"_122":164,"_124":38,"_22":208,"_68":42,"_126":98,"_128":166,"_130":26,"_131":-5,"_193":209,"_88":210},{"_18":154,"_20":155,"_118":156,"_120":-5,"_121":71,"_122":157,"_124":38,"_22":205,"_68":42,"_126":98,"_128":159,"_130":26,"_131":-5,"_193":206,"_88":207},{"_18":147,"_20":148,"_118":36,"_120":-5,"_121":71,"_122":149,"_124":38,"_22":202,"_68":42,"_126":151,"_128":152,"_130":26,"_131":-5,"_193":203,"_88":204},{"_18":140,"_20":141,"_118":142,"_120":-5,"_121":71,"_122":143,"_124":38,"_22":199,"_68":42,"_126":98,"_128":145,"_130":26,"_131":-5,"_193":200,"_88":201},{"_18":133,"_20":134,"_118":135,"_120":-5,"_121":71,"_122":136,"_124":38,"_22":196,"_68":42,"_126":98,"_128":138,"_130":26,"_131":-5,"_193":197,"_88":198},{"_18":116,"_20":117,"_118":119,"_120":-5,"_121":71,"_122":123,"_124":38,"_22":192,"_68":42,"_126":127,"_128":129,"_130":26,"_131":-5,"_193":194,"_88":195},["D",1780077567147],"children",[],[117],["D",1780077527887],[],[134],["D",1780077492734],[],[141],["D",1780077490633],[],[148],["D",1780077501608],[],[155],["D",1780077506588],[],[162],["D",1780077557158],[],[169],["D",1780077469406],["D",1789501878689],{"_16":17,"_86":81},{"_16":17,"_80":81,"_82":81,"_33":34,"_83":84,"_85":26},{"_68":69,"_20":70,"_18":71,"_72":19,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_77":-5,"_78":21,"_79":17},"ctx",{"_61":-5,"_106":252,"_253":254,"_255":256,"_257":26,"_258":26,"_259":26,"_260":38,"_261":-5,"_262":-7,"_263":-7,"_264":42,"_265":26,"_266":26,"_267":-5,"_268":26,"_269":26,"_270":26,"_271":-5},"ENV",{"_223":224,"_225":226,"_227":70,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251},"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"]

Search