qr

dangerFileContent.ts

@@ -221,8 +221,8 @@ async function addDeployPreviewUrls() {
 
   async function formatMdLinkWithQrCode(path: string) {
     const url = String(formatFileToLink(path));
-    const qrDataUrl = await QRCode.toDataURL(url, {});
-    return `<details><summary>[${path}](${url})</summary>![${path}](${qrDataUrl})</details>`;
+    const qr = `${netlifyPreview}edge-functions/qr-code?text=${encodeURIComponent(url)}`;
+    return `<details><summary><a href="${url}">${path}</a></summary><img src="${qr}" alt="QR code" /></details>`;
   }
 
   const files = [...danger.git.created_files, ...danger.git.modified_files];

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',
+};