From f18191793be5adfa9b98426433139fe31c3abbd8 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sun, 23 Apr 2017 13:09:52 -0300
Subject: [PATCH 1/5] fe plugins

---
 docs/frontend/PLUGINS.md | 208 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 208 insertions(+)
 create mode 100644 docs/frontend/PLUGINS.md

diff --git a/docs/frontend/PLUGINS.md b/docs/frontend/PLUGINS.md
new file mode 100644
index 000000000..94c7b49e9
--- /dev/null
+++ b/docs/frontend/PLUGINS.md
@@ -0,0 +1,208 @@
+# Plugins
+We can build plugins to extend the functionality of Talk.  Our plugins are powered by *React*, *Redux* and *GraphQL*. We can also build them with simple vanilla javascript. 
+The plugins live in the `/plugins` folder. Each plugin must have an `index.js` file and two folders `client` and `server`.
+
+Our plugin folder structure should look like this:
+```
+my-plugin/
+  ├── client/
+  ├── server/
+  └── index.js
+```
+
+
+### The Client Folder
+The frontend of our plugin lives inside the `client` folder. The `client`  folder must have an `index.js` file that exports the configuration of our plugin.
+
+```
+my-plugin/
+  ├── client/
+  │   └── index.js
+  ├── server/
+  └── index.js
+```
+
+For now our `index.js` file should look like this:
+
+```js
+export default {
+	// We will add more here later.
+};
+```
+
+
+###  Components
+We can add our components within the `client` folder.
+
+```
+my-plugin/
+  ├── client/
+  │   ├── MyComponent.js
+  │   └── index.js
+  ├── server/
+  └── index.js
+```
+
+####  Creating a Component
+Our component could look like this: 
+
+```js
+import React, {Component} from 'react';
+
+class MyButton extends Component {
+  render() {
+    return <button>My Button</button>;
+  }
+}
+
+export default MyButton;
+````
+
+We are just creating a component that creates a `button`. Now that we created our component we need to specify where it should get injected within Talk!
+To tell Talk where that Component should get injected we need to specify our *Slots*.
+
+Also, our Component can be a Stateless Component.
+
+```js
+import React from 'react';
+export default = () => <button>My Button</button>;
+````
+
+### Slots
+In Talk we have defined specific *Slots* where we can inject components. 
+
+Here is how we specify our slots config in `my-plugin/index.js`
+
+```js
+import MyButton from './MyButton';
+
+export default {
+  slots: {
+    commentDetail: [MyButton]
+  }
+};
+```
+
+Here I’m specifying that the MyComponent Component will take place within the `commentDetail` in Talk.
+
+`commentDetail` it’s a specific slot in the CommentStream. It means that it will be embedded inside de comment detail.
+
+Slots properties take an`Array` so we can add as many components as we want.
+
+#### Reducers and Actions : Redux
+
+Talk is powered by Redux and our plugins can too! Our plugins can have their own reducers and actions.
+
+```js
+import MyButton from './MyButton';
+import reducer from './reducer';
+
+export default {
+  slots: {
+    commentDetail: [MyButton],
+  },
+	reducer
+};
+```
+
+### Import Actions from Talk
+We can easily trigger `Talk` actions in our plugin Components.
+
+```js
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {addTag, removeTag} from 'coral-plugin-commentbox/actions';
+
+class MyButton extends Component {
+  render() {
+    return <button onClick={this.props.addTag('MY_TAG')}>My Button</button>;
+  }
+}
+
+const mapStateToProps = ({commentBox}) => ({commentBox});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({addTag, removeTag}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox);
+```
+
+### Styling our Plugin
+Talk uses CSS Modules. This basically means that you can also add your CSS Module to your plugin without colliding with the rest of Talk!
+
+##### My Component 
+```js
+import styles from './style.css';
+
+class MyCoralButton extends Component {
+  render() {
+    return <button className={styles.button}>My Button</button>;
+  }
+}
+````
+
+Our `style.css` should could look like this.
+```css
+
+.button {
+	background: coral;
+	border-radius: 3px;
+}
+```
+
+## ESlint and Babel
+In talk we use `eslint:recommended` and Babel with the latest ECMAScript Features. But you can use your own! 
+While building your plugin you need to specify a `.eslintrc.json` file and a`.babelrc` file.
+
+#### `.eslintrc.json`
+```json
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
+````
+
+
+#### `. babelrc `
+```json
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}
+````
+
+### The server folder and the index file
+Read more about the `/server` and how to extend Talk here.
+[talk/PLUGINS.md at master · coralproject/talk · GitHub](https://github.com/coralproject/talk/blob/master/PLUGINS.md)
+
+

From dc81a59908029cd3825595bea7176dc05936490d Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Fri, 5 May 2017 16:40:17 -0400
Subject: [PATCH 2/5] Supported Browsers

---
 README.md | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index ef621b59c..3d8b3bf3a 100644
--- a/README.md
+++ b/README.md
@@ -42,9 +42,43 @@ available in the format: `<scheme>://<host>` without the path.
 Refer to the wiki page on [Configuration Loading](https://github.com/coralproject/talk/wiki/Configuration-Loading) for
 alternative methods of loading configuration during development.
 
+## Supported Browsers
+
+### Web
+
+- Chrome: latest 2 versions
+- Firefox: latest 2 versions, and most recent extended support version, if any
+- Safari: latest 2 versions
+- Internet Explorer: IE Edge, 11
+
+### iOS Devices
+
+- iPad
+- iPad Pro
+- iPhone 6 Plus
+- iPhone 6
+- iPhone 5
+
+### iOS Browsers
+
+- Chrome for iOS: latest version
+- Firefox for iOS: latest version
+- Safari for iOS: latest version
+
+### Android Devices
+
+- Galaxy S5
+- Nexus 5X
+- Nexus 6P
+
+### Android Browsers
+
+- Chrome for Android: latest version
+- Firefox for Android: latest version
+
 ### License
 
-    Copyright 2016 Mozilla Foundation
+    Copyright 2017 Mozilla Foundation
 
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.

From b15a2af38c68b24290a5845b623659c29426cdc5 Mon Sep 17 00:00:00 2001
From: Kim Gardner <kgardnr@gmail.com>
Date: Fri, 5 May 2017 16:45:15 -0400
Subject: [PATCH 3/5] Update formatting of License info

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3d8b3bf3a..74097d48c 100644
--- a/README.md
+++ b/README.md
@@ -76,7 +76,7 @@ alternative methods of loading configuration during development.
 - Chrome for Android: latest version
 - Firefox for Android: latest version
 
-### License
+## License
 
     Copyright 2017 Mozilla Foundation
 

From b019c5e180baf8b01b3c55b8b997542728eabc5b Mon Sep 17 00:00:00 2001
From: David Erwin <davidjerwin@gmail.com>
Date: Mon, 8 May 2017 10:36:36 -0400
Subject: [PATCH 4/5] Separate supported and experimental plugin guildes

---
 docs/frontend/PLUGINS-experimental.md | 102 +++++++++++++++++++
 docs/frontend/PLUGINS.md              | 136 +++++---------------------
 2 files changed, 126 insertions(+), 112 deletions(-)
 create mode 100644 docs/frontend/PLUGINS-experimental.md

diff --git a/docs/frontend/PLUGINS-experimental.md b/docs/frontend/PLUGINS-experimental.md
new file mode 100644
index 000000000..895be5900
--- /dev/null
+++ b/docs/frontend/PLUGINS-experimental.md
@@ -0,0 +1,102 @@
+# Experimental plugins
+
+Talk plugins are, in essence, small programs that hook into the core application in a variety of ways. Ultimately, this code can do anything that javascript is capable of. In addition, plugins can import any core code to hook into talk at any level.
+
+If you want to write plugins that integrate with core code beyond the api described in [PLUGINS.md](PLUGINS.md), please keep the following things in mind:
+
+* core code may change and break your plugin
+* you may introduce inefficiencies with your plugin that could hurt performance/crash Talk
+* you may cause bugs in other areas of Talk
+
+If you'd like to build a supported plugin but don't have the hooks you need, please file an issue on this repo and we can discuss deepening the supported plugin api!
+
+With that said, here's some of the prime experimental integration points:
+
+## Reducers and Actions : Redux
+
+Talk is powered by Redux and our plugins can too! Our plugins can have their own reducers and actions.
+
+```js
+import MyButton from './MyButton';
+import reducer from './reducer';
+
+export default {
+  slots: {
+    commentDetail: [MyButton],
+  },
+	reducer
+};
+```
+
+## Import Actions from Talk
+We can easily trigger `Talk` actions in our plugin Components.
+
+```js
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {addTag, removeTag} from 'coral-plugin-commentbox/actions';
+
+class MyButton extends Component {
+  render() {
+    return <button onClick={this.props.addTag('MY_TAG')}>My Button</button>;
+  }
+}
+
+const mapStateToProps = ({commentBox}) => ({commentBox});
+
+const mapDispatchToProps = dispatch =>
+  bindActionCreators({addTag, removeTag}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox);
+```
+
+## ESlint and Babel
+In talk we use `eslint:recommended` and Babel with the latest ECMAScript Features. But you can use your own!
+While building your plugin you need to specify a `.eslintrc.json` file and a`.babelrc` file.
+
+#### `.eslintrc.json`
+```json
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    }
+  },
+  "parser": "babel-eslint",
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "no-console": ["warn", { "allow": ["warn", "error"] }]
+  }
+}
+````
+
+
+#### `. babelrc `
+```json
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}
+````
diff --git a/docs/frontend/PLUGINS.md b/docs/frontend/PLUGINS.md
index 94c7b49e9..5a2530523 100644
--- a/docs/frontend/PLUGINS.md
+++ b/docs/frontend/PLUGINS.md
@@ -1,28 +1,32 @@
 # Plugins
