generate qr-code with uqr

Author: lredoban

README.md

@@ -11,6 +11,7 @@ Features:
   you and your team can collaborate on new features faster
 - Updates the deployment and the comment whenever new commits are pushed to
   the pull request
+- Can optionally include a QR code in the preview comment for easy mobile access
 - Cleans up after itself — removes deployed previews when the pull
   request is closed
 - Can be configured to override any of these behaviours
@@ -87,6 +88,7 @@ jobs:
         uses: rossjrw/pr-preview-action@v1
         with:
           source-dir: ./build/
+          qr-code: true  # Optional: Add QR code
 ```
 
 ## Inputs (configuration)
@@ -102,6 +104,7 @@ Input parameter | Description
 `pages-base-url` | Base URL to use when providing a link to the preview site. <br><br> Default: The pull request's target repository's default GitHub Pages URL (e.g. `rossjrw.github.io/pr-preview-action/`)
 `pages-base-path` | Path that GitHub Pages is being served from, as configured in your repository settings, e.g. `docs/`. When generating the preview URL path, this is removed from the beginning of the file path. <br><br> Default: `.` (repository root)
 `comment` <br> (boolean) | Whether to leave a [sticky comment](https://github.com/marocchino/sticky-pull-request-comment) on the PR after the preview is built.<br> The comment may be added before the preview finishes deploying. <br><br> Default: `true`
+`qr-code` <br> (boolean) | Whether to include a QR code in the preview comment for easy mobile access. The QR code links to the preview URL. <br><br> Default: `false`
 `token` | Authentication token for the preview deployment. <br> The default value works for non-fork pull requests to the same repository. For anything else, you will need a [Personal Access Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) with permission to access it, and [store it as a secret](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions) in your repository. E.g. you might name that secret 'PREVIEW_TOKEN' and use it with `token: ${{ secrets.PREVIEW_TOKEN }}`. <br><br> Default: `${{ github.token }}`, which gives the action permission to deploy to the current repository.
 `action` <br> (enum) | Determines what this action will do when it is executed. Supported values: <br><br> <ul><li>`deploy` - create and deploy the preview, overwriting any existing preview in that location.</li><li>`remove` - remove the preview.</li><li>`auto` - determine whether to deploy or remove the preview based on [the emitted event](https://docs.github.com/en/developers/webhooks-and-events/webhooks/webhook-events-and-payloads#pull_request). If the event is `pull_request`, it will deploy the preview when the event type is `opened`, `reopened` and `synchronize`, and remove it on `closed` events. Does not do anything for other events or event types, even if you explicitly instruct the workflow to run on them.</li><li>`none` and all other values: does not do anything.</li></ul> Default: `auto`
 
@@ -260,6 +263,7 @@ jobs:
           preview-branch: gh-pages
           umbrella-dir: pr-preview
           action: auto
+          qr-code: true
 ```
 
 ...and an accompanying main deployment workflow:

action.yml

@@ -140,6 +140,19 @@ runs:
         commit-message: Deploy preview for PR ${{ github.event.number }} 🛫
         force: false
 
+    - name: Generate QR Code
+      if: |
+        env.deployment_action == 'deploy' &&
+        env.deployment_status == 'success' &&
+        (inputs.qr-code == 'true' || inputs.qr-code == true)
+      id: qr
+      run: |
+        cd "$GITHUB_ACTION_PATH"
+        npm install
+        qr_code=$(node lib/generate-qr.js "${{ env.preview_url }}")
+        echo "qr_code=| <p></p> ![QR Code]($qr_code) <br><br>" >> $GITHUB_OUTPUT
+      shell: bash
+
     - name: Leave a comment after deployment
       if: |
         env.deployment_action == 'deploy' &&
@@ -152,6 +165,7 @@ runs:
           [PR Preview Action](https://github.com/${{ env.action_repository }}) ${{ env.action_version }}
           :---:
           | <p></p> :rocket: View preview at <br> ${{ env.preview_url }} <br><br>
+          ${{ inputs.qr-code == 'true' && steps.qr.outputs.qr_code || '' }}
           | <h6>Built to branch [`${{ inputs.preview-branch }}`](${{ github.server_url }}/${{ inputs.deploy-repository }}/tree/${{ inputs.preview-branch }}) at ${{ env.action_start_time }}. <br> Preview will be ready when the [GitHub Pages deployment](${{ github.server_url }}/${{ inputs.deploy-repository }}/deployments) is complete. <br><br> </h6>
 
     - name: Remove preview directory

lib/generate-qr.js

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+
+import { renderSVG } from 'uqr'
+
+const url = process.argv[2]
+if (!url) {
+  console.error("Please provide a URL as an argument")
+  process.exit(1)
+}
+
+try {
+  const svgString = renderSVG(url, {pixelSize: 2})
+  const base64 = Buffer.from(svgString).toString('base64')
+  console.log(`data:image/svg+xml;base64,${base64}`)
+} catch (error) {
+  console.error("Error generating QR code:", error)
+  process.exit(1)
+}

package.json

@@ -1,6 +1,10 @@
 {
   "name": "pr-preview",
   "version": "0.0.0",
+  "type": "module",
+  "dependencies": {
+    "uqr": "^0.1.2"
+  },
   "devDependencies": {
     "prettier": "2.5.1",
     "prettier-plugin-sh": "^0.8.1"