Merge branch 'release-2.13.5' into release

Author: raclim

.github/workflows/deploy-staging.yml

@@ -19,16 +19,16 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
       - name: Login to Docker Hub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push to Docker Hub
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v4
         with:
           context: .
           file: ./Dockerfile

.github/workflows/deploy.yml

@@ -19,20 +19,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out the repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           ref: release
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
         with:
           platforms: linux/amd64,linux/arm64
       - name: Login to Docker Hub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Build and push to Docker Hub
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v4
         with:
           context: .
           file: ./Dockerfile

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "p5.js-web-editor",
-  "version": "2.13.4",
+  "version": "2.13.5",
   "description": "The web editor for p5.js.",
   "scripts": {
     "clean": "rimraf dist",

package.json

@@ -130,7 +130,7 @@ passport.use(
     },
     async (req, accessToken, refreshToken, profile, done) => {
       try {
-        const existingUser = await User.findOne({ github: profile.id });
+        const existingUser = await User.findOne({ github: profile.id }).exec();
 
         if (existingUser) {
           if (req.user && req.user.email !== existingUser.email) {
@@ -229,7 +229,7 @@ passport.use(
       try {
         const existingUser = await User.findOne({
           google: profile._json.emails[0].value
-        });
+        }).exec();
 
         if (existingUser) {
           if (req.user && req.user.email !== existingUser.email) {

server/config/passport.js

@@ -173,6 +173,23 @@ export async function projectForUserExists(username, projectId) {
   return project != null;
 }
 
+/**
+ * @param {string} username
+ * @param {string} projectId - the database id or the slug or the project
+ * @return {Promise<object>}
+ */
+export async function getProjectForUser(username, projectId) {
+  const user = await User.findByUsername(username);
+  if (!user) return { exists: false };
+  const project = await Project.findOne({
+    user: user._id,
+    $or: [{ _id: projectId }, { slug: projectId }]
+  });
+  return project != null
+    ? { exists: true, userProject: project }
+    : { exists: false };
+}
+
 /**
  * Adds URLs referenced in <script> tags to the `files` array of the project
  * so that they can be downloaded along with other remote files from S3.

server/controllers/project.controller.js

@@ -1,9 +1,10 @@
 import { Router } from 'express';
-import sendHtml, { renderIndex } from '../views/index';
+import sendHtml, { renderIndex, renderProjectIndex } from '../views/index';
 import { userExists } from '../controllers/user.controller';
 import {
   projectExists,
-  projectForUserExists
+  projectForUserExists,
+  getProjectForUser
 } from '../controllers/project.controller';
 import { collectionForUserExists } from '../controllers/collection.controller';
 
@@ -43,11 +44,16 @@ router.get(
 );
 
 router.get('/:username/sketches/:project_id', async (req, res) => {
-  const exists = await projectForUserExists(
+  const project = await getProjectForUser(
     req.params.username,
     req.params.project_id
   );
-  sendHtml(req, res, exists);
+
+  if (project.exists) {
+    res.send(renderProjectIndex(req.params.username, project.userProject.name));
+  } else {
+    sendHtml(req, res, project.exists);
+  }
 });
 
 router.get('/:username/sketches', async (req, res) => {

server/routes/server.routes.js

@@ -48,6 +48,54 @@ export function renderIndex() {
   `;
 }
 
+export function renderProjectIndex(username, projectName) {
+  const assetsManifest = process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
+  return `
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta name="keywords" content="p5.js, p5.js web editor, web editor, processing, code editor" />
+      <meta name="description" content="A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners." />
+      <title>${`${projectName} by ${username} -`}p5.js Web Editor</title>
+      ${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
+      <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
+      <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
+      <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' / >
+      <script>
+        if (!window.process) {
+          window.process = {};
+        }
+        if (!window.process.env) {
+          window.process.env = {};
+        }
+        window.process.env.API_URL = '${process.env.API_URL}';
+        window.process.env.NODE_ENV = '${process.env.NODE_ENV}';
+        window.process.env.S3_BUCKET = '${process.env.S3_BUCKET}';
+        window.process.env.S3_BUCKET_URL_BASE = ${process.env.S3_BUCKET_URL_BASE ? `'${process.env.S3_BUCKET_URL_BASE}'` : undefined};
+        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};
+        window.process.env.EXAMPLES_ENABLED = ${process.env.EXAMPLES_ENABLED === 'false' ? false : true};
+        window.process.env.UI_ACCESS_TOKEN_ENABLED = ${process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true};
+        window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
+        window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
+        window.process.env.TRANSLATIONS_ENABLED = ${process.env.TRANSLATIONS_ENABLED === 'true' ? true : false}; 
+        window.process.env.PREVIEW_URL = '${process.env.PREVIEW_URL}';
+        window.process.env.GA_MEASUREMENT_ID='${process.env.GA_MEASUREMENT_ID}';
+      </script>
+    </head>
+    <body>
+      <div id="root" class="root-app">
+      </div>
+      <script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/app.js']}` : '/app.js'}'></script>
+    </body>
+  </html>
+  `;
+}
+
 /**
  * Send a 404 page if `exists` is false.
  * @param {import('express').e.Request} req