📚 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",[161],"fe0a3e38-5b87-11f1-85a5-ee650bb23af1","icon.svg","fe0a3f00-5b87-11f1-85a5-ee650bb23af1",4,["D",1780077506588],"\n",[168],"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",[175],"pulls","forks","envVars",{"_187":54,"_189":54},"connections",{"_187":54,"_188":54},"count","unfilledCount","emptyCount",{"_20":174,"_13":175,"_124":176,"_126":-5,"_127":21,"_128":177,"_130":50,"_22":216,"_29":54,"_132":133,"_134":179,"_136":38,"_137":-5,"_198":217,"_93":218},{"_20":167,"_13":168,"_124":169,"_126":-5,"_127":21,"_128":170,"_130":50,"_22":213,"_29":54,"_132":104,"_134":172,"_136":38,"_137":-5,"_198":214,"_93":215},{"_20":160,"_13":161,"_124":162,"_126":-5,"_127":21,"_128":163,"_130":50,"_22":210,"_29":54,"_132":104,"_134":165,"_136":38,"_137":-5,"_198":211,"_93":212},{"_20":153,"_13":154,"_124":48,"_126":-5,"_127":21,"_128":155,"_130":50,"_22":207,"_29":54,"_132":157,"_134":158,"_136":38,"_137":-5,"_198":208,"_93":209},{"_20":146,"_13":147,"_124":148,"_126":-5,"_127":21,"_128":149,"_130":50,"_22":204,"_29":54,"_132":104,"_134":151,"_136":38,"_137":-5,"_198":205,"_93":206},{"_20":139,"_13":140,"_124":141,"_126":-5,"_127":21,"_128":142,"_130":50,"_22":201,"_29":54,"_132":104,"_134":144,"_136":38,"_137":-5,"_198":202,"_93":203},{"_20":122,"_13":123,"_124":125,"_126":-5,"_127":21,"_128":129,"_130":50,"_22":197,"_29":54,"_132":133,"_134":135,"_136":38,"_137":-5,"_198":199,"_93":200},["D",1780077567147],"children",[],[123],["D",1780077527887],[],[140],["D",1780077492734],[],[147],["D",1780077490633],[],[154],["D",1780077501608],[],[161],["D",1780077506588],[],[168],["D",1780077557158],[],[175],["D",1780077469406],["D",1789501878689],{"_11":12,"_91":86},{"_11":12,"_85":86,"_87":86,"_45":46,"_88":89,"_90":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_80":-5,"_81":-5,"_82":-5,"_83":14,"_84":12},"ctx",{"_73":-5,"_112":257,"_258":259,"_260":261,"_262":38,"_263":38,"_264":38,"_265":50,"_266":-5,"_267":-7,"_268":-7,"_269":54,"_270":38,"_271":38,"_272":-5,"_273":38,"_274":38,"_275":38,"_276":-5},"ENV",{"_228":229,"_230":231,"_232":26,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256},"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"]

Branches1

Branches
1