Add Qr code to comment

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
@@ -102,6 +103,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 +262,7 @@ jobs:
           preview-branch: gh-pages
           umbrella-dir: pr-preview
           action: auto
+          qr-code: false
 ```
 
 ...and an accompanying main deployment workflow:

action.yml

@@ -77,6 +77,10 @@ inputs:
       all other events. `auto` is the default value.
     required: false
     default: auto
+  qr-code:
+    description: Whether to show a QR code in the preview comment for easy mobile access
+    required: false
+    default: false
 
 outputs:
   deployment-action:
@@ -136,6 +140,25 @@ 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
+        raw_qr=$(node lib/generate-qr.js "${{ env.preview_url }}")
+        {
+          echo 'qr_code<<EOFQR'
+          echo "<p></p> <details><summary>📱 Scan QR code to open on mobile</summary><br>"
+          echo "$raw_qr"
+          echo "</details><br>"
+          echo 'EOFQR'
+        } >> $GITHUB_OUTPUT
+      shell: bash
+
     - name: Leave a comment after deployment
       if: |
         env.deployment_action == 'deploy' &&
@@ -149,6 +172,7 @@ runs:
           :---:
           | <p></p> :rocket: View preview at <br> ${{ env.preview_url }} <br><br>
           | <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>
+          ${{ inputs.qr-code == 'true' && steps.qr.outputs.qr_code || '' }}
 
     - name: Remove preview directory
       if: env.deployment_action == 'remove'

lib/generate-qr.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+
+import { renderUnicodeCompact } from 'uqr'
+
+const url = process.argv[2]
+if (!url) {
+  console.error("Please provide a URL as an argument")
+  process.exit(1)
+}
+
+try {
+  const qrCode = renderUnicodeCompact(url)
+  console.log('\n```\n' + qrCode + '\n```')
+} 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"