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 01/13] 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 5f9240f201d2ff298cfb7fa44466df2cdb68d393 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Thu, 4 May 2017 16:32:07 -0600
Subject: [PATCH 02/13] open the comment in context when clicked

---
 .../src/containers/ModerationQueue/components/Comment.js  | 5 +++--
 .../src/containers/ModerationQueue/components/styles.css  | 8 ++++++++
 .../coral-admin/src/graphql/fragments/commentView.graphql | 1 +
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
index e5afd9726..ac16082d2 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
@@ -57,7 +57,7 @@ const Comment = ({actions = [], comment, ...props}) => {
             <Link to={`/admin/moderate/${comment.asset.id}`}>Moderate →</Link>
           )}
         </div>
-        <div className={styles.itemBody}>
+        <a className={styles.itemBody} href={`${comment.asset.url}#${comment.id}`} target="_blank">
           <p className={styles.body}>
             <Highlighter
               searchWords={[...props.suspectWords, ...props.bannedWords, ...linkText]}
@@ -79,7 +79,7 @@ const Comment = ({actions = [], comment, ...props}) => {
               })}
             </div>
           </div>
-        </div>
+        </a>
       </div>
       {
         flagActions && flagActions.length
@@ -106,6 +106,7 @@ Comment.propTypes = {
     }),
     asset: PropTypes.shape({
       title: PropTypes.string,
+      url: PropTypes.string,
       id: PropTypes.string
     })
   })
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index a22fbbc64..074bc34f1 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -231,6 +231,14 @@ span {
     font-size: 14px;
     line-height: 1.5;
     font-weight: 300;
+    cursor: pointer;
+    text-decoration: none;
+    background-color: white;
+    transition: background-color .3s;
+
+    &:hover {
+      background-color: #eee;
+    }
   }
 
   .avatar {
diff --git a/client/coral-admin/src/graphql/fragments/commentView.graphql b/client/coral-admin/src/graphql/fragments/commentView.graphql
index 51b0a3f44..1f3b8b1d3 100644
--- a/client/coral-admin/src/graphql/fragments/commentView.graphql
+++ b/client/coral-admin/src/graphql/fragments/commentView.graphql
@@ -11,6 +11,7 @@ fragment commentView on Comment {
     asset {
       id
       title
+      url
     }
     action_summaries {
       count

From 5db48e8c0f96ba2b73fde2c111e132ae47e1efa3 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Fri, 5 May 2017 11:35:18 -0600
Subject: [PATCH 03/13] make it a blue link instead of the whole thing

---
 .../ModerationQueue/components/Comment.js     |  6 +++---
 .../ModerationQueue/components/styles.css     | 21 +++++++++++++++++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
index ac16082d2..b3813bbc8 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
@@ -57,11 +57,11 @@ const Comment = ({actions = [], comment, ...props}) => {
             <Link to={`/admin/moderate/${comment.asset.id}`}>Moderate →</Link>
           )}
         </div>
-        <a className={styles.itemBody} href={`${comment.asset.url}#${comment.id}`} target="_blank">
+        <div className={styles.itemBody}>
           <p className={styles.body}>
             <Highlighter
               searchWords={[...props.suspectWords, ...props.bannedWords, ...linkText]}
-              textToHighlight={comment.body} />
+              textToHighlight={comment.body} /> <a className={styles.external} href={`${comment.asset.url}#${comment.id}`} target="_blank"><Icon name='open_in_new' /> View context</a>
           </p>
           <div className={styles.sideActions}>
             {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
@@ -79,7 +79,7 @@ const Comment = ({actions = [], comment, ...props}) => {
               })}
             </div>
           </div>
-        </a>
+        </div>
       </div>
       {
         flagActions && flagActions.length
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index 074bc34f1..6d09b2d36 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -431,3 +431,24 @@ span {
   position: relative;
   top: 7px;
 }
+
+.external {
+  font-size: .7em;
+  text-decoration: none;
+  color: #063b9a;
+  cursor: pointer;
+  font-weight: normal;
+  margin-left: 10px;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: underline;
+    opacity: .9;
+  }
+
+  i {
+    font-size: 12px;
+    top: 2px;
+    position: relative;
+  }
+}

From 519ca7beb51fa6f66b3ab59b3db58e1ee76e354a Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Fri, 5 May 2017 11:55:28 -0600
Subject: [PATCH 04/13] =?UTF-8?q?en=20espa=C3=B1ol?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/containers/ModerationQueue/components/Comment.js        | 2 +-
 client/coral-admin/src/translations.json                        | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
index b3813bbc8..afe0c967f 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/Comment.js
@@ -61,7 +61,7 @@ const Comment = ({actions = [], comment, ...props}) => {
           <p className={styles.body}>
             <Highlighter
               searchWords={[...props.suspectWords, ...props.bannedWords, ...linkText]}
-              textToHighlight={comment.body} /> <a className={styles.external} href={`${comment.asset.url}#${comment.id}`} target="_blank"><Icon name='open_in_new' /> View context</a>
+              textToHighlight={comment.body} /> <a className={styles.external} href={`${comment.asset.url}#${comment.id}`} target="_blank"><Icon name='open_in_new' /> {lang.t('comment.view_context')}</a>
           </p>
           <div className={styles.sideActions}>
             {links ? <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index 3f9392656..68a3b93d5 100644
--- a/client/coral-admin/src/translations.json
+++ b/client/coral-admin/src/translations.json
@@ -72,6 +72,7 @@
       "flagged": "flagged",
       "anon": "Anonymous",
       "ban_user": "Ban User",
+      "view_context": "View context",
       "banned_user": "Banned User"
     },
     "user": {
@@ -259,6 +260,7 @@
     "comment": {
       "flagged": "marcado",
       "anon": "Anónimo",
+      "view_context": "Ver contexto",
       "ban_user": "Suspender Usuario",
       "banned_user": "Usuario Suspendido"
     },

From f8e8eef989d125925adec83744c406409b24a3ff Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Fri, 5 May 2017 14:05:52 -0600
Subject: [PATCH 05/13] float: right; in css is just fine.

---
 .../coral-configure/components/ConfigureCommentStream.css   | 6 ++----
 client/coral-configure/components/ConfigureCommentStream.js | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/client/coral-configure/components/ConfigureCommentStream.css b/client/coral-configure/components/ConfigureCommentStream.css
index 335c94377..a8cbc36cb 100644
--- a/client/coral-configure/components/ConfigureCommentStream.css
+++ b/client/coral-configure/components/ConfigureCommentStream.css
@@ -3,10 +3,8 @@
 }
 
 .apply {
-  position: absolute;
-  top: 38%;
-  transform: translateX(-50%);
-  right: 0;
+  float: right;
+  margin: 0 10px;
 }
 
 .wrapper ul {
diff --git a/client/coral-configure/components/ConfigureCommentStream.js b/client/coral-configure/components/ConfigureCommentStream.js
index bef53e1ef..6c00b5996 100644
--- a/client/coral-configure/components/ConfigureCommentStream.js
+++ b/client/coral-configure/components/ConfigureCommentStream.js
@@ -12,7 +12,6 @@ export default ({handleChange, handleApply, changed, ...props}) => (
     <div className={styles.wrapper}>
       <div className={styles.container}>
         <h3>{lang.t('configureCommentStream.title')}</h3>
-        <p>{lang.t('configureCommentStream.description')}</p>
         <Button
           type="submit"
           className={styles.apply}
@@ -20,6 +19,7 @@ export default ({handleChange, handleApply, changed, ...props}) => (
           cStyle={changed ? 'green' : 'darkGrey'} >
           {lang.t('configureCommentStream.apply')}
         </Button>
+        <p>{lang.t('configureCommentStream.description')}</p>
       </div>
       <ul>
         <li>

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 06/13] 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 4ff42385e330db5a242b11c69336a1c24162ad13 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Fri, 5 May 2017 14:41:19 -0600
Subject: [PATCH 07/13] remove dead code

---
 .../src/containers/ModerationQueue/components/styles.css  | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index 6d09b2d36..966a37526 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -231,14 +231,6 @@ span {
     font-size: 14px;
     line-height: 1.5;
     font-weight: 300;
-    cursor: pointer;
-    text-decoration: none;
-    background-color: white;
-    transition: background-color .3s;
-
-    &:hover {
-      background-color: #eee;
-    }
   }
 
   .avatar {

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 08/13] 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 09/13] 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 10/13] 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

From bc3c73a992e0dfb9a873cc01d442110af4830ec8 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Mon, 8 May 2017 13:26:07 -0600
Subject: [PATCH 11/13] Fix for incorrect options passed to pubsub

---
 graph/pubsub.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/graph/pubsub.js b/graph/pubsub.js
index a5ee95b80..704f83725 100644
--- a/graph/pubsub.js
+++ b/graph/pubsub.js
@@ -2,4 +2,4 @@ const {RedisPubSub} = require('graphql-redis-subscriptions');
 
 const {connectionOptions} = require('../services/redis');
 
-module.exports = new RedisPubSub(connectionOptions);
+module.exports = new RedisPubSub({connection: connectionOptions});

From c00e6c1ecebc7643b54824bc84b27a8fcae5e33f Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Mon, 8 May 2017 13:40:24 -0600
Subject: [PATCH 12/13] default view is moderate > all

---
 client/coral-admin/src/AppRouter.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js
index af3423acc..989316dd9 100644
--- a/client/coral-admin/src/AppRouter.js
+++ b/client/coral-admin/src/AppRouter.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Router, Route, IndexRoute, IndexRedirect, browserHistory} from 'react-router';
+import {Router, Route, IndexRedirect, browserHistory} from 'react-router';
 
 import Stories from 'containers/Stories/Stories';
 import Configure from 'containers/Configure/Configure';
@@ -18,7 +18,7 @@ const routes = (
   <div>
     <Route exact path="/admin/install" component={InstallContainer}/>
     <Route path='/admin' component={LayoutContainer}>
-      <IndexRoute component={Dashboard} />
+      <IndexRedirect to='/admin/moderate/all' />
       <Route path='community' component={CommunityContainer} />
       <Route path='configure' component={Configure} />
       <Route path='stories' component={Stories} />

From 3e258b17873c0d56799cbea7bdef1614ba2591fe Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Mon, 8 May 2017 14:59:23 -0600
Subject: [PATCH 13/13] move approved tab

---
 .../ModerationQueue/components/ModerationMenu.js     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
index 39594274e..7a50e6270 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
@@ -28,12 +28,6 @@ const ModerationMenu = (
             activeClassName={styles.active}>
             <Icon name='question_answer' className={styles.tabIcon} /> {lang.t('modqueue.all')} <CommentCount count={allCount} />
           </Link>
-          <Link
-            to={getPath('accepted')}
-            className={`mdl-tabs__tab ${styles.tab}`}
-            activeClassName={styles.active}>
-            <Icon name='check' className={styles.tabIcon} /> {lang.t('modqueue.approved')} <CommentCount count={acceptedCount} />
-          </Link>
           <Link
             to={getPath('premod')}
             className={`mdl-tabs__tab ${styles.tab}`}
@@ -46,6 +40,12 @@ const ModerationMenu = (
             activeClassName={styles.active}>
             <Icon name='flag' className={styles.tabIcon} /> {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
           </Link>
+          <Link
+            to={getPath('accepted')}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            <Icon name='check' className={styles.tabIcon} /> {lang.t('modqueue.approved')} <CommentCount count={acceptedCount} />
+          </Link>
           <Link
             to={getPath('rejected')}
             className={`mdl-tabs__tab ${styles.tab}`}