ci: migrate docs to back to GitHub pages (#422)

Migrate away from Netlify after reading this story:

https://www.reddit.com/r/webdev/comments/1b14bty/netlify_just_sent_me_a_104k_bill_for_a_simple/

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,7 +7,7 @@ assignees: ''
 ---
 
 **Describe the bug**
-A clear and concise description of what the bug is. Can you reproduce this issue with [one of the demos](https://vue-qrcode-reader.netlify.app/demos/HandleErrors.html)?
+A clear and concise description of what the bug is. Can you reproduce this issue with [one of the demos](https://gruhn.github.io/vue-qrcode-reader/demos/FullDemo.html)?
 
 **To Reproduce**
 Please provide a link to a minimal reproduction of the bug. For example on jsFiddle, CodePen, etc. Please don't attach a ZIP file with your entire code base. I know this is additional effort but if it takes too much time to reproduce your issue you'll likely won't get help at all.

.github/workflows/main.yml

@@ -21,15 +21,19 @@ jobs:
           node-version: 18
           cache: pnpm
       - name: Install & Build
+        env: 
+          VITEPRESS_BASE: /vue-qrcode-reader/
         run: |
           pnpm install
           pnpm run build
-      #     pnpm run docs:build
-      # - name: Deploy Docs
-      #   uses: JamesIves/[email protected]
-      #   with:
-      #     branch: gh-pages
-      #     folder: docs/.vitepress/dist
+          pnpm run docs:build
+      - name: Deploy Docs
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: docs/.vitepress/dist
+          clean-exclude: pr-preview
+          force: false
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/preview.yml

@@ -0,0 +1,43 @@
+# https://github.com/rossjrw/pr-preview-action
+name: deploy preview docs
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+concurrency: preview-${{ github.ref }}
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - run: corepack enable
+
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 18
+          cache: pnpm
+
+      - name: Install & Build
+        if: github.event.action != 'closed' # You might want to skip the build if the PR has been closed
+        env: 
+          VITEPRESS_BASE: /vue-qrcode-reader/pr-preview/pr-${{ github.event.number }}/
+        run: |
+          pnpm install
+          pnpm run build
+          pnpm run docs:build
+
+      - name: Deploy
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: ./docs/.vitepress/dist/

CONTRIBUTING.md

@@ -12,7 +12,7 @@ Clone the repository and run
 pnpm install
 ```
 
-We use a locally served version of the [demo page](https://vue-qrcode-reader.netlify.app/) during development.
+We use a locally served version of the [demo page](https://gruhn.github.io/vue-qrcode-reader/) during development.
 To get that started run
 
 ```

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="https://vue-qrcode-reader.netlify.app/logo.png" alt="Logo" width="240" height="240" style="max-width: 100%;">
+  <img src="https://gruhn.github.io/vue-qrcode-reader/logo.png" alt="Logo" width="240" height="240" style="max-width: 100%;">
 
   <br>
   <br>
@@ -52,8 +52,8 @@
 
   <br>
   <br>
-  <a href="https://vue-qrcode-reader.netlify.app/demos/FullDemo.html">live demos</a> |
-  <a href="https://vue-qrcode-reader.netlify.app/api/QrcodeStream.html">api reference</a>
+  <a href="https://gruhn.github.io/vue-qrcode-reader/demos/FullDemo.html">live demos</a> |
+  <a href="https://gruhn.github.io/vue-qrcode-reader/api/QrcodeStream.html">api reference</a>
 </p>
 
 A set of Vue.js components for detecting QR codes and [various other barcode formats](https://github.com/Sec-ant/barcode-detector?tab=readme-ov-file#barcode-detector) right in the browser:
@@ -148,7 +148,7 @@ Use kebab-case to reference them in your templates:
 
 #### I don't see the camera when using `QrcodeStream`.
 
-- Check if it works on the demo page. Especially the [Handle Errors](https://vue-qrcode-reader.netlify.app/demos/HandleErrors.html) demo,
+- Check if it works on the demo page. Especially the [Handle Errors](https://gruhn.github.io/vue-qrcode-reader/demos/HandleErrors.html) demo,
   since it renders error messages.
   - The demo works but it doesn't work in my project: Listen for the `error` event to investigate errors.
   - The demo doesn't work: Carefully review the Browser Support section above.
@@ -169,7 +169,7 @@ Use kebab-case to reference them in your templates:
 
 The default value for the `formats` prop is `"['qr_code']"`, which reflects the setting before the `formats` prop was available.
 You'll need to add [other barcode formats](https://github.com/Sec-ant/barcode-detector?tab=readme-ov-file#barcode-detector) to this prop to detect those types of barcodes. 
-Check out [this demo](https://vue-qrcode-reader.netlify.app/demos/FullDemo.html).
+Check out [this demo](https://gruhn.github.io/vue-qrcode-reader/demos/FullDemo.html).
 
 #### How to make it work with Vue 2?
 
@@ -191,10 +191,10 @@ even if the front camera actually has a flashlight.
 
 Furthermore, `torch` is not supported on iOS at all (last checked iOS 17.1).
 
-Visit [this page](https://vue-qrcode-reader.netlify.app/select-camera-demo.html) with your device.
+Visit [this page](https://gruhn.github.io/vue-qrcode-reader/select-camera-demo.html) with your device.
 The list of links represents all cameras installed on the device.
 If you click, the camera should be loaded.
 Below the camera view the JSON object of "capabilities" is printed.
 If it doesn't contain the key/value pair `"torch": true` then flashlight is not supported for that camera.
 
-This JSON object provided as payload of the [`camera-on` event](https://vue-qrcode-reader.netlify.app/api/QrcodeStream.html#camera-on).
+This JSON object provided as payload of the [`camera-on` event](https://gruhn.github.io/vue-qrcode-reader/api/QrcodeStream.html#camera-on).

docs/.vitepress/config.ts

@@ -1,11 +1,18 @@
 import { defineConfig } from 'vitepress'
 import { withPwa } from '@vite-pwa/vitepress'
 
+const { VITEPRESS_BASE } = process.env
+
+if (VITEPRESS_BASE === undefined) {
+  throw new Error('env var VITEPRESS_BASE is undefined')
+}
+
 export default withPwa(
   defineConfig({
     description: 'A set of Vue.js components for detecting and decoding QR codes.',
     lang: 'en-US',
     lastUpdated: true,
+    base: VITEPRESS_BASE,
     themeConfig: {
       editLink: {
         pattern: 'https://github.com/gruhn/vue-qrcode-reader/edit/main/docs/:path'
@@ -101,8 +108,8 @@ export default withPwa(
     },
     pwa: {
       mode: 'development',
-      base: '/',
-      scope: '/',
+      base: VITEPRESS_BASE,
+      scope: VITEPRESS_BASE,
       registerType: 'autoUpdate',
       // injectRegister: 'inline',
       includeAssets: ['favicon.svg'],

package.json

@@ -66,7 +66,7 @@
     "workbox-window": "7.0.0"
   },
   "bugs": "https://github.com/gruhn/vue-qrcode-reader/issues",
-  "homepage": "https://vue-qrcode-reader.netlify.app",
+  "homepage": "https://gruhn.github.io/vue-qrcode-reader/",
   "keywords": [
     "vue",
     "vuejs",
@@ -78,4 +78,4 @@
   ],
   "license": "MIT",
   "repository": "github:gruhn/vue-qrcode-reader"
-}
+}