-We can build plugins to extend the functionality of Talk.  Our plugins are powered by *React*, *Redux* and *GraphQL*. We can also build them with simple vanilla javascript. 
+We can build plugins to extend the functionality of Talk.  
+
+This guide is a walkthrough of our plugin architecture and components that we provide that allow you to build on top of Core coral components without having to understand the concepts there in. It is organized into three sections:
+
+* Plugin architecture
+* Using our building block components
+* Styling
+
+Advanced users will quickly realize that our plugins have complete access to core code. If you would like to write advanced plugins that reach outside of our published API as described in this document, please see [our notes on experimental pluginss](PLUGINS-experimental.md).
+
+Under the hood our plugins are powered by *React*, *Redux* and *GraphQL*. We can also build them with simple vanilla javascript.
+
+## Plugin Architecture
+
 The plugins live in the `/plugins` folder. Each plugin must have an `index.js` file and two folders `client` and `server`.
 
-Our plugin folder structure should look like this:
-```
-my-plugin/
-  ├── client/
-  ├── server/
-  └── index.js
-```
-
-
 ### The Client Folder
 The frontend of our plugin lives inside the `client` folder. The `client`  folder must have an `index.js` file that exports the configuration of our plugin.
 
 ```
 my-plugin/
   ├── client/
-  │   └── index.js
+  │   └── index.js <-- index for client side functionality
   ├── server/
-  └── index.js
+  └── index.js <-- base plugin index
 ```
 
