1.0.4

.github/deploy-vitepress.yml

@@ -0,0 +1,51 @@
+name: Deploy VitePress site to Pages
+
+on:
+  push:
+    branches: [main]
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup Bun
+      - uses: oven-sh/setup-bun@v1
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: bun install
+      - name: Build with VitePress
+        run: bun run docs:build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -173,3 +173,7 @@ dist
 
 # Finder (MacOS) folder config
 .DS_Store
+
+# Vitepress
+docs/.vitepress/cache
+docs/.vitepress/dist

docs/.vitepress/config.ts

@@ -0,0 +1,47 @@
+import { defineConfig } from "vitepress";
+import { version } from "../../packages/vue/package.json";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "vue-pdfjs",
+  description:
+    "A Vue component for displaying PDF files using the standard `pdf.js` viewer. This package provides a simple and powerful integration to embed PDF viewers in Vue applications.",
+  themeConfig: {
+    logo: { src: "/vue_pdfjs.svg", width: 48, height: 48 },
+
+    nav: [
+      { text: "Home", link: "/" },
+      { text: "Examples", link: "/examples/basic-examples" },
+      {
+        text: `v${version}`,
+        items: [
+          {
+            text: "Changelog",
+            link: "https://github.com/tuttarealstep/vue-pdf.js/releases",
+          },
+        ],
+      },
+    ],
+
+    sidebar: [
+      {
+        text: "Introduction",
+        items: [
+          { text: "Getting Started", link: "/guide/getting-started" },
+          { text: "Composables", link: "/guide/composables" },
+        ],
+      },
+      {
+        text: "Examples",
+        items: [
+          { text: "Basic Examples", link: "/examples/basic-examples" },
+          { text: "Usage with Nuxt", link: "/examples/nuxt-example" },
+        ],
+      },
+    ],
+
+    socialLinks: [
+      { icon: "github", link: "https://github.com/tuttarealstep/vue-pdf.js" },
+    ],
+  },
+});

docs/examples/basic-examples.md

@@ -0,0 +1,129 @@
+# Basic examples
+
+## Use another language
+
+```vue
+<script setup lang="ts">
+import { reactive, useTemplateRef } from "vue";
+import { VuePDFjs, usePDF } from "@tuttarealstep/vue-pdf.js";
+import "@tuttarealstep/vue-pdf.js/dist/style.css";
+
+// 1. Import the FTL file
+import it_FTL from "@tuttarealstep/vue-pdf.js/l10n/it/viewer.ftl?raw";
+
+// 2. Create the options object with the locale property
+const options = reactive<NonNullable<VuePDFjsProps["options"]>>({
+  locale: {
+    code: "it",
+    ftl: it_FTL,
+  },
+});
+
+const { pdf: document, info, pages } = usePDF("<URL_TO_PDF>");
+
+console.log(document, info, pages);
+</script>
+
+<template>
+  <div id="app">
+    <!-- 3. Pass the options object to the VuePDFjs component -->
+    <VuePDFjs :source="document" :options="options" />
+  </div>
+</template>
+
+<style>
+html,
+body,
+#app {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+</style>
+```
+
+## Use the PDF.js eventBus
+
+In this example, we use the `pdfApp` property to access the `eventBus` and listen to the `pagesloaded` event. When the event is triggered, we search for a specific text in the document.
+
+```vue
+<script setup lang="ts">
+import { reactive, useTemplateRef } from "vue";
+import { VuePDFjs, usePDF } from "@tuttarealstep/vue-pdf.js";
+import "@tuttarealstep/vue-pdf.js/dist/style.css";
+import enUS_FTL from "@tuttarealstep/vue-pdf.js/l10n/en-US/viewer.ftl?raw";
+
+const vuepdfjs = useTemplateRef<typeof VuePDFjs>("vuepdfjs");
+
+const options = reactive<NonNullable<VuePDFjsProps["options"]>>({
+  locale: {
+    code: "en-US",
+    ftl: enUS_FTL,
+  },
+  toolbar: {
+    options: {
+      secondaryOpenFile: false, // Hide the open file button
+    },
+  },
+});
+
+const onPdfAppLoaded = () => {
+  console.log("pdf-app:loaded");
+  console.log(vuepdfjs.value?.pdfApp);
+
+  if (!vuepdfjs.value?.pdfApp) {
+    return;
+  }
+
+  // Wait for the pages to be loaded
+  vuepdfjs.value.pdfApp.eventBus.on("pagesloaded", (e: any) => {
+    // Search for a specific text in the document
+    vuepdfjs.value?.pdfApp.eventBus.dispatch("find", {
+      query: [
+        "Dynamic languages such as JavaScript are more difficult to compile than statically typed ones.",
+      ],
+      caseSensitive: false,
+      entireWord: false,
+      highlightAll: true,
+    });
+  });
+};
+
+const {
+  pdf: document,
+  info,
+  pages,
+} = usePDF("compressed.tracemonkey-pldi-09.pdf");
+
+console.log(document, info, pages);
+</script>
+
+<template>
+  <div id="app">
+    <VuePDFjs
+      ref="vuepdfjs"
+      :source="document"
+      :options="options"
+      @pdf-app:loaded="onPdfAppLoaded"
+    />
+  </div>
+</template>
+
+<style>
+html,
+body,
+#app {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+</style>
+```

