Merge branch 'master' into heroku-deployment

.eslintrc

@@ -20,7 +20,7 @@
     "no-console": 0,
     "no-alert": 0,
     "no-underscore-dangle": 0,
-    "max-len": [1, 120, 2, {ignoreComments: true}],
+    "max-len": [1, 120, 2, {"ignoreComments": true, "ignoreTemplateLiterals": true}],
     "quote-props": [1, "consistent-as-needed"],
     "no-unused-vars": [1, {"vars": "local", "args": "none"}],
     "consistent-return": ["error", { "treatUndefinedAsUnspecified": true }],

.github/CODE_OF_CONDUCT.md

@@ -11,13 +11,14 @@
 
   Use your best judgement. If it will possibly make others uncomfortable, do not post it.
 
-* **Be respectful.** Disagreement is not an opportunity to attack someone else's thoughts or opinions. Although views may differ, remember to approach every situation with patience and care. 
-* **Be considerate.** Think about how your contribution will affect others in the community. 
+* **Be respectful.** Disagreement is not an opportunity to attack someone else's thoughts or opinions. Although views may differ, remember to approach every situation with patience and care.
+* **Be considerate.** Think about how your contribution will affect others in the community.
 * **Be open minded.** Embrace new people and new ideas. Our community is continually evolving and we welcome positive change.
 
 If you believe someone is violating the code of conduct, we ask that you report it by emailing [hello@p5js.org](mailto:hello@p5js.org). Please include your name and a description of the incident, and we will get back to you ASAP.
 
-Participants asked to stop any harassing behavior are expected to comply immediately. If a participant engages in harassing behavior, the p5.js Team may take any action they deem appropriate, up to and including expulsion from all p5.js spaces and identification of the participant as a harasser to other p5.js members or the general public. 
+Participants asked to stop any harassing behavior are expected to comply immediately. If a participant engages in harassing behavior, the p5.js Team may take any action they deem appropriate, up to and including expulsion from all p5.js spaces and identification of the participant as a harasser to other p5.js members or the general public.
 
 ## Also