-For now our `index.js` file should look like this:
+For now our base plugin `index.js` file should look like this:
 
 ```js
 export default {
@@ -30,9 +34,8 @@ export default {
 };
 ```
 
-
 ###  Components
-We can add our components within the `client` folder.
+We can add our components (or any other javascript code) within the `client` folder.
 
 ```
 my-plugin/
@@ -44,7 +47,7 @@ my-plugin/
 ```
 
 ####  Creating a Component
-Our component could look like this: 
+Our component could look like this:
 
 ```js
 import React, {Component} from 'react';
@@ -56,20 +59,19 @@ class MyButton extends Component {
 }
 
 export default MyButton;
-````
+```
 
 We are just creating a component that creates a `button`. Now that we created our component we need to specify where it should get injected within Talk!
-To tell Talk where that Component should get injected we need to specify our *Slots*.
 
-Also, our Component can be a Stateless Component.
+To tell Talk where that Component should get injected we need to specify which *Slots* to insert it into.
 
 ```js
 import React from 'react';
 export default = () => <button>My Button</button>;
-````
+```
 
 ### Slots
-In Talk we have defined specific *Slots* where we can inject components. 
+In Talk we have defined specific *Slots* where we can inject components.
 
 Here is how we specify our slots config in `my-plugin/index.js`
 
@@ -89,49 +91,10 @@ Here I’m specifying that the MyComponent Component will take place within the
 
 Slots properties take an`Array` so we can add as many components as we want.
 
-#### Reducers and Actions : Redux
-
-Talk is powered by Redux and our plugins can too! Our plugins can have their own reducers and actions.
-
-```js
-import MyButton from './MyButton';
-import reducer from './reducer';
-
-export default {
-  slots: {
-    commentDetail: [MyButton],
-  },
-	reducer
-};
-```
-
-### Import Actions from Talk
-We can easily trigger `Talk` actions in our plugin Components.
-
-```js
-import React, {Component} from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {addTag, removeTag} from 'coral-plugin-commentbox/actions';
-
-class MyButton extends Component {
-  render() {
-    return <button onClick={this.props.addTag('MY_TAG')}>My Button</button>;
-  }
-}
-
-const mapStateToProps = ({commentBox}) => ({commentBox});
-
-const mapDispatchToProps = dispatch =>
-  bindActionCreators({addTag, removeTag}, dispatch);
-
-export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox);
-```
-
 ### Styling our Plugin
 Talk uses CSS Modules. This basically means that you can also add your CSS Module to your plugin without colliding with the rest of Talk!
 
-##### My Component 
+##### My Component
 ```js
 import styles from './style.css';
 
@@ -151,58 +114,7 @@ Our `style.css` should could look like this.
 }
 ```
 
