basic pdf viewer

.gitattributes

@@ -0,0 +1,5 @@
+# flutter_app/** linguist-vendored
+src-tauri/gen/android/** linguist-vendored
+
+docs/public/pdfjs-dist/** linguist-vendored
+docs/public/pdfjs-*-dist/** linguist-vendored

docs/.vitepress/theme/components/Frame.vue

@@ -1,30 +0,0 @@
-<template>
-  <div :class="$style.container">
-    <iframe
-      :class="$style.iframe"
-      :src="src"
-      frameborder="0"
-      width="100%"
-      height="100%"
-    ></iframe>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps<{ src: string }>();
-</script>
-
-<style module>
-.container {
-  padding-bottom: 120%;
-  position: relative;
-}
-
-.iframe {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-}
-</style>

docs/.vitepress/theme/components/PDF.vue

@@ -0,0 +1,22 @@
+<template>
+  <div :class="$style.container">
+    <VuePdf v-for="page in pages" :key="page" :pdf="pdf" :page="page" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ src: string }>();
+
+import { VuePdf, usePDF } from "@vue3-office/vue-pdf";
+import "@vue3-office/vue-pdf/style.css";
+
+const { pdf, pages, info } = usePDF(props.src);
+</script>
+
+<style module>
+.container {
+  width: 100%;
+  max-height: 80vh;
+  overflow: scroll;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -7,7 +7,7 @@ import { h } from "vue";
 
 import AudioButton from "./components/AudioButton.vue";
 import Details from "./components/Details.vue";
-import Frame from "./components/Frame.vue";
+import PDF from "./components/PDF.vue";
 import TTS from "./components/TTS.vue";
 import YouTube from "./components/YouTube.vue";
 
@@ -26,6 +26,6 @@ export default {
     app.component("Details", Details);
     app.component("TTS", TTS);
     app.component("YouTube", YouTube);
-    app.component("Frame", Frame);
+    app.component("PDF", PDF);
   },
 } satisfies Theme;

docs/howtostudykorean/unit-1/06-honorifics.md

@@ -1066,4 +1066,4 @@ This YouTube video will prompt you with Korean sentences to dictate using the co
 
 [Click here for a free PDF of this lesson.]
 
-<Frame src="https://www.howtostudykorean.com/wp-content/uploads/2015/08/HowtoStudyKorean-Unit-1-Lesson-6.pdf" />
+<PDF src="/HowtoStudyKorean-Unit-1-Lesson-6.pdf" />

docs/howtostudykorean/unit-1/07-irregulars.md

@@ -1410,7 +1410,7 @@ These videos are available to reinforce this lesson:
 
 [Click here for a free PDF of this lesson.]
 
-<Frame src="https://www.howtostudykorean.com/wp-content/uploads/2015/08/HowtoStudyKorean-Unit-1-Lesson-7.pdf" />
+<PDF src="/HowtoStudyKorean-Unit-1-Lesson-7.pdf" />
 
 [Okay, I got it! Take me to the next lesson!](https://www.howtostudykorean.com/?page_id=297) Or,
 [Click here for a workbook to go along with this lesson.](https://www.howtostudykorean.com/workbooks#Unit118)

package.json

@@ -25,6 +25,7 @@
     "vue": "^3.5.30"
   },
   "dependencies": {
+    "@vue3-office/vue-pdf": "^1.0.0",
     "tauri-plugin-tts-api": "^0.1.3"
   }
 }

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@vue3-office/vue-pdf':
+        specifier: ^1.0.0
+        version: 1.0.0(vue@3.5.30)
       tauri-plugin-tts-api:
         specifier: ^0.1.3
         version: 0.1.3
@@ -215,6 +218,81 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
+  '@napi-rs/canvas-android-arm64@0.1.97':
+    resolution: {integrity: sha512-V1c/WVw+NzH8vk7ZK/O8/nyBSCQimU8sfMsB/9qeSvdkGKNU7+mxy/bIF0gTgeBFmHpj30S4E9WHMSrxXGQuVQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@napi-rs/canvas-darwin-arm64@0.1.97':
+    resolution: {integrity: sha512-ok+SCEF4YejcxuJ9Rm+WWunHHpf2HmiPxfz6z1a/NFQECGXtsY7A4B8XocK1LmT1D7P174MzwPF9Wy3AUAwEPw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@napi-rs/canvas-darwin-x64@0.1.97':
+    resolution: {integrity: sha512-PUP6e6/UGlclUvAQNnuXCcnkpdUou6VYZfQOQxExLp86epOylmiwLkqXIvpFmjoTEDmPmXrI+coL/9EFU1gKPA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.97':
+    resolution: {integrity: sha512-XyXH2L/cic8eTNtbrXCcvqHtMX/nEOxN18+7rMrAM2XtLYC/EB5s0wnO1FsLMWmK+04ZSLN9FBGipo7kpIkcOw==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@napi-rs/canvas-linux-arm64-gnu@0.1.97':
+    resolution: {integrity: sha512-Kuq/M3djq0K8ktgz6nPlK7Ne5d4uWeDxPpyKWOjWDK2RIOhHVtLtyLiJw2fuldw7Vn4mhw05EZXCEr4Q76rs9w==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-arm64-musl@0.1.97':
+    resolution: {integrity: sha512-kKmSkQVnWeqg7qdsiXvYxKhAFuHz3tkBjW/zyQv5YKUPhotpaVhpBGv5LqCngzyuRV85SXoe+OFj+Tv0a0QXkQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/canvas-linux-riscv64-gnu@0.1.97':
+    resolution: {integrity: sha512-Jc7I3A51jnEOIAXeLsN/M/+Z28LUeakcsXs07FLq9prXc0eYOtVwsDEv913Gr+06IRo34gJJVgT0TXvmz+N2VA==}
+    engines: {node: '>= 10'}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-x64-gnu@0.1.97':
+    resolution: {integrity: sha512-iDUBe7AilfuBSRbSa8/IGX38Mf+iCSBqoVKLSQ5XaY2JLOaqz1TVyPFEyIck7wT6mRQhQt5sN6ogfjIDfi74tg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@napi-rs/canvas-linux-x64-musl@0.1.97':
+    resolution: {integrity: sha512-AKLFd/v0Z5fvgqBDqhvqtAdx+fHMJ5t9JcUNKq4FIZ5WH+iegGm8HPdj00NFlCSnm83Fp3Ln8I2f7uq1aIiWaA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@napi-rs/canvas-win32-arm64-msvc@0.1.97':
+    resolution: {integrity: sha512-u883Yr6A6fO7Vpsy9YE4FVCIxzzo5sO+7pIUjjoDLjS3vQaNMkVzx5bdIpEL+ob+gU88WDK4VcxYMZ6nmnoX9A==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@napi-rs/canvas-win32-x64-msvc@0.1.97':
+    resolution: {integrity: sha512-sWtD2EE3fV0IzN+iiQUqr/Q1SwqWhs2O1FKItFlxtdDkikpEj5g7DKQpY3x55H/MAOnL8iomnlk3mcEeGiUMoQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@napi-rs/canvas@0.1.97':
+    resolution: {integrity: sha512-8cFniXvrIEnVwuNSRCW9wirRZbHvrD3JVujdS2P5n5xiJZNZMOZcfOvJ1pb66c7jXMKHHglJEDVJGbm8XWFcXQ==}
+    engines: {node: '>= 10'}
+
   '@rolldown/pluginutils@1.0.0-rc.2':
     resolution: {integrity: sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==}
 
@@ -531,6 +609,16 @@ 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:
@@ -690,6 +778,10 @@ packages:
   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'}
+
   perfect-debounce@2.1.0:
     resolution: {integrity: sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==}
 
@@ -941,6 +1033,54 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
+  '@napi-rs/canvas-android-arm64@0.1.97':
+    optional: true
+
+  '@napi-rs/canvas-darwin-arm64@0.1.97':
+    optional: true
+
+  '@napi-rs/canvas-darwin-x64@0.1.97':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm-gnueabihf@0.1.97':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-gnu@0.1.97':
+    optional: true
+
+  '@napi-rs/canvas-linux-arm64-musl@0.1.97':
+    optional: true
+
+  '@napi-rs/canvas-linux-riscv64-gnu@0.1.97':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-gnu@0.1.97':
+    optional: true
+
+  '@napi-rs/canvas-linux-x64-musl@0.1.97':
+    optional: true
+
+  '@napi-rs/canvas-win32-arm64-msvc@0.1.97':
+    optional: true
+
+  '@napi-rs/canvas-win32-x64-msvc@0.1.97':
+    optional: true
+
+  '@napi-rs/canvas@0.1.97':
+    optionalDependencies:
+      '@napi-rs/canvas-android-arm64': 0.1.97
+      '@napi-rs/canvas-darwin-arm64': 0.1.97
+      '@napi-rs/canvas-darwin-x64': 0.1.97
+      '@napi-rs/canvas-linux-arm-gnueabihf': 0.1.97
+      '@napi-rs/canvas-linux-arm64-gnu': 0.1.97
+      '@napi-rs/canvas-linux-arm64-musl': 0.1.97
+      '@napi-rs/canvas-linux-riscv64-gnu': 0.1.97
+      '@napi-rs/canvas-linux-x64-gnu': 0.1.97
+      '@napi-rs/canvas-linux-x64-musl': 0.1.97
+      '@napi-rs/canvas-win32-arm64-msvc': 0.1.97
+      '@napi-rs/canvas-win32-x64-msvc': 0.1.97
+    optional: true
+
   '@rolldown/pluginutils@1.0.0-rc.2': {}
 
   '@rollup/rollup-android-arm-eabi@4.60.0':
@@ -1203,6 +1343,16 @@ 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
@@ -1355,6 +1505,10 @@ snapshots:
       regex: 6.1.0
       regex-recursion: 6.0.2
 
+  pdfjs-dist@5.4.449:
+    optionalDependencies:
+      '@napi-rs/canvas': 0.1.97
+
   perfect-debounce@2.1.0: {}
 
   picocolors@1.1.1: {}