+
 * You can read our [community statement](http://p5js.org/community/) on our website.

.github/CONTRIBUTING.md

@@ -1,13 +1,13 @@
 # Contributing to the p5.js Web Editor 
 
-Hello! We welcome community contributions to the p5.js Web Editor. Contributing takes many forms and doesn't have to be **writing code**, it can be **report bugs**, **proposing new features**, **creating UI/UX designs**, and **updating documentation**. 
+Hello! We welcome community contributions to the p5.js Web Editor. Contributing takes many forms and doesn't have to be **writing code**, it can be **report bugs**, **proposing new features**, **creating UI/UX designs**, and **updating documentation**.
 
 Here are links to all the sections in this document:
 
 <!-- If you change any of the headings in this document, remember to update the table of contents. -->
 
 - [Code of Conduct](#code-of-conduct)
-- [How Can I Contribute ?](#how-can-i-contribute?)
+- [How Can I Contribute?](#how-can-i-contribute)
   - [First Timers](#first-timers)
   - [Want something more challenging](#want-something-more-challenging)
   - [Feature Enhancement](#feature-enhancement)
@@ -72,6 +72,4 @@ Structure your commit message like this:
 Tips
 ----
 
-* If it seems difficult to summarize what your commit does, it may be because it includes several logical changes or bug fixes, and are better split up into several commits using `git add -p`.
-
-
+* If it seems difficult to summarize what your commit does, it may be because it includes several logical changes or bug fixes, and are better split up into several commits using `git add -p`.

.github/ISSUE_TEMPLATE.md

@@ -1,23 +1,22 @@
 <!--
 Hi there! If you are here to report a bug, or to discuss a feature (new or existing), you can use the below template to get started quickly. Fill out all those parts which you're comfortable with, and delete the remaining ones.
-
-To check any option, replace the "[ ]" with a "[x]". Be sure to check out how it looks in the Preview tab!
-
-Feel free to remove any portion of the template that is not relevant for your issue.
 -->
 
 #### Nature of issue?
 
-- [ ] Found a bug
-- [ ] Existing feature enhancement
-- [ ] New feature request
+<!-- Select any one issue and delete the other two -->
+
+- Found a bug
+- Existing feature enhancement
+- New feature request
 
 <!-- If you found a bug, the following information might prove to be helpful for us. Simply remove whatever you can't determine/don't know. -->
 #### Details about the bug: 
 
 - Web browser and version: <!-- On Chrome/FireFox/Opera you can enter "about:" in the address bar to find out the version -->
 - Operating System: <!-- Ex: Windows/MacOSX/Linux along with version -->
-- Steps to reproduce this:
+- Steps to reproduce this bug:
+
 <!-- Include a simple code snippet that demonstrates the problem, along with any console errors produced. If this isn't possible, then simply describe the issue as best you can! Feel free to link to the web editor or include pictures or a video. -->
 
 <!-- If you want to enhance an existing feature, please describe here, otherwise remove this section -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,7 +1,5 @@
-Before your pull request is reviewed and merged, please ensure that:
+I have verified that this pull request:
 
-* [ ] there are no linting errors -- `npm run lint`
-* [ ] your code is in a uniquely-named feature branch and has been rebased on top of the latest master. If you're asked to make more changes, make sure you rebase onto master then too!
-* [ ] your pull request is descriptively named and links to an issue number, i.e. `Fixes #123`
-
-Thank you!
+* [ ] has no linting errors (`npm run lint`)
+* [ ] is from a uniquely-named feature branch and has been rebased on top of the latest master. (If I was asked to make more changes, I have made sure to rebase onto master then too)
+* [ ] is descriptively named and links to an issue number, i.e. `Fixes #123`

.travis.yml

@@ -1,7 +1,7 @@
 sudo: required
 language: node_js
 node_js:
- - "8.11.1"
+ - "10.15.0"
 
 cache:
   directories:

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:8.11.1 as base
+FROM node:10.15.0 as base
 ENV APP_HOME=/usr/src/app \
   TERM=xterm
 RUN mkdir -p $APP_HOME

client/components/Nav.jsx

@@ -8,13 +8,13 @@ import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
 import * as IDEActions from '../modules/IDE/actions/ide';
 
-import {
-  metaKeyName,
-} from '../utils/metaKey';
+import { metaKeyName, } from '../utils/metaKey';
 
 const triangleUrl = require('../images/down-filled-triangle.svg');
 const logoUrl = require('../images/p5js-logo-small.svg');
 
+const __process = (typeof global !== 'undefined' ? global : window).process;
+
 class Nav extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -150,7 +150,7 @@ class Nav extends React.PureComponent {
                   New
                 </button>
               </li>
-              { (!this.props.project.owner || this.isUserOwner()) &&
+              { __process.env.LOGIN_ENABLED && (!this.props.project.owner || this.isUserOwner()) &&
               <li className="nav__dropdown-item">
                 <button
                   onClick={() => {
@@ -460,7 +460,7 @@ class Nav extends React.PureComponent {
             </ul>
           </li>
         </ul>
-        { !this.props.user.authenticated &&
+        { __process.env.LOGIN_ENABLED && !this.props.user.authenticated &&
           <ul className="nav__items-right" title="user-menu">
             <li className="nav__item">
               <p>
@@ -470,7 +470,7 @@ class Nav extends React.PureComponent {
               </p>
             </li>
           </ul>}
-        { this.props.user.authenticated &&
+        { __process.env.LOGIN_ENABLED && this.props.user.authenticated &&
           <ul className="nav__items-right" title="user-menu">
             <li className="nav__item">
               <span>Hello, {this.props.user.username}!</span>

client/images/share.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+<g>
+	<path d="M77.202,60.609v12.399c0,2.08-1.681,3.761-3.761,3.761H25.761c-2.08,0-3.84-1.681-3.84-3.761v-35.44
+		c0-2.16,1.76-3.84,3.84-3.84h14.64v5.76h-12.72v31.521h43.761V60.609H77.202z M60.002,37.248l-2.801-11.36l22.161,16.4
+		L57.201,57.809l2.801-11.28c0,0-16.241-0.24-16.881,16.72h-2.88C40.241,63.248,40.001,38.368,60.002,37.248z"/>
+</g>
+</svg>

client/modules/IDE/actions/project.js

@@ -2,13 +2,15 @@ import { browserHistory } from 'react-router';
 import axios from 'axios';
 import objectID from 'bson-objectid';
 import each from 'async/each';
-import { isEqual } from 'lodash';
+import { isEqual, pick } from 'lodash';
 import * as ActionTypes from '../../../constants';
 import { showToast, setToastText } from './toast';
-import { setUnsavedChanges,
+import {
+  setUnsavedChanges,
   justOpenedProject,
   resetJustOpenedProject,
-  showErrorModal } from './ide';
+  showErrorModal
+} from './ide';
 import { clearState, saveState } from '../../../persistState';
 
 const __process = (typeof global !== 'undefined' ? global : window).process;
@@ -77,7 +79,10 @@ export function saveProject(autosave = false) {
         .then((response) => {
           const currentState = getState();
           const savedProject = Object.assign({}, response.data);
-          if (!isEqual(currentState.files, response.data.files)) {
+          if (!isEqual(
+            pick(currentState.files, ['name', 'children', 'content']),
+            pick(response.data.files, ['name', 'children', 'content'])
+          )) {
             savedProject.files = currentState.files;
             dispatch(setUnsavedChanges(true));
           } else {

client/modules/IDE/components/CopyableInput.jsx

@@ -1,6 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Clipboard from 'clipboard';
+import InlineSVG from 'react-inlinesvg';
+import classNames from 'classnames';
+
+import shareUrl from '../../../images/share.svg';
 
 class CopyableInput extends React.Component {
   constructor(props) {
@@ -34,8 +38,12 @@ class CopyableInput extends React.Component {
       value,
       hasPreviewLink
     } = this.props;
+    const copyableInputClass = classNames({
+      'copyable-input': true,
+      'copyable-input--with-preview': hasPreviewLink
+    });
     return (
-      <div className="copyable-input">
+      <div className={copyableInputClass}>
         <div
           className="copyable-input__value-container tooltipped-no-delay"
           aria-label="Copied to Clipboard!"
@@ -44,10 +52,7 @@ class CopyableInput extends React.Component {
         >
           <label className="copyable-input__label" htmlFor={`copyable-input__value-${label}`}>
             <div className="copyable-input__label-container">
-              {label} {hasPreviewLink &&
-                <a target="_blank" href={value}>
-                  Open
-                </a>}
+              {label}
             </div>
             <input
               type="text"
@@ -59,6 +64,17 @@ class CopyableInput extends React.Component {
             />
           </label>
         </div>
+        {hasPreviewLink &&
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={value}
+            className="copyable-input__preview"
+            title={`open ${label.toLowerCase()} view in new tab`}
+          >
+            <InlineSVG src={shareUrl} alt={`open ${label} view in new tab`} />
+          </a>
+        }
       </div>
     );
   }

client/modules/IDE/components/Editor.jsx

@@ -32,9 +32,7 @@ import '../../../utils/p5-javascript';
 import '../../../utils/webGL-clike';
 import Timer from '../components/Timer';
 import EditorAccessibility from '../components/EditorAccessibility';
-import {
-  metaKey,
-} from '../../../utils/metaKey';
+import { metaKey, } from '../../../utils/metaKey';
 
 import search from '../../../utils/codemirror-search';
 

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import {
-  metaKeyName,
-} from '../../../utils/metaKey';
+import { metaKeyName, } from '../../../utils/metaKey';
 
 function KeyboardShortcutModal() {
   return (

client/modules/IDE/components/PreviewFrame.jsx

@@ -81,7 +81,10 @@ class PreviewFrame extends React.Component {
 
   handleConsoleEvent(messageEvent) {
     if (Array.isArray(messageEvent.data)) {
-      const decodedMessages = messageEvent.data.map(message => Object.assign(Decode(message.log), { source: message.source }));
+      const decodedMessages = messageEvent.data.map(message =>
+        Object.assign(Decode(message.log), {
+          source: message.source
+        }));
 
       decodedMessages.every((message, index, arr) => {
         const { data: args } = message;

client/modules/IDE/components/ShareModal.jsx

@@ -19,6 +19,11 @@ class ShareModal extends React.PureComponent {
           label="Embed"
           value={`<iframe src="${hostname}/${ownerUsername}/embed/${projectId}"></iframe>`}
         />
+        <CopyableInput
+          label="Present"
+          hasPreviewLink
+          value={`${hostname}/${ownerUsername}/present/${projectId}`}
+        />
         <CopyableInput
           label="Fullscreen"
           hasPreviewLink
@@ -26,6 +31,7 @@ class ShareModal extends React.PureComponent {
         />
         <CopyableInput
           label="Edit"
+          hasPreviewLink
           value={`${hostname}/${ownerUsername}/sketches/${projectId}`}
         />
       </div>

client/modules/IDE/pages/IDEView.jsx

@@ -308,7 +308,7 @@ class IDEView extends React.Component {
               defaultSize="50%"
               onChange={() => { this.overlay.style.display = 'block'; }}
               onDragFinished={() => { this.overlay.style.display = 'none'; }}
-              resizerStyle={{ marginRight: '5px' }}
+              resizerStyle={{ marginRight: '0', marginLeft: '-10px' }}
             >
               <SplitPane
                 split="horizontal"

client/styles/abstracts/_placeholders.scss

@@ -87,11 +87,17 @@
 			border-color: getThemifyVariable('button-background-hover-color');
 			background-color: getThemifyVariable('button-background-hover-color');
 			color: getThemifyVariable('button-hover-color');
+			& g {
+				fill: getThemifyVariable('button-hover-color');
+			}
 		}
 		&:enabled:active {
 			border-color: getThemifyVariable('button-background-active-color');
 			background-color: getThemifyVariable('button-background-active-color');
 			color: getThemifyVariable('button-active-color');
+			& g {
+				fill: getThemifyVariable('button-active-color');
+			}
 		}
 	}
 }

client/styles/components/_copyable-input.scss

@@ -13,6 +13,9 @@
 .copyable-input__value {
   width: 100%;
   font-size: #{16 / $base-font-size}rem;
+  .copyable-input--with-preview & {
+    border-radius: 2px 0 0 2px;
+  }
 }
 
 .copyable-input__label {
@@ -32,7 +35,6 @@
 .copyable-input {
   padding-bottom: #{30 / $base-font-size}rem;
   display: flex;
-  flex-wrap: wrap;
 }
 
 .copyable-input__value-container {
@@ -56,3 +58,16 @@
     border-top-color: getThemifyVariable('button-background-hover-color');
   }
 }
+
+.copyable-input__preview {
+  @extend %button;
+  @include themify() {
+    align-self: flex-end;
+    border-radius: 0 2px 2px 0;
+    padding: #{2 / $base-font-size}rem 0;
+  }
+  & svg {
+    height: #{30 / $base-font-size}rem;
+    width: #{30 / $base-font-size}rem;
+  }
+}

client/styles/components/_resizer.scss

@@ -10,6 +10,7 @@
     -moz-background-clip: padding;
     -webkit-background-clip: padding;
     background-clip: padding-box;
+    z-index: 9999;
 }
 
 // .Resizer:hover {

client/utils/consoleUtils.js

@@ -1,6 +1,4 @@
-import {
-  EXTERNAL_LINK_REGEX
-} from '../../server/utils/fileUtils';
+import { EXTERNAL_LINK_REGEX } from '../../server/utils/fileUtils';
 
 export const hijackConsoleErrorsScript = (offs) => {
   const s = `

package.json

@@ -28,35 +28,35 @@
   },
   "devDependencies": {
     "babel-eslint": "^7.1.1",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-transform-react-constant-elements": "^6.8.0",
-    "babel-plugin-transform-react-inline-elements": "^6.8.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.2.6",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-transform-react-constant-elements": "^6.23.0",
+    "babel-plugin-transform-react-inline-elements": "^6.22.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.2.12",
     "babel-plugin-webpack-loaders": "^0.9.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.5.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
     "babel-preset-react-optimize": "^1.0.1",
-    "babel-preset-stage-0": "^6.5.0",
-    "chunk-manifest-webpack-plugin": "^1.1.2",
+    "babel-preset-stage-0": "^6.24.1",
+    "chunk-manifest-webpack-plugin": "github:catarak/chunk-manifest-webpack-plugin",
     "css-loader": "^0.23.1",
-    "cssnano": "^3.7.1",
-    "eslint": "^4.9.0",
+    "cssnano": "^3.10.0",
+    "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.12.3",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^2.0.0",
-    "node-sass": "^4.9.0",
-    "nodemon": "^1.9.2",
-    "postcss-cssnext": "^2.7.0",
+    "node-sass": "^4.11.0",
+    "nodemon": "^1.18.9",
+    "postcss-cssnext": "^2.11.0",
     "postcss-focus": "^1.0.0",
     "postcss-loader": "^0.9.1",
-    "postcss-reporter": "^1.3.3",
-    "rimraf": "^2.6.2",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.13.1",
-    "webpack-manifest-plugin": "^2.0.0",
+    "postcss-reporter": "^1.4.1",
+    "rimraf": "^2.6.3",
+    "sass-loader": "^6.0.7",
+    "style-loader": "^0.13.2",
+    "webpack-manifest-plugin": "^2.0.4",
     "webpack-node-externals": "^1.7.2"
   },
   "engines": {
@@ -65,83 +65,83 @@
   },
   "dependencies": {
     "archiver": "^1.1.0",
-    "async": "^2.0.0",
+    "async": "^2.6.1",
     "axios": "^0.12.0",
-    "babel-core": "^6.26.0",
-    "babel-polyfill": "^6.8.0",
-    "babel-register": "^6.8.0",
+    "babel-core": "^6.26.3",
+    "babel-polyfill": "^6.26.0",
+    "babel-register": "^6.26.0",
     "bcrypt-nodejs": "0.0.3",
     "blob-util": "^1.2.1",
-    "body-parser": "^1.15.1",
-    "bson-objectid": "^1.1.4",
-    "classnames": "^2.2.5",
+    "body-parser": "^1.18.3",
+    "bson-objectid": "^1.2.4",
+    "classnames": "^2.2.6",
     "clipboard": "^1.7.1",
-    "codemirror": "^5.38.0",
-    "connect-mongo": "^1.2.0",
-    "console-feed": "^2.8.1",
-    "cookie-parser": "^1.4.1",
-    "cors": "^2.8.1",
-    "cross-env": "^5.1.3",
+    "codemirror": "^5.42.2",
+    "connect-mongo": "^1.3.2",
+    "console-feed": "^2.8.5",
+    "cookie-parser": "^1.4.3",
+    "cors": "^2.8.5",
+    "cross-env": "^5.2.0",
     "csslint": "^0.10.0",
     "decomment": "^0.8.7",
     "dotenv": "^2.0.0",
     "dropzone": "^4.3.0",
     "escape-string-regexp": "^1.0.5",
     "eslint-loader": "^1.3.0",
-    "express": "^4.13.4",
-    "express-basic-auth": "^1.1.5",
-    "express-session": "^1.13.0",
-    "htmlhint": "^0.9.13",
-    "is-url": "^1.2.2",
-    "js-beautify": "^1.6.4",
+    "express": "^4.16.4",
+    "express-basic-auth": "^1.1.6",
+    "express-session": "^1.15.6",
+    "htmlhint": "^0.10.1",
+    "is-url": "^1.2.4",
+    "js-beautify": "^1.8.9",
     "jsdom": "^9.8.3",
-    "jshint": "^2.9.4",
-    "lodash": "^4.16.4",
+    "jshint": "^2.9.7",
+    "lodash": "^4.17.11",
     "loop-protect": "github:catarak/loop-protect",
     "mjml": "^3.3.2",
-    "moment": "^2.14.1",
+    "moment": "^2.23.0",
     "mongoose": "^4.6.8",
     "node-uuid": "^1.4.7",
     "nodemailer": "^2.6.4",
-    "nodemailer-mailgun-transport": "^1.2.2",
+    "nodemailer-mailgun-transport": "^1.4.0",
     "passport": "^0.3.2",
     "passport-github": "^1.1.0",
     "passport-google-oauth20": "^1.0.0",
     "passport-local": "^1.0.0",
     "pretty-bytes": "^3.0.1",
-    "primer-tooltips": "^1.4.1",
-    "project-name-generator": "^2.1.3",
-    "prop-types": "^15.6.0",
+    "primer-tooltips": "^1.5.11",
+    "project-name-generator": "^2.1.5",
+    "prop-types": "^15.6.2",
     "q": "^1.4.1",
-    "react": "^16.4.0",
-    "react-dom": "^16.4.0",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
     "react-helmet": "^5.1.3",
-    "react-hot-loader": "^4.1.2",
+    "react-hot-loader": "^4.6.3",
     "react-inlinesvg": "^0.7.5",
-    "react-redux": "^5.0.6",
-    "react-router": "^3.2.0",
-    "react-split-pane": "^0.1.44",
-    "react-tabs": "^2.2.1",
-    "redux": "^3.5.2",
-    "redux-devtools": "^3.4.1",
+    "react-redux": "^5.1.1",
+    "react-router": "^3.2.1",
+    "react-split-pane": "^0.1.76",
+    "react-tabs": "^2.3.0",
+    "redux": "^3.7.2",
+    "redux-devtools": "^3.4.2",
     "redux-devtools-dock-monitor": "^1.1.3",
     "redux-devtools-log-monitor": "^1.4.0",
     "redux-form": "^5.3.3",
-    "redux-thunk": "^2.1.0",
-    "request": "^2.76.0",
+    "redux-thunk": "^2.3.0",
+    "request": "^2.88.0",
     "request-promise": "^4.1.1",
     "s3": "^4.4.0",
     "s3-policy": "^0.2.0",
     "sass-extract": "^2.1.0",
     "sass-extract-js": "^0.4.0",
     "sass-extract-loader": "^1.1.0",
-    "shortid": "^2.2.6",
-    "slugify": "^1.2.9",
+    "shortid": "^2.2.14",
+    "slugify": "^1.3.4",
     "srcdoc-polyfill": "^0.2.0",
     "url": "^0.11.0",
-    "webpack": "^3.1.0",
+    "webpack": "^3.12.0",
     "webpack-dev-middleware": "^2.0.6",
-    "webpack-hot-middleware": "^2.10.0",
-    "xhr": "^2.2.1"
+    "webpack-hot-middleware": "^2.24.3",
+    "xhr": "^2.5.0"
   }
 }

server/controllers/embed.controller.js

@@ -4,7 +4,8 @@ import {
   injectMediaUrls,
   resolvePathsForElementsWithAttribute,
   resolveScripts,
-  resolveStyles } from '../utils/previewGeneration';
+  resolveStyles
+} from '../utils/previewGeneration';
 import { get404Sketch } from '../views/404Page';
 
 export function serveProject(req, res) {

server/routes/embed.routes.js

@@ -4,6 +4,7 @@ import * as EmbedController from '../controllers/embed.controller';
 const router = new Router();
 
 router.get('/:username/embed/:project_id', EmbedController.serveProject);
+router.get('/:username/present/:project_id', EmbedController.serveProject);
 router.get('/embed/:project_id', EmbedController.serveProject);
 
 export default router;

server/scripts/examples-gg-latest.js

@@ -27,7 +27,7 @@ const defaultHTML =
 
     <!-- Generative Design Dependencies here -->
     <!-- GG Bundled -->
-    <script src="https://raw.githack.com/generative-design/Code-Package-p5.js/${branchName}/libraries/gg-dep-bundle/gg-dep-bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/generative-design/Code-Package-p5.js@${branchName}/libraries/gg-dep-bundle/gg-dep-bundle.js"></script>
     <!-- Opentype -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/0.7.3/opentype.min.js"></script>
     <!-- Rita -->
@@ -426,14 +426,14 @@ function getAllSketchContent(newProjectList) {
     }
     if (newProject.files[i].url) {
       return new Promise((resolve, reject) => {
-        console.log(sketchFile.name);
-        // https://cdn.rawgit.com/opensourcedesign/fonts/2f220059/gnu-freefont_freesans/FreeSans.otf?raw=true
         // "https://raw.githubusercontent.com/generative-design/Code-Package-p5.js/gg4editor/01_P/P_3_2_1_01/data/FreeSans.otf",
-        const rawGitRef = `https://raw.githack.com/${newProject.files[i].url.split('.com/')[1]}`;
-        sketchFile.content = rawGitRef;
-        sketchFile.url = rawGitRef;
-        // https://raw.githack.com/generative-design/Code-Package-p5.js/master/libraries/gg-dep-bundle/gg-dep-bundle.js
-        // replace ref in sketch.js ==> should serve from the file?
+        // https://cdn.jsdelivr.net/gh/generative-design/Code-Package-p5.js@master/01_P/P_4_3_1_01/data/pic.png
+        // const rawGitRef = `https://raw.githack.com/${newProject.files[i].url.split('.com/')[1]}`;
+        const cdnRef = `https://cdn.jsdelivr.net/gh/generative-design/Code-Package-p5.js@${branchName}${newProject.files[i].url.split(branchName)[1]}`
+        // console.log("🌈🌈🌈🌈🌈", sketchFile.name);
+        // console.log("🌈🌈🌈🌈🌈", cdnRef);
+        sketchFile.content = cdnRef;
+        sketchFile.url = cdnRef;
         // newProject.files[1].content = newProject.files[1].content.replace(`'data/${sketchFile.name}'`, `'${rawGitRef}'`);
         resolve(newProject);
       });

server/views/index.js

@@ -1,7 +1,6 @@
 export function renderIndex() {
   const assetsManifest = process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
   const chunkManifest = process.env.webpackChunkAssets && JSON.parse(process.env.webpackChunkAssets);
-
   return `
   <!DOCTYPE html>
   <html>
@@ -29,6 +28,7 @@ export function renderIndex() {
         window.process.env.AWS_REGION = '${process.env.AWS_REGION}';
         window.process.env.FORCE_TO_HTTPS = ${process.env.FORCE_TO_HTTPS === 'false' ? false : undefined};
         window.process.env.CLIENT = true;
+        window.process.env.LOGIN_ENABLED = ${process.env.LOGIN_ENABLED === 'false' ? false : true}
       </script>
     </head>
     <body>

webpack/config.prod.js

@@ -116,6 +116,7 @@ module.exports = [{
     new ChunkManifestPlugin({
       filename: 'chunk-manifest.json',
       manifestVariable: 'webpackManifest',
+      inlineManifest: false
     }),
     new webpack.optimize.UglifyJsPlugin({
       sourceMap: true,