Fix #33

Author: thomaswilburn

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@babel/core": "^7.1.6",
     "@babel/preset-env": "^7.9.0",
+    "@nprapps/sidechain": "^1.1.1",
     "aws-sdk": "^2.359.0",
     "babelify": "^10.0.0",
     "body-parser": "^1.18.3",

server/index.js

@@ -28,6 +28,7 @@ module.exports = async function(config) {
 
   console.log("Setting middleware...");
   app.use(express.static("server/static"));
+  app.use("/node_modules", express.static("node_modules"));
   app.use(bodyparser.json());
   app.use(bodyparser.urlencoded({ extended: true }));
 

server/static/parentPage.js

@@ -1,6 +1,7 @@
 import "./remoteConsole.js";
 import { showToast } from "./toast.js";
 import { $ } from "./qsa.js";
+import "/node_modules/@nprapps/sidechain/src/index.js";
 
 var delay = (d = 1000) => new Promise(ok => setTimeout(ok, d));
 

server/templates/parentPage.html

@@ -93,7 +93,8 @@ <h1><%= slug %></h1>
     <% } %>
 
     <div class="preview-container" data-width="mobile">
-      <div data-pym-loader data-child-src="./index.html" id="preview">Loading...</div>
+      <!-- <div data-pym-loader data-child-src="./index.html" id="preview">Loading...</div> -->
+      <side-chain src="./index.html" id="preview"></side-chain>
     </div>
 
   </div>
@@ -168,14 +169,16 @@ <h2>Copyedit e-mail</h2>
   var { search, searchParams } = here;
   var child = searchParams.get("preview") || "index.html";
   var childURL = `./${child}${search}`;
-  embed.dataset.childSrc = childURL;
+  embed.setAttribute("src", childURL);
   previewSelect.value = child;
 
   previewSelect.addEventListener("change", function() {
     var child = previewSelect.value;
     var there = new URL(window.location);
     there.searchParams.set("preview", child);
-    window.location.search = there.search;
+    window.history.replaceState(null, null, there.search);
+    var childURL = `./${child}${there.search}`;
+    embed.setAttribute("src", childURL);
   });
 }
   </script>