From 3c3a0523de8816a77da51dbcdd52cf6dd9ffb92d Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 10 Jul 2017 16:27:15 -0300
Subject: [PATCH 01/11] Avatar support

---
 .../client/components/MyPluginComponent.ejs   |  25 +++
 .../plugin/client/components/style.ejs        |  27 +++
 .../src/components/Comment.css                |  11 +
 .../src/components/Comment.js                 | 209 ++++++++++--------
 package.json                                  |   2 +
 webpack.config.js                             |   4 -
 yarn.lock                                     |  33 ++-
 7 files changed, 208 insertions(+), 103 deletions(-)
 create mode 100644 bin/templates/plugin/client/components/MyPluginComponent.ejs
 create mode 100644 bin/templates/plugin/client/components/style.ejs

diff --git a/bin/templates/plugin/client/components/MyPluginComponent.ejs b/bin/templates/plugin/client/components/MyPluginComponent.ejs
new file mode 100644
index 0000000000..5732cd1465
--- /dev/null
+++ b/bin/templates/plugin/client/components/MyPluginComponent.ejs
@@ -0,0 +1,25 @@
+import React from 'react';
+import {CoralLogo} from 'plugin-api/beta/client/components/ui';
+import styles from './style.css';
+
+class MyPluginComponent extends React.Component {
+  render() {
+    return (
+      <div className={styles.myPluginContainer}>
+        <CoralLogo className={styles.logo}/>
+        <div className={styles.description}>
+          <h3><%= pluginName %> Plugin created by Talk CLI</h3>
+
+          <small>
+            To read more about plugins check{' '}
+            <a href="https://coralproject.github.io/talk/plugins-client.html">
+              our docs and guides!
+            </a>
+          </small>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default MyPluginComponent;
diff --git a/bin/templates/plugin/client/components/style.ejs b/bin/templates/plugin/client/components/style.ejs
new file mode 100644
index 0000000000..187e687503
--- /dev/null
+++ b/bin/templates/plugin/client/components/style.ejs
@@ -0,0 +1,27 @@
+.myPluginContainer {
+    padding: 10px;
+    background: #f0f0f0;
+    border: 1px solid #d6d6d6;
+    margin: 10px 0;
+    text-align: center;
+    border-radius: 3px;
+}
+
+.logo {
+  position: block;
+  animation: spin 2s infinite ease;
+  animation-delay: 1s;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.description {
+  color: #444444;
+}
diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css
index 4c8a9fc86b..9b96f74b5a 100644
--- a/client/coral-embed-stream/src/components/Comment.css
+++ b/client/coral-embed-stream/src/components/Comment.css
@@ -11,6 +11,7 @@
 
 .comment {
   padding-left: 20px;
+  flex: auto;
 }
 
 .commentLevel0 {
@@ -141,3 +142,13 @@
 .enter {
   animation: enter 1000ms;
 }
+
+.commentRow {
+  display: flex;
+  flex-flow: row;
+}
+
+.commentAvatar {
+  max-width: 50px;
+  margin-right: 10px;
+}
diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index 7cc8b1480d..4608341695 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -436,127 +436,140 @@ export default class Comment extends React.Component {
         id={`c_${comment.id}`}
       >
         {!isReply && <hr aria-hidden={true} />}
-        <div className={commentClassName}>
-          <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
-          {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
-
-          {commentIsBest(comment)
-            ? <TagLabel><BestIndicator /></TagLabel>
-            : null }
-
-          <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
-            <PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
-            {
-              (comment.editing && comment.editing.edited)
-              ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-              : null
-            }
-          </span>
-
+        
+        <div className={styles.commentRow}>
           <Slot
-            className={styles.commentInfoBar}
-            fill="commentInfoBar"
-            depth={depth}
+            className={styles.commentAvatar}
+            fill="commentAvatar"
             comment={comment}
             commentId={comment.id}
             data={this.props.data}
             root={this.props.root}
             inline
           />
+          <div className={commentClassName}>
+            <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
+            {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 
-          { (currentUser && (comment.user.id === currentUser.id)) &&
+            {commentIsBest(comment)
+              ? <TagLabel><BestIndicator /></TagLabel>
+              : null }
 
-            /* User can edit/delete their own comment for a short window after posting */
-            <span className={cn(styles.topRight)}>
+            <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+              <PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
               {
-                commentIsStillEditable(comment) &&
-                <a
-                  className={cn(styles.link, {[styles.active]: this.state.isEditing})}
-                  onClick={this.onClickEdit}>Edit</a>
+                (comment.editing && comment.editing.edited)
+                ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+                : null
               }
             </span>
-          }
-          { (currentUser && (comment.user.id !== currentUser.id)) &&
-
-              /* TopRightMenu allows currentUser to ignore other users' comments */
-              <span className={cn(styles.topRight, styles.topRightMenu)}>
-                <TopRightMenu
-                  comment={comment}
-                  ignoreUser={ignoreUser}
-                  addNotification={addNotification} />
-              </span>
-          }
-          {
-            this.state.isEditing
-            ? <EditableCommentContent
-                editComment={this.editComment}
-                addNotification={addNotification}
-                asset={asset}
-                comment={comment}
-                currentUser={currentUser}
-                maxCharCount={maxCharCount}
-                parentId={parentId}
-                stopEditing={this.stopEditing}
-                />
-            : <div>
-                <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
-              </div>
-          }
 
-          <div className="commentActionsLeft comment__action-container">
             <Slot
-              fill="commentReactions"
-              data={this.props.data}
-              root={this.props.root}
+              className={styles.commentInfoBar}
+              fill="commentInfoBar"
+              depth={depth}
               comment={comment}
               commentId={comment.id}
-              inline
-            />
-            <ActionButton>
-              <IfUserCanModifyBest user={currentUser}>
-                <BestButton
-                  isBest={commentIsBest(comment)}
-                  addBest={addBestTag}
-                  removeBest={removeBestTag}
-                />
-              </IfUserCanModifyBest>
-            </ActionButton>
-            {!disableReply &&
-              <ActionButton>
-                <ReplyButton
-                  onClick={this.showReplyBox}
-                  parentCommentId={parentId || comment.id}
-                  currentUserId={currentUser && currentUser.id}
-                />
-              </ActionButton>}
-          </div>
-          <div className="commentActionsRight comment__action-container">
-            <Slot
-              fill="commentActions"
-              wrapperComponent={ActionButton}
               data={this.props.data}
               root={this.props.root}
-              asset={asset}
-              comment={comment}
-              commentId={comment.id}
               inline
             />
-            <ActionButton>
-              <FlagComment
-                flaggedByCurrentUser={!!myFlag}
-                flag={myFlag}
-                id={comment.id}
-                author_id={comment.user.id}
-                postFlag={postFlag}
-                addNotification={addNotification}
-                postDontAgree={postDontAgree}
-                deleteAction={deleteAction}
-                showSignInDialog={showSignInDialog}
-                currentUser={currentUser}
+
+            { (currentUser && (comment.user.id === currentUser.id)) &&
+
+              /* User can edit/delete their own comment for a short window after posting */
+              <span className={cn(styles.topRight)}>
+                {
+                  commentIsStillEditable(comment) &&
+                  <a
+                    className={cn(styles.link, {[styles.active]: this.state.isEditing})}
+                    onClick={this.onClickEdit}>Edit</a>
+                }
+              </span>
+            }
+            { (currentUser && (comment.user.id !== currentUser.id)) &&
+
+                /* TopRightMenu allows currentUser to ignore other users' comments */
+                <span className={cn(styles.topRight, styles.topRightMenu)}>
+                  <TopRightMenu
+                    comment={comment}
+                    ignoreUser={ignoreUser}
+                    addNotification={addNotification} />
+                </span>
+            }
+            {
+              this.state.isEditing
+              ? <EditableCommentContent
+                  editComment={this.editComment}
+                  addNotification={addNotification}
+                  asset={asset}
+                  comment={comment}
+                  currentUser={currentUser}
+                  maxCharCount={maxCharCount}
+                  parentId={parentId}
+                  stopEditing={this.stopEditing}
+                  />
+              : <div>
+                  <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
+                </div>
+            }
+
+            <div className="commentActionsLeft comment__action-container">
+              <Slot
+                fill="commentReactions"
+                data={this.props.data}
+                root={this.props.root}
+                comment={comment}
+                commentId={comment.id}
+                inline
+              />
+              <ActionButton>
+                <IfUserCanModifyBest user={currentUser}>
+                  <BestButton
+                    isBest={commentIsBest(comment)}
+                    addBest={addBestTag}
+                    removeBest={removeBestTag}
+                  />
+                </IfUserCanModifyBest>
+              </ActionButton>
+              {!disableReply &&
+                <ActionButton>
+                  <ReplyButton
+                    onClick={this.showReplyBox}
+                    parentCommentId={parentId || comment.id}
+                    currentUserId={currentUser && currentUser.id}
+                  />
+                </ActionButton>}
+            </div>
+            <div className="commentActionsRight comment__action-container">
+              <Slot
+                fill="commentActions"
+                wrapperComponent={ActionButton}
+                data={this.props.data}
+                root={this.props.root}
+                asset={asset}
+                comment={comment}
+                commentId={comment.id}
+                inline
               />
-            </ActionButton>
+              <ActionButton>
+                <FlagComment
+                  flaggedByCurrentUser={!!myFlag}
+                  flag={myFlag}
+                  id={comment.id}
+                  author_id={comment.user.id}
+                  postFlag={postFlag}
+                  addNotification={addNotification}
+                  postDontAgree={postDontAgree}
+                  deleteAction={deleteAction}
+                  showSignInDialog={showSignInDialog}
+                  currentUser={currentUser}
+                />
+              </ActionButton>
+            </div>
           </div>
         </div>
+
         {activeReplyBox === comment.id
           ? <ReplyBox
               commentPostedHandler={() => {
diff --git a/package.json b/package.json
index 2183818968..6d792c70c9 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "env-rewrite": "^1.0.2",
     "express": "^4.15.2",
     "express-session": "^1.15.1",
+    "file-loader": "^0.11.2",
     "form-data": "^2.1.2",
     "fs-extra": "^3.0.1",
     "gql-merge": "^0.0.4",
@@ -209,6 +210,7 @@
     "style-loader": "^0.16.0",
     "supertest": "^2.0.1",
     "timeago.js": "^2.0.3",
+    "url-loader": "^0.5.9",
     "webpack": "^2.3.1"
   },
   "engines": {
diff --git a/webpack.config.js b/webpack.config.js
index c397268820..5c6655d17a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -70,10 +70,6 @@ const config = {
         ],
         test: /.css$/,
       },
-      {
-        loader: 'url-loader?limit=100000',
-        test: /\.png$/
-      },
       {
         loader: 'file-loader',
         test: /\.(jpg|png|gif|svg)$/
diff --git a/yarn.lock b/yarn.lock
index 9de2c35faf..ee4d6c9ebf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3119,6 +3119,12 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
+file-loader@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.11.2.tgz#4ff1df28af38719a6098093b88c82c71d1794a34"
+  dependencies:
+    loader-utils "^1.0.2"
+
 file-uri-to-path@0:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-0.0.2.tgz#37cdd1b5b905404b3f05e1b23645be694ff70f82"
@@ -3290,6 +3296,14 @@ fs-extra@^0.26.4:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
+fs-extra@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^3.0.0"
+    universalify "^0.1.0"
+
 fs-promise@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/fs-promise/-/fs-promise-0.3.1.tgz#bf34050368f24d6dc9dfc6688ab5cead8f86842a"
@@ -4632,6 +4646,12 @@ jsonfile@^2.1.0:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jsonfile@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-3.0.1.tgz#a5ecc6f65f53f662c4415c7675a0331d0992ec66"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
 jsonify@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
@@ -5227,7 +5247,7 @@ mime-types@~2.0.3:
   dependencies:
     mime-db "~1.12.0"
 
-mime@1.3.4, mime@^1.3.4:
+mime@1.3.4, mime@1.3.x, mime@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
 
@@ -8263,6 +8283,10 @@ uniqs@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
 
+universalify@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.0.tgz#9eb1c4651debcc670cc94f1a75762332bb967778"
+
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -8283,6 +8307,13 @@ urijs@1.16.1:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.16.1.tgz#859ad31890f5f9528727be89f1932c94fb4731e2"
 
+url-loader@^0.5.9:
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.9.tgz#cc8fea82c7b906e7777019250869e569e995c295"
+  dependencies:
+    loader-utils "^1.0.2"
+    mime "1.3.x"
+
 url-search-params@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/url-search-params/-/url-search-params-0.9.0.tgz#e71d7764a6503533cbfe9771b2963cb61ea1c225"

From f09550a4acd075411392dd0cdc321f23862aee06 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 10 Jul 2017 16:56:46 -0300
Subject: [PATCH 02/11] Avatar plugin support extending fragments

---
 .eslintignore                                 |   1 +
 .gitignore                                    |   1 +
 .../src/containers/Comment.js                 |   3 +-
 plugin-api/beta/client/hocs/index.js          |   1 +
 plugins/talk-plugin-avatar/client/.babelrc    |  14 ++++
 .../talk-plugin-avatar/client/.eslintrc.json  |  23 ++++++
 .../client/assets/avatar-placeholder.png      | Bin 0 -> 8811 bytes
 .../client/components/UserAvatar.js           |   8 ++
 .../client/components/styles.css              |   4 +
 .../client/containers/UserAvatar.js           |  12 +++
 plugins/talk-plugin-avatar/client/index.js    |   7 ++
 plugins/talk-plugin-avatar/index.js           |  75 ++++++++++++++++++
 plugins/talk-plugin-avatar/package.json       |  11 +++
 13 files changed, 159 insertions(+), 1 deletion(-)
 create mode 100644 plugins/talk-plugin-avatar/client/.babelrc
 create mode 100644 plugins/talk-plugin-avatar/client/.eslintrc.json
 create mode 100644 plugins/talk-plugin-avatar/client/assets/avatar-placeholder.png
 create mode 100644 plugins/talk-plugin-avatar/client/components/UserAvatar.js
 create mode 100644 plugins/talk-plugin-avatar/client/components/styles.css
 create mode 100644 plugins/talk-plugin-avatar/client/containers/UserAvatar.js
 create mode 100644 plugins/talk-plugin-avatar/client/index.js
 create mode 100644 plugins/talk-plugin-avatar/index.js
 create mode 100644 plugins/talk-plugin-avatar/package.json

diff --git a/.eslintignore b/.eslintignore
index 3a259c1067..9ed3e5361a 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -13,4 +13,5 @@ plugins/*
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
 !plugins/talk-plugin-permalink
+!plugins/talk-plugin-avatar
 node_modules
diff --git a/.gitignore b/.gitignore
index 0be1266c63..e94a01a6cc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,5 +26,6 @@ plugins/*
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
 !plugins/talk-plugin-permalink
+!plugins/talk-plugin-avatar
 
 **/node_modules/*
diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js
index 040d1a83eb..1ffac82cf6 100644
--- a/client/coral-embed-stream/src/containers/Comment.js
+++ b/client/coral-embed-stream/src/containers/Comment.js
@@ -10,7 +10,8 @@ const pluginFragments = getSlotsFragments([
   'commentInfoBar',
   'commentActions',
   'commentContent',
-  'commentReactions'
+  'commentReactions',
+  'commentAvatar'
 ]);
 
 export default withFragments({
diff --git a/plugin-api/beta/client/hocs/index.js b/plugin-api/beta/client/hocs/index.js
index 7be6826704..7f3476cfd1 100644
--- a/plugin-api/beta/client/hocs/index.js
+++ b/plugin-api/beta/client/hocs/index.js
@@ -1 +1,2 @@
 export {default as withReaction} from './withReaction';
+export {default as withFragments} from 'coral-framework/hocs/withFragments';
diff --git a/plugins/talk-plugin-avatar/client/.babelrc b/plugins/talk-plugin-avatar/client/.babelrc
new file mode 100644
index 0000000000..60be246eb1
--- /dev/null
+++ b/plugins/talk-plugin-avatar/client/.babelrc
@@ -0,0 +1,14 @@
+{
+  "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"
+  ]
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-avatar/client/.eslintrc.json b/plugins/talk-plugin-avatar/client/.eslintrc.json
new file mode 100644
index 0000000000..9fe56bd148
--- /dev/null
+++ b/plugins/talk-plugin-avatar/client/.eslintrc.json
@@ -0,0 +1,23 @@
+{
+  "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"] }]
+  }
+}
diff --git a/plugins/talk-plugin-avatar/client/assets/avatar-placeholder.png b/plugins/talk-plugin-avatar/client/assets/avatar-placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e828f0fb9c775fd824f571f78ee59e3f2f73ace
GIT binary patch
literal 8811
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
PKSg=4vUIhiaq#~E;=)iN

literal 0
HcmV?d00001

diff --git a/plugins/talk-plugin-avatar/client/components/UserAvatar.js b/plugins/talk-plugin-avatar/client/components/UserAvatar.js
new file mode 100644
index 0000000000..ae1ab30f97
--- /dev/null
+++ b/plugins/talk-plugin-avatar/client/components/UserAvatar.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './styles.css';
+import avatarPlaceholder from '../assets/avatar-placeholder.png';
+
+const UserAvatar = ({comment: {user}}) => 
+  <img src={!user.avatar ? avatarPlaceholder : user.avatar} className={styles.avatarPlaceholder} />
+
+export default UserAvatar;
diff --git a/plugins/talk-plugin-avatar/client/components/styles.css b/plugins/talk-plugin-avatar/client/components/styles.css
new file mode 100644
index 0000000000..fc61118454
--- /dev/null
+++ b/plugins/talk-plugin-avatar/client/components/styles.css
@@ -0,0 +1,4 @@
+.avatarPlaceholder {
+  height: 50px;
+  width: 50px;
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-avatar/client/containers/UserAvatar.js b/plugins/talk-plugin-avatar/client/containers/UserAvatar.js
new file mode 100644
index 0000000000..76b558e05b
--- /dev/null
+++ b/plugins/talk-plugin-avatar/client/containers/UserAvatar.js
@@ -0,0 +1,12 @@
+import {gql} from 'react-apollo';
+import {withFragments} from 'plugin-api/beta/client/hocs';
+import UserAvatar from '../components/UserAvatar';
+
+export default withFragments({
+  comment: gql`
+    fragment UserAvatar_comment on Comment {
+      user {
+        avatar
+      }
+    }`
+})(UserAvatar);
diff --git a/plugins/talk-plugin-avatar/client/index.js b/plugins/talk-plugin-avatar/client/index.js
new file mode 100644
index 0000000000..922e464b83
--- /dev/null
+++ b/plugins/talk-plugin-avatar/client/index.js
@@ -0,0 +1,7 @@
+import UserAvatar from './components/UserAvatar';
+
+export default {
+  slots: {
+    commentAvatar: [UserAvatar]
+  }
+}
\ No newline at end of file
diff --git a/plugins/talk-plugin-avatar/index.js b/plugins/talk-plugin-avatar/index.js
new file mode 100644
index 0000000000..b91a588350
--- /dev/null
+++ b/plugins/talk-plugin-avatar/index.js
@@ -0,0 +1,75 @@
+// We need the UserModel because we need to update the user.
+const UserModel = require('models/user');
+
+// Get some middleware to use with the webhook.
+const auth = require('middleware/authentication');
+const authz = require('middleware/authorization');
+
+// Load some config from the environment. This could be changed to a settings
+// option later if you want to go that route.
+const DEFAULT_AVATAR = process.env.DEFAULT_AVATAR;
+
+module.exports = {
+
+  // The new type definitions provides the new "avatar" field needed to inject
+  // into the User type.
+  typeDefs: `
+    type User {
+      avatar: String
+    }
+  `,
+
+  // The User resolver will return the avatar from the embedded user metadata.
+  resolvers: {
+    User: {
+      avatar(user) {
+        if (user && user.metadata && user.metadata.avatar) {
+          return user.metadata.avatar;
+        }
+
+        return DEFAULT_AVATAR;
+      }
+    }
+  },
+
+  // The custom router routes that we add here will allow an external system to
+  // update the avatar when it changes on the remote system. Note that we do
+  // use the auth/authz middleware, checking for the ADMIN role. This can be
+  // used in conjunction with a personal access token generated from an ADMIN.
+  router(router) {
+    router.post('/webhooks/user_update', auth, authz.needed('ADMIN'), async (req, res, next) => {
+
+      // We expect that the payload for the new avatar is in the following form:
+      //
+      // {
+      //   "id": "123123-123123-12312313",
+      //   "avatar": "https://great-cdn.cloudfront.net/best-photo.jpg"
+      //   ...
+      // }
+
+
+      // Extract the data from the payload.
+      let {
+        id,
+        avatar
+      } = req.body;
+
+      try {
+
+        // Update the user model.
+        await UserModel.update({id}, {
+          $set: {
+            'metadata.avatar': avatar
+          }
+        });
+
+      } catch (e) {
+        return next(e);
+      }
+
+      // Respond with a `202 Accepted` to indicate that we were able to process
+      // the update.
+      res.status(202).end()
+    });
+  }
+};
\ No newline at end of file
diff --git a/plugins/talk-plugin-avatar/package.json b/plugins/talk-plugin-avatar/package.json
new file mode 100644
index 0000000000..c652a86d01
--- /dev/null
+++ b/plugins/talk-plugin-avatar/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "talk-plugin-avatar",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Belen Curcio <curciobelen@gmail.com>",
+  "license": "ISC"
+}

From 2c7f5ca089873de0a9f1b7ab1178443698fe58bd Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 10 Jul 2017 17:00:01 -0300
Subject: [PATCH 03/11] linting

---
 plugins/talk-plugin-avatar/client/components/UserAvatar.js | 2 +-
 plugins/talk-plugin-avatar/client/index.js                 | 2 +-
 plugins/talk-plugin-avatar/index.js                        | 5 ++---
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/plugins/talk-plugin-avatar/client/components/UserAvatar.js b/plugins/talk-plugin-avatar/client/components/UserAvatar.js
index ae1ab30f97..a876695401 100644
--- a/plugins/talk-plugin-avatar/client/components/UserAvatar.js
+++ b/plugins/talk-plugin-avatar/client/components/UserAvatar.js
@@ -3,6 +3,6 @@ import styles from './styles.css';
 import avatarPlaceholder from '../assets/avatar-placeholder.png';
 
 const UserAvatar = ({comment: {user}}) => 
-  <img src={!user.avatar ? avatarPlaceholder : user.avatar} className={styles.avatarPlaceholder} />
+  <img src={!user.avatar ? avatarPlaceholder : user.avatar} className={styles.avatarPlaceholder} />;
 
 export default UserAvatar;
diff --git a/plugins/talk-plugin-avatar/client/index.js b/plugins/talk-plugin-avatar/client/index.js
index 922e464b83..a706a41d0a 100644
--- a/plugins/talk-plugin-avatar/client/index.js
+++ b/plugins/talk-plugin-avatar/client/index.js
@@ -4,4 +4,4 @@ export default {
   slots: {
     commentAvatar: [UserAvatar]
   }
-}
\ No newline at end of file
+};
diff --git a/plugins/talk-plugin-avatar/index.js b/plugins/talk-plugin-avatar/index.js
index b91a588350..fca0aafee8 100644
--- a/plugins/talk-plugin-avatar/index.js
+++ b/plugins/talk-plugin-avatar/index.js
@@ -47,7 +47,6 @@ module.exports = {
       //   ...
       // }
 
-
       // Extract the data from the payload.
       let {
         id,
@@ -69,7 +68,7 @@ module.exports = {
 
       // Respond with a `202 Accepted` to indicate that we were able to process
       // the update.
-      res.status(202).end()
+      res.status(202).end();
     });
   }
-};
\ No newline at end of file
+};

From 636f35718632b4e2d006595d110e9e0302239e86 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 10 Jul 2017 17:06:40 -0300
Subject: [PATCH 04/11] Reverting changes from old branch

---
 bin/cli-plugins                               | 51 +------------------
 .../client/components/MyPluginComponent.ejs   | 25 ---------
 .../plugin/client/components/style.ejs        | 27 ----------
 client/coral-framework/helpers/plugins.js     |  5 +-
 package.json                                  |  1 -
 scripts/templates/plugin/client/.babelrc      | 14 -----
 .../templates/plugin/client/.eslintrc.json    | 23 ---------
 scripts/templates/plugin/client/index.js      | 20 --------
 .../templates/plugin/client/translations.yml  | 15 ------
 scripts/templates/plugin/index.js             |  1 -
 10 files changed, 3 insertions(+), 179 deletions(-)
 delete mode 100644 bin/templates/plugin/client/components/MyPluginComponent.ejs
 delete mode 100644 bin/templates/plugin/client/components/style.ejs
 delete mode 100644 scripts/templates/plugin/client/.babelrc
 delete mode 100644 scripts/templates/plugin/client/.eslintrc.json
 delete mode 100644 scripts/templates/plugin/client/index.js
 delete mode 100644 scripts/templates/plugin/client/translations.yml
 delete mode 100644 scripts/templates/plugin/index.js

diff --git a/bin/cli-plugins b/bin/cli-plugins
index 6dc1276971..b1dee381b4 100755
--- a/bin/cli-plugins
+++ b/bin/cli-plugins
@@ -8,14 +8,13 @@
 // https://yarnpkg.com/
 
 const program = require('./commander');
-const inquirer = require('inquirer');
 
 // Make things colorful!
 require('colors');
 const emoji = require('node-emoji');
 
 const dir = process.cwd();
-const fs = require('fs-extra');
+const fs = require('fs');
 const path = require('path');
 const spawn = require('cross-spawn');
 const semver = require('semver');
@@ -273,58 +272,10 @@ async function reconcilePluginDeps({skipLocal, skipRemote, dryRun, upgradeRemote
   console.log(`✨ Done in ${totalTime}s.`);
 }
 
-async function createSeedPlugin() {
-  const pluginsDir = path.join(dir, 'plugins');
-
-  function pluginNameExists(pluginName) {
-    const pluginNames = fs.readdirSync(pluginsDir);
-    return !!pluginNames
-      .filter((pn) => pn === pluginName).length;
-  }
-
-  let answers = await inquirer.prompt([
-    {
-      type: 'input',
-      name: 'pluginName',
-      message: 'Plugin Name: i.e talk-plugin-permalink',
-      validate: (input) => {
-
-        if (pluginNameExists(input)) {
-          return 'Please, choose another name. That name already exists';
-        }
-
-        if (input && input.length > 0) {
-          return true;
-        }
-
-        return 'Plugin Name is required.';
-      }
-    }
-  ]);
-
-  // Creating plugin seed
-
-  const seedTemplatePlugin = path.join(dir, 'scripts/templates/plugin');
-  const newPluginPath = path.join(pluginsDir, answers.pluginName);
-  
-  try {
-    fs.copySync(seedTemplatePlugin, newPluginPath);
-
-    console.log('Success!');
-  } catch (err) {
-    console.error(err);
-  }
-}
-
 //==============================================================================
 // Setting up the program command line arguments.
 //==============================================================================
 
-program
-  .command('create')
-  .description('creates a seed plugin')
-  .action(createSeedPlugin);
-
 program
   .command('list')
   .description('')
diff --git a/bin/templates/plugin/client/components/MyPluginComponent.ejs b/bin/templates/plugin/client/components/MyPluginComponent.ejs
deleted file mode 100644
index 5732cd1465..0000000000
--- a/bin/templates/plugin/client/components/MyPluginComponent.ejs
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import {CoralLogo} from 'plugin-api/beta/client/components/ui';
-import styles from './style.css';
-
-class MyPluginComponent extends React.Component {
-  render() {
-    return (
-      <div className={styles.myPluginContainer}>
-        <CoralLogo className={styles.logo}/>
-        <div className={styles.description}>
-          <h3><%= pluginName %> Plugin created by Talk CLI</h3>
-
-          <small>
-            To read more about plugins check{' '}
-            <a href="https://coralproject.github.io/talk/plugins-client.html">
-              our docs and guides!
-            </a>
-          </small>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default MyPluginComponent;
diff --git a/bin/templates/plugin/client/components/style.ejs b/bin/templates/plugin/client/components/style.ejs
deleted file mode 100644
index 187e687503..0000000000
--- a/bin/templates/plugin/client/components/style.ejs
+++ /dev/null
@@ -1,27 +0,0 @@
-.myPluginContainer {
-    padding: 10px;
-    background: #f0f0f0;
-    border: 1px solid #d6d6d6;
-    margin: 10px 0;
-    text-align: center;
-    border-radius: 3px;
-}
-
-.logo {
-  position: block;
-  animation: spin 2s infinite ease;
-  animation-delay: 1s;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.description {
-  color: #444444;
-}
diff --git a/client/coral-framework/helpers/plugins.js b/client/coral-framework/helpers/plugins.js
index fcd0e6db63..ab5e3080e9 100644
--- a/client/coral-framework/helpers/plugins.js
+++ b/client/coral-framework/helpers/plugins.js
@@ -15,9 +15,9 @@ function getSlotComponents(slot) {
 
     // Filter out components that have been disabled in `plugin_config`
   return flatten(plugins
-    
+
     // Filter out components that have been disabled in `plugin_config`
-    .filter((o) => o.module.slots && (!pluginConfig || !pluginConfig[o.plugin] || !pluginConfig[o.plugin].disable_components))
+    .filter((o) => !pluginConfig || !pluginConfig[o.plugin] || !pluginConfig[o.plugin].disable_components)
 
     .filter((o) => o.module.slots[slot])
     .map((o) => o.module.slots[slot]));
@@ -78,7 +78,6 @@ export function getSlotsFragments(slots) {
   }
   const components = uniq(flattenDeep(slots.map((slot) => {
     return plugins
-    .filter((o) => o.module.slots)
     .filter((o) => o.module.slots[slot])
     .map((o) => o.module.slots[slot]);
   })));
diff --git a/package.json b/package.json
index 6d792c70c9..e9a3a84302 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,6 @@
     "express-session": "^1.15.1",
     "file-loader": "^0.11.2",
     "form-data": "^2.1.2",
-    "fs-extra": "^3.0.1",
     "gql-merge": "^0.0.4",
     "graphql": "^0.9.1",
     "graphql-errors": "^2.1.0",
diff --git a/scripts/templates/plugin/client/.babelrc b/scripts/templates/plugin/client/.babelrc
deleted file mode 100644
index 60be246eb1..0000000000
--- a/scripts/templates/plugin/client/.babelrc
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "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"
-  ]
-}
\ No newline at end of file
diff --git a/scripts/templates/plugin/client/.eslintrc.json b/scripts/templates/plugin/client/.eslintrc.json
deleted file mode 100644
index 9fe56bd148..0000000000
--- a/scripts/templates/plugin/client/.eslintrc.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "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"] }]
-  }
-}
diff --git a/scripts/templates/plugin/client/index.js b/scripts/templates/plugin/client/index.js
deleted file mode 100644
index 931cd722c0..0000000000
--- a/scripts/templates/plugin/client/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-
-/**
-  This is a client index example file and it should look like this:
-  
-  ```
-  import LoveButton from './components/LoveButton';
-
-  export default {
-    slots: {
-      commentReactions: [LoveButton]
-    },
-    reducer,
-    translations
-  };
-  ```
-
-  To read more info on how to build client plugins. Please, go to: https://coralproject.github.io/talk/plugins-client.html
- */
-
-export default {};
diff --git a/scripts/templates/plugin/client/translations.yml b/scripts/templates/plugin/client/translations.yml
deleted file mode 100644
index d8407b8011..0000000000
--- a/scripts/templates/plugin/client/translations.yml
+++ /dev/null
@@ -1,15 +0,0 @@
-# 
-#  This file is for translations and they should look like this:
-#
-#
-#  ```
-#   en:
-#    coral-plugin-respect:
-#     respect: Respect
-#     respected: Respected
-#   es:
-#    coral-plugin-respect:
-#     respect: Respetar
-#     respected: Respetado
-#  ```
-# 
diff --git a/scripts/templates/plugin/index.js b/scripts/templates/plugin/index.js
deleted file mode 100644
index f053ebf797..0000000000
--- a/scripts/templates/plugin/index.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = {};

From 932103c204c4be9217f1eb815f6f0458bff400a6 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 10 Jul 2017 17:08:49 -0300
Subject: [PATCH 05/11] updated yarn lock

---
 plugins/talk-plugin-avatar/yarn.lock | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 plugins/talk-plugin-avatar/yarn.lock

diff --git a/plugins/talk-plugin-avatar/yarn.lock b/plugins/talk-plugin-avatar/yarn.lock
new file mode 100644
index 0000000000..fb57ccd13a
--- /dev/null
+++ b/plugins/talk-plugin-avatar/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

From 0c167fdfc477858a3108be8a87e4021b28a3a75b Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 10 Jul 2017 17:43:51 -0300
Subject: [PATCH 06/11] Removing talk-plugin-avatar

---
 .eslintignore                                 |   2 +-
 .gitignore                                    |   1 -
 plugins/talk-plugin-avatar/client/.babelrc    |  14 ----
 .../talk-plugin-avatar/client/.eslintrc.json  |  23 ------
 .../client/assets/avatar-placeholder.png      | Bin 8811 -> 0 bytes
 .../client/components/UserAvatar.js           |   8 --
 .../client/components/styles.css              |   4 -
 .../client/containers/UserAvatar.js           |  12 ---
 plugins/talk-plugin-avatar/client/index.js    |   7 --
 plugins/talk-plugin-avatar/index.js           |  74 ------------------
 plugins/talk-plugin-avatar/package.json       |  11 ---
 plugins/talk-plugin-avatar/yarn.lock          |   4 -
 12 files changed, 1 insertion(+), 159 deletions(-)
 delete mode 100644 plugins/talk-plugin-avatar/client/.babelrc
 delete mode 100644 plugins/talk-plugin-avatar/client/.eslintrc.json
 delete mode 100644 plugins/talk-plugin-avatar/client/assets/avatar-placeholder.png
 delete mode 100644 plugins/talk-plugin-avatar/client/components/UserAvatar.js
 delete mode 100644 plugins/talk-plugin-avatar/client/components/styles.css
 delete mode 100644 plugins/talk-plugin-avatar/client/containers/UserAvatar.js
 delete mode 100644 plugins/talk-plugin-avatar/client/index.js
 delete mode 100644 plugins/talk-plugin-avatar/index.js
 delete mode 100644 plugins/talk-plugin-avatar/package.json
 delete mode 100644 plugins/talk-plugin-avatar/yarn.lock

diff --git a/.eslintignore b/.eslintignore
index 9ed3e5361a..069144d945 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -13,5 +13,5 @@ plugins/*
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
 !plugins/talk-plugin-permalink
-!plugins/talk-plugin-avatar
+
 node_modules
diff --git a/.gitignore b/.gitignore
index e94a01a6cc..0be1266c63 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,5 @@ plugins/*
 !plugins/coral-plugin-viewing-options
 !plugins/coral-plugin-comment-content
 !plugins/talk-plugin-permalink
-!plugins/talk-plugin-avatar
 
 **/node_modules/*
diff --git a/plugins/talk-plugin-avatar/client/.babelrc b/plugins/talk-plugin-avatar/client/.babelrc
deleted file mode 100644
index 60be246eb1..0000000000
--- a/plugins/talk-plugin-avatar/client/.babelrc
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "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"
-  ]
-}
\ No newline at end of file
diff --git a/plugins/talk-plugin-avatar/client/.eslintrc.json b/plugins/talk-plugin-avatar/client/.eslintrc.json
deleted file mode 100644
index 9fe56bd148..0000000000
--- a/plugins/talk-plugin-avatar/client/.eslintrc.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "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"] }]
-  }
-}
diff --git a/plugins/talk-plugin-avatar/client/assets/avatar-placeholder.png b/plugins/talk-plugin-avatar/client/assets/avatar-placeholder.png
deleted file mode 100644
index 2e828f0fb9c775fd824f571f78ee59e3f2f73ace..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 8811
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
PKSg=4vUIhiaq#~E;=)iN

diff --git a/plugins/talk-plugin-avatar/client/components/UserAvatar.js b/plugins/talk-plugin-avatar/client/components/UserAvatar.js
deleted file mode 100644
index a876695401..0000000000
--- a/plugins/talk-plugin-avatar/client/components/UserAvatar.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import styles from './styles.css';
-import avatarPlaceholder from '../assets/avatar-placeholder.png';
-
-const UserAvatar = ({comment: {user}}) => 
-  <img src={!user.avatar ? avatarPlaceholder : user.avatar} className={styles.avatarPlaceholder} />;
-
-export default UserAvatar;
diff --git a/plugins/talk-plugin-avatar/client/components/styles.css b/plugins/talk-plugin-avatar/client/components/styles.css
deleted file mode 100644
index fc61118454..0000000000
--- a/plugins/talk-plugin-avatar/client/components/styles.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.avatarPlaceholder {
-  height: 50px;
-  width: 50px;
-}
\ No newline at end of file
diff --git a/plugins/talk-plugin-avatar/client/containers/UserAvatar.js b/plugins/talk-plugin-avatar/client/containers/UserAvatar.js
deleted file mode 100644
index 76b558e05b..0000000000
--- a/plugins/talk-plugin-avatar/client/containers/UserAvatar.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import {gql} from 'react-apollo';
-import {withFragments} from 'plugin-api/beta/client/hocs';
-import UserAvatar from '../components/UserAvatar';
-
-export default withFragments({
-  comment: gql`
-    fragment UserAvatar_comment on Comment {
-      user {
-        avatar
-      }
-    }`
-})(UserAvatar);
diff --git a/plugins/talk-plugin-avatar/client/index.js b/plugins/talk-plugin-avatar/client/index.js
deleted file mode 100644
index a706a41d0a..0000000000
--- a/plugins/talk-plugin-avatar/client/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import UserAvatar from './components/UserAvatar';
-
-export default {
-  slots: {
-    commentAvatar: [UserAvatar]
-  }
-};
diff --git a/plugins/talk-plugin-avatar/index.js b/plugins/talk-plugin-avatar/index.js
deleted file mode 100644
index fca0aafee8..0000000000
--- a/plugins/talk-plugin-avatar/index.js
+++ /dev/null
@@ -1,74 +0,0 @@
-// We need the UserModel because we need to update the user.
-const UserModel = require('models/user');
-
-// Get some middleware to use with the webhook.
-const auth = require('middleware/authentication');
-const authz = require('middleware/authorization');
-
-// Load some config from the environment. This could be changed to a settings
-// option later if you want to go that route.
-const DEFAULT_AVATAR = process.env.DEFAULT_AVATAR;
-
-module.exports = {
-
-  // The new type definitions provides the new "avatar" field needed to inject
-  // into the User type.
-  typeDefs: `
-    type User {
-      avatar: String
-    }
-  `,
-
-  // The User resolver will return the avatar from the embedded user metadata.
-  resolvers: {
-    User: {
-      avatar(user) {
-        if (user && user.metadata && user.metadata.avatar) {
-          return user.metadata.avatar;
-        }
-
-        return DEFAULT_AVATAR;
-      }
-    }
-  },
-
-  // The custom router routes that we add here will allow an external system to
-  // update the avatar when it changes on the remote system. Note that we do
-  // use the auth/authz middleware, checking for the ADMIN role. This can be
-  // used in conjunction with a personal access token generated from an ADMIN.
-  router(router) {
-    router.post('/webhooks/user_update', auth, authz.needed('ADMIN'), async (req, res, next) => {
-
-      // We expect that the payload for the new avatar is in the following form:
-      //
-      // {
-      //   "id": "123123-123123-12312313",
-      //   "avatar": "https://great-cdn.cloudfront.net/best-photo.jpg"
-      //   ...
-      // }
-
-      // Extract the data from the payload.
-      let {
-        id,
-        avatar
-      } = req.body;
-
-      try {
-
-        // Update the user model.
-        await UserModel.update({id}, {
-          $set: {
-            'metadata.avatar': avatar
-          }
-        });
-
-      } catch (e) {
-        return next(e);
-      }
-
-      // Respond with a `202 Accepted` to indicate that we were able to process
-      // the update.
-      res.status(202).end();
-    });
-  }
-};
diff --git a/plugins/talk-plugin-avatar/package.json b/plugins/talk-plugin-avatar/package.json
deleted file mode 100644
index c652a86d01..0000000000
--- a/plugins/talk-plugin-avatar/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "name": "talk-plugin-avatar",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "Belen Curcio <curciobelen@gmail.com>",
-  "license": "ISC"
-}
diff --git a/plugins/talk-plugin-avatar/yarn.lock b/plugins/talk-plugin-avatar/yarn.lock
deleted file mode 100644
index fb57ccd13a..0000000000
--- a/plugins/talk-plugin-avatar/yarn.lock
+++ /dev/null
@@ -1,4 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-

From c3ad47f6f66d2c924e1cfbaeff5df53825792459 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 12 Jul 2017 14:49:46 -0300
Subject: [PATCH 07/11] Linting

---
 .../src/components/Comment.css                |   1 +
 .../src/components/Comment.js                 | 316 +++++++++---------
 2 files changed, 166 insertions(+), 151 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css
index 86b0014bf6..c9dbeac695 100644
--- a/client/coral-embed-stream/src/components/Comment.css
+++ b/client/coral-embed-stream/src/components/Comment.css
@@ -167,4 +167,5 @@
 .commentAvatar {
   max-width: 50px;
   margin-right: 10px;
+  margin-top: 10px;
 }
diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index 0cd37a92a9..e612affb05 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -429,27 +429,10 @@ export default class Comment extends React.Component {
         className={rootClassName}
         id={`c_${comment.id}`}
       >
-        <div className={commentClassName}>
-          <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
-          {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
-
-          {commentIsBest(comment)
-            ? <TagLabel><BestIndicator /></TagLabel>
-            : null }
-
-          <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
-            <PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
-            {
-              (comment.editing && comment.editing.edited)
-              ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
-              : null
-            }
-          </span>
-
+        <div className={styles.commentRow}>
           <Slot
-            className={styles.commentInfoBar}
-            fill="commentInfoBar"
-            depth={depth}
+            className={styles.commentAvatar}
+            fill="commentAvatar"
             comment={comment}
             commentId={comment.id}
             data={this.props.data}
@@ -457,157 +440,188 @@ export default class Comment extends React.Component {
             inline
           />
 
-          { (currentUser && (comment.user.id === currentUser.id)) &&
+          <div className={commentClassName}>
+            <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
+            {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
+
+            {commentIsBest(comment)
+              ? <TagLabel><BestIndicator /></TagLabel>
+              : null }
 
-            /* User can edit/delete their own comment for a short window after posting */
-            <span className={cn(styles.topRight)}>
+            <span className={`${styles.bylineSecondary} talk-stream-comment-user-byline`} >
+              <PubDate created_at={comment.created_at} className={'talk-stream-comment-published-date'} />
               {
-                commentIsStillEditable(comment) &&
-                <a
-                  className={cn(styles.link, {[styles.active]: this.state.isEditing})}
-                  onClick={this.onClickEdit}>Edit</a>
+                (comment.editing && comment.editing.edited)
+                ? <span>&nbsp;<span className={styles.editedMarker}>({t('comment.edited')})</span></span>
+                : null
               }
             </span>
-          }
-          { (currentUser && (comment.user.id !== currentUser.id)) &&
-
-              /* TopRightMenu allows currentUser to ignore other users' comments */
-              <span className={cn(styles.topRight, styles.topRightMenu)}>
-                <TopRightMenu
-                  comment={comment}
-                  ignoreUser={ignoreUser}
-                  addNotification={addNotification} />
-              </span>
-          }
-          {
-            this.state.isEditing
-            ? <EditableCommentContent
-                editComment={this.editComment}
-                addNotification={addNotification}
-                comment={comment}
-                currentUser={currentUser}
-                charCountEnable={charCountEnable}
-                maxCharCount={maxCharCount}
-                parentId={parentId}
-                stopEditing={this.stopEditing}
-                />
-            : <div>
-                <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
-              </div>
-          }
 
-          <div className="commentActionsLeft comment__action-container">
             <Slot
-              fill="commentReactions"
-              data={this.props.data}
-              root={this.props.root}
+              className={styles.commentInfoBar}
+              fill="commentInfoBar"
+              depth={depth}
               comment={comment}
               commentId={comment.id}
-              inline
-            />
-            <ActionButton>
-              <IfUserCanModifyBest user={currentUser}>
-                <BestButton
-                  isBest={commentIsBest(comment)}
-                  addBest={addBestTag}
-                  removeBest={removeBestTag}
-                />
-              </IfUserCanModifyBest>
-            </ActionButton>
-            {!disableReply &&
-              <ActionButton>
-                <ReplyButton
-                  onClick={this.showReplyBox}
-                  parentCommentId={parentId || comment.id}
-                  currentUserId={currentUser && currentUser.id}
-                />
-              </ActionButton>}
-          </div>
-          <div className="commentActionsRight comment__action-container">
-            <Slot
-              fill="commentActions"
-              wrapperComponent={ActionButton}
               data={this.props.data}
               root={this.props.root}
-              asset={asset}
-              comment={comment}
-              commentId={comment.id}
               inline
             />
-            <ActionButton>
-              <FlagComment
-                flaggedByCurrentUser={!!myFlag}
-                flag={myFlag}
-                id={comment.id}
-                author_id={comment.user.id}
-                postFlag={postFlag}
-                addNotification={addNotification}
-                postDontAgree={postDontAgree}
-                deleteAction={deleteAction}
-                showSignInDialog={showSignInDialog}
-                currentUser={currentUser}
+
+            { (currentUser && (comment.user.id === currentUser.id)) &&
+
+              /* User can edit/delete their own comment for a short window after posting */
+              <span className={cn(styles.topRight)}>
+                {
+                  commentIsStillEditable(comment) &&
+                  <a
+                    className={cn(styles.link, {[styles.active]: this.state.isEditing})}
+                    onClick={this.onClickEdit}>Edit</a>
+                }
+              </span>
+            }
+            { (currentUser && (comment.user.id !== currentUser.id)) &&
+
+                /* TopRightMenu allows currentUser to ignore other users' comments */
+                <span className={cn(styles.topRight, styles.topRightMenu)}>
+                  <TopRightMenu
+                    comment={comment}
+                    ignoreUser={ignoreUser}
+                    addNotification={addNotification} />
+                </span>
+            }
+            {
+              this.state.isEditing
+              ? <EditableCommentContent
+                  editComment={this.editComment}
+                  addNotification={addNotification}
+                  comment={comment}
+                  currentUser={currentUser}
+                  charCountEnable={charCountEnable}
+                  maxCharCount={maxCharCount}
+                  parentId={parentId}
+                  stopEditing={this.stopEditing}
+                  />
+              : <div>
+                  <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
+                </div>
+            }
+
+            <div className="commentActionsLeft comment__action-container">
+              <Slot
+                fill="commentReactions"
+                data={this.props.data}
+                root={this.props.root}
+                comment={comment}
+                commentId={comment.id}
+                inline
+              />
+              <ActionButton>
+                <IfUserCanModifyBest user={currentUser}>
+                  <BestButton
+                    isBest={commentIsBest(comment)}
+                    addBest={addBestTag}
+                    removeBest={removeBestTag}
+                  />
+                </IfUserCanModifyBest>
+              </ActionButton>
+              {!disableReply &&
+                <ActionButton>
+                  <ReplyButton
+                    onClick={this.showReplyBox}
+                    parentCommentId={parentId || comment.id}
+                    currentUserId={currentUser && currentUser.id}
+                  />
+                </ActionButton>}
+            </div>
+            <div className="commentActionsRight comment__action-container">
+              <Slot
+                fill="commentActions"
+                wrapperComponent={ActionButton}
+                data={this.props.data}
+                root={this.props.root}
+                asset={asset}
+                comment={comment}
+                commentId={comment.id}
+                inline
               />
-            </ActionButton>
+              <ActionButton>
+                <FlagComment
+                  flaggedByCurrentUser={!!myFlag}
+                  flag={myFlag}
+                  id={comment.id}
+                  author_id={comment.user.id}
+                  postFlag={postFlag}
+                  addNotification={addNotification}
+                  postDontAgree={postDontAgree}
+                  deleteAction={deleteAction}
+                  showSignInDialog={showSignInDialog}
+                  currentUser={currentUser}
+                />
+              </ActionButton>
+            </div>
           </div>
         </div>
-        {activeReplyBox === comment.id
-          ? <ReplyBox
-              commentPostedHandler={() => {
-                setActiveReplyBox('');
-              }}
-              charCountEnable={charCountEnable}
-              maxCharCount={maxCharCount}
-              setActiveReplyBox={setActiveReplyBox}
-              parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
-              addNotification={addNotification}
-              postComment={postComment}
-              currentUser={currentUser}
-              assetId={asset.id}
-            />
-          : null}
 
-        <TransitionGroup>
-        {view.map((reply) => {
-          return commentIsIgnored(reply)
-            ? <IgnoredCommentTombstone key={reply.id} />
-            : <Comment
-                data={this.props.data}
-                root={this.props.root}
+          {activeReplyBox === comment.id
+            ? <ReplyBox
+                commentPostedHandler={() => {
+                  setActiveReplyBox('');
+                }}
+                charCountEnable={charCountEnable}
+                maxCharCount={maxCharCount}
                 setActiveReplyBox={setActiveReplyBox}
-                disableReply={disableReply}
-                activeReplyBox={activeReplyBox}
+                parentId={(depth < THREADING_LEVEL) ? comment.id : parentId}
                 addNotification={addNotification}
-                parentId={comment.id}
                 postComment={postComment}
-                editComment={this.props.editComment}
-                depth={depth + 1}
-                asset={asset}
-                highlighted={highlighted}
                 currentUser={currentUser}
-                postFlag={postFlag}
-                deleteAction={deleteAction}
-                addTag={addTag}
-                removeTag={removeTag}
-                loadMore={loadMore}
-                ignoreUser={ignoreUser}
-                charCountEnable={charCountEnable}
-                maxCharCount={maxCharCount}
-                showSignInDialog={showSignInDialog}
-                commentIsIgnored={commentIsIgnored}
-                liveUpdates={liveUpdates}
-                key={reply.id}
-                comment={reply}
-              />;
-        })}
-        </TransitionGroup>
-        <div className="talk-load-more-replies">
-          <LoadMore
-            topLevel={false}
-            replyCount={moreRepliesCount}
-            moreComments={hasMoreComments}
-            loadMore={this.loadNewReplies}
-            loadingState={loadingState}
-          />
+                assetId={asset.id}
+              />
+            : null}
+
+          <TransitionGroup>
+          {view.map((reply) => {
+            return commentIsIgnored(reply)
+              ? <IgnoredCommentTombstone key={reply.id} />
+              : <Comment
+                  data={this.props.data}
+                  root={this.props.root}
+                  setActiveReplyBox={setActiveReplyBox}
+                  disableReply={disableReply}
+                  activeReplyBox={activeReplyBox}
+                  addNotification={addNotification}
+                  parentId={comment.id}
+                  postComment={postComment}
+                  editComment={this.props.editComment}
+                  depth={depth + 1}
+                  asset={asset}
+                  highlighted={highlighted}
+                  currentUser={currentUser}
+                  postFlag={postFlag}
+                  deleteAction={deleteAction}
+                  addTag={addTag}
+                  removeTag={removeTag}
+                  loadMore={loadMore}
+                  ignoreUser={ignoreUser}
+                  charCountEnable={charCountEnable}
+                  maxCharCount={maxCharCount}
+                  showSignInDialog={showSignInDialog}
+                  commentIsIgnored={commentIsIgnored}
+                  liveUpdates={liveUpdates}
+                  reactKey={reply.id}
+                  key={reply.id}
+                  comment={reply}
+                />;
+          })}
+          </TransitionGroup>
+          <div className="talk-load-more-replies">
+            <LoadMore
+              topLevel={false}
+              replyCount={moreRepliesCount}
+              moreComments={hasMoreComments}
+              loadMore={this.loadNewReplies}
+              loadingState={loadingState}
+            />
         </div>
       </div>
     );

From 518b7b53587f2c5770e6711741007b149b210837 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 12 Jul 2017 15:04:24 -0300
Subject: [PATCH 08/11] merge

---
 client/coral-framework/helpers/plugins.js | 33 ++++++++++++++++-------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/client/coral-framework/helpers/plugins.js b/client/coral-framework/helpers/plugins.js
index 2e5934bc43..625a0ee3f4 100644
--- a/client/coral-framework/helpers/plugins.js
+++ b/client/coral-framework/helpers/plugins.js
@@ -10,17 +10,17 @@ import {loadTranslations} from 'coral-framework/services/i18n';
 import {injectReducers, getStore} from 'coral-framework/services/store';
 import camelize from './camelize';
 
-function getSlotComponents(slot) {
+export function getSlotComponents(slot) {
   const pluginConfig = getStore().getState().config.plugin_config;
 
-    // Filter out components that have been disabled in `plugin_config`
   return flatten(plugins
-    
+
     // Filter out components that have slots and have been disabled in `plugin_config`
-    .filter((o) => o.module.slots && (!pluginConfig || !pluginConfig[o.plugin] || !pluginConfig[o.plugin].disable_components))
+      .filter((o) => o.module.slots && (!pluginConfig || !pluginConfig[o.name] || !pluginConfig[o.name].disable_components))
 
-    .filter((o) => o.module.slots[slot])
-    .map((o) => o.module.slots[slot]));
+      .filter((o) => o.module.slots[slot])
+      .map((o) => o.module.slots[slot])
+  );
 }
 
 export function isSlotEmpty(slot) {
@@ -78,8 +78,8 @@ export function getSlotsFragments(slots) {
   }
   const components = uniq(flattenDeep(slots.map((slot) => {
     return plugins
-    .filter((o) => o.module.slots ? o.module.slots[slot] : false)
-    .map((o) => o.module.slots[slot]);
+      .filter((o) => o.module.slots ? o.module.slots[slot] : false)
+      .map((o) => o.module.slots[slot]);
   })));
 
   const fragments = getComponentFragments(components);
@@ -113,7 +113,22 @@ export function injectPluginsReducers() {
   const reducers = merge(
     ...plugins
       .filter((o) => o.module.reducer)
-      .map((o) => ({[camelize(o.plugin)] : o.module.reducer}))
+      .map((o) => ({[camelize(o.name)] : o.module.reducer}))
   );
   injectReducers(reducers);
 }
+
+function addMetaDataToSlotComponents() {
+
+  // Add talkPluginName to Slot Components.
+  plugins.forEach((plugin) => {
+    const slots = plugin.module.slots;
+    slots && Object.keys(slots).forEach((slot) => {
+      slots[slot].forEach((component) => {
+        component.talkPluginName = plugin.name;
+      });
+    });
+  });
+}
+
+addMetaDataToSlotComponents();

From 3d80df1db658973ba9162868e43ddb9c99651726 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 13 Jul 2017 11:37:54 -0300
Subject: [PATCH 09/11] Support for empty slot

---
 client/coral-embed-stream/src/components/Comment.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css
index c9dbeac695..bb06f7f1ec 100644
--- a/client/coral-embed-stream/src/components/Comment.css
+++ b/client/coral-embed-stream/src/components/Comment.css
@@ -165,7 +165,9 @@
 }
 
 .commentAvatar {
-  max-width: 50px;
-  margin-right: 10px;
-  margin-top: 10px;
+  max-width: 60px;
+}
+
+.commentAvatar:empty {
+  display: none;
 }

From 1541a618b594f4d29639c6f2ebfd824862774c56 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 13 Jul 2017 12:29:06 -0300
Subject: [PATCH 10/11] Reordering divs

---
 client/coral-embed-stream/src/components/Comment.css | 12 ++++++------
 client/coral-embed-stream/src/components/Comment.js  |  6 ++++--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css
index bb06f7f1ec..48a8488485 100644
--- a/client/coral-embed-stream/src/components/Comment.css
+++ b/client/coral-embed-stream/src/components/Comment.css
@@ -19,8 +19,9 @@
 }
 
 .comment {
-  padding-left: 20px;
-  flex: auto;
+  padding-left: 15px;
+  display: flex;
+  flex-flow: row;
 }
 
 .commentLevel0 {
@@ -44,7 +45,7 @@
 }
 
 .highlightedComment {
-  padding-left: 20px;
+  padding-left: 15px;
   border-left: 3px solid rgb(35,118,216);
 }
 
@@ -159,9 +160,8 @@
   animation: enter 1000ms;
 }
 
-.commentRow {
-  display: flex;
-  flex-flow: row;
+.commentContainer {
+  flex: auto;
 }
 
 .commentAvatar {
diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index e612affb05..9e6a70efe9 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -429,7 +429,8 @@ export default class Comment extends React.Component {
         className={rootClassName}
         id={`c_${comment.id}`}
       >
-        <div className={styles.commentRow}>
+        <div className={commentClassName}>
+
           <Slot
             className={styles.commentAvatar}
             fill="commentAvatar"
@@ -440,7 +441,8 @@ export default class Comment extends React.Component {
             inline
           />
 
-          <div className={commentClassName}>
+          <div className={styles.commentContainer}>
+            
             <AuthorName author={comment.user} className={'talk-stream-comment-user-name'} />
             {isStaff(comment.tags) ? <TagLabel>Staff</TagLabel> : null}
 

From 28e94d30b094c637741c207deb551670f91a6ba2 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 13 Jul 2017 23:00:52 +0700
Subject: [PATCH 11/11] Only show seperator on top-level comments

---
 client/coral-embed-stream/src/components/Comment.css | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Comment.css b/client/coral-embed-stream/src/components/Comment.css
index 72cf25b211..9a176534d1 100644
--- a/client/coral-embed-stream/src/components/Comment.css
+++ b/client/coral-embed-stream/src/components/Comment.css
@@ -2,20 +2,17 @@
   margin-left: 20px;
   margin-bottom: 16px;
   position: relative;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding-top: 12px;
 }
 
 .rootLevel0:first-child {
   padding-top: 0;
-}
-
-.root:first-child {
   border: 0;
 }
 
 .rootLevel0 {
   margin-left: 0px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 .comment {