2026-04-06 17:39:37 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en" data-theme="light">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<title>{{ title }} — PI Weekly Reader</title>
|
2026-04-06 18:40:04 -04:00
|
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📰</text></svg>">
|
2026-04-06 17:39:37 -04:00
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
|
|
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
|
|
|
<style>
|
|
|
|
|
body { margin: 0; overflow: hidden; display: flex; flex-direction: column; height: 100vh; }
|
|
|
|
|
.reader-header {
|
|
|
|
|
display: flex; align-items: center; gap: 1rem;
|
|
|
|
|
padding: 0.5rem 1rem; border-bottom: 1px solid var(--pico-muted-border-color);
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
.reader-header h2 { margin: 0; font-size: 1rem; flex: 1; }
|
|
|
|
|
.reader-body { display: flex; flex: 1; overflow: hidden; }
|
|
|
|
|
.toc-sidebar {
|
|
|
|
|
width: 260px; overflow-y: auto; border-right: 1px solid var(--pico-muted-border-color);
|
|
|
|
|
padding: 1rem; flex-shrink: 0; background: var(--pico-background-color);
|
|
|
|
|
}
|
|
|
|
|
.toc-sidebar.collapsed { display: none; }
|
|
|
|
|
.toc-sidebar h3 { font-size: 0.75rem; text-transform: uppercase; color: var(--pico-muted-color); margin-bottom: 0.5rem; }
|
|
|
|
|
.toc-item {
|
|
|
|
|
display: block; padding: 0.4rem 0.5rem; border-radius: var(--pico-border-radius);
|
|
|
|
|
font-size: 0.85rem; cursor: pointer; text-decoration: none; color: inherit;
|
|
|
|
|
}
|
|
|
|
|
.toc-item:hover { background: var(--pico-secondary-hover-background); }
|
|
|
|
|
.toc-item.active { background: var(--pico-primary-background); color: var(--pico-primary-inverse); }
|
|
|
|
|
#reader-viewport { flex: 1; overflow: hidden; }
|
|
|
|
|
.reader-footer {
|
|
|
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
|
|
|
padding: 0.4rem 1rem; border-top: 1px solid var(--pico-muted-border-color);
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
.reader-footer small { color: var(--pico-muted-color); }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="reader-header">
|
|
|
|
|
<a href="/issues" class="outline" role="button" style="padding:0.3rem 0.8rem;">← Issues</a>
|
|
|
|
|
<h2>{{ title }}</h2>
|
|
|
|
|
<button class="outline" onclick="toggleToc()" style="padding:0.3rem 0.8rem;">TOC</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="reader-body">
|
|
|
|
|
<div class="toc-sidebar" id="toc-sidebar">
|
|
|
|
|
<h3>Table of Contents</h3>
|
|
|
|
|
<div id="toc-list"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="reader-viewport"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="reader-footer">
|
2026-04-06 18:40:04 -04:00
|
|
|
<button class="outline" id="prev-btn" onclick="rendition && rendition.prev()" style="padding:0.3rem 1rem;">← Previous</button>
|
2026-04-06 17:39:37 -04:00
|
|
|
<small id="chapter-info"></small>
|
2026-04-06 18:40:04 -04:00
|
|
|
<button class="outline" id="next-btn" onclick="rendition && rendition.next()" style="padding:0.3rem 1rem;">Next →</button>
|
2026-04-06 17:39:37 -04:00
|
|
|
</div>
|
|
|
|
|
|
2026-04-06 18:40:04 -04:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jszip@3/dist/jszip.min.js"></script>
|
2026-04-06 17:39:37 -04:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
|
|
|
|
|
<script>
|
2026-04-06 18:40:04 -04:00
|
|
|
let book, rendition;
|
2026-04-06 17:39:37 -04:00
|
|
|
|
2026-04-06 18:40:04 -04:00
|
|
|
fetch("/issues/{{ issue.id }}/epub")
|
|
|
|
|
.then(r => r.arrayBuffer())
|
|
|
|
|
.then(buf => {
|
|
|
|
|
book = ePub(buf);
|
|
|
|
|
rendition = book.renderTo("reader-viewport", {
|
|
|
|
|
width: "100%",
|
|
|
|
|
height: "100%",
|
|
|
|
|
spread: "none",
|
|
|
|
|
});
|
2026-04-06 17:39:37 -04:00
|
|
|
|
2026-04-06 18:40:04 -04:00
|
|
|
rendition.themes.default({
|
|
|
|
|
body: {
|
|
|
|
|
"font-family": 'system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif',
|
|
|
|
|
"line-height": "1.6",
|
|
|
|
|
},
|
|
|
|
|
"h1, h2, h3": {
|
|
|
|
|
"font-family": 'system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif',
|
|
|
|
|
},
|
2026-04-06 17:39:37 -04:00
|
|
|
});
|
|
|
|
|
|
2026-04-06 18:40:04 -04:00
|
|
|
rendition.display();
|
|
|
|
|
|
|
|
|
|
book.loaded.navigation.then(function(nav) {
|
|
|
|
|
const tocList = document.getElementById("toc-list");
|
|
|
|
|
|
|
|
|
|
const coverItem = document.createElement("a");
|
|
|
|
|
coverItem.className = "toc-item";
|
|
|
|
|
coverItem.textContent = "Cover";
|
|
|
|
|
coverItem.href = "#";
|
|
|
|
|
coverItem.onclick = function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
rendition.display("cover.xhtml");
|
|
|
|
|
document.querySelectorAll(".toc-item").forEach(i => i.classList.remove("active"));
|
|
|
|
|
coverItem.classList.add("active");
|
|
|
|
|
};
|
|
|
|
|
tocList.appendChild(coverItem);
|
|
|
|
|
|
|
|
|
|
nav.toc.forEach(function(chapter) {
|
|
|
|
|
const item = document.createElement("a");
|
|
|
|
|
item.className = "toc-item";
|
|
|
|
|
item.textContent = chapter.label.trim();
|
|
|
|
|
item.href = "#";
|
|
|
|
|
item.onclick = function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
rendition.display(chapter.href);
|
|
|
|
|
document.querySelectorAll(".toc-item").forEach(i => i.classList.remove("active"));
|
|
|
|
|
item.classList.add("active");
|
|
|
|
|
};
|
|
|
|
|
tocList.appendChild(item);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
rendition.on("relocated", function(location) {
|
|
|
|
|
const href = location.start.href;
|
|
|
|
|
document.querySelectorAll(".toc-item").forEach(function(item, idx) {
|
|
|
|
|
if (idx === 0) {
|
|
|
|
|
item.classList.toggle("active", href.includes("cover.xhtml"));
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if (book.navigation && book.navigation.toc) {
|
|
|
|
|
const current = book.navigation.toc.findIndex(
|
|
|
|
|
ch => href.includes(ch.href.split('#')[0])
|
|
|
|
|
);
|
|
|
|
|
const total = book.navigation.toc.length;
|
|
|
|
|
if (current >= 0) {
|
|
|
|
|
document.getElementById("chapter-info").textContent =
|
|
|
|
|
`${current + 1} of ${total}`;
|
|
|
|
|
document.querySelectorAll(".toc-item").forEach((item, idx) => {
|
|
|
|
|
if (idx > 0) item.classList.toggle("active", idx - 1 === current);
|
|
|
|
|
else item.classList.remove("active");
|
|
|
|
|
});
|
|
|
|
|
} else if (href.includes("cover.xhtml")) {
|
|
|
|
|
document.getElementById("chapter-info").textContent = "Cover";
|
|
|
|
|
} else if (href.includes("nav.xhtml")) {
|
|
|
|
|
document.getElementById("chapter-info").textContent = "Table of Contents";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.addEventListener("keydown", function(e) {
|
|
|
|
|
if (e.key === "ArrowLeft" && rendition) rendition.prev();
|
|
|
|
|
if (e.key === "ArrowRight" && rendition) rendition.next();
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
document.getElementById("reader-viewport").innerHTML =
|
|
|
|
|
`<p style="padding:2rem;color:red;">Failed to load ePub: ${err.message}</p>`;
|
|
|
|
|
});
|
2026-04-06 17:39:37 -04:00
|
|
|
|
|
|
|
|
function toggleToc() {
|
|
|
|
|
document.getElementById("toc-sidebar").classList.toggle("collapsed");
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
