Merge pull request #1 from processing/develop

Sync forked repo

Author: dwight9339

.env.example

@@ -10,20 +10,24 @@ EXAMPLE_USER_PASSWORD=hellop5js
 GG_EXAMPLES_USERNAME=generativedesign
 GG_EXAMPLES_EMAIL=[email protected]
 GG_EXAMPLES_PASS=generativedesign
-ML5_EXAMPLES_USERNAME=ml5
-ML5_EXAMPLES_EMAIL=[email protected]
-ML5_EXAMPLES_PASS=helloml5
 GITHUB_ID=<your-github-client-id>
 GITHUB_SECRET=<your-github-client-secret>
 GOOGLE_ID=<your-google-client-id> (use google+ api)
 GOOGLE_SECRET=<your-google-client-secret> (use google+ api)
 MAILGUN_DOMAIN=<your-mailgun-domain>
 MAILGUN_KEY=<your-mailgun-api-key>
+ML5_LIBRARY_USERNAME=ml5
+ML5_LIBRARY_EMAIL=[email protected]
+ML5_LIBRARY_PASS=helloml5
+MOBILE_ENABLED=true
 MONGO_URL=mongodb://localhost:27017/p5js-web-editor
 PORT=8000
+PREVIEW_PORT=8002
+EDITOR_URL=http://localhost:8000
+PREVIEW_URL=http://localhost:8002
 S3_BUCKET=<your-s3-bucket>
 S3_BUCKET_URL_BASE=<alt-for-s3-url>
 SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
+TRANSLATIONS_ENABLED=true
 UI_ACCESS_TOKEN_ENABLED=false
 UPLOAD_LIMIT=250000000
-MOBILE_ENABLED=true

.eslintrc

@@ -1,5 +1,5 @@
 {
-	"extends": "airbnb",
+	"extends": ["airbnb", "prettier"],
 	"parser": "babel-eslint",
 	"env": {
     "browser": true,
@@ -16,12 +16,12 @@
     "import/no-unresolved": 0,
     "import/no-named-as-default": 2,
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
-    "indent": [2, 2, {"SwitchCase": 1}],
+    "indent": 0,
     "no-console": 0,
     "no-alert": 0,
     "no-underscore-dangle": 0,
     "max-len": [1, 120, 2, {"ignoreComments": true, "ignoreTemplateLiterals": true}],
-    "quote-props": [1, "consistent-as-needed"],
+    "quote-props": [1, "as-needed"],
     "no-unused-vars": [1, {"vars": "local", "args": "none"}],
     "consistent-return": ["error", { "treatUndefinedAsUnspecified": true }],
     "no-param-reassign": [2, { "props": false }],
@@ -60,10 +60,13 @@
         },
         "allowChildren": false
       }
