DOP-5830: Update previews to use Bump (#824)

rayangler · web-flow · commit 0a5bf413013d · 2025-07-24T07:22:06.000-04:00
diff --git a/.github/scripts/branded_preview.sh b/.github/scripts/branded_preview.sh
@@ -32,21 +32,70 @@ done
 
 links=""
 for url in "${all_urls[@]}"; do
+    URL_COUNT=$((URL_COUNT + 1))
     filename=$(basename "$url")
     echo "$url"
-    link="https://www.mongodb.com/docs/openapi/preview/?src=$url"
-    echo "Branded preview: ${link}"
-    links="${links}<li><a href='$link' target=\"_blank\">${filename}</a></li>"
+    links="${links}<div class='url-container'><button onclick=\"generateLink(this, 'preview-url-$URL_COUNT', '$url')\">Generate preview link for ${filename}</button><span class='preview-span' id='preview-url-$URL_COUNT'></span></div>"
 done
 
+# Uses a proxied endpoint for creating preview links to prevent CORS issues
 cat << EOF > branded-preview.html
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <style>
+            .url-container {
+                margin: 16px 0;
+            }
+
+            .preview-span {
+                margin-left: 8px;
+            }
+        </style>
+    </head>
     <body>
         <h2>Preview docs for:</h2>
-        <ul>
-          ${links}
-        </ul>
+        ${links}
+        <script>
+            async function generateLink(buttonEl, elId, url) {
+                const previewSpan = document.getElementById(elId);
+                if (!previewSpan) {
+                    return;
+                }
+
+                buttonEl.disabled = true;
+                previewSpan.innerHTML = 'Loading...';
+
+                try {
+                    const buildPreviewEndpoint = 'https://populate-data-extension.netlify.app/.netlify/functions/create-bump-preview';
+                    const res = await fetch(buildPreviewEndpoint, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({ url }),
+                    });
+
+                    if (res.status === 201) {
+                        const { public_url: previewUrl } = await res.json();
+                        previewSpan.innerHTML = '';
+                        const link = document.createElement('a');
+                        link.href = previewUrl;
+                        link.textContent = previewUrl;
+                        link.target = '_blank';
+                        previewSpan.appendChild(link);
+                    }
+
+                    if (res.status === 422) {
+                        const resText = await res.text();
+                        previewSpan.innerHTML = resText;
+                    }
+                } catch (err) {
+                    console.error(err);
+                    previewSpan.innerHTML = 'Error!';
+                }
+            }
+        </script>
     </body>
 </html>
 EOF
