show embed view

* detect `embed` in the URL
* initialize GUI in embed mode if detected
* match `embed` in the project page route
* add fastly config rules to redirect `/projects/embed/:id` to `/projects/:id/embed`

bin/configure-fastly.js

@@ -217,6 +217,52 @@ async.auto({
             if (err) return cb(err);
             cb(null, redirectResults);
         });
+    }],
+    embedRedirectHeaders: ['version', function (cb, results) {
+        async.auto({
+            requestCondition: function (cb2) {
+                var condition = {
+                    name: 'routes/projects/embed (request)',
+                    statement: 'req.url ~ "^/projects/embed/(\\d+)"',
+                    type: 'REQUEST',
+                    priority: 10
+                };
+                fastly.setCondition(results.version, condition, cb2);
+            },
+            responseCondition: function (cb2) {
+                var condition = {
+                    name: 'routes/projects/embed (response)',
+                    statement: 'req.url ~ "^/projects/embed/(\\d+)"',
+                    type: 'RESPONSE',
+                    priority: 10
+                };
+                fastly.setCondition(results.version, condition, cb2);
+            },
+            responseObject: ['requestCondition', function (cb2, redirectResults) {
+                var responseObject = {
+                    name: 'redirects/projects/embed',
+                    status: 301,
+                    response: 'Moved Permanently',
+                    request_condition: redirectResults.requestCondition.name
+                };
+                fastly.setResponseObject(results.version, responseObject, cb2);
+            }],
+            redirectHeader: ['responseCondition', function (cb2, redirectResults) {
+                var header = {
+                    name: 'redirects/projects/embed',
+                    action: 'set',
+                    ignore_if_set: 0,
+                    type: 'RESPONSE',
+                    dst: 'http.Location',
+                    src: '"/projects/" + re.group.1 + "/embed"',
+                    response_condition: redirectResults.responseCondition.name
+                };
+                fastly.setFastlyHeader(results.version, header, cb2);
+            }]
+        }, function (err, redirectResults) {
+            if (err) return cb(err);
+            cb(null, redirectResults);
+        });
     }]
 }, function (err, results) {
     if (err) throw new Error(err);

src/routes.json

@@ -199,7 +199,7 @@
     },
     {
         "name": "projects",
-        "pattern": "^/projects(/editor|(/\\d+(/editor|/fullscreen)?)?)?/?(\\?.*)?$",
+        "pattern": "^/projects(/editor|(/\\d+(/editor|/fullscreen|/embed)?)?)?/?(\\?.*)?$",
         "routeAlias": "/projects/?$",
         "view": "preview/preview",
         "title": "Scratch Project"

src/views/preview/project-view.jsx

@@ -864,13 +864,16 @@ module.exports.initGuiState = guiInitialState => {
     const parts = pathname.split('/').filter(Boolean);
     // parts[0]: 'projects'
     // parts[1]: either :id or 'editor'
-    // parts[2]: undefined if no :id, otherwise either 'editor' or 'fullscreen'
+    // parts[2]: undefined if no :id, otherwise either 'editor', 'fullscreen' or 'embed'
     if (parts.indexOf('editor') === -1) {
         guiInitialState = GUI.initPlayer(guiInitialState);
     }
     if (parts.indexOf('fullscreen') !== -1) {
         guiInitialState = GUI.initFullScreen(guiInitialState);
     }
+    if (parts.indexOf('embed') !== -1) {
+        guiInitialState = GUI.initEmbedded(guiInitialState);
+    }
     return guiInitialState;
 };