+    ],
+    "prettier/prettier": [
+      "error"
     ]
   },
   "plugins": [
-    "react", "jsx-a11y", "import"
+    "react", "jsx-a11y", "import", "prettier"
   ],
   "settings": {
     "import/parser": "babel-eslint",

.github/CODE_OF_CONDUCT.md

@@ -1,24 +1,51 @@
-# p5.js Code of Conduct
+## [p5.js community statement](http://p5js.org/community/)
+
+p5.js is a community interested in exploring the creation of art and design with technology.
+
+We are a community of, and in solidarity with, people from every gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, disability, class, religion, culture, subculture, political opinion, age, skill level, occupation, and background. We acknowledge that not everyone has the time, financial means, or capacity to actively participate, but we recognize and encourage involvement of all kinds. We facilitate and foster access and empowerment. We are all learners.
+
+We like these hashtags: #noCodeSnobs (because we value community over efficiency), #newKidLove (because we all started somewhere), #unassumeCore (because we don't assume knowledge), and #BlackLivesMatter (because of course).
+
+In practice:
+* We are not code snobs. We do not assume knowledge or imply there are things that somebody should know.
+* We insist on actively engaging with requests for feedback regardless of their complexity.
+* We welcome newcomers and prioritize the education of others. We strive to approach all tasks with the enthusiasm of a newcomer. Because we believe that newcomers are just as valuable in this effort as experts.
+* We consistently make the effort to actively recognize and validate multiple types of contributions.
+* We are always willing to offer help or guidance.
+
+In times of conflict:
+* We listen.
+* We clearly communicate while acknowledging other's feelings.
+* We admit when we're wrong, apologize, and accept responsibility for our actions.
+* We are continuously seeking to improve ourselves and our community.
+* We keep our community respectful and open.
+* We make everyone feel heard.
+* We are mindful and kind in our interactions.
+
+In the future:
+* The future is now.
+
+
+## p5.js Code of Conduct
 
 * **Be mindful of your language.** Any of the following behavior is unacceptable: 
   * Offensive comments related to gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, ability, class, religion, culture, subculture, political opinion, age, skill level, occupation, or background
   * Threats of violence
   * Deliberate intimidation
-  * Sexually explicit or violent material
+  * Sexually explicit or violent material that is not contextualized and preceded by a considerate warning 
   * Unwelcome sexual attention
   * Stalking or following
   * Or any other kinds of harassment
 
   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 [[email protected]](mailto:[email protected]). 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.
-
-## Also
+Sometimes, participants violating the Code of Conduct are unaware that their behavior is harmful, and an open conversation clears things up to move forward. However, if a participant continues with the 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.
 
-* You can read our [community statement](http://p5js.org/community/) on our website.
+---
+This statement is licensed under a [Creative Commons license](https://creativecommons.org/licenses/by-sa/4.0/). Please feel free to share and remix with attribution.

.github/CONTRIBUTING.md

@@ -18,7 +18,7 @@ Hello! We welcome community contributions to the p5.js Web Editor. Contributing
 
 ## Code of Conduct
 
-Please follow the guidelines in the [Code of Conduct](https://github.com/processing/p5.js-web-editor/blob/master/.github/CODE_OF_CONDUCT.md).
+Please follow the guidelines in the [Code of Conduct](https://github.com/processing/p5.js-web-editor/blob/develop/.github/CODE_OF_CONDUCT.md).
 
 ## How Can I Contribute?
 If you're new to open source, [read about how to contribute to open source](https://opensource.guide/how-to-contribute/).
@@ -60,7 +60,7 @@ If you feel like an issue is tagged incorrectly (e.g. it's low priority and you
 
 If you'd like to work on an issue, please comment on it to let the maintainers know, so that they can assign it to you. If someone else has already commented and taken up that issue, please refrain from working on it and submitting a PR without asking the maintainers as it leads to unnecessary duplication of effort.
 
-Then, look at the [development guide](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/development.md) for instructions on how to install the project locally and follow the right development workflow.
+Then, look at the [development guide](https://github.com/processing/p5.js-web-editor/blob/develop/developer_docs/development.md) for instructions on how to install the project locally and follow the right development workflow.
 
 ### Contribution Guides
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -3,5 +3,5 @@ Fixes #issue-number
 I have verified that this pull request:
 
 * [ ] 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`
+* [ ] is from a uniquely-named feature branch and has been rebased on top of the latest `develop` branch. (If I was asked to make more changes, I have made sure to rebase onto `develop` then too)
+* [ ] is descriptively named and links to an issue number, i.e. `Fixes #123`

.github/config.yml

@@ -10,8 +10,8 @@ newIssueWelcomeComment: >
 
 # Comment to be posted to on PRs from first time contributors in your repository
 newPRWelcomeComment: >
-  🎉 Thanks for opening this pull request! Please check out our [contributing guidelines](https://github.com/processing/p5.js-web-editor/blob/master/.github/CONTRIBUTING.md) if you haven't already.
+  🎉 Thanks for opening this pull request! Please check out our [contributing guidelines](https://github.com/processing/p5.js-web-editor/blob/develop/.github/CONTRIBUTING.md) if you haven't already.
 
 # Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge
 
-# Comment to be posted to on pull requests merged by a first time user
+# Comment to be posted to on pull requests merged by a first time user

.github/workflows/deploy-staging.yml

@@ -0,0 +1,62 @@
+name: Deploy to staging
+on:
+  workflow_run:
+    workflows: ["Test"]
+    branches:
+      - develop
+    types:
+      - completed
+env:
+  PROJECT_ID: ${{ secrets.GKE_PROJECT }}
+  GKE_CLUSTER: p5js-web-editor-cluster
+  GKE_ZONE: us-east1-c
+  DEPLOYMENT_NAME: web-editor-node
+  IMAGE: ${{ secrets.DOCKER_USERNAME }}/p5.js-web-editor-staging
+jobs:
+  push_to_registry:
+    environment: staging
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Build and push to Docker Hub
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: ./Dockerfile
+          pull: true
+          push: true
+          tags: |
+            ${{ env.IMAGE }}:${{ github.sha }}
+            ${{ env.IMAGE }}:latest
+          target: production
+      # Setup gcloud CLI
+      - uses: google-github-actions/[email protected]
+        with:
+          service_account_key: ${{ secrets.GKE_SA_KEY }}
+          project_id: ${{ secrets.GKE_PROJECT }}
+ 
+      # Configure docker to use the gcloud command-line tool as a credential helper
+      - run: |-
+          gcloud --quiet auth configure-docker
+        
+      # Get the GKE credentials so we can deploy to the cluster
+      - uses: google-github-actions/[email protected]
+        with:
+          cluster_name: ${{ env.GKE_CLUSTER }}
+          location: ${{ env.GKE_ZONE }}
+          credentials: ${{ secrets.GKE_SA_KEY }}
+
+      # Deploy the Docker image to the GKE cluster
+      - name: Deploy
+        run: |-
+          kubectl set image deployment/$DEPLOYMENT_NAME web-editor-app=index.docker.io/$IMAGE:$GITHUB_SHA --namespace=staging
+          kubectl get services -o wide

.github/workflows/deploy.yml

@@ -0,0 +1,65 @@
+name: Deploy to production
+on:
+  workflow_run:
+    workflows: ["Test"]
+    branches:
+      - release
+    types:
+      - completed
+env:
+  PROJECT_ID: ${{ secrets.GKE_PROJECT }}
+  GKE_CLUSTER: p5js-web-editor-cluster
+  GKE_ZONE: us-east1-c
+  DEPLOYMENT_NAME: web-editor-node
+  IMAGE: ${{ secrets.DOCKER_USERNAME }}/p5.js-web-editor
+jobs:
+  push_to_registry:
+    environment: production
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+        with:
+          ref: release
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Build and push to Docker Hub
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: ./Dockerfile
+          pull: true
+          push: true
+          tags: |
+            ${{ env.IMAGE }}:${{ github.sha }}
+            ${{ env.IMAGE }}:latest
+          target: production
+      # Setup gcloud CLI
+      - uses: google-github-actions/[email protected]
+        with:
+          service_account_key: ${{ secrets.GKE_SA_KEY }}
+          project_id: ${{ secrets.GKE_PROJECT }}
+ 
+      # Configure docker to use the gcloud command-line tool as a credential helper
+      - run: |-
+          gcloud --quiet auth configure-docker
+        
+      # Get the GKE credentials so we can deploy to the cluster
+      - uses: google-github-actions/[email protected]
+        with:
+          cluster_name: ${{ env.GKE_CLUSTER }}
+          location: ${{ env.GKE_ZONE }}
+          credentials: ${{ secrets.GKE_SA_KEY }}
+
+      # Deploy the Docker image to the GKE cluster
+      - name: Deploy
+        run: |-
+          kubectl set image deployment/$DEPLOYMENT_NAME web-editor-app=index.docker.io/$IMAGE:$GITHUB_SHA
+          kubectl get services -o wide
+

.github/workflows/test.yml

@@ -0,0 +1,19 @@
+name: Test
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    name: Test and lint code base
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js
+      uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+    - run: npm install
+    - run: npm run test
+    - run: npm run lint
+
+

.gitignore

@@ -6,7 +6,6 @@
 node_modules/
 npm-debug.log
 dump.rdb
-public/*
 static/dist/
 static/css/app.min.css
 dist/

.prettierrc

@@ -0,0 +1,19 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "parser": "babel",
+  "printWidth": 80,
+  "proseWrap": "never",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false,
+  "quoteProps": "as-needed",
+  "endOfLine":"auto"
+}

Dockerfile

@@ -4,6 +4,7 @@ ENV APP_HOME=/usr/src/app \
 RUN mkdir -p $APP_HOME
 WORKDIR $APP_HOME
 EXPOSE 8000
+EXPOSE 8002
 
 FROM base as development
 ENV NODE_ENV development
@@ -15,6 +16,7 @@ COPY ./webpack ./webpack
 COPY client ./client
 COPY server ./server
 COPY translations/locales ./translations/locales
+COPY public ./public
 CMD ["npm", "start"]
 
 FROM development as build

README.md

@@ -3,7 +3,7 @@
 
 Documentation is also available in the following languages:
 
-[한국어](https://github.com/processing/p5.js-web-editor/blob/master/translations/ko)
+[한국어](https://github.com/processing/p5.js-web-editor/blob/develop/translations/ko)
 
 ## Welcome! 👋👋🏿👋🏽👋🏻👋🏾👋🏼
 
@@ -23,15 +23,15 @@ All contributors to the p5.js Web Editor are expected to follow the [Code of Con
 
 The p5.js Web Editor is a collaborative project created by many individuals, and you are invited to help. All types of involvement are welcome! Please check out the [contribution guide](./.github/CONTRIBUTING.md) for more details.
 
-Developers, check the [developer docs](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/) details about contributing code, bug fixes, and documentation. To start writing code, a great place to start is the [development guide](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/development.md).
+Developers, check the [developer docs](https://github.com/processing/p5.js-web-editor/blob/develop/developer_docs/) details about contributing code, bug fixes, and documentation. To start writing code, a great place to start is the [development guide](https://github.com/processing/p5.js-web-editor/blob/develop/developer_docs/development.md).
 
 ## Issues
 
 If you have found a bug in the p5.js Web Editor, you can file it under the ["issues" tab](https://github.com/processing/p5.js-web-editor/issues).
 
 Please post bugs and feature requests in the correct repository:
 
-* p5.js library and p5.dom: [https://github.com/processing/p5.js/issues](https://github.com/processing/p5.js/issues)
+* p5.js library: [https://github.com/processing/p5.js/issues](https://github.com/processing/p5.js/issues)
 * p5.accessibility: [https://github.com/processing/p5.accessibility/issues](https://github.com/processing/p5.accessibility/issues)
 * p5.sound: [https://github.com/processing/p5.js-sound/issues](https://github.com/processing/p5.js-sound/issues)
 * p5.js website: [https://github.com/processing/p5.js-website/issues](https://github.com/processing/p5.js-website/issues)