From c25588593e6994a10e9400bde6b068829a9a6a21 Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Wed, 31 Jan 2018 09:44:58 +0800 Subject: [PATCH 01/10] removed submodule and replaced interceptor for library --- README.md | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 01f37499c6..bbad921521 100644 --- a/README.md +++ b/README.md @@ -6,12 +6,11 @@ This project is currently in development! It will be announced when there is a ( 1. Fork this repository. 2. Clone the forked repostory and cd into it -3. `$ git submodule init` -4. `$ npm install` -5. Install MongoDB and make sure it is running +3. `$ npm install` +4. Install MongoDB and make sure it is running * For Mac OSX with [homebrew](http://brew.sh/): `brew install mongodb` then `brew services start mongodb` * For Windows and Linux: [MongoDB Installation](https://docs.mongodb.com/manual/installation/) -6. Create a file called `.env` in the root of this directory that looks like +5. Create a file called `.env` in the root of this directory that looks like ``` API_URL=/api @@ -29,10 +28,10 @@ This project is currently in development! It will be announced when there is a ( If you don't care about being able to upload media files to S3 or Login with Github, you can drop in the file exactly how it is. Or, if you don't want to do that, just ask me to send you mine. Refer to [this gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) for creating an S3 bucket for testing, or if you don't want to do that, I can add you to one of my S3 buckets. -7. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5' -8. `$ npm start` -9. Navigate to [http://localhost:8000](http://localhost:8000) in your browser -10. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en). +6. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5' +7. `$ npm start` +8. Navigate to [http://localhost:8000](http://localhost:8000) in your browser +9. Install the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en). 10. Open and close the Redux DevTools using `ctrl+h`, and move them with `ctrl+w` ### Testing SSL on your local machine @@ -68,10 +67,9 @@ If you don't have the full server environment running, you can launch a one-off ## Production Installation 1. Clone this repostory and `cd` into it -2. `$ git submodule init` -3. `$ npm install` -4. Install MongoDB and make sure it is running -5. Create a file called `.env` in the root of this directory that looks like +2. `$ npm install` +3. Install MongoDB and make sure it is running +4. Create a file called `.env` in the root of this directory that looks like ``` API_URL=/api @@ -91,9 +89,9 @@ If you don't have the full server environment running, you can launch a one-off ``` For production, you will need to have real Github and Amazon credentions. Refer to [this gist](https://gist.github.com/catarak/70c9301f0fd1ac2d6b58de03f61997e3) for creating an S3 bucket for testing. -6. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5' -7. `$ npm run build` -8. `$ npm run start:prod` +5. `$ npm run fetch-examples` - this downloads the example sketches into a user called 'p5' +6. `$ npm run build` +7. `$ npm run start:prod` ### For Production Setup with PM2 1. `$ npm install -g pm2` @@ -119,7 +117,7 @@ http://docs.aws.amazon.com/AmazonS3/latest/dev/VirtualHosting.html#VirtualHostin ## Accessibility Guidelines -Here is guide on [how to use the accessible editor](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) +Here is guide on [how to use the accessible editor](https://gist.github.com/MathuraMG/e86666b7b41fbc8c078bad9aff3f666d) and here is an overview of the [p5-accessibility.js](https://github.com/MathuraMG/p5-accessibility/blob/master/README.md) library that makes p5.js sketches accessible to screen readers. The code for the p5.js web editor adheres to web accessibility standards. The following guidelines will help to ensure that accessibility continues to be a priority as development continues. @@ -146,7 +144,7 @@ See [CONTRIBUTING.md](https://github.com/processing/p5.js-web-editor/blob/master The p5.js Web Editor is built on a MERN stack - MongoDB, Express, React/Redux, and Node. For a reference to the file structure format I am using, please look at the [Mern Starter](https://github.com/Hashnode/mern-starter) and [this comment](https://github.com/Hashnode/mern-starter/issues/90#issuecomment-221553573). -This project uses an in-development [p5.js interceptor library](https://github.com/MathuraMG/p5-interceptor) for accessibility as git submodule. Every time you run `npm install`, it will update the interceptor to HEAD, so it is important to do this often. +This project uses an in-development [p5-accessibility.js library](https://github.com/MathuraMG/p5-accessibility) for accessibility. This project does not use CSS Modules, but uses Sass. I like to follow [BEM rules](http://getbem.com/) for CSS naming conventions, write OOSCSS with placeholders and mixins, and follow the [7-1 Pattern](https://sass-guidelin.es/#the-7-1-pattern) for Sass. From 96f514d99b2c2205798b001f3ce39f332b8909c9 Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Wed, 7 Feb 2018 15:14:28 +0800 Subject: [PATCH 02/10] deleted comments --- client/modules/IDE/components/PreviewFrame.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 1250025882..2b8d7b960b 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -401,7 +401,6 @@ PreviewFrame.propTypes = { textOutput: PropTypes.bool.isRequired, gridOutput: PropTypes.bool.isRequired, soundOutput: PropTypes.bool.isRequired, - // setTextOutput: PropTypes.func.isRequired, htmlFile: PropTypes.shape({ content: PropTypes.string.isRequired }).isRequired, From 0f96a7c32afeccee256aec5fb2fa4de9f71fbd04 Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Wed, 7 Feb 2018 15:15:49 +0800 Subject: [PATCH 03/10] deleted jquery --- client/modules/IDE/reducers/files.js | 1 - 1 file changed, 1 deletion(-) diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js index 55220ff904..2fdc8104c6 100644 --- a/client/modules/IDE/reducers/files.js +++ b/client/modules/IDE/reducers/files.js @@ -13,7 +13,6 @@ const defaultHTML = ` - From 751b41af99856e33a86ee14f4f8f11f310401a29 Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Wed, 7 Feb 2018 15:17:39 +0800 Subject: [PATCH 04/10] deleted interceptor folder --- static/p5-interceptor | 1 - 1 file changed, 1 deletion(-) delete mode 160000 static/p5-interceptor diff --git a/static/p5-interceptor b/static/p5-interceptor deleted file mode 160000 index 62938f2e9c..0000000000 --- a/static/p5-interceptor +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 62938f2e9cbe1c83a9c1b702a9deccb11a452170 From 703c5701e890d0569196a47086e6f93676030b97 Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Wed, 7 Feb 2018 15:23:27 +0800 Subject: [PATCH 05/10] delete interceptor --- Dockerfile | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Dockerfile b/Dockerfile index 81f0872633..6d75fe0c24 100644 --- a/Dockerfile +++ b/Dockerfile @@ -8,8 +8,7 @@ ADD . $APP_HOME WORKDIR $APP_HOME # Install node modules -RUN git submodule init && \ - npm install +RUN npm install # Rebuild node-sass just to be safe RUN npm rebuild node-sass From a9c0a5c3a8ee5594a6222336f6d2753b347f0442 Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Wed, 7 Feb 2018 16:56:55 +0800 Subject: [PATCH 06/10] added jquery --- client/modules/IDE/reducers/files.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js index 2fdc8104c6..55220ff904 100644 --- a/client/modules/IDE/reducers/files.js +++ b/client/modules/IDE/reducers/files.js @@ -13,6 +13,7 @@ const defaultHTML = ` + From 1a14009141e967c7e88244990b3bb6d62c4b8d9f Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Mon, 12 Feb 2018 11:06:10 +0800 Subject: [PATCH 07/10] removed jquery and updated accessible library cdn --- client/modules/IDE/components/PreviewFrame.jsx | 2 +- client/modules/IDE/reducers/files.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 2b8d7b960b..8f714657ef 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -203,7 +203,7 @@ class PreviewFrame extends React.Component { '/hijackConsole.js' ]; const accessiblelib = sketchDoc.createElement('script'); - accessiblelib.setAttribute('src', 'https://cdn.rawgit.com/MathuraMG/p5-accessibility/e856365c/dist/p5-accessibility.js'); + accessiblelib.setAttribute('src', 'https://cdn.rawgit.com/MathuraMG/p5-accessibility/9cb5bd0b/dist/p5-accessibility.js'); if (this.props.textOutput) { sketchDoc.getElementById('accessibility-library').appendChild(accessiblelib); const textSection = sketchDoc.createElement('section'); diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js index 55220ff904..2fdc8104c6 100644 --- a/client/modules/IDE/reducers/files.js +++ b/client/modules/IDE/reducers/files.js @@ -13,7 +13,6 @@ const defaultHTML = ` - From 1cbe302daba304b6a61ff0b63b7ba94d59381f7c Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Thu, 15 Feb 2018 22:45:06 +0800 Subject: [PATCH 08/10] remove empty divs from files.js --- client/modules/IDE/components/PreviewFrame.jsx | 11 ++++++++--- client/modules/IDE/reducers/files.js | 2 -- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 8f714657ef..6e4f20fc97 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -204,22 +204,27 @@ class PreviewFrame extends React.Component { ]; const accessiblelib = sketchDoc.createElement('script'); accessiblelib.setAttribute('src', 'https://cdn.rawgit.com/MathuraMG/p5-accessibility/9cb5bd0b/dist/p5-accessibility.js'); + const accessibleOutputs = sketchDoc.createElement('section'); + accessibleOutputs.setAttribute('id', 'accessible-outputs'); if (this.props.textOutput) { - sketchDoc.getElementById('accessibility-library').appendChild(accessiblelib); + sketchDoc.body.appendChild(accessibleOutputs); + sketchDoc.body.appendChild(accessiblelib); const textSection = sketchDoc.createElement('section'); textSection.setAttribute('id', 'textOutput-content'); sketchDoc.getElementById('accessible-outputs').appendChild(textSection); this.iframeElement.focus(); } if (this.props.gridOutput) { - sketchDoc.getElementById('accessibility-library').appendChild(accessiblelib); + sketchDoc.body.appendChild(accessibleOutputs); + sketchDoc.body.appendChild(accessiblelib); const gridSection = sketchDoc.createElement('section'); gridSection.setAttribute('id', 'gridOutput-content'); sketchDoc.getElementById('accessible-outputs').appendChild(gridSection); this.iframeElement.focus(); } if (this.props.soundOutput) { - sketchDoc.getElementById('accessibility-library').appendChild(accessiblelib); + sketchDoc.body.appendChild(accessibleOutputs); + sketchDoc.body.appendChild(accessiblelib); const soundSection = sketchDoc.createElement('section'); soundSection.setAttribute('id', 'soundOutput-content'); sketchDoc.getElementById('accessible-outputs').appendChild(soundSection); diff --git a/client/modules/IDE/reducers/files.js b/client/modules/IDE/reducers/files.js index 2fdc8104c6..98075ed6e8 100644 --- a/client/modules/IDE/reducers/files.js +++ b/client/modules/IDE/reducers/files.js @@ -21,9 +21,7 @@ const defaultHTML = -
-
`; From 9af00e86940324f19386e56596c6195079a3fa87 Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Thu, 15 Feb 2018 23:01:37 +0800 Subject: [PATCH 09/10] fix merge error --- client/modules/IDE/components/PreviewFrame.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 6e4f20fc97..30e091d5ca 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -204,8 +204,6 @@ class PreviewFrame extends React.Component { ]; const accessiblelib = sketchDoc.createElement('script'); accessiblelib.setAttribute('src', 'https://cdn.rawgit.com/MathuraMG/p5-accessibility/9cb5bd0b/dist/p5-accessibility.js'); - const accessibleOutputs = sketchDoc.createElement('section'); - accessibleOutputs.setAttribute('id', 'accessible-outputs'); if (this.props.textOutput) { sketchDoc.body.appendChild(accessibleOutputs); sketchDoc.body.appendChild(accessiblelib); From 1bdb417e85cf19726a8014068934129bce77fa44 Mon Sep 17 00:00:00 2001 From: Luis Morales-Navarro Date: Thu, 15 Feb 2018 23:05:52 +0800 Subject: [PATCH 10/10] remove empty divs from files.js --- client/modules/IDE/components/PreviewFrame.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 30e091d5ca..6e4f20fc97 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -204,6 +204,8 @@ class PreviewFrame extends React.Component { ]; const accessiblelib = sketchDoc.createElement('script'); accessiblelib.setAttribute('src', 'https://cdn.rawgit.com/MathuraMG/p5-accessibility/9cb5bd0b/dist/p5-accessibility.js'); + const accessibleOutputs = sketchDoc.createElement('section'); + accessibleOutputs.setAttribute('id', 'accessible-outputs'); if (this.props.textOutput) { sketchDoc.body.appendChild(accessibleOutputs); sketchDoc.body.appendChild(accessiblelib);