Update docs and readme

README.md

@@ -19,50 +19,38 @@
   <h2><a href="https://tato30.github.io/vue-pdf/">📖Documentation</a></h2>
 </div>
 
-## Introduction
+# Introduction
 
-VuePDF is a **Vue 3** component for pdf.js that allows you to flexibly display PDF pages within your project.
+VuePDF is a **client-side** component for **Vue 3** that allows you to flexibly render PDF pages within your project. This library wraps `pdf.js` library so all main features of `pdf.js` are supported by `VuePDF` as well. 
 
 ## Installation
 
-```console
+```sh
 npm i @tato30/vue-pdf
-```
-
-```console
 yarn add @tato30/vue-pdf
 ```
 
 ## Basic Usage
 
+The most basic usage is as simple as import the `VuePDF` and `usePDF` and use them on your project :)
+
 ```vue
 <script setup>
 import { VuePDF, usePDF } from '@tato30/vue-pdf'
 
-const { pdf, pages, info } = usePDF('document.pdf')
-
-console.log(`Document has ${pages} pages`)
-console.log(`Document info: ${info}`)
+const { pdf } = usePDF('sample.pdf')
 </script>
 
 <template>
   <VuePDF :pdf="pdf" />
 </template>
 ```
 
-## Reference
-
-* [Props](./docs/guide/props.md)
-* [Events](./docs/guide/events.md)
-* [Methods](./docs/guide/methods.md)
-* [Slots](./docs/guide/slots.md)
-
-
 ## Working With Layers
 
 ### Text and Annotations
 
-This component supports text-selection and annotation-interaction by enabling them with `text-layer` and `annotation-layer` props respectively, but for this layers renders correctly is necessary setting `css` styles, it can be done by importing default styles from `@tato30/vue-pdf/style.css`.
+This component supports text selection and annotation interaction by enabling them with `text-layer` and `annotation-layer` props respectively, but for this layers renders correctly is necessary set some `css` styles, it can be done by importing default styles from `@tato30/vue-pdf/style.css`.
 
 ```vue
 <script setup>
@@ -77,13 +65,7 @@ const { pdf } = usePDF('sample.pdf')
 </template>
 ```
 
-You can also create your own custom styles and set them in your project, use this examples as guide:
-
-- [text-layer styles](https://github.com/mozilla/pdf.js/blob/master/web/text_layer_builder.css)
-- [annotation-layer styles](https://github.com/mozilla/pdf.js/blob/master/web/annotation_layer_builder.css)
-
-### XFA Forms <badge type="tip" text="v1.7" vertical="middle" />
-
+### XFA Forms
 XFA forms also can be supported by enabling them from `usePDF`.
 
 ```vue
@@ -104,24 +86,72 @@ const { pdf } = usePDF({
 
 ## Server-Side Rendering
 
-`VuePDF` is a client-side library, so if you are working with SSR frameworks like `nuxt`, surely will throw error during building stage, if that the case, you could wrap library in some "client only" directive or component, also `usePDF` should be wrapped.
+`VuePDF` is a client-side library, so if you are working with a SSR framework like `nuxt`, surely it will throw an error during the building stage, if that is the case, you could wrap `VuePDF` in some sort of "client only" directive or component, also `usePDF` should be wrapped.
+
+## Supporting Non-Latin characters
+
+If you are looking for display non-latin text or you are getting a warning like:
+> Warning: Error during font loading: CMapReaderFactory not initialized, see the useWorkerFetch parameter
+
+you will probably need to copy the `cmaps` directory from `node_modules/pdfjs-dist` to your project's `public` directory, don't worry about no having `pdfjs-dist` it's installed alongside `vue-pdf` package.
+
+
+```
+.
+├─ node_modules
+│  ├─ pdfjs-dist
+│  │  └─ cmaps    <--- Copy this directory
+├─ src
+├─ public         
+|  ├─ *cmaps*     <--- Paste it here!
+├─ package.json
+|  ...
+```
+
+With that made the `cmaps` will be available on relative path `/cmaps/`, now you need the tell `usePDF` uses that `cmaps` url:
+
+```js
+const { pdf } = usePDF({
+  url: pdfsource,
+  cMapUrl: '/cmaps/',
+})
+```
+
+## Supporting legacy browsers
+
+If you need to support legacy browsers you could use any polyfill to patch modern functions, but this workaround only works on the **main** thread, the *worker* that runs in other thread will not get reached by any polyfills you apply. 
+
+This package embed and configure the `pdf.js` *worker* for you but in case you need to support legacy environments you will need to configure the `legacy` *worker* by adding this code:
+
+```vue
+<script setup lang="ts">
++ import * as PDFJS from 'pdfjs-dist'; 
++ import LegacyWorker from 'pdfjs-dist/legacy/build/pdf.worker.min?url'; 
+import { VuePDF, usePDF } from '@tato30/vue-pdf';
+
++ PDFJS.GlobalWorkerOptions.workerSrc = LegacyWorker 
+
+const { pdf } = usePDF(/** */)
+</script>
+```
+
+Just be aware to set the `legacy` worker before use `usePDF`.
 
 ## Contributing
 
 Any idea, suggestion or contribution to the code or documentation are very welcome.
 
 ```sh
 # Clone the repository
-git clone https://github.com/TaTo30/VuePDF.git
-
+git clone https://github.com/TaTo30/vue-pdf.git
 # Change to code folder
-cd VuePDF
-
+cd vue-pdf
 # Install node_modules
 npm install
-
 # Run code with hot reload
 npm run dev
+# Run docs
+npm run dev:docs
 ```
 
 ## Looking for maintainers and current status

docs/guide/introduction.md

@@ -119,21 +119,39 @@ const { pdf } = usePDF({
 })
 ```
 
+## Supporting legacy browsers
+
+If you need to support legacy browsers you could use any polyfill to patch modern functions, but this workaround only works on the **main** thread, the *worker* that runs in other thread will not get reached by any polyfills you apply. 
+
+This package embed and configure the `pdf.js` *worker* for you but in case you need to support legacy environments you will need to configure the `legacy` *worker* by adding this code:
+
+```vue
+<script setup lang="ts">
+import * as PDFJS from 'pdfjs-dist'; // [!code ++]
+import LegacyWorker from 'pdfjs-dist/legacy/build/pdf.worker.min?url'; // [!code ++]
+import { VuePDF, usePDF } from '@tato30/vue-pdf';
+
+PDFJS.GlobalWorkerOptions.workerSrc = LegacyWorker // [!code ++]
+
+const { pdf } = usePDF(/** */)
+</script>
+```
+
+Just be aware to set the `legacy` worker before use `usePDF`.
+
 ## Contributing
 
 Any idea, suggestion or contribution to the code or documentation are very welcome.
 
 ```sh
 # Clone the repository
 git clone https://github.com/TaTo30/vue-pdf.git
-
 # Change to code folder
 cd vue-pdf
-cd vue-pdf/docs # In case you want to update docs
-
 # Install node_modules
 npm install
-
 # Run code with hot reload
 npm run dev
+# Run docs
+npm run dev:docs
 ```