basic pdf viewer

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)