feat: update playground page with iframe preview

land-server/tpls/playground.hbs

@@ -61,13 +61,15 @@
                 <div style="height:4.5rem"
                     class="bg-light d-flex justify-content-between border-bottom align-items-center">
                     <div class="input-group input-group-sm px-4">
-                        <input type="url" value="{{project.url}}" class="form-control" placeholder="access domain"
-                            readonly>
-                        <button class="btn btn-outline-secondary" type="button"><i
-                                class='bx bx-refresh me-2'></i>Refresh</button>
+                        <input id="preview-url" type="url" value="{{project.url}}" class="form-control" placeholder="access domain" />
+                        <button data-x-url="{{project.url}}" id="refresh-btn" class="btn btn-outline-success"
+                            type="button"><i class='bx bx-refresh me-2'></i>Refresh</button>
                     </div>
                 </div>
-                <div class="body" style="height: calc(100vh - 4.5rem)"></div>
+                <div class="body" style="height: calc(100vh - 4.5rem)">
+                    <iframe src="{{project.url}}" frameborder="0" id="playground-preview"
+                        sandbox="allow-forms allow-modals allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox"></iframe>
+                </div>
             </div>
         </div>
     </div>

land-server/tpls/static/css/style.css

@@ -112,4 +112,9 @@ html[data-bs-theme='dark'] .project-item>a:hover {
 
 #msg-toast {
     width: 440px;
+}
+
+#playground-preview {
+    width: 100%;
+    height: 100%;
 }

land-server/tpls/static/js/playground.js

@@ -45,6 +45,7 @@ async function handleCheck() {
         }
         if (data.deploy_status == "success") {
             setWaitingDone();
+            document.getElementById("refresh-btn").click();
             return;
         }
         setWaitingMessage(data.deploy_status);
@@ -99,12 +100,28 @@ async function handleCheck() {
     });
 })();
 
+// convert data-x-timeago to local time string
 (() => {
-    // convert data-x-timeago to local time string
     const xTimeElements = document.querySelectorAll('[data-x-timeago]');
     xTimeElements.forEach((element) => {
         const xTime = element.getAttribute('data-x-timeago');
         const date = new Date(xTime);
         element.innerText = timeago.format(date, "en_US");
     });
-})();
+})();
+
+// refresh playground button
+(() => {
+    let btn = document.getElementById("refresh-btn");
+    btn.addEventListener("click", function () {
+        let iframe = document.getElementById("playground-preview");
+        let url = btn.getAttribute("data-x-url");
+        let new_url = document.getElementById("preview-url").value;
+        if (!new_url.startsWith(url)) {
+            showMessage("Only support refresh same origin: " + url);
+            return;
+        }
+        console.log("iframe", new_url);
+        iframe.src = new_url;
+    })
+})();

land-worker/src/agent/sync.rs

@@ -6,7 +6,7 @@ use reqwest::header::AUTHORIZATION;
 use serde::{Deserialize, Serialize};
 use std::collections::HashMap;
 use tokio::sync::Mutex;
-use tracing::{debug, info, instrument, warn};
+use tracing::{info, instrument, warn};
 
 #[derive(Debug, Serialize, Deserialize)]
 pub struct Request {
@@ -68,7 +68,7 @@ async fn sync(addr: String, token: String, dir: String) -> Result<()> {
     if !status.is_success() {
         // if not modified, just return
         if status == reqwest::StatusCode::NOT_MODIFIED {
-            debug!("Not change, checksum: {}", data.checksum);
+            // debug!("Not change, checksum: {}", data.checksum);
             return Ok(());
         }
         warn!("Bad status code: {}", status);