docs/examples/nuxt-example.md

@@ -0,0 +1,118 @@
+# Usage with Nuxt
+
+If you want to use `@tuttarealstep/vue-pdf.js` in a Nuxt project, you can follow these steps.
+
+## Create a "client-only" component
+
+In this example we will use the `@tuttarealstep/vue-pdf.js` component to display a PDF file and highlight some text.
+
+Create a new component in the `components` directory, for example `PDFViewer.client.vue`
+
+```vue
+<script setup lang="ts">
+// 1. Import the component and the styles
+import { VuePDFjs } from "@tuttarealstep/vue-pdf.js";
+import "@tuttarealstep/vue-pdf.js/dist/style.css";
+
+// 2. Import the FTL file
+import it_FTL from "@tuttarealstep/vue-pdf.js/l10n/it/viewer.ftl?raw";
+
+// 3. Define the component props if needed
+const props = defineProps<{
+  source: string;
+  highlightText?: string | string[];
+}>();
+
+// 4. Create the template ref for the VuePDFjs component
+const pdfComponent = useTemplateRef<typeof VuePDFjs>("pdfComponent");
+
+// 5. Create the options object with the locale property
+const options = reactive({
+  locale: {
+    code: "it",
+    ftl: it_FTL,
+  },
+  // You can add more options here
+});
+
+// 6. Create the function to set the highlight
+const setHighlight = (text: string | string[]) => {
+  if (pdfComponent.value && pdfComponent.value.pdfApp) {
+    pdfComponent.value.pdfApp?.eventBus?.dispatch("find", {
+      query: text,
+      caseSensitive: false,
+      entireWord: false,
+      highlightAll: true,
+    });
+  }
+};
+
+// 7. Create the function to listen to the "pagesloaded" event
+const onPdfAppLoaded = () => {
+  if (!pdfComponent.value?.pdfApp) {
+    return;
+  }
+
+  pdfComponent.value.pdfApp.eventBus.on("pagesloaded", (e: any) => {
+    if (props.highlightText) {
+      setHighlight(props.highlightText);
+    }
+  });
+};
+
+// 8. Watch the props to set the highlight
+watch(
+  () => props.highlightText,
+  (newVal) => {
+    if (newVal) setHighlight(newVal);
+  }
+);
+
+// 9. Watch the source prop to set the highlight
+watch(
+  () => props.source,
+  (newVal) => {
+    if (newVal && props.highlightText) setHighlight(props.highlightText);
+  }
+);
+</script>
+<template>
+  <div class="pdf-viewer-container">
+    <VuePDFjs
+      ref="pdfComponent"
+      :source="source"
+      :options="options"
+      @pdf-app:loaded="onPdfAppLoaded"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.pdf-viewer-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: relative;
+}
+</style>
+```
+
+## Use the component in a page
+
+Now you can use the `PDFViewer.client.vue` component in a Nuxt page.
+
+Create a new page in the `pages` directory, for example `pdf-viewer.vue`
+
+```vue
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+const pdfUrl = "<URL_TO_PDF>";
+</script>
+<template>
+  <!-- You can use the component in a client-only block -->
+  <ClientOnly>
+    <PDFViewer :source="pdfUrl" :highlight-text="'text to highlight'" />
+  </ClientOnly>
+</template>
+```