From 1a7b716820b8c103e2366f69611b9a901a67123c Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Mon, 14 Nov 2016 15:51:17 -0500
Subject: [PATCH 01/15] Updating stream endpoint to expect asset_url and to
 return asset.

---
 routes/api/stream/index.js       | 26 ++++++++++++++++--------
 tests/routes/api/stream/index.js | 35 +++++++++++++++++---------------
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/routes/api/stream/index.js b/routes/api/stream/index.js
index 3f49d48fc..db1d2bc36 100644
--- a/routes/api/stream/index.js
+++ b/routes/api/stream/index.js
@@ -3,35 +3,45 @@ const express = require('express');
 const Comment = require('../../../models/comment');
 const User = require('../../../models/user');
 const Action = require('../../../models/action');
+const Asset = require('../../../models/asset');
 
 const Setting = require('../../../models/setting');
 
 const router = express.Router();
 
-// Find all the comments by a specific asset_id.
+// Find all the comments by a specific asset_url.
 //  . if pre: get the comments that are accepted.
 //  . if post: get the comments that are new and accepted.
 router.get('/', (req, res, next) => {
-  const commentsPromise = Setting.getModerationSetting().then(({moderation}) => {
+
+  // Get the asset_id for this url (or create it if it doesn't exist)
+  Promise.all([
+    Asset.findOrCreateByUrl(req.query.asset_url),
+    Setting.getModerationSetting()
+  ])
+  .then(([asset, {moderation}]) => {
+    // Get the sitewide moderation setting and return the appropriate comments
     switch(moderation){
     case 'pre':
-      return Comment.findAcceptedByAssetId(req.query.asset_id);
+      return Promise.all([Comment.findAcceptedByAssetId(asset.id), asset]);
     case 'post':
-      return  Comment.findAcceptedAndNewByAssetId(req.query.asset_id);
+      return  Promise.all([Comment.findAcceptedAndNewByAssetId(asset.id), asset]);
     default:
       throw new Error('Moderation setting not found.');
     }
-  });
-
+  })
   // Get all the users and actions for those comments.
-  commentsPromise.then(comments => {
+  .then(([comments, asset]) => {
     return Promise.all([
+      [asset],
       comments,
       User.findByIdArray(comments.map((comment) => comment.author_id)),
       Action.getActionSummaries(comments.map((comment) => comment.id))
     ]);
-  }).then(([comments, users, actions]) => {
+  })
+  .then(([assets, comments, users, actions]) => {
     res.json({
+      assets,
       comments,
       users,
       actions
diff --git a/tests/routes/api/stream/index.js b/tests/routes/api/stream/index.js
index c967cb932..009184b6b 100644
--- a/tests/routes/api/stream/index.js
+++ b/tests/routes/api/stream/index.js
@@ -11,6 +11,7 @@ chai.use(require('chai-http'));
 const Action = require('../../../../models/action');
 const User = require('../../../../models/user');
 const Comment = require('../../../../models/comment');
+const Asset = require('../../../../models/asset');
 
 const Setting = require('../../../../models/setting');
 
@@ -21,14 +22,12 @@ describe('api/stream: routes', () => {
   const comments = [{
     id: 'abc',
     body: 'comment 10',
-    asset_id: 'asset',
     author_id: '',
     parent_id: '',
     status: 'accepted'
   }, {
     id: 'def',
     body: 'comment 20',
-    asset_id: 'asset',
     author_id: '',
     parent_id: '',
     status: ''
@@ -66,29 +65,33 @@ describe('api/stream: routes', () => {
 
   beforeEach(() => {
 
-    return User
-      .createLocalUsers(users)
-      .then(users => {
+    return Promise.all([
+      User.createLocalUsers(users),
+      Asset.findOrCreateByUrl('http://test.com')
+    ])
+    .then(([users, asset]) => {
 
-        comments[0].author_id = users[0].id;
-        comments[1].author_id = users[1].id;
-        
-        return Promise.all([
-          Comment.create(comments),
-          Action.create(actions),
-          Setting.create(settings)
-        ]);
+      comments[0].author_id = users[0].id;
+      comments[1].author_id = users[1].id;
 
-      });
+      comments[0].asset_id = asset.id;
+      comments[1].asset_id = asset.id;
 
+      return Promise.all([
+        Comment.create(comments),
+        Action.create(actions),
+        Setting.create(settings)
+      ]);
+    });
   });
 
-  it('should return a stream with comments, users and actions', () => {
+  it('should return a stream with comments, users and actions for an existing asset', () => {
     return chai.request(app)
       .get('/api/v1/stream')
-      .query({'asset_id': 'asset'})
+      .query({'asset_url': 'http://test.com'})
       .then(res => {
         expect(res).to.have.status(200);
+        expect(res.body.assets.length).to.equal(1);
         expect(res.body.comments.length).to.equal(1);
         expect(res.body.users.length).to.equal(1);
         expect(res.body.actions.length).to.equal(1);

From 688fbd0bf68aa2e0c0290e4bf415e5ca4b93c330 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Mon, 14 Nov 2016 16:40:04 -0500
Subject: [PATCH 02/15] Sending asset_url to backend and retreiving stream with
 asset.

---
 .../coral-embed-stream/src/CommentStream.js   | 22 +++++--------------
 client/coral-framework/store/actions/items.js | 11 +++++-----
 .../CommentCount.js                           |  2 +-
 routes/api/stream/index.js                    |  2 +-
 .../coral-framework/store/itemActions.spec.js | 15 ++++++++-----
 5 files changed, 21 insertions(+), 31 deletions(-)

diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index 9a1910105..5fb48d0a0 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -76,28 +76,16 @@ class CommentStream extends Component {
   componentDidMount () {
     // Set up messaging between embedded Iframe an parent component
     // Using recommended Pym init code which violates .eslint standards
-    new Pym.Child({polling: 500});
-    this.props.getStream('assetTest');
+    const pym = new Pym.Child({polling: 100});
+    console.log(pym);
+    this.props.getStream('http://www.test.com');
   }
 
   render () {
-    if (Object.keys(this.props.items).length === 0) {
-        // Loading mock asset
-      this.props.postItem({
-        comments: [],
-        url: 'http://coralproject.net'
-      }, 'asset', 'assetTest');
-
-        // Loading mock user
-      this.props.postItem({name: 'Ban Ki-Moon'}, 'user', 'user_8989')
-        .then((id) => {
-          this.props.setLoggedInUser(id);
-        });
-    }
 
     // TODO: Replace teststream id with id from params
 
-    const rootItemId = 'assetTest';
+    const rootItemId = this.props.items.assets && Object.keys(this.props.items.assets)[0];
     const rootItem = this.props.items.assets && this.props.items.assets[rootItemId];
     return <div>
       {
@@ -117,7 +105,7 @@ class CommentStream extends Component {
               reply={false}/>
           </div>
           {
-            rootItem.comments.map((commentId) => {
+            rootItem.comments && rootItem.comments.map((commentId) => {
               const comment = this.props.items.comments[commentId];
               return <div className="comment" key={commentId}>
                 <hr aria-hidden={true}/>
diff --git a/client/coral-framework/store/actions/items.js b/client/coral-framework/store/actions/items.js
index 648a1d95e..eea3315b0 100644
--- a/client/coral-framework/store/actions/items.js
+++ b/client/coral-framework/store/actions/items.js
@@ -77,9 +77,9 @@ export const appendItemArray = (id, property, value, add_to_front, item_type) =>
 * @dispatches
 *   A set of items to the item store
 */
-export function getStream (assetId) {
+export function getStream (assetUrl) {
   return (dispatch) => {
-    return fetch(`/api/v1/stream?asset_id=${assetId}`)
+    return fetch(`/api/v1/stream?asset_url=${encodeURIComponent(assetUrl)}`)
       .then(
         response => {
           return response.ok ? response.json() : Promise.reject(`${response.status} ${response.statusText}`);
@@ -95,6 +95,8 @@ export function getStream (assetId) {
           }
         }
 
+        const assetId = json.assets[0].id;
+
         /* Sort comments by date*/
         json.comments.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
         const rels = json.comments.reduce((h, item) => {
@@ -112,10 +114,7 @@ export function getStream (assetId) {
           return h;
         }, {rootComments: [], childComments: {}});
 
-        dispatch(addItem({
-          id: assetId,
-          comments: rels.rootComments,
-        }, 'assets'));
+        dispatch(updateItem(assetId, 'comments', rels.rootComments, 'assets'));
 
         const childKeys = Object.keys(rels.childComments);
         for (let i = 0; i < childKeys.length; i++ ) {
diff --git a/client/coral-plugin-comment-count/CommentCount.js b/client/coral-plugin-comment-count/CommentCount.js
index 6786d5c74..7a27c1982 100644
--- a/client/coral-plugin-comment-count/CommentCount.js
+++ b/client/coral-plugin-comment-count/CommentCount.js
@@ -5,7 +5,7 @@ const name = 'coral-plugin-comment-count';
 
 const CommentCount = ({items, id}) => {
   let count = 0;
-  if (items.assets[id]) {
+  if (items.assets[id] && items.assets[id].comments) {
     count += items.assets[id].comments.length;
   }
   const itemKeys = Object.keys(items.comments);
diff --git a/routes/api/stream/index.js b/routes/api/stream/index.js
index db1d2bc36..b093f0d31 100644
--- a/routes/api/stream/index.js
+++ b/routes/api/stream/index.js
@@ -16,7 +16,7 @@ router.get('/', (req, res, next) => {
 
   // Get the asset_id for this url (or create it if it doesn't exist)
   Promise.all([
-    Asset.findOrCreateByUrl(req.query.asset_url),
+    Asset.findOrCreateByUrl(decodeURIComponent(req.query.asset_url)),
     Setting.getModerationSetting()
   ])
   .then(([asset, {moderation}]) => {
diff --git a/tests/client/coral-framework/store/itemActions.spec.js b/tests/client/coral-framework/store/itemActions.spec.js
index 33fe15cab..d6ce0c970 100644
--- a/tests/client/coral-framework/store/itemActions.spec.js
+++ b/tests/client/coral-framework/store/itemActions.spec.js
@@ -18,8 +18,11 @@ describe('itemActions', () => {
   });
 
   describe('getStream', () => {
-    const rootId = '1234';
+    const assetUrl = 'http://www.test.com';
     const response = {
+      assets: [{
+        id: '1234', url: assetUrl
+      }],
       comments: [
         {body: 'stuff', id: '123'},
         {body: 'morestuff', id: '456'}
@@ -42,17 +45,17 @@ describe('itemActions', () => {
 
     it('should get an stream from an asset_id and send the appropriate dispatches', () => {
       fetchMock.get('*', JSON.stringify(response));
-      return actions.getStream(rootId)(store.dispatch)
+      return actions.getStream(assetUrl)(store.dispatch)
         .then((res) => {
-          expect(fetchMock.calls().matched[0][0]).to.equal('/api/v1/stream?asset_id=1234');
+          expect(fetchMock.calls().matched[0][0]).to.equal('/api/v1/stream?asset_url=http%3A%2F%2Fwww.test.com');
           expect(res).to.deep.equal(response);
-          expect(store.getActions()[0]).to.deep.equal({
+          expect(store.getActions()[1]).to.deep.equal({
             type: actions.ADD_ITEM,
             item: response.comments[0],
             item_type: 'comments',
             id: '123'
           });
-          expect(store.getActions()[1]).to.deep.equal({
+          expect(store.getActions()[2]).to.deep.equal({
             type: actions.ADD_ITEM,
             item: response.comments[1],
             item_type: 'comments',
@@ -62,7 +65,7 @@ describe('itemActions', () => {
     });
     it('should handle an error', () => {
       fetchMock.get('*', 404);
-      return actions.getStream(rootId)(store.dispatch)
+      return actions.getStream(assetUrl)(store.dispatch)
         .catch((err) => {
           expect(err).to.be.truthy;
         });

From 16fa3e46f56af90ebf12f5e8fa1508070d94649b Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Mon, 14 Nov 2016 16:51:54 -0500
Subject: [PATCH 03/15] Loading comment stream based on parent URL.

---
 client/coral-embed-stream/src/CommentStream.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index 5fb48d0a0..aa58b5103 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -77,8 +77,7 @@ class CommentStream extends Component {
     // Set up messaging between embedded Iframe an parent component
     // Using recommended Pym init code which violates .eslint standards
     const pym = new Pym.Child({polling: 100});
-    console.log(pym);
-    this.props.getStream('http://www.test.com');
+    this.props.getStream(pym.parentUrl);
   }
 
   render () {

From 14405b22aaa44b32e404fb93eaa92c29d8f94c36 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Mon, 14 Nov 2016 20:02:01 -0500
Subject: [PATCH 04/15] Stripping out protocol and query from asset url.

---
 client/coral-embed-stream/src/CommentStream.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index aa58b5103..06253b72f 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -77,7 +77,8 @@ class CommentStream extends Component {
     // Set up messaging between embedded Iframe an parent component
     // Using recommended Pym init code which violates .eslint standards
     const pym = new Pym.Child({polling: 100});
-    this.props.getStream(pym.parentUrl);
+    const path = /https?\:\/\/([^?]+)/.exec(pym.parentUrl)[1];
+    this.props.getStream(path);
   }
 
   render () {

From 4fd41704c090d57f4bf903489db464de0f608891 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Tue, 15 Nov 2016 12:31:30 -0500
Subject: [PATCH 05/15] Moving preview to embed code.

---
 views/embed-stream.ejs | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/views/embed-stream.ejs b/views/embed-stream.ejs
index 47bda6bee..36f7ce43b 100644
--- a/views/embed-stream.ejs
+++ b/views/embed-stream.ejs
@@ -17,7 +17,12 @@
     </style>
   </head>
   <body>
-    <div id="coralStream"></div>
-    <script src="<%= basePath %>/bundle.js" charset="utf-8"></script>
+    <div id='coralStreamEmbed'></div>
+    <script type='text/javascript' src='https://pym.nprapps.org/pym.v1.min.js'></script>
+    <script>
+    var pymParent = new pym.Parent('coralStreamEmbed', '/embed/stream', {title: 'Talk Comments'});
+    pymParent.onMessage('height', function(height) {document.querySelector('#coralStreamEmbed iframe').height = height + 'px'})</script>
+    </div>
+      </body>
   </body>
 </html>

From 08d672ed4655cda257ec0c44a78c6ce2648ea533 Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Tue, 15 Nov 2016 10:11:37 -0800
Subject: [PATCH 06/15] Changes model and add admin.

---
 .../coral-admin/src/containers/Configure.css  |  6 +++++
 .../coral-admin/src/containers/Configure.js   | 24 ++++++++++++++++-
 .../coral-embed-stream/src/CommentStream.js   |  4 +++
 client/coral-embed-stream/style/default.css   | 11 ++++++++
 client/coral-plugin-infobox/InfoBox.js        | 11 ++++++++
 .../__tests__/infoBox.spec.js                 | 26 +++++++++++++++++++
 models/setting.js                             | 12 ++++++++-
 tests/models/setting.js                       | 12 +++++++--
 8 files changed, 102 insertions(+), 4 deletions(-)
 create mode 100644 client/coral-plugin-infobox/InfoBox.js
 create mode 100644 client/coral-plugin-infobox/__tests__/infoBox.spec.js

diff --git a/client/coral-admin/src/containers/Configure.css b/client/coral-admin/src/containers/Configure.css
index 98cb0e254..c832e96c1 100644
--- a/client/coral-admin/src/containers/Configure.css
+++ b/client/coral-admin/src/containers/Configure.css
@@ -23,6 +23,12 @@
   cursor: pointer;
 }
 
+.configSettingInfoBox {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
 .configSettingEmbed {
   border: 1px solid #ccc;
   border-radius: 4px;
diff --git a/client/coral-admin/src/containers/Configure.js b/client/coral-admin/src/containers/Configure.js
index 229c4e948..0dff4cf9a 100644
--- a/client/coral-admin/src/containers/Configure.js
+++ b/client/coral-admin/src/containers/Configure.js
@@ -7,7 +7,7 @@ import {
   ListItem,
   ListItemContent,
   ListItemAction,
-  //Textfield,
+  Textfield,
   Checkbox,
   Button,
   Icon
@@ -36,6 +36,16 @@ class Configure extends React.Component {
     this.props.dispatch(updateSettings({moderation}));
   }
 
+  updateInfoBoxEnable () {
+    const infoboxEnable = this.props.settings.infoBoxEnable;
+    this.props.dispatch(updateSettings({infoboxEnable}));
+  }
+
+  updateInfoBoxContent () {
+    const infoboxContent = this.props.settings.infoBoxContent;
+    this.props.dispatch(updateSettings({infoboxContent}));
+  }
+
   saveSettings () {
     this.props.dispatch(saveSettingsToServer());
   }
@@ -50,6 +60,18 @@ class Configure extends React.Component {
         </ListItemAction>
         Enable pre-moderation
       </ListItem>
+      <ListItem className={styles.configSettingInfoBox}>
+        <ListItemAction>
+          <Checkbox
+            onClick={this.updateInfoBoxEnable.bind(this)}
+            checked={this.props.settings.infoBoxEnable} />
+        </ListItemAction>
+        <Textfield
+          onChange={this.updateInfoBoxContent}
+          expandable
+          label='Include your text here'
+          value={this.props.settings.infoBoxContent}/>
+      </ListItem>
       {/*
       <ListItem className={styles.configSetting}>
         <ListItemAction><Checkbox /></ListItemAction>
diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index bfccf7cfc..004f5b642 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -7,6 +7,7 @@ import {
 } from '../../coral-framework';
 import {connect} from 'react-redux';
 import CommentBox from '../../coral-plugin-commentbox/CommentBox';
+import InfoBox from '../../coral-plugin-infobox/InfoBox';
 import Content from '../../coral-plugin-commentcontent/CommentContent';
 import PubDate from '../../coral-plugin-pubdate/PubDate';
 import Count from '../../coral-plugin-comment-count/CommentCount';
@@ -100,6 +101,9 @@ class CommentStream extends Component {
         rootItem
         ? <div>
           <div id="commentBox">
+            <InfoBox
+              content={this.props.config.infoBox.content}
+              enable={this.props.config.infoBox.enable}/>
             <Count
               id={rootItemId}
               items={this.props.items}/>
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index e1c730bfc..08b1d8041 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -49,6 +49,17 @@ hr {
   font-weight: bold;
 }
 
+/* Info Box Styles */
+.coral-plugin-infobox-info {
+  position: fixed;
+  bottom: 0;
+  border: 0;
+  background: rgb(105,105,105);
+  color: white;
+  border-radius: 2px;
+  font-weight: bold;
+}
+
 /* Comment Box Styles */
 .coral-plugin-commentbox-container {
   display: flex;
diff --git a/client/coral-plugin-infobox/InfoBox.js b/client/coral-plugin-infobox/InfoBox.js
new file mode 100644
index 000000000..cae80df88
--- /dev/null
+++ b/client/coral-plugin-infobox/InfoBox.js
@@ -0,0 +1,11 @@
+import React from 'react';
+const packagename = 'coral-plugin-infobox';
+
+const InfoBox = ({enable, content}) =>
+<div
+  className={`${packagename}-info`}
+  hidden={`${!enable}`}>
+  {content}
+</div>;
+
+export default InfoBox;
diff --git a/client/coral-plugin-infobox/__tests__/infoBox.spec.js b/client/coral-plugin-infobox/__tests__/infoBox.spec.js
new file mode 100644
index 000000000..b8b761489
--- /dev/null
+++ b/client/coral-plugin-infobox/__tests__/infoBox.spec.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {expect} from 'chai';
+import InfoBox from '../InfoBox';
+
+describe('InfoBox', () => {
+  let comment;
+  let render;
+  beforeEach(() => {
+    comment = {};
+    const postItem = (item) => {
+      comment.posted = item;
+      return Promise.resolve(4);
+    };
+    render = shallow(<InfoBox
+      postItem={postItem}
+      updateItem={(e) => comment.text = e.target.value}
+      item_id={'1'}
+      comments={['1', '2', '3']}/>);
+  });
+
+  it('should render the InfoBox appropriately', () => {
+    expect(render.contains('<div class="InfoBox"')).to.be.truthy;
+    expect(render.contains('<button class="postCommentButton"')).to.be.truthy;
+  });
+});
diff --git a/models/setting.js b/models/setting.js
index 09b13e099..a35a1aba4 100644
--- a/models/setting.js
+++ b/models/setting.js
@@ -3,7 +3,9 @@ const Schema = mongoose.Schema;
 
 const SettingSchema = new Schema({
   id: {type: String, default: '1'},
-  moderation: {type: String, enum: ['pre', 'post'], default: 'pre'}
+  moderation: {type: String, enum: ['pre', 'post'], default: 'pre'},
+  infoBoxEnable: {type: Boolean, default: false},
+  infoBoxContent: {type: String, default: ''}
 }, {
   timestamps: {
     createdAt: 'created_at',
@@ -35,6 +37,14 @@ SettingSchema.statics.getModerationSetting = function () {
   return this.findOne({id: '1'}).select('moderation');
 };
 
+/**
+ * Gets the info box settings and sends it back
+ * @return {Promise} content the content of the info Box
+ */
+SettingSchema.statics.getInfoBoxSetting = function () {
+  return this.findOne({id: '1'}).select('infoBoxEnable', 'infoBoxContent');
+};
+
 /**
  * This will update the settings object with whatever you pass in
  * @param  {object} setting a hash of whatever settings you want to update
diff --git a/tests/models/setting.js b/tests/models/setting.js
index f50110635..3f4dc27fa 100644
--- a/tests/models/setting.js
+++ b/tests/models/setting.js
@@ -8,7 +8,7 @@ const expect = require('chai').expect;
 describe('Setting: model', () => {
 
   beforeEach(() => {
-    const defaults = {id: 1, moderation: 'pre'};
+    const defaults = {id: 1};
     return Setting.update({id: '1'}, {$setOnInsert: defaults}, {upsert: true});
   });
 
@@ -18,13 +18,21 @@ describe('Setting: model', () => {
         expect(settings).to.have.property('moderation').and.to.equal('pre');
       });
     });
+    it('should have two infoBox fields defined', () => {
+      return Setting.getSettings().then(settings => {
+        expect(settings).to.have.property('infoBoxEnable').and.to.equal(false);
+        expect(settings).to.have.property('infoBoxContent').and.to.equal('');
+      });
+    });
   });
 
   describe('#updateSettings()', () => {
     it('should update the settings with a passed object', () => {
-      const mockSettings = {moderation: 'post'};
+      const mockSettings = {moderation: 'post', infoBoxEnable: true, infoBoxContent: 'yeah'};
       return Setting.updateSettings(mockSettings).then(updatedSettings => {
         expect(updatedSettings).to.have.property('moderation').and.to.equal('post');
+        expect(updatedSettings).to.have.property('infoBoxEnable', true);
+        expect(updatedSettings).to.have.property('infoBoxContent', 'yeah');
       });
     });
   });

From a0accfd993e3fd65e6cbe431a3c90d943bff0066 Mon Sep 17 00:00:00 2001
From: Dan Zajdband <dan.zajdband@gmail.com>
Date: Tue, 15 Nov 2016 13:26:39 -0500
Subject: [PATCH 07/15] Fixed infoBoxEnabled name

---
 client/coral-admin/src/containers/Configure.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/coral-admin/src/containers/Configure.js b/client/coral-admin/src/containers/Configure.js
index 0dff4cf9a..416ef8f7b 100644
--- a/client/coral-admin/src/containers/Configure.js
+++ b/client/coral-admin/src/containers/Configure.js
@@ -37,13 +37,13 @@ class Configure extends React.Component {
   }
 
   updateInfoBoxEnable () {
-    const infoboxEnable = this.props.settings.infoBoxEnable;
-    this.props.dispatch(updateSettings({infoboxEnable}));
+    const infoBoxEnable = !this.props.settings.infoBoxEnable;
+    this.props.dispatch(updateSettings({infoBoxEnable}));
   }
 
   updateInfoBoxContent () {
-    const infoboxContent = this.props.settings.infoBoxContent;
-    this.props.dispatch(updateSettings({infoboxContent}));
+    const infoBoxContent = this.props.settings.infoBoxContent;
+    this.props.dispatch(updateSettings({infoBoxContent}));
   }
 
   saveSettings () {

From 399ba72e0e24ee4a353897290406db16f3abf2a9 Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Tue, 15 Nov 2016 15:15:41 -0800
Subject: [PATCH 08/15] It changes translations to json file. It adds infobox
 setting.

---
 client/coral-admin/src/components/Comment.js  |  2 +-
 .../src/components/ModerationKeysModal.js     |  2 +-
 .../src/containers/Community/Community.js     |  2 +-
 .../coral-admin/src/containers/Configure.css  |  2 +
 .../coral-admin/src/containers/Configure.js   | 21 ++++++---
 .../src/containers/ModerationQueue.js         |  4 +-
 client/coral-admin/src/translations.js        | 47 -------------------
 client/coral-admin/src/translations.json      | 47 +++++++++++++++++++
 8 files changed, 69 insertions(+), 58 deletions(-)
 delete mode 100644 client/coral-admin/src/translations.js
 create mode 100644 client/coral-admin/src/translations.json

diff --git a/client/coral-admin/src/components/Comment.js b/client/coral-admin/src/components/Comment.js
index 2b0b7561b..c115bcf61 100644
--- a/client/coral-admin/src/components/Comment.js
+++ b/client/coral-admin/src/components/Comment.js
@@ -4,7 +4,7 @@ import {Button, Icon} from 'react-mdl';
 import timeago from 'timeago.js';
 import styles from './CommentList.css';
 import I18n from 'coral-framework/i18n/i18n';
-import translations from '../translations';
+import translations from '../translations.json';
 
 // Render a single comment for the list
 export default props => (
diff --git a/client/coral-admin/src/components/ModerationKeysModal.js b/client/coral-admin/src/components/ModerationKeysModal.js
index 5cf9fe17e..d350c74e0 100644
--- a/client/coral-admin/src/components/ModerationKeysModal.js
+++ b/client/coral-admin/src/components/ModerationKeysModal.js
@@ -1,5 +1,5 @@
 import I18n from 'coral-framework/i18n/i18n';
-import translations from '../translations';
+import translations from '../translations.json';
 import React from 'react';
 import Modal from 'components/Modal';
 import styles from './ModerationKeysModal.css';
diff --git a/client/coral-admin/src/containers/Community/Community.js b/client/coral-admin/src/containers/Community/Community.js
index 8e0b955a4..1f009429b 100644
--- a/client/coral-admin/src/containers/Community/Community.js
+++ b/client/coral-admin/src/containers/Community/Community.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import I18n from 'coral-framework/i18n/i18n';
-import translations from '../../translations';
+import translations from '../../translations.json';
 import {Grid, Cell} from 'react-mdl';
 
 import styles from './Community.css';
diff --git a/client/coral-admin/src/containers/Configure.css b/client/coral-admin/src/containers/Configure.css
index c832e96c1..a70e68746 100644
--- a/client/coral-admin/src/containers/Configure.css
+++ b/client/coral-admin/src/containers/Configure.css
@@ -27,6 +27,8 @@
   border: 1px solid #ccc;
   border-radius: 4px;
   margin-bottom: 10px;
+  cursor: pointer;
+  width: auto;
 }
 
 .configSettingEmbed {
diff --git a/client/coral-admin/src/containers/Configure.js b/client/coral-admin/src/containers/Configure.js
index 416ef8f7b..bafe335ab 100644
--- a/client/coral-admin/src/containers/Configure.js
+++ b/client/coral-admin/src/containers/Configure.js
@@ -14,7 +14,7 @@ import {
 } from 'react-mdl';
 import styles from './Configure.css';
 import I18n from 'coral-framework/i18n/i18n';
-import translations from '../translations';
+import translations from '../translations.json';
 
 class Configure extends React.Component {
   constructor (props) {
@@ -24,6 +24,8 @@ class Configure extends React.Component {
 
     this.copyToClipBoard = this.copyToClipBoard.bind(this);
     this.updateModeration = this.updateModeration.bind(this);
+    this.updateInfoBoxEnable = this.updateInfoBoxEnable.bind(this);
+    this.updateInfoBoxContent = this.updateInfoBoxContent.bind(this);
     this.saveSettings = this.saveSettings.bind(this);
   }
 
@@ -41,8 +43,8 @@ class Configure extends React.Component {
     this.props.dispatch(updateSettings({infoBoxEnable}));
   }
 
-  updateInfoBoxContent () {
-    const infoBoxContent = this.props.settings.infoBoxContent;
+  updateInfoBoxContent (event) {
+    const infoBoxContent =  event.target.value;
     this.props.dispatch(updateSettings({infoBoxContent}));
   }
 
@@ -60,17 +62,24 @@ class Configure extends React.Component {
         </ListItemAction>
         Enable pre-moderation
       </ListItem>
-      <ListItem className={styles.configSettingInfoBox}>
+      <ListItem threeLine className={styles.configSettingInfoBox}>
         <ListItemAction>
           <Checkbox
-            onClick={this.updateInfoBoxEnable.bind(this)}
+            onClick={this.updateInfoBoxEnable}
             checked={this.props.settings.infoBoxEnable} />
         </ListItemAction>
+        <ListItemContent>Include Comment Stream Description for Readers.
+        Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.
+        </ListItemContent>
+      </ListItem>
+      <ListItem className={styles.configSettingInfoBox}>
         <Textfield
           onChange={this.updateInfoBoxContent}
+          value={this.props.settings.infoBoxContent}
           expandable
           label='Include your text here'
-          value={this.props.settings.infoBoxContent}/>
+          rows={3}
+          style={{width: '100%'}}/>
       </ListItem>
       {/*
       <ListItem className={styles.configSetting}>
diff --git a/client/coral-admin/src/containers/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue.js
index 9178bda57..cfc48ae6b 100644
--- a/client/coral-admin/src/containers/ModerationQueue.js
+++ b/client/coral-admin/src/containers/ModerationQueue.js
@@ -6,7 +6,7 @@ import {updateStatus} from 'actions/comments';
 import styles from './ModerationQueue.css';
 import key from 'keymaster';
 import I18n from 'coral-framework/i18n/i18n';
-import translations from '../translations';
+import translations from '../translations.json';
 
 /*
  * Renders the moderation queue as a tabbed layout with 3 moderation
@@ -91,7 +91,7 @@ class ModerationQueue extends React.Component {
               commentIds={
                 comments
                   .get('ids')
-                  .filter(id => 
+                  .filter(id =>
                     comments
                       .get('byId')
                       .get(id)
diff --git a/client/coral-admin/src/translations.js b/client/coral-admin/src/translations.js
deleted file mode 100644
index 67a8142fd..000000000
--- a/client/coral-admin/src/translations.js
+++ /dev/null
@@ -1,47 +0,0 @@
-export default {
-  en: {
-    'community': {
-      username_and_email: 'Username and Email',
-      account_creation_date: 'Account Creation Date'
-    },
-    'modqueue': {
-      'pending': 'pending',
-      'rejected': 'rejected',
-      'flagged': 'flagged',
-      'shortcuts': 'Shortcuts',
-      'close': 'Close',
-      'actions': 'Actions',
-      'navigation': 'Navigation',
-      'approve': 'Approve comment',
-      'reject': 'Reject comment',
-      'nextcomment': 'Go to the next comment',
-      'prevcomment': 'Go to the previous comment',
-      'singleview': 'Toggle single comment edit view',
-      'thismenu': 'Open this menu'
-    },
-    'comment': {
-      'flagged': 'flagged',
-      'anon': 'Anonymous'
-    },
-    'embedlink': {
-      'copy': 'Copy to Clipboard'
-    }
-  },
-  es: {
-    'community': {
-      username_and_email: 'Usuario y E-mail',
-      account_creation_date: 'Fecha de creación de la cuenta'
-    },
-    'modqueue': {
-      'pending': 'pendiente',
-      'rejected': 'rechazado',
-      'flagged': 'marcado',
-      'shortcuts': 'Atajos de teclado',
-      'close': 'Cerrar'
-    },
-    'comment': {
-      'flagged': 'marcado',
-      'anon': 'Anónimo'
-    }
-  }
-};
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
new file mode 100644
index 000000000..43d0939e0
--- /dev/null
+++ b/client/coral-admin/src/translations.json
@@ -0,0 +1,47 @@
+{
+  "en": {
+  "community": {
+    "username_and_email": "Username and Email",
+    "account_creation_date": "Account Creation Date"
+  },
+  "modqueue": {
+    "pending": "pending",
+    "rejected": "rejected",
+    "flagged": "flagged",
+    "shortcuts": "Shortcuts",
+    "close": "Close",
+    "actions": "Actions",
+    "navigation": "Navigation",
+    "approve": "Approve comment",
+    "reject": "Reject comment",
+    "nextcomment": "Go to the next comment",
+    "prevcomment": "Go to the previous comment",
+    "singleview": "Toggle single comment edit view",
+    "thismenu": "Open this menu"
+  },
+  "comment": {
+    "flagged": "flagged",
+    "anon": "Anonymous"
+  },
+  "embedlink": {
+    "copy": "Copy to Clipboard"
+  }
+  },
+  "es": {
+    "community": {
+      "username_and_email": "Usuario y E-mail",
+      "account_creation_date": "Fecha de creación de la cuenta"
+    },
+    "modqueue": {
+      "pending": "pendiente",
+      "rejected": "rechazado",
+      "flagged": "marcado",
+      "shortcuts": "Atajos de teclado",
+      "close": "Cerrar"
+    },
+    "comment": {
+      "flagged": "marcado",
+      "anon": "Anónimo"
+    }
+  }
+}

From d24c7c0bc28dca666f46a21cba16fe6874bc3ae4 Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Tue, 15 Nov 2016 15:18:17 -0800
Subject: [PATCH 09/15] Struggling with hiding elements.

---
 client/coral-embed-stream/src/CommentStream.js | 4 ++--
 client/coral-embed-stream/style/default.css    | 6 ++++++
 client/coral-plugin-infobox/InfoBox.js         | 3 +--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index 004f5b642..d8f5718a7 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -102,8 +102,8 @@ class CommentStream extends Component {
         ? <div>
           <div id="commentBox">
             <InfoBox
-              content={this.props.config.infoBox.content}
-              enable={this.props.config.infoBox.enable}/>
+              content={this.props.config.infoBoxContent}
+              enable={this.props.config.infoBoxEnable}/>
             <Count
               id={rootItemId}
               items={this.props.items}/>
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 08b1d8041..9875198cb 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -58,6 +58,12 @@ hr {
   color: white;
   border-radius: 2px;
   font-weight: bold;
+  display: block;
+}
+
+.hidden  {
+  visibility: hidden;
+  display: none;
 }
 
 /* Comment Box Styles */
diff --git a/client/coral-plugin-infobox/InfoBox.js b/client/coral-plugin-infobox/InfoBox.js
index cae80df88..2aaa2f486 100644
--- a/client/coral-plugin-infobox/InfoBox.js
+++ b/client/coral-plugin-infobox/InfoBox.js
@@ -3,8 +3,7 @@ const packagename = 'coral-plugin-infobox';
 
 const InfoBox = ({enable, content}) =>
 <div
-  className={`${packagename}-info`}
-  hidden={`${!enable}`}>
+  className={`${packagename}-info ${enable ? '' : ', hidden'}` }>
   {content}
 </div>;
 

From 3abc0692bbd85995e71aa5ec314e23f80e67de44 Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Tue, 15 Nov 2016 15:31:12 -0800
Subject: [PATCH 10/15] At the top, not the bottom.

---
 client/coral-embed-stream/style/default.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 793ab0f8c..2f7394d4d 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -52,7 +52,7 @@ hr {
 /* Info Box Styles */
 .coral-plugin-infobox-info {
   position: fixed;
-  bottom: 0;
+  top: 0;
   border: 0;
   background: rgb(105,105,105);
   color: white;

From 621550e261e8676f278088b9562e11897abd326e Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Tue, 15 Nov 2016 15:31:54 -0800
Subject: [PATCH 11/15] Null, not empty string.

---
 client/coral-plugin-infobox/InfoBox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-plugin-infobox/InfoBox.js b/client/coral-plugin-infobox/InfoBox.js
index 2aaa2f486..db2ea22c4 100644
--- a/client/coral-plugin-infobox/InfoBox.js
+++ b/client/coral-plugin-infobox/InfoBox.js
@@ -3,7 +3,7 @@ const packagename = 'coral-plugin-infobox';
 
 const InfoBox = ({enable, content}) =>
 <div
-  className={`${packagename}-info ${enable ? '' : ', hidden'}` }>
+  className={`${packagename}-info ${enable ? null : ', hidden'}` }>
   {content}
 </div>;
 

From ff2c3cf30b6fa2cc822194e582912f8596ee7bcb Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Tue, 15 Nov 2016 20:31:24 -0800
Subject: [PATCH 12/15] Hide the textfield when not enable.

---
 client/coral-admin/src/containers/Configure.css | 4 ++++
 client/coral-admin/src/containers/Configure.js  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/containers/Configure.css b/client/coral-admin/src/containers/Configure.css
index a70e68746..7141059b1 100644
--- a/client/coral-admin/src/containers/Configure.css
+++ b/client/coral-admin/src/containers/Configure.css
@@ -61,3 +61,7 @@
   font-size: 14px;
   letter-spacing: 0.03em;
 }
+
+.hidden {
+  display: none;
+}
diff --git a/client/coral-admin/src/containers/Configure.js b/client/coral-admin/src/containers/Configure.js
index bafe335ab..7d33e8e5a 100644
--- a/client/coral-admin/src/containers/Configure.js
+++ b/client/coral-admin/src/containers/Configure.js
@@ -72,7 +72,7 @@ class Configure extends React.Component {
         Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.
         </ListItemContent>
       </ListItem>
-      <ListItem className={styles.configSettingInfoBox}>
+      <ListItem className={`${styles.configSettingInfoBox} ${this.props.settings.infoBoxEnable ? null : styles.hidden}`} >
         <Textfield
           onChange={this.updateInfoBoxContent}
           value={this.props.settings.infoBoxContent}

From 7968839826207f7eaf72b3baecb6ee3509e52f64 Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Wed, 16 Nov 2016 03:07:27 -0800
Subject: [PATCH 13/15] It adds translations for the admin and fix CSS.

---
 client/coral-admin/src/components/Header.js   | 12 +++--
 .../coral-admin/src/components/ui/Drawer.js   | 10 ++--
 .../coral-admin/src/components/ui/Header.js   | 10 ++--
 .../coral-admin/src/containers/Configure.css  |  7 +++
 .../coral-admin/src/containers/Configure.js   | 49 +++++++------------
 client/coral-admin/src/translations.json      | 26 ++++++++++
 6 files changed, 74 insertions(+), 40 deletions(-)

diff --git a/client/coral-admin/src/components/Header.js b/client/coral-admin/src/components/Header.js
index 1a89da513..b2bee0a44 100644
--- a/client/coral-admin/src/components/Header.js
+++ b/client/coral-admin/src/components/Header.js
@@ -2,22 +2,26 @@ import React from 'react';
 import {Layout, Navigation, Drawer, Header} from 'react-mdl';
 import {Link} from 'react-router';
 import styles from './Header.css';
+import I18n from 'coral-framework/i18n/i18n';
+import translations from '../translations.json';
 
 // App header. If we add a navbar it should be here
 export default (props) => (
   <Layout fixedDrawer>
     <Header title='Talk'>
       <Navigation>
-        <Link className={styles.navLink} to={'/admin/'}>Moderate</Link>
-        <Link className={styles.navLink} to={'/admin/configure'}>Configure</Link>
+        <Link className={styles.navLink} to={'/admin/'}>{lang.t('configure.moderate')}</Link>
+        <Link className={styles.navLink} to={'/admin/configure'}>{lang.t('Configure')}</Link>
       </Navigation>
     </Header>
     <Drawer>
       <Navigation>
-        <Link className={styles.navLink} to={'/admin/'}>Moderate</Link>
-        <Link className={styles.navLink} to={'/admin/configure'}>Configure</Link>
+        <Link className={styles.navLink} to={'/admin/'}>{lang.t('configure.moderate')}</Link>
+        <Link className={styles.navLink} to={'/admin/configure'}>{lang.t('configure.Configure')}</Link>
       </Navigation>
     </Drawer>
     {props.children}
   </Layout>
 );
+
+const lang = new I18n(translations);
diff --git a/client/coral-admin/src/components/ui/Drawer.js b/client/coral-admin/src/components/ui/Drawer.js
index 9ea727911..12bf7c1d2 100644
--- a/client/coral-admin/src/components/ui/Drawer.js
+++ b/client/coral-admin/src/components/ui/Drawer.js
@@ -2,13 +2,17 @@ import React from 'react';
 import {Navigation, Drawer} from 'react-mdl';
 import {Link} from 'react-router';
 import styles from './Header.css';
+import I18n from 'coral-framework/i18n/i18n';
+import translations from '../../translations.json';
 
 export default () => (
   <Drawer>
     <Navigation>
-      <Link className={styles.navLink} to="/admin">Moderate</Link>
-      <Link className={styles.navLink} to="/admin/community">Community</Link>
-      <Link className={styles.navLink} to="/admin/configure">Configure</Link>
+      <Link className={styles.navLink} to="/admin">{lang.t('configure.moderate')}</Link>
+      <Link className={styles.navLink} to="/admin/community">{lang.t('configure.community')}</Link>
+      <Link className={styles.navLink} to="/admin/configure">{lang.t('configure.configure')}</Link>
     </Navigation>
   </Drawer>
 );
+
+const lang = new I18n(translations);
diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index 86e622672..d85a91744 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -2,16 +2,20 @@ import React from 'react';
 import {Navigation, Header} from 'react-mdl';
 import {Link} from 'react-router';
 import styles from './Header.css';
+import I18n from 'coral-framework/i18n/i18n';
+import translations from '../../translations.json';
 
 export default () => (
   <Header title='Talk'>
     <Navigation>
-      <Link className={styles.navLink} to="/admin">Moderate</Link>
-      <Link className={styles.navLink} to="/admin/community">Community</Link>
-      <Link className={styles.navLink} to="/admin/configure">Configure</Link>
+      <Link className={styles.navLink} to="/admin">{lang.t('configure.moderate')}</Link>
+      <Link className={styles.navLink} to="/admin/community">{lang.t('configure.community')}</Link>
+      <Link className={styles.navLink} to="/admin/configure">{lang.t('configure.configure')}</Link>
       <span>
         {`v${process.env.VERSION}`}
       </span>
     </Navigation>
   </Header>
 );
+
+const lang = new I18n(translations);
diff --git a/client/coral-admin/src/containers/Configure.css b/client/coral-admin/src/containers/Configure.css
index 7141059b1..8d1fc49a2 100644
--- a/client/coral-admin/src/containers/Configure.css
+++ b/client/coral-admin/src/containers/Configure.css
@@ -29,6 +29,13 @@
   margin-bottom: 10px;
   cursor: pointer;
   width: auto;
+  height: auto;
+  text-align: left;
+}
+
+.configSettingInfoBox p {
+  font-size: 12px;
+  bottom: 0;
 }
 
 .configSettingEmbed {
diff --git a/client/coral-admin/src/containers/Configure.js b/client/coral-admin/src/containers/Configure.js
index 7d33e8e5a..7d057eacc 100644
--- a/client/coral-admin/src/containers/Configure.js
+++ b/client/coral-admin/src/containers/Configure.js
@@ -60,7 +60,7 @@ class Configure extends React.Component {
             onClick={this.updateModeration}
             checked={this.props.settings.moderation === 'pre'} />
         </ListItemAction>
-        Enable pre-moderation
+        {lang.t('configure.enable-pre-moderation')}
       </ListItem>
       <ListItem threeLine className={styles.configSettingInfoBox}>
         <ListItemAction>
@@ -68,33 +68,22 @@ class Configure extends React.Component {
             onClick={this.updateInfoBoxEnable}
             checked={this.props.settings.infoBoxEnable} />
         </ListItemAction>
-        <ListItemContent>Include Comment Stream Description for Readers.
-        Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.
+        <ListItemContent>
+          {lang.t('configure.include-comment-stream')}
+          <p>
+            {lang.t('configure.include-comment-stream-desc')}
+          </p>
         </ListItemContent>
       </ListItem>
       <ListItem className={`${styles.configSettingInfoBox} ${this.props.settings.infoBoxEnable ? null : styles.hidden}`} >
-        <Textfield
-          onChange={this.updateInfoBoxContent}
-          value={this.props.settings.infoBoxContent}
-          expandable
-          label='Include your text here'
-          rows={3}
-          style={{width: '100%'}}/>
+        <ListItemContent>
+          <Textfield
+            onChange={this.updateInfoBoxContent}
+            value={this.props.settings.infoBoxContent}
+            label={lang.t('configure.include-text')}
+            rows={3}/>
+        </ListItemContent>
       </ListItem>
-      {/*
-      <ListItem className={styles.configSetting}>
-        <ListItemAction><Checkbox /></ListItemAction>
-        Include Comment Stream Description for Readers
-      </ListItem>
-      <ListItem className={styles.configSetting}>
-        <ListItemAction><Checkbox /></ListItemAction>
-        Limit Comment Length
-        <Textfield
-          pattern='-?[0-9]*(\.[0-9]+)?'
-          error='Input is not a number!'
-          label='Maximum Characters' />
-      </ListItem>
-    */}
     </List>;
   }
 
@@ -115,7 +104,7 @@ class Configure extends React.Component {
 
     return <List>
       <ListItem className={styles.configSettingEmbed}>
-        <p>Copy and paste code below into your CMS to embed your comment box in your articles</p>
+        <p>{lang.t('configure.copy-and-paste')}</p>
         <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
         <Button raised colored className={styles.copyButton} onClick={this.copyToClipBoard}>
           {lang.t('embedlink.copy')}
@@ -131,8 +120,8 @@ class Configure extends React.Component {
 
   render () {
     let pageTitle = this.state.activeSection === 'comments'
-      ? 'Comment Settings'
-      : 'Embed Comment Stream';
+      ? lang.t('configure.comment-settings')
+      : lang.t('configure.embed-comment-stream');
 
     if (this.props.fetchingSettings) {
       pageTitle += ' - Loading...';
@@ -145,16 +134,16 @@ class Configure extends React.Component {
               <ListItem className={styles.settingOption}>
                 <ListItemContent
                   onClick={this.changeSection.bind(this, 'comments')}
-                  icon='settings'>Comment Settings</ListItemContent>
+                  icon='settings'>{lang.t('configure.comment-settings')}</ListItemContent>
               </ListItem>
               <ListItem className={styles.settingOption}>
                 <ListItemContent
                   onClick={this.changeSection.bind(this, 'embed')}
-                  icon='code'>Embed Comment Stream</ListItemContent>
+                  icon='code'>{lang.t('configure.embed-comment-stream')}</ListItemContent>
               </ListItem>
             </List>
             <Button raised colored onClick={this.saveSettings}>
-              <Icon name='save' /> Save Changes
+              <Icon name='save' /> {lang.t('configure.save-changes')}
             </Button>
           </div>
           <div className={styles.mainContent}>
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index 42b2bce5c..dd959172b 100644
--- a/client/coral-admin/src/translations.json
+++ b/client/coral-admin/src/translations.json
@@ -29,6 +29,19 @@
     },
     "embedlink": {
       "copy": "Copy to Clipboard"
+    },
+    "configure": {
+      "enable-pre-moderation": "Enable pre-moderation",
+      "include-comment-stream": "Include Comment Stream Description for Readers.",
+      "include-comment-stream-desc": "Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.",
+      "include-text": "Include your text here.",
+      "comment-settings": "Comment Settings",
+      "embed-comment-stream": "Embed Comment Stream",
+      "save-changes": "Save Changes",
+      "copy-and-paste": "Copy and paste code below into your CMS to embed your comment box in your articles",
+      "moderate": "Moderate",
+      "configure": "Configure",
+      "community": "Community"
     }
   },
   "es": {
@@ -50,6 +63,19 @@
     "comment": {
       "flagged": "marcado",
       "anon": "Anónimo"
+    },
+    "configure": {
+      "enable-pre-moderation": "Habilitar pre-moderación",
+      "include-comment-stream": "Incluir la Descripción a un Hilo de Comentario para los y las Lectoras.",
+      "include-comment-stream-desc": "Escribir un mensaje que será agregado a la parte de arriba del tu hilo de comentarios. Por ejemplo, un tema, guias de comunidad, etc.",
+      "include-text": "Incluir tu texto aqui.",
+      "comment-settings": "Configuración de Comentarios",
+      "embed-comment-stream": "Colocar Hilo de Comentarios",
+      "save-changes": "Guardar Cambios",
+      "copy-and-paste": "Copiar y pegar el código de más abajo en tu CMS para colocar la caja de comentarios en tus articulos",
+      "moderate": "Moderar",
+      "configure": "Configurar",
+      "community": "Comunidad"
     }
   }
 }

From a5b8856905f60838366741b07e96f7d31810895b Mon Sep 17 00:00:00 2001
From: David Erwin <davidjerwin@gmail.com>
Date: Wed, 16 Nov 2016 12:00:46 -0500
Subject: [PATCH 14/15] Add moderation link to sample page

---
 views/home.ejs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/views/home.ejs b/views/home.ejs
index 5654e1745..780199387 100644
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -5,6 +5,7 @@
   <div style="margin-left:auto; margin-right:auto; width:500px">
     <h1>Corem ipsal</h1>
     <p>Lorem ipsum dolor sponge amet, consectetur adipiscing clam. Ut lobortis sollicitudin pillar a ornare. Curabitur dignissim vestibulum cay non rhoncus. Cras laoreet ante vel nunc hendrerit, shelf imperdiet neque egestas. Suspendisse aliquet iaculis fermentum. Talk volutpat, tellus posuere laoreet consequat, mi lacus laoreet massa, sed vehicula mauris velit non lectus. Integer non trust nec neque congue faucibus porttitor sit amet elkhorn.</p>
+    <p><a href="/admin">Visit the moderation console</a></p>
 
 <div id='coralStreamEmbed'></div>
 <script type='text/javascript' src='https://pym.nprapps.org/pym.v1.min.js'></script>

From 9a2eacabb3f5e929b9e5c170128c6749de91f1ae Mon Sep 17 00:00:00 2001
From: David Erwin <davidjerwin@gmail.com>
Date: Wed, 16 Nov 2016 12:25:33 -0500
Subject: [PATCH 15/15] Adding faux multi-article functionality

---
 routes/index.js                 |  6 +++++-
 views/{home.ejs => article.ejs} | 10 +++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)
 rename views/{home.ejs => article.ejs} (65%)

diff --git a/routes/index.js b/routes/index.js
index cde5b07c7..0c03edcc5 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -6,7 +6,11 @@ router.use('/admin', require('./admin'));
 router.use('/embed', require('./embed'));
 
 router.get('/', (req, res) => {
-  return res.render('home', {});
+  return res.render('article', {title: 'Coral Talk'});
+});
+
+router.get('/assets/:asset_title', (req, res) => {
+  return res.render('article', {title: req.params.asset_title.split('-').join(' ')});
 });
 
 module.exports = router;
diff --git a/views/home.ejs b/views/article.ejs
similarity index 65%
rename from views/home.ejs
rename to views/article.ejs
index 780199387..95c0d7904 100644
--- a/views/home.ejs
+++ b/views/article.ejs
@@ -1,9 +1,17 @@
 <html>
   <head>
+    <meta property="og:title" content="<%= title %>" />
+    <meta property="og:author" content="A. J. Ournalist" />
+    <meta property="og:description" content="A description of this article." />
+
+    <meta property="article:published" itemprop="datePublished" content="2016-11-16T11:46:06-05:00" />
+    <meta property="article:modified" itemprop="dateModified" content="2016-11-16T12:09:44-05:00" />
+    <meta property="article:section" itemprop="articleSection" content="The Section!" />
+
   </head>
   <body>
   <div style="margin-left:auto; margin-right:auto; width:500px">
-    <h1>Corem ipsal</h1>
+    <h1><%= title %></h1>
     <p>Lorem ipsum dolor sponge amet, consectetur adipiscing clam. Ut lobortis sollicitudin pillar a ornare. Curabitur dignissim vestibulum cay non rhoncus. Cras laoreet ante vel nunc hendrerit, shelf imperdiet neque egestas. Suspendisse aliquet iaculis fermentum. Talk volutpat, tellus posuere laoreet consequat, mi lacus laoreet massa, sed vehicula mauris velit non lectus. Integer non trust nec neque congue faucibus porttitor sit amet elkhorn.</p>
     <p><a href="/admin">Visit the moderation console</a></p>