-## ESlint and Babel
-In talk we use `eslint:recommended` and Babel with the latest ECMAScript Features. But you can use your own! 
-While building your plugin you need to specify a `.eslintrc.json` file and a`.babelrc` file.
-
-#### `.eslintrc.json`
-```json
-{
-  "env": {
-    "browser": true,
-    "es6": true,
-    "mocha": true
-  },
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "experimentalObjectRestSpread": true,
-      "jsx": true
-    }
-  },
-  "parser": "babel-eslint",
-  "plugins": [
-    "react"
-  ],
-  "rules": {
-    "react/jsx-uses-react": "error",
-    "react/jsx-uses-vars": "error",
-    "no-console": ["warn", { "allow": ["warn", "error"] }]
-  }
-}
-````
-
-
-#### `. babelrc `
-```json
-{
-  "presets": [
-    "es2015"
-  ],
-  "plugins": [
-    "add-module-exports",
-    "transform-class-properties",
-    "transform-decorators-legacy",
-    "transform-object-assign",
-    "transform-object-rest-spread",
-    "transform-async-to-generator",
-    "transform-react-jsx"
-  ]
-}
-````
 
 ### The server folder and the index file
 Read more about the `/server` and how to extend Talk here.
 [talk/PLUGINS.md at master · coralproject/talk · GitHub](https://github.com/coralproject/talk/blob/master/PLUGINS.md)
-
-

From e2ed21e113592d972a0f22f2d434e05369e265f0 Mon Sep 17 00:00:00 2001
From: David Erwin <davidjerwin@gmail.com>
Date: Mon, 8 May 2017 12:00:22 -0400
Subject: [PATCH 5/5] Adding building block documentation

---
 docs/frontend/PLUGINS.md | 74 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 70 insertions(+), 4 deletions(-)

diff --git a/docs/frontend/PLUGINS.md b/docs/frontend/PLUGINS.md
index 5a2530523..fa582877c 100644
--- a/docs/frontend/PLUGINS.md
+++ b/docs/frontend/PLUGINS.md
@@ -34,7 +34,8 @@ export default {
 };
 ```
 
-###  Components
+###  Creating a Component
+
 We can add our components (or any other javascript code) within the `client` folder.
 
 ```
@@ -46,7 +47,6 @@ my-plugin/
   └── index.js
 ```
 
-####  Creating a Component
 Our component could look like this:
 
 ```js
@@ -61,7 +61,7 @@ class MyButton extends Component {
 export default MyButton;
 ```
 
-We are just creating a component that creates a `button`. Now that we created our component we need to specify where it should get injected within Talk!
+Here we create a component that renders a `button`. Now that we created our component we need to specify where it should get injected within Talk!
 
 To tell Talk where that Component should get injected we need to specify which *Slots* to insert it into.
 
@@ -91,7 +91,73 @@ Here I’m specifying that the MyComponent Component will take place within the
 
 Slots properties take an`Array` so we can add as many components as we want.
 
-### Styling our Plugin
+## Building Blocks (TBD)
+
+`Note: the concepts in this section are still to be implemented. Code samples are for discussion and may change.`
+
+In order to allow you to build more complex plugins, we have wrapped some of our functionality in higher order componenets that expose a simple api.
+
+### Reactions
+
+Reactions provide users the ability to 'like', 'respect', etc... comments.
+
+```
+<Reaction name="love">
+	<img class="coralsrc="" />
+</Reaction>
+```
+
+Note: some server side work will need to accompany this client side component. See the like and respect plugins as examples.
+
+### Comment Stream
+
+Comment streams may be created with filtering and ordering in place:
+
+* filter by user
+* filter by tag
+* sort by date ascending / descrnding
+
+```
+<CommentStream userFilter="[userId]" tagFilter="[tag]" sort="[ascending|descending]"></CommentStream>
+```
+
+### Comment Commit hooks
+
+// docs for the pre/post comment submit commit hooks
+
+### Mod Queues
+
+Moderation queues can be added via configuration objects passed in through plugins.
+
+Basic mod queues will resemble the current moderation queues but can be generated from different lists of comments.
+
+* filter by user tag
+* filter by comment tag
+* filter by comment status
+* Custom queries (paired with back end plugins that provide queries to get the data)
+
+#### Advanced mod queues
+
+Advanced mod queues can be created giving plugin authors the power to create the cards that appear in the queue, create actions and custom buttons, etc...
+
+### Custom Configuration
+
+Plugins may rely on configuration options that admins/moderators can set in the Configuration section.
+
+Basic settings can be added via json configuration in a plugin.
+
+* Setting headline
+* Setting description
+* Setting input type
+* Default value
+* Variable name
+
+#### Advanced Custom Configuration (low prioritiy)
+
+Users can inject configuration interfaces that they create into the configuration allowing for more advanced configuration.
+
+
+## Styling Plugins
 Talk uses CSS Modules. This basically means that you can also add your CSS Module to your plugin without colliding with the rest of Talk!
 
 ##### My Component