Update CoC to match p5.js repo, add CoC to Policy documents

Author: catarak

.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 [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.
-
-## 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.

client/modules/IDE/components/About.jsx

@@ -168,6 +168,16 @@ function About(props) {
             Terms of Use
           </Link>
         </p>
+        <p className="about__content-column-list">
+          <Link to="/code-of-conduct">
+            <AsteriskIcon
+              className="about__content-column-asterisk"
+              aria-hidden="true"
+              focusable="false"
+            />
+            Code of Conduct
+          </Link>
+        </p>
       </div>
       <div className="about__footer">
         <p className="about__footer-list">

client/modules/IDE/pages/CodeOfConduct.jsx

@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from 'react';
+import Helmet from 'react-helmet';
+import axios from 'axios';
+import PolicyContainer from '../components/PolicyContainer';
+
+function CodeOfConduct() {
+  const [codeOfConduct, setCodeOfConduct] = useState('');
+  useEffect(() => {
+    axios.get('code-of-conduct.md').then((response) => {
+      setCodeOfConduct(response.data);
+    });
+  }, []);
+  return (
+    <>
+      <Helmet>
+        <title>p5.js Web Editor | Code of Conduct</title>
+      </Helmet>
+      <PolicyContainer policy={codeOfConduct} />
+    </>
+  );
+}
+
+export default CodeOfConduct;

client/modules/IDE/pages/Legal.jsx

@@ -5,6 +5,7 @@ import { browserHistory } from 'react-router';
 import styled from 'styled-components';
 import PrivacyPolicy from './PrivacyPolicy';
 import TermsOfUse from './TermsOfUse';
+import CodeOfConduct from './CodeOfConduct';
 import RootPage from '../../../components/RootPage';
 import Nav from '../../../components/Nav';
 import { remSize, prop } from '../../../theme';
@@ -32,8 +33,10 @@ function Legal({ location }) {
   useEffect(() => {
     if (location.pathname === '/privacy-policy') {
       setSelectedIndex(0);
-    } else {
+    } else if (location.pathname === '/terms-of-use') {
       setSelectedIndex(1);
+    } else {
+      setSelectedIndex(2);
     }
   }, [location]);
 
@@ -45,6 +48,9 @@ function Legal({ location }) {
     } else if (index === 1) {
       setSelectedIndex(1);
       browserHistory.push('/terms-of-use');
+    } else if (index === 2) {
+      setSelectedIndex(2);
+      browserHistory.push('/code-of-conduct');
     }
   }
 
@@ -59,13 +65,19 @@ function Legal({ location }) {
           <Tab>
             <TabTitle>Terms of Use</TabTitle>
           </Tab>
+          <Tab>
+            <TabTitle>Code of Conduct</TabTitle>
+          </Tab>
         </StyledTabList>
         <TabPanel>
           <PrivacyPolicy />
         </TabPanel>
         <TabPanel>
           <TermsOfUse />
         </TabPanel>
+        <TabPanel>
+          <CodeOfConduct />
+        </TabPanel>
       </Tabs>
     </RootPage>
   );

client/routes.jsx

@@ -122,6 +122,7 @@ const routes = (store) => (
     <Route path="/preferences" component={MobilePreferences} />
     <Route path="/privacy-policy" component={Legal} />
     <Route path="/terms-of-use" component={Legal} />
+    <Route path="/code-of-conduct" component={Legal} />
   </Route>
 );
 

public/code-of-conduct.md

@@ -0,0 +1,51 @@
+# p5.js Community Statement
+
+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 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 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.
+
+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.
+
+---
+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.

server/routes/server.routes.js

@@ -141,4 +141,8 @@ router.get('/terms-of-use', (req, res) => {
   res.send(renderIndex());
 });
 
+router.get('/code-of-conduct', (req, res) => {
+  res.send(renderIndex());
+});
+
 export default router;