From 8eb06023434892ffc01259403ce9415c0cd63a8a Mon Sep 17 00:00:00 2001 From: Niklas Gruhn Date: Tue, 27 Feb 2024 11:24:50 +0100 Subject: [PATCH] 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 | 2 +- .github/workflows/main.yml | 16 +++++++---- .github/workflows/preview.yml | 43 ++++++++++++++++++++++++++++ CONTRIBUTING.md | 2 +- README.md | 14 ++++----- docs/.vitepress/config.ts | 11 +++++-- package.json | 4 +-- 7 files changed, 73 insertions(+), 19 deletions(-) create mode 100644 .github/workflows/preview.yml diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index f31c1193..61b84771 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.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. diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 7e34cb65..37bb4fbc 100644 --- a/.github/workflows/main.yml +++ b/.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/github-pages-deploy-action@4.1.4 - # with: - # branch: gh-pages - # folder: docs/.vitepress/dist + pnpm run docs:build + - name: Deploy Docs + uses: JamesIves/github-pages-deploy-action@4.1.4 + with: + branch: gh-pages + folder: docs/.vitepress/dist + clean-exclude: pr-preview + force: false - name: Release env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml new file mode 100644 index 00000000..73c11a23 --- /dev/null +++ b/.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/ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6185fc9f..d8dfd41e 100644 --- a/CONTRIBUTING.md +++ b/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 ``` diff --git a/README.md b/README.md index 8aebdf78..bcf32b44 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@

- Logo + Logo

@@ -52,8 +52,8 @@

- live demos | - api reference + live demos | + api reference

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). diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 2636abff..f5673693 100644 --- a/docs/.vitepress/config.ts +++ b/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'], diff --git a/package.json b/package.json index 1f00b32e..08d84727 100644 --- a/package.json +++ b/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" -} +} \ No newline at end of file