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>