From 1dae31e2bce2cd7a9e09576107c48e8efcfab70b Mon Sep 17 00:00:00 2001
From: polv <polv@polv.cc>
Date: Thu, 26 Mar 2026 00:10:58 +0700
Subject: [PATCH] make sure pdf viewer builds

---
 docs/.vitepress/config.mts                    |   6 +
 docs/.vitepress/theme/components/PDF.vue      | 279 +++++++++++++++++-
 docs/howtostudykorean/unit-1/06-honorifics.md |   2 +-
 docs/howtostudykorean/unit-1/07-irregulars.md |   2 +
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  41 +--
 6 files changed, 292 insertions(+), 40 deletions(-)

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index b6a9188..b5c33a4 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -62,4 +62,10 @@ export default defineConfig({
       md.use(mdInline);
     },
   },
+  vite: {
+    ssr: {
+      noExternal: [],
+      external: ["pdfjs-dist"], // don't bundle it for SSR — leave it browser-only
+    },
+  },
 });
diff --git a/docs/.vitepress/theme/components/PDF.vue b/docs/.vitepress/theme/components/PDF.vue
index 45e09ca..5857cd0 100644
--- a/docs/.vitepress/theme/components/PDF.vue
+++ b/docs/.vitepress/theme/components/PDF.vue
@@ -1,22 +1,279 @@
 <template>
-  <div :class="$style.container">
-    <VuePdf v-for="page in pages" :key="page" :pdf="pdf" :page="page" />
+  <div class="pdf-viewer">
+    <!-- Toolbar -->
+    <div class="pdf-toolbar">
+      <span class="pdf-toolbar__name">{{ fileName || src }}</span>
+      <div class="pdf-toolbar__right">
+        <span class="pdf-toolbar__pages" v-if="totalPages">
+          {{ totalPages }} pages
+        </span>
+        <button class="pdf-zoom-btn" @click="zoom(-0.25)" title="Zoom out">
+          −
+        </button>
+        <span class="pdf-zoom-label">{{ Math.round(scale * 100) }}%</span>
+        <button class="pdf-zoom-btn" @click="zoom(+0.25)" title="Zoom in">
+          +
+        </button>
+      </div>
+    </div>
+
+    <!-- Scroll container — all pages rendered vertically -->
+    <div class="pdf-scroll" ref="scrollEl">
+      <div v-if="loading" class="pdf-msg">Loading…</div>
+      <div v-else-if="error" class="pdf-msg pdf-msg--err">{{ error }}</div>
+      <div v-else class="pdf-pages">
+        <canvas
+          v-for="n in totalPages"
+          :key="n"
+          :ref="(el) => setCanvasRef(el, n)"
+          class="pdf-page"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts">
-const props = defineProps<{ src: string }>();
+<script setup>
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
 
-import { VuePdf, usePDF } from "@vue3-office/vue-pdf";
-import "@vue3-office/vue-pdf/style.css";
+const props = defineProps({
+  /** URL string, Uint8Array, or ArrayBuffer */
+  src: { type: [String, Object], required: true },
+  fileName: { type: String },
+  initialScale: { type: Number, default: 1.25 },
+});
 
-const { pdf, pages, info } = usePDF(props.src);
+// ── state ──────────────────────────────────────────────────────
+const scrollEl = ref(null);
+const loading = ref(true);
+const error = ref(null);
+const totalPages = ref(0);
+const scale = ref(props.initialScale);
+
+let pdfjsLib = null;
+let pdfDoc = null;
+const canvasMap = {}; // pageNum → <canvas> element
+const taskMap = {}; // pageNum → active renderTask
+
+// ── canvas ref collector ───────────────────────────────────────
+function setCanvasRef(el, n) {
+  if (el) canvasMap[n] = el;
+}
+
+// ── load ───────────────────────────────────────────────────────
+async function loadPdf(src) {
+  loading.value = true;
+  error.value = null;
+  totalPages.value = 0;
+
+  try {
+    if (!pdfjsLib) {
+      // Dynamic import — never runs in Node/SSR
+      pdfjsLib = await import("pdfjs-dist");
+      pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
+        "pdfjs-dist/build/pdf.worker.mjs",
+        import.meta.url,
+      ).toString();
+    }
+
+    if (pdfDoc) {
+      pdfDoc.destroy();
+      pdfDoc = null;
+    }
+
+    pdfDoc = await pdfjsLib.getDocument(src).promise;
+    totalPages.value = pdfDoc.numPages;
+    loading.value = false;
+
+    // Wait for Vue to stamp out all the <canvas> elements
+    await nextTick();
+    await renderAll();
+  } catch (e) {
+    error.value = `Failed to load PDF: ${e.message}`;
+    loading.value = false;
+  }
+}
+
+// ── render all pages ───────────────────────────────────────────
+async function renderAll() {
+  // Cancel any in-flight tasks first
+  for (const task of Object.values(taskMap)) {
+    try {
+      task.cancel();
+    } catch {}
+  }
+
+  // Render pages sequentially — avoids memory thrash on mobile/Android
+  for (let n = 1; n <= totalPages.value; n++) {
+    await renderPage(n);
+  }
+}
+
+async function renderPage(n) {
+  if (!pdfDoc) return;
+  const canvas = canvasMap[n];
+  if (!canvas) return;
+
+  try {
+    const page = await pdfDoc.getPage(n);
+    const viewport = page.getViewport({ scale: scale.value });
+
+    canvas.width = viewport.width;
+    canvas.height = viewport.height;
+
+    const task = page.render({
+      canvasContext: canvas.getContext("2d"),
+      viewport,
+    });
+    taskMap[n] = task;
+    await task.promise;
+    delete taskMap[n];
+  } catch (e) {
+    if (e?.name !== "RenderingCancelledException") {
+      console.warn(`Page ${n} render error:`, e.message);
+    }
+  }
+}
+
+// ── zoom ───────────────────────────────────────────────────────
+async function zoom(delta) {
+  scale.value = Math.min(4, Math.max(0.5, +(scale.value + delta).toFixed(2)));
+  await nextTick();
+  await renderAll();
+}
+
+// ── lifecycle ──────────────────────────────────────────────────
+onMounted(() => loadPdf(props.src));
+
+watch(
+  () => props.src,
+  (src) => loadPdf(src),
+);
+
+onBeforeUnmount(() => {
+  for (const task of Object.values(taskMap)) {
+    try {
+      task.cancel();
+    } catch {}
+  }
+  if (pdfDoc) pdfDoc.destroy();
+});
 </script>
 
