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;