Grammar overhaul and stackblitz demo added

TaTo30 · May 26, 2024 · 7c4387d · 7c4387d
1 parent 61b5651
commit 7c4387d
Show file tree

Hide file tree

Showing 7 changed files with 612 additions and 655 deletions.
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -5,6 +5,9 @@ export default {
   description: 'PDF component for Vue 3',
   base: '/vue-pdf/',
   lastUpdated: true,
+  head: [
+    ['link', { rel: 'icon', type: 'image/png', href: '/logo.png' }],
+  ],
   themeConfig: {
     logo: '/logo.png',
     editLink: {

diff --git a/docs/.vitepress/styles/index.scss b/docs/.vitepress/styles/index.scss
@@ -1,3 +1,8 @@
+:root{
+  --vp-home-hero-image-filter: blur(100px);
+  --vp-home-hero-image-background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 1000 1000%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3CclipPath id=%22a%22%3E%3Cpath fill=%22currentColor%22 d=%22M952.5 647Q905 794 780 885t-280 91q-155 0-280-91T47.5 647Q0 500 47.5 353T220 115q125-91 280-91t280 91q125 91 172.5 238t0 294Z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg clip-path=%22url(%23a)%22%3E%3Cpath fill=%22%2399ecc7%22 d=%22M952.5 647Q905 794 780 885t-280 91q-155 0-280-91T47.5 647Q0 500 47.5 353T220 115q125-91 280-91t280 91q125 91 172.5 238t0 294Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+
 .button-example {
   background-color: var(--vp-c-brand-2);
   color: white;

diff --git a/docs/guide/composables.md b/docs/guide/composables.md
@@ -8,7 +8,7 @@ outline: [2,3]
 
 This package provides a default composable named `usePDF` that loads and prepare the PDF Document for it usage with `VuePDF` component, also let you get some basic information and properties about the document.
 
-Keep in mind that `usePDF` use the same [DocumentInitParameter](https://github.com/mozilla/pdf.js/blob/38287d943532eee939ceffbe6861163f93805ca7/src/display/api.js#L145) as `pdf.js`, so you could decide how `pdf.js` should loads your PDF and then make use of more of `pdf.js` features that are not supported by `VuePDF` by default.
+Keep in mind that `usePDF` use the same [DocumentInitParameter](https://github.com/mozilla/pdf.js/blob/38287d943532eee939ceffbe6861163f93805ca7/src/display/api.js#L145) as `pdf.js`, so you could decide how `pdf.js` should loads your PDF and then make use of more of `pdf.js` features that are not included in `VuePDF` by default.
 
 ```vue
 <script setup>
@@ -24,7 +24,7 @@ const { pdf, pages, info } = usePDF('sample.pdf')
 
 ### Reactivity
 
-`usePDF` is also reactive if you use a `ref<src>` instead of a plain `src`, when the value of `ref` changes the returned values also chage.
+`usePDF` is also reactive if you use a `ref<src>` instead of a plain `src`, when the value of `ref` changes the returned values also will chage.
 
 ```vue
 <script setup>
@@ -135,7 +135,7 @@ function doSomething() {
 
 ## Make your own composable
 
-Using `usePDF` it's not required, you can use the `pdf.js` API in the component or build your own composable by yourself. Just need to be sure to send on [`pdf`](./props.md#pdf) prop a `shallowRef | ref` [PDFDocumentLoadingTask](https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib-PDFDocumentLoadingTask.html) object.
+Using `usePDF` it's not required, you can use the `pdf.js` API in your components or build your own composable yourself. Just need to be sure to send on [`pdf`](./props.md#pdf) prop a `shallowRef | ref` [PDFDocumentLoadingTask](https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib-PDFDocumentLoadingTask.html) object.
 
 ```vue
 <script setup>

diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md
@@ -1,6 +1,10 @@
+---
+outline: [2,3]
+---
+
 # Introduction
 
-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` project so all main features of `pdf.js` are supported by `VuePDF` as well. 
+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
 
@@ -9,13 +13,11 @@ VuePDF is a **client-side** component for **Vue 3** that allows you to flexibly
 npm i @tato30/vue-pdf
 ```
 
-```sh [npm]
+```sh [yarn]
 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 :)

diff --git a/docs/index.md b/docs/index.md
@@ -19,8 +19,8 @@ hero:
     - text: Examples
       link: /examples/basic/one_page
       theme: alt
-    - text: View on GitHub
-      link: https://github.com/TaTo30/vue-pdf
+    - text: Try on StackBlitz
+      link: https://stackblitz.com/edit/vue-pdf-playground?file=src%2FApp.vue
       theme: alt
 
 features: