Adds comments

app/blog/render/middleware.js

@@ -22,7 +22,6 @@ var minimize = new CleanCSS();
 
 var cacheDuration = "public, max-age=31536000";
 var JS = "application/javascript";
-var HTML = "text/html";
 var STYLE = "text/css";
 
 module.exports = function (req, res, _next) {
@@ -105,7 +104,12 @@ module.exports = function (req, res, _next) {
               return callback(null, output);
             }
 
-            if (req.preview && viewType === HTML) {
+            // We need to persist the page shown on the preview inside the
+            // template editor. To do this, we send the page viewed to the
+            // parent window (i.e. the page which embeds the preview in an
+            // iframe). If we can work out how to do this in a cross origin
+            // fashion with injecting a script, then remove this.
+            if (req.preview && viewType === "text/html") {
               output = output
                 .split("</body>")
                 .join(

app/dashboard/routes/template-editor/index.js

@@ -10,10 +10,14 @@ TemplateEditor.param("viewSlug", require("./load/template-view"));
 TemplateEditor.param("templateSlug", require("./load/template"));
 TemplateEditor.param("templateSlug", function (req, res, next) {
   res.locals.base = `${req.protocol}://${req.hostname}${req.baseUrl}/${req.params.templateSlug}`;
+  // used to filter messages sent from the iframe which contains a preview of the
+  // template in the template editor, such that we only save the pages which are
+  // part of the template.
   res.locals.previewOrigin = `https://preview-of-my-${req.template.slug}-on-${req.blog.handle}.${config.host}`;
-  res.locals.preview = res.locals.previewOrigin;
-  if (req.template.previewPath)
-    res.locals.preview += req.template.previewPath;
+  // we persist the path of the page of the template
+  // last viewed by the user in the database
+  res.locals.preview =
+    res.locals.previewOrigin + (req.template.previewPath || "");
   next();
 });
 
@@ -31,29 +35,14 @@ TemplateEditor.use("/:templateSlug/:section", function (req, res, next) {
   next();
 });
 
-TemplateEditor.post("/:templateSlug/previewPath", bodyParser, function (
-  req,
-  res,
-  next
-) {
-  Template.update(
-    req.blog.id,
-    req.params.templateSlug,
-    { previewPath: req.body.previewPath },
-    function (err) {
-      if (err) return next(err);
-      res.send("Success!");
-    }
-  );
-});
-
 TemplateEditor.route("/:templateSlug/settings")
   .all(require("./load/font-inputs"))
   .all(require("./load/color-inputs"))
   .all(require("./load/layout-inputs"))
   .all(require("./load/dates"))
   .post(
     bodyParser,
+    require("./save/previewPath"),
     function (req, res, next) {
       let body = formJSON(req.body, Template.metadataModel);
       let newLocals = body.locals;

app/dashboard/routes/template-editor/save/previewPath.js

@@ -0,0 +1,14 @@
+const Template = require("template");
+
+module.exports = function (req, res, next) {
+  if (!req.body || !req.body.previewPath) return next();
+  Template.update(
+    req.blog.id,
+    req.params.templateSlug,
+    { previewPath: req.body.previewPath },
+    function (err) {
+      if (err) return next(err);
+      res.message(req.baseUrl + req.url, "Success!");
+    }
+  );
+};

app/dashboard/views/template-editor/preview.html

@@ -3,42 +3,28 @@
 	src="{{{preview}}}"
 ></iframe>
 <script type="text/javascript">
-function init_content_monitor() {
-    var content = document.querySelector('iframe');
-
-    // Listen to messages sent from the content iframe
-    var receiveMessage = function receiveMessage(e){
-
-      console.log('here', e.origin, "{{{previewOrigin}}}")
-        // // Only react to messages from same domain as current document
-        if (e.origin !== "{{{previewOrigin}}}") return;
-
-        // Handle the message
-        let path = e.data.slice('iframe:'.length);
-
-var http = new XMLHttpRequest();
-var url = "{{{base}}}/previewPath";
-var params = 'previewPath=' + path;
-http.open('POST', url, true);
-
-//Send the proper header information along with the request
-http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
-
-http.onreadystatechange = function() {//Call a function when the state changes.
-    if(http.readyState == 4 && http.status == 200) {
-
-        // http.responseText will be anything that the server return
-        console.log(http.responseText);
-    }
-}
-http.send(params);
-
-        console.log(path);
-            };
-    window.addEventListener("message", receiveMessage, false);
-
-  }  
-
-  init_content_monitor();
-
+var content = document.querySelector("iframe");
+
+// Listen to messages sent from the iframe which contains
+// the preview of the template. We inject the script
+// which sends these messages before the </body> tag of 
+// all HTML pages rendered on preview subdomains.
+var receiveMessage = function receiveMessage(e) {
+    // Only react to messages from the preview subdomain
+    // The user can click on links and load external pages
+    if (e.origin !== "{{{previewOrigin}}}") return;
+
+    // Extract the path of the page they are viewing
+    let path = e.data.slice("iframe:".length);
+
+    // Save the path they have viewed on the server
+    var http = new XMLHttpRequest();
+    var url = "{{{base}}}/settings";
+    var params = "previewPath=" + path;
+    http.open("POST", url, true);
+    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    http.send(params);
+};
+
+window.addEventListener("message", receiveMessage, false);
 </script>