-<style module>
-.container {
-  width: 100%;
+<style scoped>
+/* ── root ── */
+.pdf-viewer {
+  --bar-bg: #141414;
+  --bg: #1e1e1e;
+  --border: #2e2e2e;
+  --text: #d4d4d4;
+  --muted: #666;
+  --accent: #5ba3f5;
+
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* parent must supply a bounded height */
   max-height: 80vh;
-  overflow: scroll;
+  background: var(--bg);
+  color: var(--text);
+  /* font-family: "JetBrains Mono", "Fira Mono", monospace; */
+  border-radius: 6px;
+}
+
+/* ── toolbar ── */
+.pdf-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  padding: 0 14px;
+  height: 40px;
+  background: var(--bar-bg);
+  border-bottom: 1px solid var(--border);
+  gap: 12px;
+}
+
+.pdf-toolbar__name {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pdf-toolbar__right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.pdf-toolbar__pages {
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.pdf-zoom-btn {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 4px;
+  width: 26px;
+  height: 26px;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    color 0.15s;
+}
+
+.pdf-zoom-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.pdf-zoom-label {
+  font-size: 11px;
+  color: var(--muted);
+  min-width: 36px;
+  text-align: center;
+}
+
+/* ── scroll area — the fix lives here ── */
+.pdf-scroll {
+  flex: 1;
+  min-height: 0; /* lets the flex child shrink so overflow-y activates */
+  overflow-y: auto;
+  overflow-x: auto;
+  padding: 20px 0;
+  background: var(--bg);
+}
+
+/* ── pages stack ── */
+.pdf-pages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.pdf-page {
+  display: block;
+  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
+  border-radius: 2px;
+}
+
+/* ── status ── */
+.pdf-msg {
+  text-align: center;
+  padding: 60px 20px;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.pdf-msg--err {
+  color: #e06c6c;
 }
 </style>
diff --git a/docs/howtostudykorean/unit-1/06-honorifics.md b/docs/howtostudykorean/unit-1/06-honorifics.md
index 31be868..3dbc828 100644
--- a/docs/howtostudykorean/unit-1/06-honorifics.md
+++ b/docs/howtostudykorean/unit-1/06-honorifics.md
@@ -1041,7 +1041,7 @@ That’s it for this lesson! You are progressing really well in Korean! There ar
 [Okay, I got it! Take me to the next lesson!](./07-irregulars.md) Or,
 [Click here for a workbook to go along with this lesson.](https://www.howtostudykorean.com/workbooks#Unit118)
 
----
+## Resources
 
 <YouTube id=LWSbh7Og2Sg />
 
diff --git a/docs/howtostudykorean/unit-1/07-irregulars.md b/docs/howtostudykorean/unit-1/07-irregulars.md
index 7e6364d..9b5f165 100644
--- a/docs/howtostudykorean/unit-1/07-irregulars.md
+++ b/docs/howtostudykorean/unit-1/07-irregulars.md
@@ -1390,6 +1390,8 @@ For now, focus on the concepts that were introduced in this lesson. When you rea
 
 Everybody is confused when they learn these irregulars. Eventually you will reach a point where all of these will come natural to you. Whenever you learn a new word where the stem ends in ㅅ/ㄹ/ㅂ/ㄷ/르/ㅡ just make a mental note about how you should conjugate that word in the future. I don’t even have to think about these irregulars anymore because they just flow out naturally. If you can’t memorize them all right now, just try to understand them, which will allow you to recognize them later. Eventually, you will memorize them simply from using and hearing them so much.
 
+## Resources
+
 These videos are available to reinforce this lesson:
 
 [Sentence Practice]
diff --git a/package.json b/package.json
index 7f38554..6cb7e87 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "vue": "^3.5.30"
   },
   "dependencies": {
-    "@vue3-office/vue-pdf": "^1.0.0",
+    "pdfjs-dist": "^5.5.207",
     "tauri-plugin-tts-api": "^0.1.3"
   }
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4d05450..10d694c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,9 +8,9 @@ importers:
 
   .:
     dependencies:
-      '@vue3-office/vue-pdf':
-        specifier: ^1.0.0
-        version: 1.0.0(vue@3.5.30)
+      pdfjs-dist:
+        specifier: ^5.5.207
+        version: 5.5.207
       tauri-plugin-tts-api:
         specifier: ^0.1.3
         version: 0.1.3
@@ -609,16 +609,6 @@ packages:
   '@vue/shared@3.5.30':
     resolution: {integrity: sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ==}
 
-  '@vue3-office/common@1.0.0':
-    resolution: {integrity: sha512-jpuFkJJSqX2wfomdCDTP1BcXU3IaIPo211JI8xLeeayNRmbgfF1JqLnaWaE5nk4D366Z03thEgZctwt24EBXGA==}
-    peerDependencies:
-      vue: ^3.5.24
-
-  '@vue3-office/vue-pdf@1.0.0':
-    resolution: {integrity: sha512-l8fcjEe4IMk9vsxf6R1s0BYb6JyT5PVKobe+O3EDVKMQ++e0oUf1g2Zu20Y+salbToFdTkGSz++GU4lEVI+clg==}
-    peerDependencies:
-      vue: ^3.5.24
-
   '@vueuse/core@14.2.1':
     resolution: {integrity: sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==}
     peerDependencies:
@@ -772,15 +762,18 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  node-readable-to-web-readable-stream@0.4.2:
+    resolution: {integrity: sha512-/cMZNI34v//jUTrI+UIo4ieHAB5EZRY/+7OmXZgBxaWBMcW2tGdceIw06RFxWxrKZ5Jp3sI2i5TsRo+CBhtVLQ==}
+
   oniguruma-parser@0.12.1:
     resolution: {integrity: sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==}
 
   oniguruma-to-es@4.3.5:
     resolution: {integrity: sha512-Zjygswjpsewa0NLTsiizVuMQZbp0MDyM6lIt66OxsF21npUDlzpHi1Mgb/qhQdkb+dWFTzJmFbEWdvZgRho8eQ==}
 
-  pdfjs-dist@5.4.449:
-    resolution: {integrity: sha512-CegnUaT0QwAyQMS+7o2POr4wWUNNe8VaKKlcuoRHeYo98cVnqPpwOXNSx6Trl6szH02JrRcsPgletV6GmF3LtQ==}
-    engines: {node: '>=20.16.0 || >=22.3.0'}
+  pdfjs-dist@5.5.207:
+    resolution: {integrity: sha512-WMqqw06w1vUt9ZfT0gOFhMf3wHsWhaCrxGrckGs5Cci6ybDW87IvPaOd2pnBwT6BJuP/CzXDZxjFgmSULLdsdw==}
+    engines: {node: '>=20.19.0 || >=22.13.0 || >=24'}
 
   perfect-debounce@2.1.0:
     resolution: {integrity: sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==}
@@ -1343,16 +1336,6 @@ snapshots:
 
   '@vue/shared@3.5.30': {}
 
-  '@vue3-office/common@1.0.0(vue@3.5.30)':
-    dependencies:
-      vue: 3.5.30
-
-  '@vue3-office/vue-pdf@1.0.0(vue@3.5.30)':
-    dependencies:
-      '@vue3-office/common': 1.0.0(vue@3.5.30)
-      pdfjs-dist: 5.4.449
-      vue: 3.5.30
-
   '@vueuse/core@14.2.1(vue@3.5.30)':
     dependencies:
       '@types/web-bluetooth': 0.0.21
@@ -1497,6 +1480,9 @@ snapshots:
 
   nanoid@3.3.11: {}
 
+  node-readable-to-web-readable-stream@0.4.2:
+    optional: true
+
   oniguruma-parser@0.12.1: {}
 
   oniguruma-to-es@4.3.5:
@@ -1505,9 +1491,10 @@ snapshots:
       regex: 6.1.0
       regex-recursion: 6.0.2
 
-  pdfjs-dist@5.4.449:
+  pdfjs-dist@5.5.207:
     optionalDependencies:
       '@napi-rs/canvas': 0.1.97
+      node-readable-to-web-readable-stream: 0.4.2
 
   perfect-debounce@2.1.0: {}