[code-infra] Qr code deploy urls

dangerFileContent.ts

@@ -1,8 +1,7 @@
 import { exec } from 'child_process';
 import type * as dangerModule from 'danger';
 import replaceUrl from '@mui-internal/api-docs-builder/utils/replaceUrl';
-// eslint-disable-next-line import/no-relative-packages
-import { loadComparison } from './scripts/sizeSnapshot';
+import { loadComparison } from 'size-snapshot';
 
 declare const danger: (typeof dangerModule)['danger'];
 declare const markdown: (typeof dangerModule)['markdown'];
@@ -187,7 +186,9 @@ async function reportBundleSize() {
   }
 }
 
-function addDeployPreviewUrls() {
+async function addDeployPreviewUrls() {
+  const netlifyPreview = `https://deploy-preview-${danger.github.pr.number}--material-ui.netlify.app/`;
+
   /**
    * The incoming path from danger does not start with `/`
    * e.g. ['docs/data/joy/components/button/button.md']
@@ -212,10 +213,14 @@ function addDeployPreviewUrls() {
         .replace('components/', 'react-');
     }
 
-    return url;
+    return new URL(url, netlifyPreview);
   }
 
-  const netlifyPreview = `https://deploy-preview-${danger.github.pr.number}--material-ui.netlify.app/`;
+  async function formatMdLinkWithQrCode(path: string) {
+    const url = String(formatFileToLink(path));
+    const qr = `${netlifyPreview}edge-functions/qr-code?text=${encodeURIComponent(url)}`;
+    return `<details><summary>page <a href="${url}">${path}</a></summary><img src="${qr}" alt="QR code" /></details>`;
+  }
 
   const files = [...danger.git.created_files, ...danger.git.modified_files];
 
@@ -224,24 +229,17 @@ function addDeployPreviewUrls() {
     .filter((file) => file.startsWith('docs/data') && file.endsWith('.md'))
     .slice(0, 5);
 
+  const docsMdLines = await Promise.all(docs.map(formatMdLinkWithQrCode));
+
   markdown(`
 ## Netlify deploy preview
 
-${
-  docs.length
-    ? docs
-        .map((path) => {
-          const formattedUrl = formatFileToLink(path);
-          return `- [${path}](${netlifyPreview}${formattedUrl})`;
-        })
-        .join('\n')
-    : netlifyPreview
-}
+${docsMdLines.length ? docsMdLines.join('\n') : await formatMdLinkWithQrCode('/')}
 `);
 }
 
 async function run() {
-  addDeployPreviewUrls();
+  await addDeployPreviewUrls();
 
   switch (dangerCommand) {
     case 'prepareBundleSizeReport':

netlify.toml

@@ -1,3 +1,9 @@
+# run `pnpm --package netlify-cli dlx netlify dev --cwd .` to run functions locally
+[dev]
+  command = "pnpm docs:dev"
+  targetPort = 3000
+  port = 8888
+
 [build]
   # Directory (relative to root of your repo) that contains the deploy-ready
   # HTML files and assets generated by the build. If a base directory has

netlify/edge-functions/qr-code.ts

@@ -0,0 +1,33 @@
+import qr from 'https://esm.sh/[email protected]';
+
+export default async function handler(req: Request) {
+  const params = new URL(req.url).searchParams;
+  const text = params.get('text');
+
+  if (!text) {
+    return new Response('Missing text query parameter', { status: 400 });
+  }
+
+  if (text.length > 1000) {
+    return new Response('Text query parameter is too long', { status: 400 });
+  }
+
+  const data = qr.imageSync(text, { type: 'png' });
+
+  const v = params.get('v') || '';
+
+  const cacheKey = new URLSearchParams();
+  cacheKey.append('text', text);
+  cacheKey.append('v', v);
+
+  return new Response(data, {
+    headers: {
+      'Content-Type': 'image/png',
+      'Cache-Control': 'public, max-age=31536000, immutable', // Cache for 1 year
+    },
+  });
+}
+export const config = {
+  cache: 'manual',
+  path: '/edge-functions/qr-code',
+};

package.json

@@ -102,7 +102,8 @@
     "@netlify/functions": "^3.0.0",
     "@slack/bolt": "^4.2.0",
     "execa": "^9.5.2",
-    "google-auth-library": "^9.15.0"
+    "google-auth-library": "^9.15.0",
+    "qrcode": "^1.5.4"
   },
   "devDependencies": {
     "@argos-ci/core": "^2.12.0",