[CORL-822] Safari Fix (#2760)

* fix: forced version

* fix: removed cookie code

* chore: version bump

.circleci/config.yml

@@ -1,4 +1,3 @@
-
 # job_environment will setup the environment for any job being executed.
 job_environment: &job_environment
   NODE_ENV: test
@@ -54,7 +53,6 @@ integration_job: &integration_job
         when: always
         path: /tmp/circleci-test-results
 
-
 version: 2
 jobs:
   # npm_dependencies will install the dependencies used by all other steps.
@@ -223,20 +221,17 @@ jobs:
 # only execute on a deploy related job.
 filter_deploy: &filter_deploy
   filters:
-    branches:
-      only:
-        - master
-        - next
     tags:
       only: /v[0-9]+(\.[0-9]+)*/
+    branches:
+      ignore: /.*/
 
 # filter_develop will add the filters for a development related commit.
 filter_develop: &filter_develop
   filters:
     branches:
       ignore:
-        - master
-        - next
+        - /release\/.*/
 
 workflows:
   version: 2
@@ -258,10 +253,11 @@ workflows:
           <<: *filter_develop
           requires:
             - npm_dependencies
-      - test_integration_chrome_local:
-          <<: *filter_develop
-          requires:
-            - build_assets
+      # TODO: uncomment when we revisit browserstack
+      # - test_integration_chrome_local:
+      #     <<: *filter_develop
+      #     requires:
+      #       - build_assets
       # TODO: uncomment when more reliable
       # - test_integration_firefox_local:
       #     <<: *filter_develop
@@ -283,18 +279,19 @@ workflows:
           <<: *filter_deploy
           requires:
             - npm_dependencies
-      - test_integration_chrome:
-          <<: *filter_deploy
-          requires:
-            - build_assets
-      - test_integration_firefox:
-          <<: *filter_deploy
-          requires:
-            - build_assets
-      - test_integration_edge:
-          <<: *filter_deploy
-          requires:
-            - build_assets
+      # TODO: uncomment when we revisit browserstack
+      # - test_integration_chrome:
+      #     <<: *filter_deploy
+      #     requires:
+      #       - build_assets
+      # - test_integration_firefox:
+      #     <<: *filter_deploy
+      #     requires:
+      #       - build_assets
+      # - test_integration_edge:
+      #     <<: *filter_deploy
+      #     requires:
+      #       - build_assets
       # TODO: uncomment when more reliable
       # - test_integration_ie:
       #    <<: *filter_deploy
@@ -309,9 +306,10 @@ workflows:
           requires:
             - lint
             - test_unit
-            - test_integration_chrome
-            - test_integration_firefox
-            - test_integration_edge
+            # TODO: uncomment when we revisit browserstack
+            # - test_integration_chrome
+            # - test_integration_firefox
+            # - test_integration_edge
             # TODO: uncomment when more reliable
             # - test_integration_ie
             # - test_integration_safari

.gitignore

@@ -45,6 +45,7 @@ plugins/*
 !plugins/talk-plugin-moderation-actions
 !plugins/talk-plugin-notifications
 !plugins/talk-plugin-notifications-category-featured
+!plugins/talk-plugin-notifications-category-moderation-actions
 !plugins/talk-plugin-notifications-category-reply
 !plugins/talk-plugin-notifications-category-staff
 !plugins/talk-plugin-notifications-digest-daily

CODE_OF_CONDUCT.md

@@ -1,6 +1,7 @@
-# Mozilla Community Participation Guidelines
+# Vox Media Code of Conduct
 
-## Version 2.3 - Updated May 16, 2017
+## Introduction
 
-The heart of Mozilla is people. We put people first and do our best to recognize, appreciate and respect the diversity of our global contributors. The Mozilla Project welcomes contributions from everyone who shares our goals and wants to contribute in a healthy and constructive manner within our community. As such, we have adopted this code of conduct and require all those who participate to agree and adhere to these Community Participation Guidelines in order to help us create a safe and positive community experience for all.
-https://www.mozilla.org/en-US/about/governance/policies/participation/
+This code of conduct governs the environment of the Vox Product team. We created it not because we anticipate bad behavior, but because we believe that articulating our values and obligations to one another reinforces the already exceptional level of respect among the team and because having a code provides us with clear avenues to correct our culture should it ever stray from that course. We make this code public in the hopes of contributing to the ongoing conversation about inclusion in the tech, design, and media communities and encourage other teams to fork it and make it their own. To our team, we commit to enforce and evolve this code as our team grows.
+
+Read the rest here: http://code-of-conduct.voxmedia.com/

CONTRIBUTING.md

@@ -18,7 +18,7 @@ There are at least three ways to contribute to Talk:
 
 Conversation surrounding contributions begins in [issues](https://github.com/coralproject/talk/issues).
 
-### When should I Create an Issue?
+### When should I create an issue?
 
 File an issue as soon as you have an idea of something you'd like to contribute. We would love to hear what you're thinking and help refine the idea to make it into the Talk ecosystem.
 
@@ -30,9 +30,9 @@ Please file issues if:
 
 ### What should I include?
 
-Coral has adopted an iterative, agile development philosophy. All contributions that make it into the Talk repository should start with a story or this form:
+Coral has adopted an iterative, agile development philosophy. All contributions that make it into the Talk repository should start with a user story in this form:
 
-> As a [type of person] I'd like to be able to [do something] so that I can [get some result].
+> As a [type of Coral user] I'd like to [do something] so that I can [get some result/value].
 
 This exercise does two things:
 
@@ -71,23 +71,3 @@ If you'd like to discuss a contribution, please [file an issue](https://github.c
 Talk's translations are stored in `.yml` files [here](https://github.com/coralproject/talk/tree/master/locales).
 
 Translations can be submitted via pull request. If you do not use github, you can use 'en.yml' as a template and [email](https://coralproject.net/contact) the translations to us. We can import it into the repository.
-
-## I want to contribute but I'm not sure what to do!
-
-If you want to contribute but don't have a clear idea of exactly what that may be, here are some resources that may help:
-
-### Product Roadmap
-
-Please visit our product roadmap here: https://www.pivotaltracker.com/n/projects/1863625. If you'd like to take on any of our scheduled tasks we'd be forever grateful!
-
-### Discussion Forum
-
-If you'd like to discuss what we're up to, please visit or [community](https://community.coralproject.net/) or [contact us](https://coralproject.net/contact).
-
-### Integrations
-
-Have a favorite analytics engine? Data science service? CMS? Auth platform? Deployment platform or pipeline? Pet project? Consider building a plugin to integrate them!
-
-### Favorite Features?
-
-Do you have a favorite feature of an existing platform that's not yet been done in Talk? Sounds like Talk needs that feature.

Dockerfile.onbuild

@@ -4,6 +4,7 @@ FROM coralproject/talk:latest
 ONBUILD ARG TALK_ADDTL_COMMENTS_ON_LOAD_MORE=10
 ONBUILD ARG TALK_ASSET_COMMENTS_LOAD_DEPTH=10
 ONBUILD ARG TALK_REPLY_COMMENTS_LOAD_DEPTH=3
+ONBUILD ARG TALK_ADDTL_REPLIES_ON_LOAD_MORE=999999
 ONBUILD ARG TALK_THREADING_LEVEL=3
 ONBUILD ARG TALK_DEFAULT_STREAM_TAB=all
 ONBUILD ARG TALK_DISABLE_EMBED_POLYFILL=FALSE

LICENSE

@@ -1,4 +1,4 @@
-Copyright 2018 Mozilla Foundation
+Copyright 2019 Vox Media, Inc
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

README.md

@@ -1,8 +1,14 @@
 # Talk · [![CircleCI](https://circleci.com/gh/coralproject/talk.svg?style=svg)](https://circleci.com/gh/coralproject/talk) · [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)
 
+---
+
+> :construction: **NOTE:** We're currently building v5 of this platform, check it out in our [next branch](https://github.com/coralproject/talk/tree/next) :construction_worker_man: :construction_worker_woman:
+
+---
+
 Online comments are broken. Our open-source commenting platform, Talk, rethinks how moderation, comment display, and conversation function, creating the opportunity for safer, smarter discussions around your work. [Read more about Talk here](https://coralproject.net/talk).
 
-Built with <3 by The Coral Project.
+Built with <3 by The Coral Project, a part of [Vox Media](https://www.voxmedia.com/).
 
 ## Getting Started
 
@@ -22,13 +28,11 @@ For advanced configuration and usage of Talk, check out our [Configuration](http
 
 ## Versions & Upgrading
 
-The current recommended release version is v4.5.0. ^4.5 (and all future even-numbered versions) are considered stable LTS versions. We recommend ^4.5 for use in production environments. 
+Check our Releases page for the latest recommended release version. [Releases](https://github.com/coralproject/talk/releases) All future even-numbered versions are considered stable LTS versions. We recommend the latest verified release for use in production environments. 
 
 ## More Resources
 
-- [Talk Product Roadmap](https://www.pivotaltracker.com/n/projects/1863625)
-- [Our Blog](https://blog.coralproject.net/)
-- [Community Forums](https://community.coralproject.net/)
+- [Our Blog](https://coralproject.net/blog)
 - [Community Guides for Journalism](https://guides.coralproject.net/)
 - [More About Us](https://coralproject.net/)
 

app.js

@@ -11,7 +11,12 @@ const { HELMET_CONFIGURATION } = require('./config');
 const { MOUNT_PATH } = require('./url');
 const routes = require('./routes');
 const debug = require('debug')('talk:app');
-const { ENABLE_TRACING, APOLLO_ENGINE_KEY, PORT } = require('./config');
+const {
+  ENABLE_TRACING,
+  APOLLO_ENGINE_KEY,
+  PORT,
+  TRUST_PROXY,
+} = require('./config');
 
 const app = express();
 
@@ -58,7 +63,26 @@ if (ENABLE_TRACING && APOLLO_ENGINE_KEY) {
 
 // Trust the first proxy in front of us, this will enable us to trust the fact
 // that SSL was terminated correctly.
-app.set('trust proxy', 1);
+app.set(
+  'trust proxy',
+  (function() {
+    if (!TRUST_PROXY) {
+      return null;
+    }
+
+    const lowercase = TRUST_PROXY.toLowerCase();
+    if (lowercase === 'true' || lowercase === 'false') {
+      return lowercase === 'true';
+    }
+
+    const parsed = Number(TRUST_PROXY);
+    if (!isNaN(parsed)) {
+      return parsed;
+    }
+
+    return TRUST_PROXY;
+  })()
+);
 
 // Enable a suite of security good practices through helmet. We disable
 // frameguard to allow crossdomain injection of the embed.

bin/cli-serve

@@ -1,8 +1,10 @@
 #!/usr/bin/env node
 
+const throng = require('throng');
+const { CONCURRENCY } = require('../config');
+const { logger } = require('../services/logging');
 const util = require('./util');
 const program = require('commander');
-const serve = require('../serve');
 
 //==============================================================================
 // Setting up the program command line arguments.
@@ -22,8 +24,18 @@ program
   )
   .parse(process.argv);
 
-// Start serving.
-serve(program).catch(err => {
-  console.error(err);
-  util.shutdown(1);
+throng({
+  workers: CONCURRENCY,
+  start: i => {
+    logger.info({ workerID: i }, 'started worker');
+
+    // Load in the serve.
+    const serve = require('../serve');
+
+    // Start serving.
+    serve(program).catch(err => {
+      console.error(err);
+      util.shutdown(1);
+    });
+  },
 });

bin/cli-users

@@ -105,7 +105,8 @@ function printUserAsTable(user) {
       Suspension: user.suspended
         ? `Until ${user.status.suspension.until}`
         : false,
-    }
+    },
+    { 'Always premod comments': user.alwaysPremod }
   );
 
   console.log(table.toString());

client/coral-admin/src/actions/alwaysPremodUserDialog.js

@@ -0,0 +1,14 @@
+import {
+  SHOW_ALWAYS_PREMOD_USER_DIALOG,
+  HIDE_ALWAYS_PREMOD_USER_DIALOG,
+} from '../constants/alwaysPremodUserDialog.js';
+
+export const showAlwaysPremodUserDialog = ({ userId, username }) => ({
+  type: SHOW_ALWAYS_PREMOD_USER_DIALOG,
+  userId,
+  username,
+});
+
+export const hideAlwaysPremodUserDialog = () => ({
+  type: HIDE_ALWAYS_PREMOD_USER_DIALOG,
+});

client/coral-admin/src/actions/community.js

@@ -9,6 +9,8 @@ import {
   SET_SEARCH_VALUE,
   SHOW_BANUSER_DIALOG,
   HIDE_BANUSER_DIALOG,
+  SHOW_ALWAYS_PREMOD_USER_DIALOG,
+  HIDE_ALWAYS_PREMOD_USER_DIALOG,
   SHOW_REJECT_USERNAME_DIALOG,
   HIDE_REJECT_USERNAME_DIALOG,
   SET_INDICATOR_TRACK,
@@ -61,6 +63,15 @@ export const setSearchValue = value => ({
 export const showBanUserDialog = user => ({ type: SHOW_BANUSER_DIALOG, user });
 export const hideBanUserDialog = () => ({ type: HIDE_BANUSER_DIALOG });
 
+// Always premod User Dialog
+export const showAlwaysPremodUserDialog = user => ({
+  type: SHOW_ALWAYS_PREMOD_USER_DIALOG,
+  user,
+});
+export const hideAlwaysPremodUserDialog = () => ({
+  type: HIDE_ALWAYS_PREMOD_USER_DIALOG,
+});
+
 // Reject Username Dialog
 export const showRejectUsernameDialog = user => ({
   type: SHOW_REJECT_USERNAME_DIALOG,

client/coral-admin/src/actions/stories.js

@@ -4,13 +4,15 @@ import {
   FETCH_ASSETS_REQUEST,
   FETCH_ASSETS_SUCCESS,
   FETCH_ASSETS_FAILURE,
+  LOAD_MORE_ASSETS_REQUEST,
+  LOAD_MORE_ASSETS_SUCCESS,
+  LOAD_MORE_ASSETS_FAILURE,
   SET_PAGE,
   SET_SEARCH_VALUE,
   SET_CRITERIA,
   UPDATE_ASSET_STATE_REQUEST,
   UPDATE_ASSET_STATE_SUCCESS,
   UPDATE_ASSET_STATE_FAILURE,
-  UPDATE_ASSETS,
 } from '../constants/stories';
 
 import t from 'coral-framework/services/i18n';
@@ -21,17 +23,14 @@ import t from 'coral-framework/services/i18n';
 
 // Fetch a page of assets
 // Get comments to fill each of the three lists on the mod queue
-export const fetchAssets = (query = {}) => (dispatch, _, { rest }) => {
+export const fetchAssets = (query = {}) => (dispatch, _, { rest2 }) => {
   dispatch({ type: FETCH_ASSETS_REQUEST });
-  return rest(`/assets?${queryString.stringify(query)}`)
-    .then(({ result, page, count, limit, totalPages }) =>
+  return rest2(`/stories?${queryString.stringify(query)}`)
+    .then(({ edges, pageInfo }) =>
       dispatch({
         type: FETCH_ASSETS_SUCCESS,
-        assets: result,
-        page,
-        count,
-        limit,
-        totalPages,
+        edges,
+        pageInfo,
       })
     )
     .catch(error => {
@@ -43,12 +42,31 @@ export const fetchAssets = (query = {}) => (dispatch, _, { rest }) => {
     });
 };
 
+export const loadMoreAssets = (query = {}) => (dispatch, _l, { rest2 }) => {
+  dispatch({ type: LOAD_MORE_ASSETS_REQUEST });
+  return rest2(`/stories?${queryString.stringify(query)}`)
+    .then(({ edges, pageInfo }) =>
+      dispatch({
+        type: LOAD_MORE_ASSETS_SUCCESS,
+        edges,
+        pageInfo,
+      })
+    )
+    .catch(error => {
+      console.error(error);
+      const errorMessage = error.translation_key
+        ? t(`error.${error.translation_key}`)
+        : error.toString();
+      dispatch({ type: LOAD_MORE_ASSETS_FAILURE, error: errorMessage });
+    });
+};
+
 // Update an asset state
 // Get comments to fill each of the three lists on the mod queue
 export const updateAssetState = (id, closedAt) => (dispatch, _, { rest }) => {
-  dispatch({ type: UPDATE_ASSET_STATE_REQUEST, id, closedAt });
+  dispatch({ type: UPDATE_ASSET_STATE_REQUEST });
   return rest(`/assets/${id}/status`, { method: 'PUT', body: { closedAt } })
-    .then(() => dispatch({ type: UPDATE_ASSET_STATE_SUCCESS }))
+    .then(() => dispatch({ type: UPDATE_ASSET_STATE_SUCCESS, id, closedAt }))
     .catch(error => {
       console.error(error);
       const errorMessage = error.translation_key
@@ -58,10 +76,6 @@ export const updateAssetState = (id, closedAt) => (dispatch, _, { rest }) => {
     });
 };
 
-export const updateAssets = assets => dispatch => {
-  dispatch({ type: UPDATE_ASSETS, assets });
-};
-
 export const setPage = page => ({
   type: SET_PAGE,
   page,

client/coral-admin/src/components/AdminLogin.js

@@ -73,7 +73,7 @@ class AdminLogin extends React.Component {
               this.setState({ requestPassword: true });
             }}
           >
-            {t('login.request_passowrd')}
+            {t('login.request_password')}
           </a>
         </p>
         {loginMaxExceeded && (

client/coral-admin/src/components/AlwaysPremodUserDialog.css

@@ -0,0 +1,29 @@
+.dialog {
+  border: none;
+  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
+  width: 400px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 20px;
+  border-radius: 4px;
+}
+
+.header {
+  color: black;
+  font-size: 1.5em;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+}
+
+.subheader {
+  color: black;
+  font-size: 1.3em;
+  font-weight: 500;
+  margin: 0 0 8px 0;
+}
+
+.buttons {
+  margin-top: 8px;
+  margin-bottom: 6px;
+  text-align: right;
+}

client/coral-admin/src/components/AlwaysPremodUserDialog.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import cn from 'classnames';
+import PropTypes from 'prop-types';
+import { Dialog } from 'coral-ui';
+import styles from './AlwaysPremodUserDialog.css';
+
+import Button from 'coral-ui/components/Button';
+import t from 'coral-framework/services/i18n';
+
+class AlwaysPremodUserDialog extends React.Component {
+  handlePerform = () => {
+    this.props.onPerform();
+  };
+
+  render() {
+    const { open, onCancel, username, info } = this.props;
+    return (
+      <Dialog
+        className={cn(styles.dialog, 'talk-always-premod-user-dialog')}
+        id="alwaysPremodUserDialog"
+        open={open}
+        onCancel={onCancel}
+        title={t('alwayspremoddialog.always_premod_user')}
+      >
+        <span className={styles.close} onClick={onCancel}>
+          ×
+        </span>
+        <section>
+          <h2 className={styles.header}>
+            {t('alwayspremoddialog.always_premod_user')}
+          </h2>
+          <h3 className={styles.subheader}>
+            {t('alwayspremoddialog.are_you_sure', username)}
+          </h3>
+          <p className={styles.description}>{info}</p>
+          <div className={styles.buttons}>
+            <Button
+              className={cn('talk-always-premod-user-dialog-button-cancel')}
+              cStyle="white"
+              onClick={onCancel}
+              raised
+            >
+              {t('alwayspremoddialog.cancel')}
+            </Button>
+            <Button
+              className={cn('talk-always-premod-user-dialog-button-confirm')}
+              cStyle="black"
+              onClick={this.handlePerform}
+              raised
+            >
+              {t('alwayspremoddialog.yes_always_premod_user')}
+            </Button>
+          </div>
+        </section>
+      </Dialog>
+    );
+  }
+}
+
+AlwaysPremodUserDialog.propTypes = {
+  open: PropTypes.bool,
+  onPerform: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  username: PropTypes.string,
+  info: PropTypes.string,
+};
+
+export default AlwaysPremodUserDialog;

client/coral-admin/src/components/Header.css

@@ -26,7 +26,8 @@
   max-width: 1280px;
   margin: 0 auto;
   background-color: #696969;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 .header > div {
@@ -41,7 +42,7 @@
   position: absolute;
   top: 0;
   right: 0;
-  width: 170px;
+  width: 200px;
   height: 100%;
 }
 
@@ -85,7 +86,7 @@
   background-color: transparent;
   transition: background-color 200ms;
   font-weight: 100;
-  letter-spacing: .8;
+  letter-spacing: 0.8;
 
   &:hover {
     background-color: #404040;

client/coral-admin/src/components/SignIn.js

@@ -79,7 +79,7 @@ class SignIn extends React.Component {
               className={styles.forgotPasswordLink}
               onClick={this.handleForgotPasswordLink}
             >
-              {t('login.request_passowrd')}
+              {t('login.request_password')}
             </a>
           </p>
         </form>

client/coral-admin/src/components/UserDetail.css

@@ -137,6 +137,12 @@
   display: inline-block;
 }
 
+.actionsMenuAlwaysPremod {
+  background-color: #F0B50B;
+  border-color: #F0B50B;
+  color: white;
+}
+
 .actionsMenuSuspended {
   background-color: #F29336;
   border-color: #F29336;

client/coral-admin/src/components/UserDetail.js

@@ -12,6 +12,7 @@ import {
   isUsernameRejected,
   isUsernameChanged,
   isBanned,
+  isAlwaysPremod,
   getKarma,
 } from 'coral-framework/utils/user';
 
@@ -45,6 +46,7 @@ function getUserStatusArray(user) {
   const statusMap = {
     suspended: isSuspended,
     banned: isBanned,
+    alwaysPremod: isAlwaysPremod,
     usernameRejected: isUsernameRejected,
     usernameChanged: isUsernameChanged,
   };
@@ -68,6 +70,12 @@ class UserDetail extends React.Component {
       username: this.props.root.user.username,
     });
 
+  showAlwaysPremodUserDialog = () =>
+    this.props.showAlwaysPremodUserDialog({
+      userId: this.props.root.user.id,
+      username: this.props.root.user.username,
+    });
+
   showRejectUsernameDialog = () =>
     this.props.showRejectUsernameDialog({
       userId: this.props.root.user.id,
@@ -107,6 +115,8 @@ class UserDetail extends React.Component {
           return t('user_detail.suspended');
         case 'banned':
           return t('user_detail.banned');
+        case 'alwaysPremod':
+          return t('user_detail.always_premoded');
         case 'usernameRejected':
           return (
             <span>
@@ -153,6 +163,7 @@ class UserDetail extends React.Component {
       toggleSelectAll,
       unbanUser,
       unsuspendUser,
+      removeAlwaysPremodUser,
       modal,
       acceptComment,
       rejectComment,
@@ -169,6 +180,7 @@ class UserDetail extends React.Component {
 
     const banned = isBanned(user);
     const suspended = isSuspended(user);
+    const alwaysPremod = isAlwaysPremod(user);
     const usernameRejected = isUsernameRejected(user);
     const usernameChanged = isUsernameChanged(user);
 
@@ -200,6 +212,7 @@ class UserDetail extends React.Component {
                 {
                   [styles.actionsMenuSuspended]: suspended,
                   [styles.actionsMenuBanned]: banned,
+                  [styles.actionsMenuAlwaysPremod]: alwaysPremod,
                 },
                 'talk-admin-user-detail-actions-button'
               )}
@@ -231,6 +244,21 @@ class UserDetail extends React.Component {
                 </ActionsMenuItem>
               )}
 
+              {alwaysPremod ? (
+                <ActionsMenuItem
+                  onClick={() => removeAlwaysPremodUser({ id: user.id })}
+                >
+                  {t('user_detail.remove_always_premod')}
+                </ActionsMenuItem>
+              ) : (
+                <ActionsMenuItem
+                  disabled={me.id === user.id}
+                  onClick={this.showAlwaysPremodUserDialog}
+                >
+                  {t('user_detail.always_premod')}
+                </ActionsMenuItem>
+              )}
+
               {usernameChanged && (
                 <ActionsMenuItem onClick={this.goToReportedUsernames}>
                   {t('user_detail.username_needs_approval')}
@@ -476,8 +504,10 @@ UserDetail.propTypes = {
   showRejectUsernameDialog: PropTypes.func,
   showSuspendUserDialog: PropTypes.func,
   showBanUserDialog: PropTypes.func,
+  showAlwaysPremodUserDialog: PropTypes.func,
   unbanUser: PropTypes.func.isRequired,
   unsuspendUser: PropTypes.func.isRequired,
+  removeAlwaysPremodUser: PropTypes.func.isRequired,
   modal: PropTypes.bool,
   rejectUsername: PropTypes.func.isRequired,
 };

client/coral-admin/src/components/UserDetailComment.css

@@ -34,7 +34,7 @@
   color: #063b9a;
   text-decoration: none;
   font-weight: 500;
-  letter-spacing: .5px;
+  letter-spacing: 0.5px;
   margin-left: 10px;
   font-size: 13px;
   margin-left: 5px;
@@ -109,7 +109,7 @@
 }
 
 .external {
-  font-size: .7em;
+  font-size: 0.7em;
   text-decoration: none;
   color: #063b9a;
   cursor: pointer;
@@ -119,7 +119,7 @@
 
   &:hover {
     text-decoration: underline;
-    opacity: .9;
+    opacity: 0.9;
   }
 
   > i {
@@ -139,3 +139,25 @@
     margin-right: 5px;
   }
 }
+
+.bodyHistoryToggle {
+  color: #666;
+  font-size: 12px;
+  line-height: 1px;
+  font-weight: 300;
+  text-decoration: underline;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.editedCommentBody {
+  padding: 0 5px 5px 5px;
+}
+
+.editedComment {
+  margin-top: 6px;
+  font-weight: 300;
+  font-size: 16px;
+  overflow-wrap: break-word;
+}

client/coral-admin/src/components/UserDetailComment.js

@@ -19,6 +19,8 @@ import TimeAgo from 'coral-framework/components/TimeAgo';
 import t from 'coral-framework/services/i18n';
 
 class UserDetailComment extends React.Component {
+  state = { showingEditHistory: false };
+
   approve = () =>
     this.props.comment.status === 'ACCEPTED'
       ? null
@@ -29,6 +31,29 @@ class UserDetailComment extends React.Component {
       ? null
       : this.props.rejectComment({ commentId: this.props.comment.id });
 
+  getBodyHistory = () => {
+    const bodyHistory = [];
+    const comment = this.props.comment;
+    for (let i = 0; i < comment.body_history.length - 1; i++) {
+      bodyHistory.push(
+        <div key={i} className={styles.editedComment}>
+          <div>
+            <TimeAgo className={styles.created} datetime={comment.created_at} />
+          </div>
+          <div className={styles.editedCommentBody}>
+            {comment.body_history[i].body}
+          </div>
+        </div>
+      );
+    }
+
+    return bodyHistory;
+  };
+
+  toggleEditHistory = () => {
+    this.setState({ showingEditHistory: !this.state.showingEditHistory });
+  };
+
   render() {
     const {
       comment,
@@ -81,6 +106,14 @@ class UserDetailComment extends React.Component {
                 &nbsp;<span className={styles.editedMarker}>
                   ({t('comment.edited')})
                 </span>
+                &nbsp;<span
+                  className={styles.bodyHistoryToggle}
+                  onClick={this.toggleEditHistory}
+                >
+                  {this.state.showingEditHistory
+                    ? t('comment.hide_edit_history')
+                    : t('comment.show_edit_history')}
+                </span>
               </span>
             ) : null}
 
@@ -142,6 +175,14 @@ class UserDetailComment extends React.Component {
             </div>
           </CommentAnimatedEdit>
         </div>
+
+        {this.state.showingEditHistory ? (
+          <div className={styles.container}>
+            {t('comment.edit_history')}
+            {this.getBodyHistory()}
+          </div>
+        ) : null}
+
         <CommentDetails root={root} comment={comment} />
       </li>
     );

client/coral-admin/src/components/UserHistory.js

@@ -48,6 +48,10 @@ const buildActionResponse = (typename, created_at, until, status) => {
       return status
         ? t('user_history.user_banned')
         : t('user_history.ban_removed');
+    case 'AlwaysPremodStatusHistory':
+      return status
+        ? t('user_history.user_always_premoded')
+        : t('user_history.always_premod_removed');
     case 'SuspensionStatusHistory':
       return until
         ? t('user_history.suspended', readableDuration(created_at, until))

client/coral-admin/src/constants/alwaysPremodUserDialog.js

@@ -0,0 +1,2 @@
+export const SHOW_ALWAYS_PREMOD_USER_DIALOG = 'SHOW_ALWAYS_PREMOD_USER_DIALOG';
+export const HIDE_ALWAYS_PREMOD_USER_DIALOG = 'HIDE_ALWAYS_PREMOD_USER_DIALOG';

client/coral-admin/src/constants/community.js

@@ -14,6 +14,9 @@ export const FETCH_FLAGGED_COMMENTERS_FAILURE = `${prefix}_FETCH_FLAGGED_COMMENT
 export const SHOW_BANUSER_DIALOG = `${prefix}_SHOW_BANUSER_DIALOG`;
 export const HIDE_BANUSER_DIALOG = `${prefix}_HIDE_BANUSER_DIALOG`;
 
+export const SHOW_ALWAYS_PREMOD_USER_DIALOG = `${prefix}_SHOW_ALWAYS_PREMOD_USER_DIALOG`;
+export const HIDE_ALWAYS_PREMOD_USER_DIALOG = `${prefix}_HIDE_ALWAYS_PREMOD_USER_DIALOG`;
+
 export const SHOW_REJECT_USERNAME_DIALOG = `${prefix}_SHOW_REJECT_USERNAME_DIALOG`;
 export const HIDE_REJECT_USERNAME_DIALOG = `${prefix}_HIDE_REJECT_USERNAME_DIALOG`;
 

client/coral-admin/src/constants/stories.js

@@ -4,12 +4,14 @@ export const FETCH_ASSETS_REQUEST = `${prefix}_FETCH_ASSETS_REQUEST`;
 export const FETCH_ASSETS_SUCCESS = `${prefix}_FETCH_ASSETS_SUCCESS`;
 export const FETCH_ASSETS_FAILURE = `${prefix}_FETCH_ASSETS_FAILURE`;
 
+export const LOAD_MORE_ASSETS_REQUEST = `${prefix}_LOAD_MORE_ASSETS_REQUEST`;
+export const LOAD_MORE_ASSETS_SUCCESS = `${prefix}_LOAD_MORE_ASSETS_SUCCESS`;
+export const LOAD_MORE_ASSETS_FAILURE = `${prefix}_LOAD_MORE_ASSETS_FAILURE`;
+
 export const UPDATE_ASSET_STATE_REQUEST = `${prefix}_UPDATE_ASSET_STATE_REQUEST`;
 export const UPDATE_ASSET_STATE_SUCCESS = `${prefix}_UPDATE_ASSET_STATE_SUCCESS`;
 export const UPDATE_ASSET_STATE_FAILURE = `${prefix}_UPDATE_ASSET_STATE_FAILURE`;
 
-export const UPDATE_ASSETS = `${prefix}_UPDATE_ASSETS`;
-
 export const SET_PAGE = `${prefix}_SET_PAGE`;
 export const SET_SEARCH_VALUE = `${prefix}_SET_SEARCH_VALUE`;
 export const SET_CRITERIA = `${prefix}_SET_CRITERIA`;

client/coral-admin/src/containers/AlwaysPremodUserDialog.js

@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import AlwaysPremodUserDialog from '../components/AlwaysPremodUserDialog';
+import { hideAlwaysPremodUserDialog } from '../actions/alwaysPremodUserDialog';
+import { withAlwaysPremodUser } from 'coral-framework/graphql/mutations';
+import { compose } from 'react-apollo';
+import t from 'coral-framework/services/i18n';
+
+class AlwaysPremodUserDialogContainer extends Component {
+  alwaysPremodUser = async () => {
+    const { userId, alwaysPremodUser, hideAlwaysPremodUserDialog } = this.props;
+    await alwaysPremodUser({ id: userId });
+    hideAlwaysPremodUserDialog();
+  };
+
+  getInfo() {
+    let note = t('alwayspremoddialog.note_always_premod_user');
+    return t('alwayspremoddialog.note', note);
+  }
+
+  render() {
+    return (
+      <AlwaysPremodUserDialog
+        open={this.props.open}
+        onPerform={this.alwaysPremodUser}
+        onCancel={this.props.hideAlwaysPremodUserDialog}
+        username={this.props.username}
+        info={this.getInfo()}
+      />
+    );
+  }
+}
+
+AlwaysPremodUserDialogContainer.propTypes = {
+  alwaysPremodUser: PropTypes.func.isRequired,
+  hideAlwaysPremodUserDialog: PropTypes.func,
+  open: PropTypes.bool,
+  username: PropTypes.string,
+};
+
+const mapStateToProps = ({
+  alwaysPremodUserDialog: { open, userId, username },
+}) => ({
+  open,
+  userId,
+  username,
+});
+
+const mapDispatchToProps = dispatch => ({
+  ...bindActionCreators(
+    {
+      hideAlwaysPremodUserDialog,
+    },
+    dispatch
+  ),
+});
+
+export default compose(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  ),
+  withAlwaysPremodUser
+)(AlwaysPremodUserDialogContainer);

client/coral-admin/src/containers/Layout.js

@@ -5,6 +5,7 @@ import Layout from '../components/Layout';
 import Login from '../containers/Login';
 import { FullLoading } from '../components/FullLoading';
 import BanUserDialog from './BanUserDialog';
+import AlwaysPremodUserDialog from './AlwaysPremodUserDialog';
 import SuspendUserDialog from './SuspendUserDialog';
 import RejectUsernameDialog from './RejectUsernameDialog';
 import { toggleModal as toggleShortcutModal } from '../actions/moderation';
@@ -40,6 +41,7 @@ class LayoutContainer extends React.Component {
             toggleShortcutModal={toggleShortcutModal}
             currentUser={this.props.currentUser}
           >
+            <AlwaysPremodUserDialog />
             <BanUserDialog />
             <SuspendUserDialog />
             <RejectUsernameDialog />

client/coral-admin/src/containers/UserDetail.js

@@ -22,12 +22,14 @@ import {
   withSetCommentStatus,
   withUnbanUser,
   withUnsuspendUser,
+  withRemoveAlwaysPremodUser,
   withRejectUsername,
   withPostFlag,
 } from 'coral-framework/graphql/mutations';
 import UserDetailComment from './UserDetailComment';
 import update from 'immutability-helper';
 import { showBanUserDialog } from 'actions/banUserDialog';
+import { showAlwaysPremodUserDialog } from 'actions/alwaysPremodUserDialog';
 import { showSuspendUserDialog } from 'actions/suspendUserDialog';
 import { showRejectUsernameDialog } from 'actions/rejectUsernameDialog';
 
@@ -153,6 +155,7 @@ UserDetailContainer.propTypes = {
   selectedCommentIds: PropTypes.array,
   unbanUser: PropTypes.func.isRequired,
   unsuspendUser: PropTypes.func.isRequired,
+  removeAlwaysPremodUser: PropTypes.func.isRequired,
   rejectUsername: PropTypes.func.isRequired,
   userId: PropTypes.string,
 };
@@ -218,6 +221,17 @@ export const withUserDetailQuery = withQuery(
               created_at
             }
           }
+          alwaysPremod {
+            status
+            history {
+              status
+              assigned_by {
+                id
+                username
+              }
+              created_at
+            }
+          },
           username {
             status
             history {
@@ -280,6 +294,7 @@ const mapDispatchToProps = dispatch => ({
   ...bindActionCreators(
     {
       showBanUserDialog,
+      showAlwaysPremodUserDialog,
       showSuspendUserDialog,
       showRejectUsernameDialog,
       changeTab,
@@ -302,6 +317,7 @@ export default compose(
   withSetCommentStatus,
   withUnbanUser,
   withUnsuspendUser,
+  withRemoveAlwaysPremodUser,
   withRejectUsername,
   withPostFlag,
   withRouter

client/coral-admin/src/containers/UserDetailComment.js

@@ -42,6 +42,10 @@ export default withFragments({
       status_history {
         type
       }
+      body_history {
+        body
+        created_at
+      }
       ${getSlotFragmentSpreads(slots, 'comment')}
       ...${getDefinitionName(CommentLabels.fragments.comment)}
       ...${getDefinitionName(CommentDetails.fragments.comment)}

client/coral-admin/src/graphql/index.js

@@ -10,6 +10,9 @@ const userStatusFragment = gql`
         banned {
           status
         }
+        alwaysPremod {
+          status
+        }
         suspension {
           until
         }
@@ -125,6 +128,64 @@ export default {
         });
       },
     }),
+    AlwaysPremodUser: ({
+      variables: {
+        input: { id },
+      },
+    }) => ({
+      update: proxy => {
+        const fragmentId = `User_${id}`;
+        const data = proxy.readFragment({
+          fragment: userStatusFragment,
+          id: fragmentId,
+        });
+
+        const updated = update(data, {
+          state: {
+            status: {
+              alwaysPremod: {
+                status: { $set: true },
+              },
+            },
+          },
+        });
+
+        proxy.writeFragment({
+          fragment: userStatusFragment,
+          id: fragmentId,
+          data: updated,
+        });
+      },
+    }),
+    RemoveAlwaysPremodUser: ({
+      variables: {
+        input: { id },
+      },
+    }) => ({
+      update: proxy => {
+        const fragmentId = `User_${id}`;
+        const data = proxy.readFragment({
+          fragment: userStatusFragment,
+          id: fragmentId,
+        });
+
+        const updated = update(data, {
+          state: {
+            status: {
+              alwaysPremod: {
+                status: { $set: false },
+              },
+            },
+          },
+        });
+
+        proxy.writeFragment({
+          fragment: userStatusFragment,
+          id: fragmentId,
+          data: updated,
+        });
+      },
+    }),
     BanUser: ({
       variables: {
         input: { id },
@@ -154,6 +215,23 @@ export default {
         });
       },
     }),
+    SetUserAlwaysPremodStatus: ({ variables: { status, id } }) => ({
+      updateQueries: {
+        TalkAdmin_Community: prev => {
+          if (!status) {
+            return prev;
+          }
+          const updated = update(prev, {
+            users: {
+              nodes: {
+                $apply: nodes => nodes.filter(node => node.id !== id),
+              },
+            },
+          });
+          return updated;
+        },
+      },
+    }),
     UnbanUser: ({
       variables: {
         input: { id },

client/coral-admin/src/reducers/alwaysPremodUserDialog.js

@@ -0,0 +1,29 @@
+import {
+  SHOW_ALWAYS_PREMOD_USER_DIALOG,
+  HIDE_ALWAYS_PREMOD_USER_DIALOG,
+} from '../constants/alwaysPremodUserDialog';
+
+const initialState = {
+  open: false,
+  userId: null,
+  username: '',
+};
+
+export default function alwaysPremodUserDialog(state = initialState, action) {
+  switch (action.type) {
+    case SHOW_ALWAYS_PREMOD_USER_DIALOG:
+      return {
+        ...state,
+        open: true,
+        userId: action.userId,
+        username: action.username,
+      };
+    case HIDE_ALWAYS_PREMOD_USER_DIALOG:
+      return {
+        ...state,
+        open: false,
+      };
+    default:
+      return state;
+  }
+}

client/coral-admin/src/reducers/index.js

@@ -5,6 +5,7 @@ import moderation from './moderation';
 import install from './install';
 import banUserDialog from './banUserDialog';
 import suspendUserDialog from './suspendUserDialog';
+import alwaysPremodUserDialog from './alwaysPremodUserDialog';
 import rejectUsernameDialog from './rejectUsernameDialog';
 import userDetail from './userDetail';
 import ui from './ui';
@@ -14,6 +15,7 @@ export default {
   banUserDialog,
   configure,
   suspendUserDialog,
+  alwaysPremodUserDialog,
   userDetail,
   stories,
   community,

client/coral-admin/src/reducers/stories.js

@@ -3,56 +3,79 @@ import update from 'immutability-helper';
 
 const initialState = {
   assets: {
-    byId: {},
-    ids: [],
-    assets: [],
+    edges: [],
+    pageInfo: {},
   },
   searchValue: '',
   criteria: {
-    asc: 'false',
     filter: 'all',
   },
+  loading: true,
+  loadingMore: false,
 };
 
 export default function assets(state = initialState, action) {
   switch (action.type) {
-    case actions.FETCH_ASSETS_SUCCESS: {
-      const assets = action.assets.reduce((prev, curr) => {
-        prev[curr.id] = curr;
-        return prev;
-      }, {});
-
+    case actions.FETCH_ASSETS_REQUEST: {
       return update(state, {
+        loading: { $set: true },
+      });
+    }
+    case actions.FETCH_ASSETS_FAILURE: {
+      return update(state, {
+        loading: { $set: false },
+      });
+    }
+    case actions.FETCH_ASSETS_SUCCESS: {
+      return update(state, {
+        loading: { $set: false },
         assets: {
-          totalPages: { $set: action.totalPages },
-          page: { $set: action.page },
-          byId: { $set: assets },
-          count: { $set: action.count },
-          ids: { $set: Object.keys(assets) },
+          edges: { $set: action.edges },
+          pageInfo: { $set: action.pageInfo },
         },
       });
     }
-    case actions.UPDATE_ASSET_STATE_REQUEST:
+    case actions.LOAD_MORE_ASSETS_REQUEST: {
+      return update(state, {
+        loadingMore: { $set: true },
+      });
+    }
+    case actions.LOAD_MORE_ASSETS_FAILURE: {
+      return update(state, {
+        loadingMore: { $set: false },
+      });
+    }
+    case actions.LOAD_MORE_ASSETS_SUCCESS: {
+      return update(state, {
+        loadingMore: { $set: false },
+        assets: {
+          edges: { $push: action.edges },
+          pageInfo: {
+            endCursor: { $set: action.pageInfo.endCursor },
+            hasNextPage: { $set: action.pageInfo.hasNextPage },
+          },
+        },
+      });
+    }
+    case actions.UPDATE_ASSET_STATE_SUCCESS:
+      const index = state.assets.edges.findIndex(
+        ({ node: { id } }) => id === action.id
+      );
+      if (index < 0) {
+        return state;
+      }
+
       return update(state, {
         assets: {
-          byId: {
-            [action.id]: {
-              closedAt: { $set: action.closedAt },
+          edges: {
+            [index]: {
+              node: {
+                closedAt: { $set: action.closedAt },
+              },
             },
           },
         },
       });
-    case actions.UPDATE_ASSETS:
-      return update(state, {
-        assets: {
-          assets: { $set: action.assets },
-        },
-      });
-    case actions.SET_PAGE:
-      return {
-        ...state,
-        page: action.page,
-      };
     case actions.SET_SEARCH_VALUE:
       return {
         ...state,

client/coral-admin/src/reducers/ui.js

@@ -6,6 +6,10 @@ import {
   SHOW_SUSPEND_USER_DIALOG,
   HIDE_SUSPEND_USER_DIALOG,
 } from '../constants/suspendUserDialog';
+import {
+  SHOW_ALWAYS_PREMOD_USER_DIALOG,
+  HIDE_ALWAYS_PREMOD_USER_DIALOG,
+} from '../constants/alwaysPremodUserDialog';
 
 const initialState = {
   modal: false,
@@ -23,6 +27,11 @@ export default function config(state = initialState, action) {
         ...state,
         modal: true,
       };
+    case SHOW_ALWAYS_PREMOD_USER_DIALOG:
+      return {
+        ...state,
+        modal: true,
+      };
     case HIDE_BAN_USER_DIALOG:
       return {
         ...state,
@@ -33,6 +42,11 @@ export default function config(state = initialState, action) {
         ...state,
         modal: false,
       };
+    case HIDE_ALWAYS_PREMOD_USER_DIALOG:
+      return {
+        ...state,
+        modal: false,
+      };
     default:
       return state;
   }

client/coral-admin/src/routes/Community/components/FlaggedUser.css

@@ -78,9 +78,10 @@
 }
 
 .flaggedByReason {
-  font-size: 1tpx;
+  font-size: 14px;
   margin: 0px;
   line-height: 1.4;
+  word-break: break-word;
 }
 
 

client/coral-admin/src/routes/Community/components/People.css

@@ -130,6 +130,12 @@ th.header:nth-child(2), th.header:nth-child(3) {
   font-size: 0.98em;
 }
 
+.actionsMenuAlwaysPremod {
+  background-color: #F0B50B;
+  border-color: #F0B50B;
+  color: white;
+}
+
 .actionsMenuSuspended {
   background-color: #F29336;
   border-color: #F29336;

client/coral-admin/src/routes/Community/components/People.js

@@ -8,7 +8,11 @@ import LoadMore from '../../../components/LoadMore';
 import PropTypes from 'prop-types';
 import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
 import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
-import { isSuspended, isBanned } from 'coral-framework/utils/user';
+import {
+  isSuspended,
+  isBanned,
+  isAlwaysPremod,
+} from 'coral-framework/utils/user';
 import { RadioGroup, Radio } from 'react-mdl';
 import moment from 'moment';
 import {
@@ -43,6 +47,8 @@ class People extends React.Component {
       return 'Banned';
     } else if (isSuspended(user)) {
       return 'Suspended';
+    } else if (isAlwaysPremod(user)) {
+      return 'Always premoderated';
     }
     return '';
   };
@@ -55,6 +61,10 @@ class People extends React.Component {
     this.props.unbanUser(input);
   };
 
+  removeAlwaysPremodUser = input => {
+    this.props.removeAlwaysPremodUser(input);
+  };
+
   showBanUserDialog = input => {
     this.props.showBanUserDialog(input);
   };
@@ -63,6 +73,10 @@ class People extends React.Component {
     this.props.showSuspendUserDialog(input);
   };
 
+  showAlwaysPremodUserDialog = input => {
+    this.props.showAlwaysPremodUserDialog(input);
+  };
+
   render() {
     const {
       onFilterChange,
@@ -109,6 +123,7 @@ class People extends React.Component {
             <Radio value="active">{t('community.active')}</Radio>
             <Radio value="suspended">{t('community.suspended')}</Radio>
             <Radio value="banned">{t('community.banned')}</Radio>
+            <Radio value="alwaysPremod">{t('community.always_premod')}</Radio>
           </RadioGroup>
           <div className={styles.filterDetail}>
             {t('community.filter_role')}
@@ -188,6 +203,9 @@ class People extends React.Component {
                                   user
                                 ),
                                 [styles.actionsMenuBanned]: isBanned(user),
+                                [styles.actionsMenuAlwaysPremod]: isAlwaysPremod(
+                                  user
+                                ),
                               },
                               'talk-admin-user-detail-actions-button'
                             )}
@@ -232,6 +250,27 @@ class People extends React.Component {
                                 {t('modqueue.ban_user_actions')}
                               </ActionsMenuItem>
                             )}
+
+                            {isAlwaysPremod(user) ? (
+                              <ActionsMenuItem
+                                onClick={() =>
+                                  this.removeAlwaysPremodUser({ id: user.id })
+                                }
+                              >
+                                Remove Always Premoderate
+                              </ActionsMenuItem>
+                            ) : (
+                              <ActionsMenuItem
+                                onClick={() =>
+                                  this.showAlwaysPremodUserDialog({
+                                    userId: user.id,
+                                    username: user.username,
+                                  })
+                                }
+                              >
+                                {t('modqueue.always_premod_user_actions')}
+                              </ActionsMenuItem>
+                            )}
                           </ActionsMenu>
                         </td>
                         <td className="mdl-data-table__cell--non-numeric">
@@ -294,8 +333,10 @@ People.propTypes = {
   viewUserDetail: PropTypes.func.isRequired,
   unbanUser: PropTypes.func.isRequired,
   unsuspendUser: PropTypes.func.isRequired,
+  removeAlwaysPremodUser: PropTypes.func.isRequired,
   showSuspendUserDialog: PropTypes.func,
   showBanUserDialog: PropTypes.func,
+  showAlwaysPremodUserDialog: PropTypes.func,
   loadMore: PropTypes.func.isRequired,
 };
 

client/coral-admin/src/routes/Community/containers/People.js

@@ -8,9 +8,11 @@ import {
   withUnbanUser,
   withUnsuspendUser,
   withSetUserRole,
+  withRemoveAlwaysPremodUser,
 } from 'coral-framework/graphql/mutations';
 import { showBanUserDialog } from 'actions/banUserDialog';
 import { showSuspendUserDialog } from 'actions/suspendUserDialog';
+import { showAlwaysPremodUserDialog } from 'actions/alwaysPremodUserDialog';
 import { viewUserDetail } from '../../../actions/userDetail';
 import { appendNewNodes } from 'plugin-api/beta/client/utils';
 import update from 'immutability-helper';
@@ -30,6 +32,7 @@ class PeopleContainer extends React.PureComponent {
     active: { suspended: false, banned: false },
     suspended: { suspended: true },
     banned: { banned: true },
+    alwaysPremod: { alwaysPremod: true },
   };
 
   onFilterChange = filter => e =>
@@ -40,7 +43,6 @@ class PeopleContainer extends React.PureComponent {
 
   getFilterState = () => {
     const { role, status } = this.state;
-
     return {
       status: this.statusToQuery[status] || null,
       role: role || null,
@@ -106,8 +108,10 @@ class PeopleContainer extends React.PureComponent {
         setUserRole={this.props.setUserRole}
         showSuspendUserDialog={this.props.showSuspendUserDialog}
         showBanUserDialog={this.props.showBanUserDialog}
+        showAlwaysPremodUserDialog={this.props.showAlwaysPremodUserDialog}
         unbanUser={this.props.unbanUser}
         unsuspendUser={this.props.unsuspendUser}
+        removeAlwaysPremodUser={this.props.removeAlwaysPremodUser}
         data={this.props.data}
         root={this.props.root}
         users={this.props.root.users}
@@ -122,9 +126,11 @@ PeopleContainer.propTypes = {
   setUserRole: PropTypes.func.isRequired,
   unbanUser: PropTypes.func.isRequired,
   unsuspendUser: PropTypes.func.isRequired,
+  removeAlwaysPremodUser: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
   showSuspendUserDialog: PropTypes.func,
   showBanUserDialog: PropTypes.func,
+  showAlwaysPremodUserDialog: PropTypes.func,
   data: PropTypes.object,
   root: PropTypes.object,
 };
@@ -134,8 +140,11 @@ const LOAD_MORE_QUERY = gql`
     $limit: Int
     $cursor: Cursor
     $value: String
+    $state: UserStateInput
   ) {
-    users(query: { value: $value, limit: $limit, cursor: $cursor }) {
+    users(
+      query: { value: $value, limit: $limit, cursor: $cursor, state: $state }
+    ) {
       hasNextPage
       endCursor
       nodes {
@@ -153,6 +162,9 @@ const LOAD_MORE_QUERY = gql`
             banned {
               status
             }
+            alwaysPremod {
+              status
+            }
             suspension {
               until
             }
@@ -187,6 +199,9 @@ const FILTER_QUERY = gql`
             banned {
               status
             }
+            alwaysPremod {
+              status
+            }
             suspension {
               until
             }
@@ -203,6 +218,7 @@ const mapDispatchToProps = dispatch =>
       viewUserDetail,
       showSuspendUserDialog,
       showBanUserDialog,
+      showAlwaysPremodUserDialog,
     },
     dispatch
   );
@@ -215,6 +231,7 @@ export default compose(
   withSetUserRole,
   withUnsuspendUser,
   withUnbanUser,
+  withRemoveAlwaysPremodUser,
   withQuery(
     gql`
       query TalkAdmin_Community_People {
@@ -236,6 +253,9 @@ export default compose(
                 banned {
                   status
                 }
+                alwaysPremod {
+                  status
+                }
                 suspension {
                   until
                 }

client/coral-admin/src/routes/Configure/components/TechSettings.js

@@ -14,6 +14,11 @@ class TechSettings extends React.Component {
     this.props.updatePending({ updater });
   };
 
+  updateCustomAdminCssUrl = event => {
+    const updater = { customAdminCssUrl: { $set: event.target.value } };
+    this.props.updatePending({ updater });
+  };
+
   updateDomainlist = (listName, list) => {
     this.props.updatePending({
       updater: {
@@ -50,6 +55,14 @@ class TechSettings extends React.Component {
             onChange={this.updateCustomCssUrl}
           />
         </ConfigureCard>
+        <ConfigureCard title={t('configure.custom_admin_css_url')}>
+          <p>{t('configure.custom_admin_css_url_desc')}</p>
+          <input
+            className={styles.customCSSInput}
+            value={settings.customAdminCssUrl}
+            onChange={this.updateCustomAdminCssUrl}
+          />
+        </ConfigureCard>
         <Slot fill="adminTechSettings" passthrough={slotPassthrough} />
       </ConfigurePage>
     );

client/coral-admin/src/routes/Configure/containers/TechSettings.js

@@ -32,6 +32,7 @@ export default compose(
     settings: gql`
       fragment TalkAdmin_TechSettings_settings on Settings {
         customCssUrl
+        customAdminCssUrl
         domains {
           whitelist
         }

client/coral-admin/src/routes/Moderation/components/Comment.css

@@ -62,6 +62,7 @@
   font-weight: 300;
   margin-bottom: 8px;
   overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .body {
@@ -102,7 +103,7 @@
     color: #063b9a;
     text-decoration: none;
     font-weight: 500;
-    letter-spacing: .5px;
+    letter-spacing: 0.5px;
     margin-left: 10px;
     font-size: 13px;
     margin-left: 5px;
@@ -110,14 +111,14 @@
     border-bottom: solid 1px;
     line-height: 16px;
     &:hover {
-      opacity: .9;
+      opacity: 0.9;
       cursor: pointer;
     }
   }
 }
 
 .username {
-  color: #393B44;
+  color: #393b44;
   text-decoration: none;
   cursor: pointer;
   font-weight: 600;
@@ -126,12 +127,12 @@
   margin-left: -5px;
   transition: background-color 200ms ease;
   &:hover {
-    background-color: #E0E0E0;
+    background-color: #e0e0e0;
   }
 }
 
 .external {
-  font-size: .7em;
+  font-size: 0.7em;
   text-decoration: none;
   color: #063b9a;
   cursor: pointer;
@@ -139,7 +140,7 @@
   white-space: nowrap;
   &:hover {
     text-decoration: underline;
-    opacity: .9;
+    opacity: 0.9;
   }
   i {
     font-size: 12px;
@@ -195,3 +196,25 @@
 .commentContentFooter {
   flex: 1;
 }
+
+.bodyHistoryToggle {
+  color: #666;
+  font-size: 12px;
+  line-height: 1px;
+  font-weight: 300;
+  text-decoration: underline;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.editedCommentBody {
+  padding: 0 5px 5px 5px;
+}
+
+.editedComment {
+  margin-top: 6px;
+  font-weight: 300;
+  font-size: 16px;
+  overflow-wrap: break-word;
+}

client/coral-admin/src/routes/Moderation/components/Comment.js

@@ -22,6 +22,8 @@ import t from 'coral-framework/services/i18n';
 class Comment extends React.Component {
   ref = null;
 
+  state = { showingEditHistory: false };
+
   handleRef = ref => (this.ref = ref);
 
   handleFocusOrClick = () => {
@@ -45,6 +47,30 @@ class Comment extends React.Component {
       ? null
       : this.props.rejectComment({ commentId: this.props.comment.id });
 
+  getBodyHistory = () => {
+    const bodyHistory = [];
+    const comment = this.props.comment;
+    for (let i = 0; i < comment.body_history.length - 1; i++) {
+      bodyHistory.push(
+        <div key={i} className={styles.editedComment}>
+          <div>
+            <TimeAgo className={styles.created} datetime={comment.created_at} />
+          </div>
+          <div className={styles.editedCommentBody}>
+            {comment.body_history[i].body}
+          </div>
+        </div>
+      );
+    }
+
+    return bodyHistory;
+  };
+
+  toggleEditHistory = () => {
+    this.setState({ showingEditHistory: !this.state.showingEditHistory });
+    this.props.clearHeightCache && this.props.clearHeightCache();
+  };
+
   componentDidUpdate(prev) {
     if (!prev.selected && this.props.selected) {
       this.ref.focus();
@@ -137,6 +163,14 @@ class Comment extends React.Component {
                   &nbsp;<span className={styles.editedMarker}>
                     ({t('comment.edited')})
                   </span>
+                  &nbsp;<span
+                    className={styles.bodyHistoryToggle}
+                    onClick={this.toggleEditHistory}
+                  >
+                    {this.state.showingEditHistory
+                      ? t('comment.hide_edit_history')
+                      : t('comment.show_edit_history')}
+                  </span>
                 </span>
               ) : null}
               <div className={styles.adminCommentInfoBar}>
@@ -201,6 +235,14 @@ class Comment extends React.Component {
             </div>
           </CommentAnimatedEdit>
         </div>
+
+        {this.state.showingEditHistory ? (
+          <div className={styles.container}>
+            {t('comment.edit_history')}
+            {this.getBodyHistory()}
+          </div>
+        ) : null}
+
         <CommentDetails
           root={root}
           comment={comment}

client/coral-admin/src/routes/Moderation/containers/Comment.js

@@ -52,6 +52,10 @@ export default withFragments({
       status_history {
         type
       }
+      body_history {
+        body
+        created_at
+      }
       hasParent
       ${getSlotFragmentSpreads(slots, 'comment')}
       ...${getDefinitionName(CommentLabels.fragments.comment)}

client/coral-admin/src/routes/Stories/components/Stories.css

@@ -77,7 +77,6 @@
   display: block;
 }
 
-
 .hidden {
   display: none;
 }
@@ -95,3 +94,11 @@
   text-align: left;
 }
 
+.loadMore {
+  margin: 20px auto;
+  text-align: center;
+}
+
+.loadMoreSpinner {
+  margin: 20px auto 50px;
+}

client/coral-admin/src/routes/Stories/components/Stories.js

@@ -2,11 +2,14 @@ import React, { Component } from 'react';
 import cn from 'classnames';
 import { Link } from 'react-router';
 import PropTypes from 'prop-types';
-import { Dropdown, Option, Paginate, Icon } from 'coral-ui';
 import { DataTable, TableHeader, RadioGroup, Radio } from 'react-mdl';
+
 import t from 'coral-framework/services/i18n';
-import styles from './Stories.css';
+import { Dropdown, Option, Icon, Spinner } from 'coral-ui';
 import EmptyCard from 'coral-admin/src/components/EmptyCard';
+import LoadMore from 'coral-admin/src/components/LoadMore';
+
+import styles from './Stories.css';
 
 class Stories extends Component {
   renderDate = date => {
@@ -39,10 +42,11 @@ class Stories extends Component {
       filter,
       onSearchChange,
       onSettingChange,
-      onPageChange,
-      asc,
+      onLoadMore,
+      loading,
+      loadingMore,
     } = this.props;
-    const rows = assets.ids.map(id => assets.byId[id]);
+    const rows = assets.edges.map(({ node }) => node);
 
     return (
       <div className={cn('talk-admin-stories', styles.container)}>
@@ -74,60 +78,58 @@ class Stories extends Component {
             <Radio value="open">{t('streams.open')}</Radio>
             <Radio value="closed">{t('streams.closed')}</Radio>
           </RadioGroup>
-          <div className={styles.optionHeader}>{t('streams.sort_by')}</div>
-          <RadioGroup
-            name="sortBy"
-            value={asc}
-            childContainer="div"
-            onChange={onSettingChange('asc')}
-            className={styles.radioGroup}
-          >
-            <Radio value="false">{t('streams.newest')}</Radio>
-            <Radio value="true">{t('streams.oldest')}</Radio>
-          </RadioGroup>
         </div>
-        {rows.length ? (
-          <div className={styles.mainContent}>
-            <DataTable className={styles.streamsTable} rows={rows}>
-              <TableHeader name="title" cellFormatter={this.renderTitle}>
-                {t('streams.article')}
-              </TableHeader>
-              <TableHeader
-                name="publication_date"
-                cellFormatter={this.renderDate}
-              >
-                {t('streams.pubdate')}
-              </TableHeader>
-              <TableHeader
-                name="closedAt"
-                cellFormatter={this.renderStatus}
-                className={styles.status}
-              >
-                {t('streams.status')}
-              </TableHeader>
-            </DataTable>
-            <Paginate
-              pageCount={assets.totalPages}
-              page={assets.page - 1}
-              onPageChange={onPageChange}
-            />
-          </div>
-        ) : (
-          <EmptyCard>{t('streams.empty_result')}</EmptyCard>
-        )}
+        <div className={styles.mainContent}>
+          {loading ? (
+            <Spinner />
+          ) : rows.length ? (
+            <div>
+              <DataTable className={styles.streamsTable} rows={rows}>
+                <TableHeader name="title" cellFormatter={this.renderTitle}>
+                  {t('streams.article')}
+                </TableHeader>
+                <TableHeader
+                  name="publication_date"
+                  cellFormatter={this.renderDate}
+                >
+                  {t('streams.pubdate')}
+                </TableHeader>
+                <TableHeader
+                  name="closedAt"
+                  cellFormatter={this.renderStatus}
+                  className={styles.status}
+                >
+                  {t('streams.status')}
+                </TableHeader>
+              </DataTable>
+              {loadingMore ? (
+                <Spinner className={styles.loadMoreSpinner} />
+              ) : (
+                <LoadMore
+                  showLoadMore={assets.pageInfo.hasNextPage}
+                  loadMore={onLoadMore}
+                  className={styles.loadMore}
+                />
+              )}
+            </div>
+          ) : (
+            <EmptyCard>{t('streams.empty_result')}</EmptyCard>
+          )}
+        </div>
       </div>
     );
   }
 }
 
 Stories.propTypes = {
+  loading: PropTypes.bool,
+  loadingMore: PropTypes.bool,
   assets: PropTypes.object,
   searchValue: PropTypes.string,
-  asc: PropTypes.string,
   filter: PropTypes.string,
+  onLoadMore: PropTypes.func.isRequired,
   onStatusChange: PropTypes.func.isRequired,
   onSearchChange: PropTypes.func.isRequired,
-  onPageChange: PropTypes.func.isRequired,
   onSettingChange: PropTypes.func.isRequired,
 };
 

client/coral-admin/src/routes/Stories/containers/Stories.js

@@ -5,9 +5,9 @@ import { bindActionCreators } from 'redux';
 import {
   fetchAssets,
   updateAssetState,
-  setPage,
   setSearchValue,
   setCriteria,
+  loadMoreAssets,
 } from 'coral-admin/src/actions/stories';
 import Stories from '../components/Stories';
 
@@ -35,13 +35,11 @@ class StoriesContainer extends Component {
   };
 
   fetchAssets = query => {
-    const { searchValue, asc, filter, limit } = this.props;
+    const { searchValue: value, filter } = this.props;
 
     this.props.fetchAssets({
-      value: searchValue,
-      asc,
+      value,
       filter,
-      limit,
       ...query,
     });
   };
@@ -51,30 +49,39 @@ class StoriesContainer extends Component {
 
     try {
       await updateAssetState(id, closeStream ? Date.now() : null);
-      this.fetchAssets();
     } catch (err) {
       console.error(err);
     }
   };
 
-  onPageChange = ({ selected }) => {
-    const page = selected + 1;
-    this.props.setPage(page);
-    this.fetchAssets({ page });
+  onLoadMore = async () => {
+    const {
+      searchValue: value,
+      filter,
+      assets: {
+        pageInfo: { endCursor: cursor },
+      },
+      loadMoreAssets,
+    } = this.props;
+    try {
+      await loadMoreAssets({ cursor, value, filter });
+    } catch (err) {
+      console.error(err);
+    }
   };
 
   render() {
     return (
       <Stories
+        loading={this.props.loading}
+        loadingMore={this.props.loadingMore}
         assets={this.props.assets}
         searchValue={this.props.searchValue}
-        asc={this.props.asc}
         filter={this.props.filter}
-        limit={this.props.limit}
-        onPageChange={this.onPageChange}
         onStatusChange={this.onStatusChange}
         onSettingChange={this.onSettingChange}
         onSearchChange={this.onSearchChange}
+        onLoadMore={this.onLoadMore}
       />
     );
   }
@@ -82,34 +89,34 @@ class StoriesContainer extends Component {
 
 const mapStateToProps = ({ stories }) => ({
   assets: stories.assets,
+  loading: stories.loading,
+  loadingMore: stories.loadingMore,
   searchValue: stories.searchValue,
-  asc: stories.criteria.asc,
   filter: stories.criteria.filter,
-  limit: stories.criteria.limit,
 });
 
 const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
-      setPage,
       setCriteria,
       setSearchValue,
       fetchAssets,
       updateAssetState,
+      loadMoreAssets,
     },
     dispatch
   );
 
 StoriesContainer.propTypes = {
+  loading: PropTypes.bool,
+  loadingMore: PropTypes.bool,
   assets: PropTypes.object,
   searchValue: PropTypes.string,
-  asc: PropTypes.string,
   filter: PropTypes.string,
-  limit: PropTypes.number,
-  setPage: PropTypes.func.isRequired,
   setCriteria: PropTypes.func.isRequired,
   setSearchValue: PropTypes.func.isRequired,
   fetchAssets: PropTypes.func.isRequired,
+  loadMoreAssets: PropTypes.func.isRequired,
   updateAssetState: PropTypes.func.isRequired,
 };
 

client/coral-admin/src/services/linkify.js

@@ -1,8 +0,0 @@
-import LinkifyIt from 'linkify-it';
-import tlds from 'tlds';
-
-export function createLinkify() {
-  const linkify = new LinkifyIt();
-  linkify.tlds(tlds);
-  return linkify;
-}

client/coral-embed-stream/src/constants/stream.js

@@ -5,6 +5,9 @@ const prefix = 'TALK_EMBED_STREAM';
 export const ADDTL_COMMENTS_ON_LOAD_MORE = parseInt(
   defaultTo(process.env.TALK_ADDTL_COMMENTS_ON_LOAD_MORE, '10')
 );
+export const ADDTL_REPLIES_ON_LOAD_MORE = parseInt(
+  defaultTo(process.env.TALK_ADDTL_REPLIES_ON_LOAD_MORE, '999999')
+);
 export const ASSET_COMMENTS_LOAD_DEPTH = parseInt(
   defaultTo(process.env.TALK_ASSET_COMMENTS_LOAD_DEPTH, '10')
 );

client/coral-embed-stream/src/containers/Embed.js

@@ -81,7 +81,7 @@ class EmbedContainer extends React.Component {
               },
             }
           ) => {
-            notify('info', t('your_username_has_been_rejected'));
+            notify('info', t('your_username_has_been_rejected_not_in_line'));
             props.updateStatus(state.status);
           },
         },
@@ -175,6 +175,9 @@ const USER_BANNED_SUBSCRIPTION = gql`
           banned {
             status
           }
+          alwaysPremod {
+            status
+          }
           suspension {
             until
           }
@@ -196,6 +199,9 @@ const USER_SUSPENDED_SUBSCRIPTION = gql`
           banned {
             status
           }
+          alwaysPremod {
+            status
+          }
           suspension {
             until
           }
@@ -217,6 +223,9 @@ const USERNAME_REJECTED_SUBSCRIPTION = gql`
           banned {
             status
           }
+          alwaysPremod {
+            status
+          }
           suspension {
             until
           }
@@ -253,6 +262,9 @@ const EMBED_QUERY = gql`
           banned {
             status
           }
+          alwaysPremod {
+            status
+          }
           suspension {
             until
           }

client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import QuestionBox from '../../../components/QuestionBox';
 import DefaultQuestionBoxIcon from '../../../components/DefaultQuestionBoxIcon';
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './QuestionBoxBuilder.css';
 import { Icon } from 'coral-ui';
@@ -12,6 +13,7 @@ const icons = [{ default: DefaultIcon }, 'forum', 'build', 'format_quote'];
 class QuestionBoxBuilder extends React.Component {
   render() {
     const {
+      title,
       questionBoxIcon,
       questionBoxContent,
       onContentChange,
@@ -20,7 +22,7 @@ class QuestionBoxBuilder extends React.Component {
 
     return (
       <div className={styles.root}>
-        <h4>Include an Icon</h4>
+        <h4>{title}</h4>
 
         <ul className={styles.iconList}>
           {icons.map(item => {
@@ -53,4 +55,12 @@ class QuestionBoxBuilder extends React.Component {
   }
 }
 
+QuestionBoxBuilder.propTypes = {
+  title: PropTypes.string,
+  questionBoxIcon: PropTypes.string,
+  questionBoxContent: PropTypes.string,
+  onContentChange: PropTypes.func,
+  onIconChange: PropTypes.func,
+};
+
 export default QuestionBoxBuilder;

client/coral-embed-stream/src/tabs/configure/components/Settings.js

@@ -69,6 +69,7 @@ class Settings extends React.Component {
             {questionBoxEnable && (
               <div className={styles.questionBoxContainer}>
                 <QuestionBoxBuilder
+                  title={t('configure.include_an_icon')}
                   questionBoxIcon={questionBoxIcon}
                   questionBoxContent={questionBoxContent}
                   onIconChange={onQuestionBoxIconChange}

client/coral-embed-stream/src/tabs/stream/components/ChangeUsername.js

@@ -48,7 +48,7 @@ class ChangeUsername extends Component {
     return (
       <RestrictedMessageBox>
         <div className="talk-change-username">
-          <span>{t('framework.edit_name.msg')}</span>
+          <span>{t('framework.edit_name.rejected')}</span>
           <div className={styles.alert}>{alert}</div>
           <label htmlFor="username" className="screen-reader-text">
             {t('framework.edit_name.label')}

client/coral-embed-stream/src/tabs/stream/containers/Stream.js

@@ -6,6 +6,7 @@ import { bindActionCreators } from 'redux';
 import {
   ADDTL_COMMENTS_ON_LOAD_MORE,
   ASSET_COMMENTS_LOAD_DEPTH,
+  ADDTL_REPLIES_ON_LOAD_MORE,
   THREADING_LEVEL,
 } from '../../../constants/stream';
 import {
@@ -152,7 +153,9 @@ class StreamContainer extends React.Component {
     return this.props.data.fetchMore({
       query: LOAD_MORE_QUERY,
       variables: {
-        limit: parent_id ? 999999 : ADDTL_COMMENTS_ON_LOAD_MORE,
+        limit: parent_id
+          ? ADDTL_REPLIES_ON_LOAD_MORE
+          : ADDTL_COMMENTS_ON_LOAD_MORE,
         cursor: comment.replies.endCursor,
         parent_id,
         asset_id: this.props.asset.id,
@@ -398,6 +401,9 @@ const fragments = {
             banned {
               status
             }
+            alwaysPremod {
+              status
+            }
             suspension {
               until
             }

client/coral-embed/src/Bridge.js

@@ -3,6 +3,7 @@ import URLSearchParams from '@ungap/url-search-params';
 import pym from 'pym.js';
 import EventEmitter from 'eventemitter2';
 import { buildUrl } from 'coral-framework/utils/url';
+
 import SnackBar from './SnackBar';
 import onIntersect from './onIntersect';
 import {
@@ -92,6 +93,21 @@ function viewportDimensions() {
   };
 }
 
+function parseAMPHash(opts) {
+  const result = { ...opts };
+  const query = window.location.hash.length && window.location.hash.substr(1);
+  if (query) {
+    const parsed = queryString.parse(query);
+    if (parsed.asset_url && !result.asset_url) {
+      result.asset_url = parsed.asset_url;
+    }
+    if (parsed.asset_id && !result.asset_id) {
+      result.asset_id = parsed.asset_id;
+    }
+  }
+  return result;
+}
+
 export default class Bridge {
   constructor(
     element,
@@ -110,19 +126,23 @@ export default class Bridge {
       lazy = process.env.TALK_DEFAULT_LAZY_RENDER === 'TRUE',
       // Any additional options are extracted to be sent to the embed via the
       // pym bridge.
+      amp,
       ...opts
     }
   ) {
     this.pym = null;
     this.element = element;
-    this.opts = opts;
+    this.amp = amp;
+    this.lazy = !amp && lazy;
+
+    // Parse amp hash.
+    this.opts = amp ? parseAMPHash(opts) : opts;
     this.query = buildQuery(this.opts);
     this.emitter = new EventEmitter({ wildcard: true });
-    this.snackBar = new SnackBar(snackBarStyles || {});
+    this.snackBar = amp ? null : new SnackBar(snackBarStyles || {});
     this.onAuthChanged = onAuthChanged;
     this.talkBaseUrl = ensureEndSlash(talkBaseUrl);
     this.talkStaticUrl = ensureEndSlash(talkStaticUrl);
-    this.lazy = lazy;
 
     // Store queued operations in a queue that can be processed once the stream
     // is rendered.
@@ -179,6 +199,16 @@ export default class Bridge {
       if (height !== cachedHeight) {
         this.pym.el.firstChild.style.height = `${height}px`;
         cachedHeight = height;
+        if (this.amp) {
+          window.parent.postMessage(
+            {
+              sentinel: 'amp',
+              type: 'embed-size',
+              height,
+            },
+            '*'
+          );
+        }
       }
     });
 
@@ -267,8 +297,10 @@ export default class Bridge {
     // Setup Pym.
     this.setupPym();
 
-    // Attach the snackBar to the pym parent and to the body of the page.
-    this.snackBar.attach(window.document.body, this.pym);
+    if (this.snackBar) {
+      // Attach the snackBar to the pym parent and to the body of the page.
+      this.snackBar.attach(window.document.body, this.pym);
+    }
 
     // If the user clicks outside the embed, then tell the embed.
     document.addEventListener('click', this.handleClick.bind(this), true);
@@ -315,7 +347,10 @@ export default class Bridge {
     this.emitter.removeAllListeners();
 
     // Remove the snackbar.
-    this.snackBar.remove();
+    if (this.snackBar) {
+      this.snackBar.remove();
+      this.snackBar = null;
+    }
 
     // Remove the pym parent.
     this.pym.remove();

client/coral-embed/src/SnackBar.js

@@ -7,17 +7,25 @@ const DEFAULT_STYLE = {
   willChange: 'transform, opacity',
   transition: 'transform .35s cubic-bezier(.55,0,.1,1), opacity .35s',
   pointerEvents: 'none',
-  padding: '12px 18px',
+  padding: '12px 18px 0',
   color: '#fff',
-  borderRadius: '3px 3px 0 0',
-  textAlign: 'center',
+  borderRadius: '4px',
   maxWidth: '400px',
   left: '50%',
   opacity: 0,
   transform: 'translate(-50%, 20px)',
-  bottom: 0,
+  bottom: '20px',
   boxSizing: 'border-box',
   fontFamily: 'Helvetica, "Helvetica Neue", Verdana, sans-serif',
+  display: 'flex',
+};
+
+const CLOSE_STYLE = {
+  fontSize: '20px',
+  cursor: 'pointer',
+  marginLeft: '10px',
+  position: 'relative',
+  top: '-4px',
 };
 
 export default class Snackbar {
@@ -26,6 +34,20 @@ export default class Snackbar {
     this.el = document.createElement('div');
     this.el.id = 'coral-notif';
 
+    const closeButton = document.createElement('div');
+    closeButton.className = 'coral-notif-close';
+    for (let key in CLOSE_STYLE) {
+      closeButton.style[key] = CLOSE_STYLE[key];
+    }
+    closeButton.textContent = '×';
+    closeButton.onclick = () => this.clear();
+
+    this.snackbarText = document.createElement('div');
+    this.snackbarText.className = 'coral-notif-text';
+    this.snackbarText.style.paddingBottom = '12px';
+    this.el.appendChild(this.snackbarText);
+    this.el.appendChild(closeButton);
+
     // Apply custom styles to the snackbar.
     const style = Object.assign({}, DEFAULT_STYLE, customStyle);
     for (let key in style) {
@@ -35,6 +57,7 @@ export default class Snackbar {
 
   clear() {
     this.el.style.opacity = 0;
+    this.el.style.pointerEvents = 'none';
   }
 
   alert(message) {
@@ -42,7 +65,7 @@ export default class Snackbar {
     this.el.style.transform = 'translate(-50%, 20px)';
     this.el.style.opacity = 0;
     this.el.className = `coral-notif-${type}`;
-    this.el.textContent = text;
+    this.snackbarText.textContent = text;
 
     if (this.timeout) {
       clearTimeout(this.timeout);
@@ -51,10 +74,12 @@ export default class Snackbar {
     this.timeout = setTimeout(() => {
       this.el.style.transform = 'translate(-50%, 0)';
       this.el.style.opacity = 1;
+      this.el.style.pointerEvents = 'auto';
 
       this.timeout = setTimeout(() => {
         this.el.style.opacity = 0;
-      }, 7000);
+        this.el.style.pointerEvents = 'none';
+      }, 15000);
     }, 0);
   }
 

client/coral-embed/src/index.js

@@ -56,6 +56,7 @@ export const Talk = {
    * @param {String} [config.auth_token] - (optional) A jwt representing the session
    * @param {String} [config.lazy] - (optional) If set the stream will only render lazily
    * @param {String} [config.talkStaticUrl] - (optional) Static URL used to serve Talk
+   * @param {Boolean} [config.amp] - (optional) Run Talk in AMP mode
    * @return {Object}
    */
   render: (element, config) => {

client/coral-framework/graphql/fragments.js

@@ -3,6 +3,7 @@ import { createDefaultResponseFragments } from '../utils';
 // fragments defined here are automatically registered.
 export default {
   ...createDefaultResponseFragments(
+    'AlwaysPremodUserResponse',
     'BanUsersResponse',
     'ChangeUsernameResponse',
     'CloseAssetResponse',
@@ -14,6 +15,7 @@ export default {
     'IgnoreUserResponse',
     'ModifyTagResponse',
     'PostFlagResponse',
+    'RemoveAlwaysPremodUserResponse',
     'SetCommentStatusResponse',
     'SetUsernameResponse',
     'SetUsernameStatusResponse',

client/coral-framework/graphql/mutations.js

@@ -412,6 +412,48 @@ export const withSetUsername = withMutation(
   }
 );
 
+export const withAlwaysPremodUser = withMutation(
+  gql`
+    mutation AlwaysPremodUser($input: AlwaysPremodUserInput!) {
+      alwaysPremodUser(input: $input) {
+        ...AlwaysPremodUserResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      alwaysPremodUser: input => {
+        return mutate({
+          variables: {
+            input,
+          },
+        });
+      },
+    }),
+  }
+);
+
+export const withRemoveAlwaysPremodUser = withMutation(
+  gql`
+    mutation RemoveAlwaysPremodUser($input: RemoveAlwaysPremodUserInput!) {
+      removeAlwaysPremodUser(input: $input) {
+        ...RemoveAlwaysPremodUserResponse
+      }
+    }
+  `,
+  {
+    props: ({ mutate }) => ({
+      removeAlwaysPremodUser: input => {
+        return mutate({
+          variables: {
+            input,
+          },
+        });
+      },
+    }),
+  }
+);
+
 export const withBanUser = withMutation(
   gql`
     mutation BanUser($input: BanUserInput!) {

client/coral-framework/services/bootstrap.js

@@ -7,7 +7,6 @@ import { createReduxEmitter } from './events';
 import { createRestClient } from './rest';
 import thunk from 'redux-thunk';
 import { loadTranslations } from './i18n';
-import bowser from 'bowser';
 import noop from 'lodash/noop';
 import { BASE_PATH } from 'coral-framework/constants/url';
 import { createPluginsService } from './plugins';
@@ -65,12 +64,7 @@ const getAuthToken = (store, storage) => {
     }
 
     return token;
-  } else if (
-    !bowser.safari &&
-    !bowser.ios &&
-    storage &&
-    storage.getItem('token')
-  ) {
+  } else if (storage && storage.getItem('token')) {
     // Use local storage auth tokens where there's a stable api.
     return storage.getItem('token');
   }
@@ -159,6 +153,11 @@ export async function createContext({
     token,
   });
 
+  const rest2 = createRestClient({
+    uri: `${BASE_PATH}api/v2`,
+    token,
+  });
+
   const staticConfig = getStaticConfiguration();
   let { LIVE_URI: liveUri, BASE_ORIGIN: origin } = staticConfig;
   if (liveUri == null) {
@@ -193,6 +192,7 @@ export async function createContext({
     plugins,
     eventEmitter,
     rest,
+    rest2,
     graphql,
     notification,
     localStorage,

client/coral-framework/services/i18n.js

@@ -12,6 +12,7 @@ import 'moment/locale/da';
 import 'moment/locale/de';
 import 'moment/locale/es';
 import 'moment/locale/fr';
+import 'moment/locale/he';
 import 'moment/locale/it';
 import 'moment/locale/nl';
 import 'moment/locale/pt-br';
@@ -23,6 +24,7 @@ import daTA from 'timeago.js/locales/da';
 import deTA from 'timeago.js/locales/de';
 import esTA from 'timeago.js/locales/es';
 import frTA from 'timeago.js/locales/fr';
+import heTA from 'timeago.js/locales/he';
 import itTA from 'timeago.js/locales/it';
 import nlTA from 'timeago.js/locales/nl';
 import pt_BRTA from 'timeago.js/locales/pt_BR';
@@ -36,6 +38,7 @@ import da from '../../../locales/da.yml';
 import de from '../../../locales/de.yml';
 import es from '../../../locales/es.yml';
 import fr from '../../../locales/fr.yml';
+import he from '../../../locales/he.yml';
 import it from '../../../locales/it.yml';
 import nl_NL from '../../../locales/nl_NL.yml';
 import pt_BR from '../../../locales/pt_BR.yml';
@@ -64,6 +67,7 @@ export const translations = {
   ...de,
   ...es,
   ...fr,
+  ...he,
   ...it,
   ...nl_NL,
   ...pt_BR,
@@ -110,6 +114,7 @@ export function setupTranslations() {
   ta.register('da', daTA);
   ta.register('de', deTA);
   ta.register('fr', frTA);
+  ta.register('he', heTA);
   ta.register('it', itTA);
   ta.register('nl_NL', nlTA);
   ta.register('pt_BR', pt_BRTA);

client/coral-framework/services/store.js

@@ -14,9 +14,9 @@ import {
 export function createStore(reducers, middlewares = []) {
   const enhancers = [applyMiddleware(...middlewares)];
 
-  if (window.devToolsExtension) {
+  if (window.__REDUX_DEVTOOLS_EXTENSION__) {
     // we can't have the last argument of compose() be undefined
-    enhancers.push(window.devToolsExtension());
+    enhancers.push(window.__REDUX_DEVTOOLS_EXTENSION__());
   }
 
   return reduxCreateStore(combineReducers(reducers), {}, compose(...enhancers));

client/coral-framework/utils/user.js

@@ -35,6 +35,15 @@ export const isBanned = user => {
   return get(user, 'state.status.banned.status');
 };
 
+/**
+ * isAlwaysPremod
+ * retrieves boolean based on the user premod status
+ */
+
+export const isAlwaysPremod = user => {
+  return get(user, 'state.status.alwaysPremod.status');
+};
+
 /**
  * isUsernameRejected
  * retrieves boolean based on the username status

client/coral-ui/components/Paginate.css

@@ -16,7 +16,8 @@
   text-align: center;
   vertical-align: middle;
   line-height: 30px;
-  width: 30px;
+  min-width: 30px;
+  padding: 5px;
   user-select: none;
 }
 
@@ -24,7 +25,14 @@
   font-size: 1.8em;
 }
 
-.active {
+.page:hover {
+  background-color: #ababab;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+  a {
+    color: white;
+  }
+}
+.active, .active:hover {
   background-color: #696969;
   box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
   a {

config.js

@@ -43,6 +43,32 @@ const CONFIG = {
     process.env.TALK_WHITELISTED_LANGUAGES &&
     process.env.TALK_WHITELISTED_LANGUAGES.split(',').map(l => l.trim()),
 
+  // USERNAME_CAST_REGEXP defiles the regex expression that will be used to
+  // strip characters from a username during a username cast operation.
+  USERNAME_CAST_REGEXP: new RegExp(
+    process.env.USERNAME_CAST_REGEXP || '[^a-zA-Z_]',
+    'g'
+  ),
+
+  // USERNAME_REPLACEMENT_CAST_REGEXP defiles the regex expression that will be
+  // used to replace characters with the replacement character during a username
+  // cast operation. First duplicates will be replaced, then
+  USERNAME_REPLACEMENT_CAST_REGEXP: new RegExp(
+    process.env.USERNAME_REPLACEMENT_CAST_REGEXP || ' +',
+    'g'
+  ),
+
+  // USERNAME_REPLACEMENT_CHARACTER is the character used to replace other
+  // characters matching the USERNAME_REPLACEMENT_CAST_REGEXP.
+  USERNAME_REPLACEMENT_CHARACTER:
+    process.env.USERNAME_REPLACEMENT_CHARACTER || '_',
+
+  // USERNAME_VALIDATION_REGEX defines the allowed characters for a username in
+  // Talk.
+  USERNAME_VALIDATION_REGEX: new RegExp(
+    process.env.USERNAME_VALIDATION_REGEX || '^[A-Za-z0-9_]+$'
+  ),
+
   // When TRUE, it ensures that database indexes created in core will not add
   // indexes.
   CREATE_MONGO_INDEXES: process.env.DISABLE_CREATE_MONGO_INDEXES !== 'TRUE',
@@ -59,6 +85,9 @@ const CONFIG = {
   // as report CSP violations.
   ENABLE_STRICT_CSP: process.env.TALK_ENABLE_STRICT_CSP === 'TRUE',
 
+  // TRUST_PROXY allows control over the `trust proxy` configuration on express.
+  TRUST_PROXY: process.env.TALK_TRUST_PROXY || '1',
+
   // LOGGING_LEVEL specifies the logging level used by the bunyan logger.
   LOGGING_LEVEL: ['fatal', 'error', 'warn', 'info', 'debug', 'trace'].includes(
     process.env.TALK_LOGGING_LEVEL
@@ -217,6 +246,9 @@ const CONFIG = {
   // messages through the websocket to keep the socket alive.
   KEEP_ALIVE: process.env.TALK_KEEP_ALIVE || '30s',
 
+  // CONCURRENCY is the number of workers that will serve traffic.
+  CONCURRENCY: parseInt(process.env.TALK_CONCURRENCY || '1'),
+
   //------------------------------------------------------------------------------
   // Cache configuration
   //------------------------------------------------------------------------------

docs/_config.yml

@@ -6,7 +6,7 @@
 title: Talk Documentation
 subtitle:
 description: >
-  Documentation and guides for Talk from The Coral Project.
+  Documentation and guides for Coral by Vox Media
 google_analytics: UA-73335347-5
 author:
 language: en
@@ -47,7 +47,7 @@ highlight:
 # per_page: Posts displayed per page. (0 = disable pagination)
 # order_by: Posts order. (Order by date descending by default)
 index_generator:
-  path: ''
+  path: ""
 
 # Category & Tag
 default_category: uncategorized
@@ -76,112 +76,142 @@ sidebar:
     - title: GitHub
       url: https://github.com/coralproject/
     - title: Docker
-      url: https://hub.docker.com/r/coralproject/
-    - title: Roadmap
-      url: https://www.pivotaltracker.com/n/projects/1863625
+      url: https://hub.docker.com/r/coralproject/talk/
   side:
-    - title: Installation
+    - title: Version 5
       children:
-        - title: Talk Quickstart
-          url: /
-        - title: Installation from Docker
-          url: /installation-from-docker/
-        - title: Installation from Source
-          url: /installation-from-source/
-        - title: Planning your Talk Architecture
-          url: /planning-architecture/
-        - title: Pre-Launch Checklist
-          url: /pre-launch-checklist/
-    - title: Configuration
+        - title: Getting Started
+          children:
+            - title: Installing
+              url: /
+            - title: Configuration
+              url: /v5/configuration/
+            - title: Developing
+              url: /v5/developing/
+        - title: Integration
+          children:
+            - title: CMS Integration
+              url: /v5/integrating/cms/
+            - title: Single Sign On
+              url: /v5/integrating/sso/
+            - title: GDPR
+              url: /v5/integrating/gdpr/
+            - title: Comment Count
+              url: /v5/integrating/counts/
+            - title: Slack
+              url: /v5/integrating/slack/
+        - title: API
+          children:
+            - title: GraphQL Overview
+              url: /v5/api/overview/
+    - title: Version 4
       children:
-        - title: Required Configuration
-          url: /configuration/
-        - title: Advanced Configuration
-          url: /advanced-configuration/
-        - title: Configuration with CLI tools
-          url: /configuration-cli-tools/
-    - title: Integrating
-      children:
-        - title: Authentication
-          url: /integrating/authentication/
-        - title: Asset Management
-          url: /integrating/asset-management/
-        - title: Asset Scraping
-          url: /integrating/asset-scraping/
-        - title: Configuring the Comment Stream
-          url: /integrating/configuring-comment-stream/
-        - title: Configuring the Admin
-          url: /integrating/configuring-admin/
-        - title: Notifications
-          url: /integrating/notifications/
-        - title: Event Tracking and Metrics
-          url: /integrating/event-tracking-metrics/
-        - title: Styling and CSS
-          url: /integrating/styling-css/
-        - title: Translations and i18n
-          url: /integrating/translations-i18n/
-        - title: GDPR Compliance
-          url: /integrating/gdpr/
-    - title: Product Guide
-      children:
-        - title: How Talk Works
-          url: /how-talk-works/
-        - title: Commenter Features
-          url: /commenter-features/
-        - title: Moderator Features
-          url: /moderator-features/
-        - title: User Roles in Talk
-          url: /roles/
-        - title: Trust
-          url: /trust/
-        - title: Toxic Comments
-          url: /toxic-comments/
-        - title: Configuring Talk
-          url: /configuring-talk/
-    - title: Plugins
-      children:
-        - title: Plugins Overview
-          url: /plugins/
-        - title: Plugin Directory
-          url: /plugins-directory/
-        - title: Plugin Recipes
-          url: /plugin-recipes/
-    - title: API
-      children:
-        - title: GraphQL Overview
-          url: /api/overview/
-        - title: GraphQL Reference
-          url: /api/graphql/
-        - title: Server Plugin API
-          url: /api/server/
-        - title: Client Plugin API
-          url: /api/client/
-        - title: Plugin Slots API
-          url: /api/slots/
-    - title: Tutorials
-      children:
-        - title: Creating a Basic Plugin
-          url: /building-basic-plugin/
-        - title: Customizing Plugins with Coral UI
-          url: /customizing-plugins-coral-ui/
-        - title: When You've Installed Talk
-          url: /when-youve-installed-talk/
-    - title: Migrating
-      children:
-        - title: Migrating from v3.x.x
-          url: /migration/3/
-        - title: Migrating to v4.0.0
-          url: /migration/4/
-        - title: Migrating to v4.1.0
-          url: /migration/4.1/
-    - title: FAQ & Troubleshooting
-      children:
-        - title: FAQ
-          url: /faq/
-        - title: Troubleshooting Tips
-          url: /troubleshooting-tips/
-    - title: Contact
-      url: /contact/
+        - title: Installation
+          children:
+            - title: Talk Quickstart
+              url: /installation-quickstart
+            - title: Installation from Docker
+              url: /installation-from-docker/
+            - title: Installation from Source
+              url: /installation-from-source/
+            - title: Planning your Talk Architecture
+              url: /planning-architecture/
+            - title: Pre-Launch Checklist
+              url: /pre-launch-checklist/
+        - title: Configuration
+          children:
+            - title: Required Configuration
+              url: /configuration/
+            - title: Advanced Configuration
+              url: /advanced-configuration/
+            - title: Configuration with CLI tools
+              url: /configuration-cli-tools/
+        - title: Integrating
+          children:
+            - title: Authentication
+              url: /integrating/authentication/
+            - title: CMS Integration
+              url: /integrating/cms-integration/
+            - title: Asset Scraping
+              url: /integrating/asset-scraping/
+            - title: Configuring the Comment Stream
+              url: /integrating/configuring-comment-stream/
+            - title: Configuring the Admin
+              url: /integrating/configuring-admin/
+            - title: Notifications
+              url: /integrating/notifications/
+            - title: Event Tracking and Metrics
+              url: /integrating/event-tracking-metrics/
+            - title: Styling and CSS
+              url: /integrating/styling-css/
+            - title: Translations and i18n
+              url: /integrating/translations-i18n/
+            - title: GDPR Compliance
+              url: /integrating/gdpr/
+            - title: Accelerated Mobile Page
+              url: /integrating/amp/
+        - title: Product Guide
+          children:
+            - title: How Talk Works
+              url: /how-talk-works/
+            - title: Commenter Features
+              url: /commenter-features/
+            - title: Moderator Features
+              url: /moderator-features/
+            - title: User Roles in Talk
+              url: /roles/
+            - title: Trust
+              url: /trust/
+            - title: Toxic Comments
+              url: /toxic-comments/
+            - title: Configuring Talk
+              url: /configuring-talk/
+        - title: Plugins
+          children:
+            - title: Plugins Overview
+              url: /plugins/
+            - title: Plugin Directory
+              url: /plugins-directory/
+            - title: Plugin Recipes
+              url: /plugin-recipes/
+        - title: API
+          children:
+            - title: GraphQL Overview
+              url: /api/overview/
+            - title: GraphQL Reference
+              url: /api/graphql/
+            - title: Server Plugin API
+              url: /api/server/
+            - title: Client Plugin API
+              url: /api/client/
+            - title: Plugin Slots API
+              url: /api/slots/
+        - title: Tutorials
+          children:
+            - title: Creating a Basic Plugin
+              url: /building-basic-plugin/
+            - title: Customizing Plugins with Coral UI
+              url: /customizing-plugins-coral-ui/
+            - title: When You've Installed Talk
+              url: /when-youve-installed-talk/
+            - title: Embedding Talk in Native Mobile Apps
+              url: /embedding-in-native-mobile-apps/
+        - title: Migrating
+          children:
+            - title: Migrating from v3.x.x
+              url: /migration/3/
+            - title: Migrating to v4.0.0
+              url: /migration/4/
+            - title: Migrating to v4.1.0
+              url: /migration/4.1/
+        - title: FAQ & Troubleshooting
+          children:
+            - title: FAQ
+              url: /faq/
+            - title: Troubleshooting Tips
+              url: /troubleshooting-tips/
+        - title: Contact
+          url: /contact/
 
 marked:
   gfm: true

docs/public/_redirects

@@ -1,3 +0,0 @@
-/ /talk/
-/talk/reference/server/ /talk/api/server/
-/talk/reference/graphql/ /talk/api/graphql/

docs/source/01-01-talk-quickstart.md

@@ -1,13 +1,22 @@
 ---
 title: Talk Quickstart
-permalink: /
+permalink: /installation-quickstart/
 ---
 
 Online comments are broken. Our open-source Talk tool rethinks how moderation,
 comment display, and conversation function, creating the opportunity for safer,
-smarter discussions around your work. Read more about our product features and
-goals [here](https://coralproject.net/talk). The
-documentation available here is pertaining to the technical details for
+smarter discussions around your work.
+
+More than 60 newsrooms use Talk to run their on-site communities, including the Washington Post, the Wall Street Journal, and IGN.
+
+[Read more about our product features and
+goals here](https://coralproject.net/).
+
+<div class="callout">
+  We offer hosting and support packages for Talk. [Contact us for more information.](https://coralproject.net/pricing/)
+</div>
+
+The documentation available here is pertaining to the technical details for
 installing, configuring, and deploying Talk.
 
 Talk is a [Node](https://nodejs.org/) application with
@@ -22,7 +31,7 @@ to persist data. The following versions are supported:
 - MongoDB 3.2+
 - Redis 3.2.5+
 
-You can run Talk (and its dependencies) locally or from [Docker](https://www.docker.com/community-edition#/download) containers.  Docker is used in the local example below for the database and cache, however it is possible to run Talk without Docker by configuring your own MongoDB and Redis instances. We have tested Talk
+You can run Talk (and its dependencies) locally or from [Docker](https://www.docker.com/community-edition#/download) containers. Docker is used in the local example below for the database and cache, however it is possible to run Talk without Docker by configuring your own MongoDB and Redis instances. We have tested Talk
 and this documentation with Docker versions 17.06.2+.
 
 An optional dependency for Talk is
@@ -35,7 +44,7 @@ and this documentation with versions 1.14.0+.
 ### Installation from Docker
 
 To use Talk without major customization you can run the application using our
-provided docker image. 
+provided docker image.
 
 Start by making a new directory and create a file called `docker-compose.yml` and copy the following:
 
@@ -43,10 +52,10 @@ Start by making a new directory and create a file called `docker-compose.yml` an
 # For details on the syntax of docker-compose.yml files, check out:
 # https://docs.docker.com/compose/compose-file/compose-file-v2/
 
-version: '2'
+version: "2"
 services:
   talk:
-    image: coralproject/talk:4.5
+    image: coralproject/talk:4
     restart: always
     ports:
       - "3000:3000"
@@ -80,7 +89,6 @@ volumes:
 The environment variables listed above are the bare minimum needed to run the demo, for more configuration
 variables, check out the [Configuration](/talk/configuration/) section.
 
-
 And you can then start it with:
 
 ```bash
@@ -112,7 +120,6 @@ redis_1   docker-entrypoint.sh redis ...   Up      6379/tcp
 talk_1    yarn start                       Up      0.0.0.0:3000->3000/tcp
 ```
 
-
 You now have a Talk instance up and running! Continue on to the [Setup](#setup) section for details on how to complete the
 initial setup and get started using Talk.
 
@@ -148,7 +155,6 @@ Didn't work? Sometimes you may already have a container running on these ports,
 run `docker ps` to see what other containers you have running and running
 `docker stop <id>` on those containers to stop them.
 
-
 _This documentation assumes that you will be running MongoDB on
 `127.0.0.1:27017` and Redis on `127.0.0.1:6379`. The above Docker commands bind
 MongoDB and Redis on these interfaces for you._
@@ -179,27 +185,26 @@ Continue onto the [Setup](#setup) section for details on how to complete the
 installation and get started using Talk.
 
 ## Setup
+
 ### Create Admin Account
 
 With Talk running, you can now navigate to
 [http://127.0.0.1:3000/admin/install](http://127.0.0.1:3000/admin/install)
-and walk through the initial setup steps. 
+and walk through the initial setup steps.
 
-* First, enter your **Organization Name** and **Organization Contact Email**. This will appear in emails when inviting new team members.
-* Next, create your Admin user. You can specify an **Email Address**, **Username**, and **Password**
-
-* Finally, enter your list of **Permitted Domains**, read [here](/talk/configuring-talk/#permitted-domains) about whitelisting domains 
+- First, enter your **Organization Name** and **Organization Contact Email**. This will appear in emails when inviting new team members.
+- Next, create your Admin user. You can specify an **Email Address**, **Username**, and **Password**
 
+- Finally, enter your list of **Permitted Domains**, read [here](/talk/configuring-talk/#permitted-domains) about whitelisting domains
 
 _During development, ensure you whitelist 127.0.0.1:3000 otherwise the
 [http://127.0.0.1:3000/](http://127.0.0.1:3000/) page will not
 load._
 
-Once the setup wizard has been completed you can log into Talk ([http://127.0.0.1:3000/](http://127.0.0.1:3000/)) using the email address and password for the Admin user account that you just created. 
-
-From here you can test out features in Talk, see comments in the admin interface where you can do moderation, and configure the user experience. 
-In the next step you'll create some user comments to moderate. 
+Once the setup wizard has been completed you can log into Talk ([http://127.0.0.1:3000/](http://127.0.0.1:3000/)) using the email address and password for the Admin user account that you just created.
 
+From here you can test out features in Talk, see comments in the admin interface where you can do moderation, and configure the user experience.
+In the next step you'll create some user comments to moderate.
 
 ### Demo Embedded Comments
 
@@ -212,7 +217,7 @@ In order for the demo to work, you must add
 `https://docs.coralproject.net/` to your
 permitted domains list. You can do this by visiting
 [http://127.0.0.1:3000/admin/configure](http://127.0.0.1:3000/admin/configure)
-now and selecting *Tech Settings* from the sidebar.
+now and selecting _Tech Settings_ from the sidebar.
 
 Once you have added the domain of these docs, you can click the button below.
 
@@ -226,13 +231,12 @@ Once you have added the domain of these docs, you can click the button below.
 
 With your local instance of Talk running in development mode (env variable `NODE_ENV=development`) you should now also be able to access the following developer routes:
 
-* [http://127.0.0.1:3000/dev](http://127.0.0.1:3000/dev]) provides a sample comment stream 
+- [http://127.0.0.1:3000/dev](http://127.0.0.1:3000/dev]) provides a sample comment stream
 
-* [http://127.0.0.1:3000/dev/assets](http://127.0.0.1:3000/dev/assets]) provides a list of all stories in Talk and can generate new sample assets
+- [http://127.0.0.1:3000/dev/assets](http://127.0.0.1:3000/dev/assets]) provides a list of all stories in Talk and can generate new sample assets
 
 ### Conclusion
+
 At this point you've successfully installed, configured, and ran your very own
 instance of Talk! Continue through this documentation on this site to learn more
 on how to configure, develop with, and contribute to Talk!
-
-

docs/source/01-02-installation-from-docker.md

@@ -43,7 +43,7 @@ be used to setup Talk:
 version: '2'
 services:
   talk:
-    image: coralproject/talk:4.5
+    image: coralproject/talk:4
     restart: always
     ports:
       - "3000:3000"
@@ -121,7 +121,7 @@ base installation with additional custom plugins. Images can be created with the
 most basic of `Dockerfile`'s:
 
 ```docker
-FROM coralproject/talk:4.5-onbuild
+FROM coralproject/talk:4-onbuild
 ```
 
 And running the following to build the docker image:
@@ -153,7 +153,7 @@ your containerized infrastructure. The versioning of our Docker tags as well
 lets you do something like:
 
 ```docker
-FROM coralproject/talk:4.5-onbuild
+FROM coralproject/talk:4-onbuild
 ```
 
-Which would pin your image to `4.5.x release's.
+Which would pin your image to `4.x.x release's.

docs/source/01-04-planning-architecture.md

@@ -19,3 +19,40 @@ Application servers: c4.xlarge (16 VM nginx + Talk VM machine pairs)
 Mongo nodes: 3x c3.medium (large db cluster, 1 master, 2 read replicas)
 
 If you need help with Talk performance or want custom scaling help or recommendations, let us know by logging a ticket and one of our engineers will get in touch with you: https://support.coralproject.net
+
+## How to Scale Talk Components
+### Scaling the Talk Application
+
+In addition to scaling by adding additional app servers, Talk as a server component can flex to various roles. Depending on the desired configuration the roles can be split up to ensure high availability, and best matching to underlying host resources. 
+
+There are three components to the Talk application that can be served independently or in combination on a single thread: API Server, WebSockets, and Jobs
+
+![ServerArchitectureDiagram](/talk/images/ServerArch.png)
+
+In the diagram we see the difference between a Typical configuration (which just adds additional Talk application instances) vs the Split configuration where different Talk components could be spread across different machine resources to optimize infrastructure utilization. 
+See [Serving the Application](/talk/configuration-cli-tools/#serving-the-application)
+
+### Scaling Redis
+
+Redis serves as a general cache and pub/sub broker. We treat all the data stored in Redis as ephemeral, so using as a cache serves us well for Talk to synchronize expensive query caches. It also serves as our pub/sub broker for use with live updates as propagated through the GraphQL subscription system. For this reason it is not recommended to implement multiple instances of Redis. 
+
+### Scaling MongoDB
+
+MongoDB is treated as our general store for persisted data. Talk supports the most common strategies for scaling MongoDB instances including replicas and/or sharding. Depending on your specific data use cases, refer to MongoDBs documentation for more information about scaling https://www.mongodb.com/mongodb-scale.
+
+### Load Balancer 
+While this subject lives outside the Talk ecosystem, it is critical for application delivery. For websockets to work correctly, a load balancer must be selected that can support long lived connections that are required for websockets to work.
+
+## Running Talk in Production
+
+When you are ready to launch your production instance of Talk update your NODE_ENV environment variable from `development` to `production` mode.
+
+Then launch talk with `yarn start` or with the command `NODE_ENV=production ./bin/cli-serve -j -w`
+
+By default Talk will run on a single thread, but you can also run multiple Talk threads on a single application instance by setting the environment variable `TALK_CONCURRENCY`. [See Advanced Configuration](/talk/advanced-configuration/#talk-concurrency)
+
+
+
+
+
+

docs/source/01-05-pre-launch-checklist.md

@@ -13,6 +13,9 @@ permalink: /pre-launch-checklist/
 - [ ] Do you have a domain name for Talk?
   - **Recommended**: You should host Talk on a subdomain on your main site (e.g. if your site is mysitefornews.org, you should serve Talk from a subdomain like talk.mysitefornews.org) to avoid issues with third-party cookie sharing.
 
+
+- [ ] Do you have a Content Delivery Network (CDN) to improve performance and reduce load on your Talk servers?
+
   
 - [ ] Do you have a MongoDB instance?
   - A MongoDB [Docker instance](/talk/installation-from-docker/) hosted alongside Talk?
@@ -28,8 +31,10 @@ permalink: /pre-launch-checklist/
 - [ ] Do you want to provide single sign-on (SSO) by integrating with an external auth system?
   - See [Authenticating with Talk](/talk/integrating/authentication/)
 
+
 - [ ] Do you want to integrate Talk with your CMS to automate embedding Talk Comment Stream into your site?
-  - See [Asset Management](/talk/integrating/asset-management/)
+  - See [CMS Integration](/talk/integrating/cms-integration/)
+
 
 - [ ] Do you want to use Social sign-on?
   - Facebook
@@ -58,9 +63,10 @@ permalink: /pre-launch-checklist/
   - Install [talk-plugin-rich-text](/talk/plugin/talk-plugin-rich-text)
 
 
-- [ ] Do you want to display comment counts?
-  - Use the GraphQL [CommentCountQuery](https://docs.coralproject.net/talk/api/graphql/#CommentCountQuery)
-  - Install [talk-plugin-deep-reply-count](/talk/plugin/talk-plugin-deep-reply-count) if necessary.
+- [ ] Do you want to display comment counts on your embed stream or on a homepage with dozens of articles?
+  - Install [talk-plugin-comment-count](https://github.com/coralproject/talk-plugin-comment-count) for summary counts on multiple articles
+  - Install [talk-plugin-deep-reply-count](/talk/plugin/talk-plugin-deep-reply-count) to add counts to the embed stream
+  - Or use the GraphQL [CommentCountQuery](https://docs.coralproject.net/talk/api/graphql/#CommentCountQuery)
 
 
 - [ ] Do you want to translate Talk to a different language?
@@ -71,7 +77,8 @@ permalink: /pre-launch-checklist/
   - See [our blog for more information](https://coralproject.net/blog/slacking-on/)
   
   
-- [ ] Has your community team configured Talk to match your community strategy?
+- [ ] Have you configured Talk’s admin settings and determined your community strategy?
   - See [our tutorial for more information](https://docs.coralproject.net/talk/when-youve-installed-talk/)
+  - See [Configuring Talk](/talk/configuring-talk/)
  
  

docs/source/02-02-advanced-configuration.md

@@ -23,6 +23,10 @@ otherwise the application will fail to start.
 Configure the duration for which comment counts are cached for, parsed by
 [ms](https://www.npmjs.com/package/ms). (Default `1hr`)
 
+## TALK_CONCURRENCY
+
+This environment variable allows multiple worker processes to be spawned to handle traffic. (Default `1`) 
+
 ## TALK_DEFAULT_LANG
 
 This is a **Build Variable** and must be consumed during build. If using the
@@ -412,13 +416,19 @@ cannot. You would use this option in the latter situation.
 
 ## TALK_SMTP_FROM_ADDRESS
 
-The email address to send emails from using the SMTP provider in the format:
+The email address to send emails from using the SMTP provider. You can include the name and email address or only provide the email. 
 
 ```plain
-TALK_SMTP_FROM_ADDRESS="The Coral Project" <support@coralproject.net>
+TALK_SMTP_FROM_ADDRESS="The Coral Project" support@coralproject.net
+
+```
+or 
+
+```plain
+TALK_SMTP_FROM_ADDRESS=support@coralproject.net
+
 ```
 
-Including the name and email address.
 
 ## TALK_SMTP_HOST
 
@@ -495,8 +505,9 @@ Could be read as:
   pre-moderated once in order to post freely again. If they instead get rejected
   again, then they must have two of their comments approved in order to get
   added back to the queue.
-- At the moment of writing, behavior is not attached to the flagging
-  reliability, but it is recorded.
+- At the moment of writing, behavior is not attached to reliable commenters
+  as well as the flagging reliability and unreliability. Regardless, 
+  all of these scores are recorded for future implementation.
 
 ## TALK_DISABLE_IGNORE_FLAGS_AGAINST_STAFF
 
@@ -589,3 +600,13 @@ can be used to set an authorization header, or change the user agent. (Default
 ## TALK_SCRAPER_PROXY_URL
 
 Sets a specific HTTP/S proxy to be used by the Asset Scraper using [https-proxy-agent](https://www.npmjs.com/package/https-proxy-agent). (Default `null`)
+
+## TALK_ADDTL_REPLIES_ON_LOAD_MORE
+
+This is a **Build Variable** and must be consumed during build. If using the
+[Docker-onbuild](/talk/installation-from-docker/#onbuild)
+image you can specify it with `--build-arg TALK_ADDTL_REPLIES_ON_LOAD_MORE=3`.
+
+Specifies the number of replies to load for a comment when clicking "Load More".
+It is defaulted quite high to sort of support "loading the rest of the replies".
+(Default `999999`)

docs/source/02-03-cli-tools.md

@@ -81,12 +81,17 @@ Usage: cli-assets [options] [command]
   Commands:
 
     list [options]                        list all the assets in the database
+    debug <url>                           prints the scraped metadata from that URL
     refresh [age]                         queues the assets that exceed the age requested
     update-url <assetID> <url>            update the URL of an asset
     merge <srcID> <dstID>                 merges two assets together by moving comments from src to dst and deleting the src asset
     rewrite [options] <search> <replace>  rewrites asset url's using the provided regex replacement pattern
 ```
 
+When using the `refresh` command, the `age` value specifies how far back in time to re-scrape assets; i.e. to re-scrape everything that was scraped in the last week use `1w` or `7d`. Supports ms (milliseconds), s (seconds), m (minutes), h (hours), d (days) and w (weeks). Assets that have not been scraped will also be queued for scraping. 
+
+See also, [Asset Scraping](/talk/integrating/asset-scraping/) for more details about asset scraping.  
+
 ## Setting up the application
 You can also run a setup wizard to setup the wizard using `./bin/cli setup`. Below is a list of additional options available for this command:
 ```

docs/source/03-06-product-guide-configuring-talk.md

@@ -57,7 +57,7 @@ The timeframe in seconds in which commenters have to edit their comment.
 
 #### Close Comments After
 
-Default time after which all comment streams will close.
+Default time after which all comment streams will close. Applies to assets created in Talk after this configuration is saved, and does not update existing assets. 
 
 ### Moderation Settings
 
@@ -88,8 +88,9 @@ Comments with suspect words will display until a moderator takes action on them.
 
 #### Permitted Domains
 
-A list of domains where your Talk instance is allowed to be embedded. Typical
-use is `localhost`, `staging.yourdomain.com`, `yourdomain.com`, etc.
+A list of domains where your Talk instance is allowed to be embedded. List each domain and subdomain in use
+separately, for example: `localhost`, `staging.yourdomain.com`, `yourdomain.com`, `www.yourdomain.com`, etc.
+
 
 #### Embed Script
 

docs/source/04-05-plugin-recipes.md

@@ -47,3 +47,9 @@ Source: [talk-recipes/tree/master/plugins/author-name](https://github.com/coralp
 Enables the ability to hover over a commenter’s name and add plugin
 functionality there. The Member Since plugin that is provided in this recipe is
 an example of this.
+
+## recipe-custom-auth
+
+Source: [talk-recipes/tree/master/plugins/custom-auth](https://github.com/coralproject/talk-recipes/tree/master/plugins/custom-auth)
+
+Example code for creating, and updating Users in Talk from JWT data provided by your custom SSO authentication service. 

docs/source/05-03-when-youve-installed-talk.md

@@ -87,6 +87,8 @@ The most important predictors of the success of an online community are:
 
 #### Effectively
 
+* Keep conversations fresh and reduce moderation overhead by configuring Talk to automatically close commenting after a specified time window. Should comments be open for a day, a week, or a month? Set a manageable window and automatically close stories for commenting after that time period. 
+
 * If you're using the Toxic Comments plugin, make sure that its threshold is set at the level that catches most comments with fewest false positives (default is 80%). You can see the Likely to be Toxic level of every comment by clicking "More Details" on the comment card in the moderation view.
 
 * Publicly discourage behavior in the comments that doesn't cross the line but suggests that the tone or focus could shift quickly in a direction you don't want. Point to relevant sections of your community guidelines. [Read more about defining and discouraging this kind of behavior here.](https://guides.coralproject.net/manage-a-successful-community/)

docs/source/05-04-native-mobile-apps.md

@@ -0,0 +1,10 @@
+---
+title: Embedding Talk in Native Mobile Apps
+permalink: /embedding-in-native-mobile-apps/
+---
+
+When it comes mobile devices, the Talk client embed is already responsive and mobile friendly. We do not currently have plans to provide mobile SDKs, however, you can do this yourself.
+
+One organization that has taken on the challenge of creating their own iOS native Talk client is [IGN](http://www.ign.com/). They were kind enough to share how they implemented Talk natively on their apps, which can be found [here](http://coralproject.net/wp-content/uploads/2019/01/IGNNativeComments.pdf).
+
+If you implement Talk on your mobile apps and would like to contribute your process for others, you can add those here in our docs via a PR or post an issue on Github and we can help you.

docs/source/07-01-faq.md

@@ -11,8 +11,6 @@ To log a bug or request a feature, submit a Support ticket ([support@coralprojec
 
 You can also request help on Github by [submitting an issue](https://github.com/coralproject/talk/issues). This also increases your chances of having someone from the community respond to help.
 
-And you can also search our [Coral Community](https://community.coralproject.net) to see if your issue has been solved, or to get tips from the community. 
-
 ## How can our dev team contribute to Talk?
 
 We are lucky to work with newsroom dev teams and individual contributors who span the world, and come from newsrooms of all sizes. You can read our [Contribution Guide](https://github.com/coralproject/talk/blob/master/CONTRIBUTING.md) to get started, but feel free to reach out to us via Github too.
@@ -35,24 +33,24 @@ Our team is small, so it's difficult for us to provide support packages. However
 
 ## Is there a hosted version I can purchase by monthly subscription?
 
-Yes! We are happy to announce that as of July 2018, we provide a SaaS version of Talk, called the Coral Cloud. For a monthly subscription, you get your own hosted Talk instance to embed on your news and blog articles. [Reach out to us](mailto:support@coralproject.net) if you're interested in this option.
+Yes! [Visit our hosting page](https://coralproject.net/pricing/) to submit information and receive a quote.
 
 ## Where is our data when we use Talk?
 
 If you are hosting Talk on your own:
 
 * Your data is stored in a MongoDB database that you provide
-* The Coral Team doesn’t have any access to your data
+* The Coral team doesn’t have any access to your data
 
-If you are using Coral Cloud Hosting for Talk:
+If you are using our Hosted SaaS version of Talk:
 
-* Your data is stored in a dedicated MongDB database that is provisioned for your in the Cloud
-* Your data is completely isolated from other customer’s data
-* The Coral Team and its third party database hosting providers use strict access controls and auditing to protected your data from unauthorized access by team members
+* Your data is stored in a dedicated MongoDB database that is provisioned for you
+* Your data is completely isolated from other customers' data
+* The Coral Team and its third-party database hosting providers use strict access controls and auditing to protected your data from unauthorized access
 
 ## Does Talk have any automated moderation features to protect against spam and trolling?
 
-Talk features a couple of plugins that provide advanced moderation:
+As well as basic word/phrase filtering and user reputation scores, Talk offers optional advanced features via third-party services:
 
 * The [Toxic Comments plugin](/talk/plugin/talk-plugin-toxic-comments) integrates with the [Perspective API from Google](https://www.perspectiveapi.com/) to detect the likelihood of toxicity of comments in real-time
 * The [Akismet plugin](/talk/plugin/talk-plugin-akismet) detects and blocks spam comments
@@ -66,4 +64,4 @@ Talk features a couple of plugins that provide advanced moderation:
 
 * The Talk software is freely available under the Apache 2.0 open source license
 * Associated costs are those for the infrastructure required to run Talk (i.e. cloud hosting fee or bare-metal server costs)
-* The Coral Project offers a SaaS version of Talk. Please [get in touch with us](mailto:support@coralproject.net) to discuss pricing for your custom requirements.
+* The Coral Project offers a SaaS/hosted version of Talk. Please [get in touch with us](https://coralproject.net/pricing/) to discuss pricing for your requirements.

docs/source/07-02-troubleshooting-tips.md

@@ -38,3 +38,6 @@ If you're using `talk-plugin-auth`:
 * See if you can isolate if it's a particular group of users that are experiencing this issue, e.g. mods, admins, subscribers? Confirm they have the appropriate permissions to comment.
 * Note if this is a new issue that happened after an upgrade - did you read the [migration docs](/talk/migration/3/) and the [release notes](https://github.com/coralproject/talk/releases)? This might help you resolve the issue.
 * If you're still experiencing issues, log a [support ticket](mailto:support@coralproject.net) so we can help diagnose the issue
+
+If a user has been locked out due to too many failed login attempts:
+* How long does the user have to wait before they will be allowed to login? 10 mins

docs/source/_data/plugins.yml

@@ -146,3 +146,8 @@
   tags:
     - default
     - sorting
+- name: talk-plugin-comment-count
+  description: This plugin enables adding comment counts to Talk’s embed or in other locations on your site. 
+  link: https://github.com/coralproject/talk-plugin-comment-count
+  tags:
+    - counts

docs/source/api/server.md

@@ -56,16 +56,32 @@ Thanks to [gql-merge](https://www.npmjs.com/package/gql-merge) the contents of
 definitions. `enum`'s will be appended to, types will be appended, and new types
 will be added.
 
+This can be included as a plugin via:
+
+```js
+const fs = require("fs");
+const path = require("path");
+
+module.exports = {
+  typeDefs: fs.readFileSync(path.join(__dirname, "typeDefs.graphql"), "utf8")
+};
+```
+
+Assuming the above GraphQL schema is located in the plugin folder at
+`typeDefs.graphql`.
+
 ### context
 
 ```js
-{
-  Slack: (context) => ({
-    notify: (message) => {
-      // return a promise after we're done sending notifications.
-    }
-  })
-}
+module.exports = {
+  context: {
+    Slack: context => ({
+      notify: message => {
+        // return a promise after we're done sending notifications.
+      },
+    });
+  },
+};
 ```
 
 Any property provided here will be added to the context parameter available
@@ -83,41 +99,50 @@ A special context hook, `Sort` will allow plugin authors to provide new
 methods to sort data. An example is as follows:
 
 ```js
-{
-  Sort: () => ({
-    Comments: { // <-- (1)
-      likes: { // <-- (2)
-        startCursor(ctx, nodes, {cursor}) { // <-- (3)
-          return cursor != null ? cursor : 0;
-        },
-        endCursor(ctx, nodes, {cursor}) { // <-- (4)
-          return nodes.length ? (cursor != null ? cursor : 0) + nodes.length : null;
-        },
-        sort(ctx, query, {cursor, sort}) { // <-- (5)
-          if (cursor) {
-            query = query.skip(cursor);
-          }
+module.exports = {
+  context: {
+    Sort: () => ({
+      Comments: {
+        // <-- (1)
+        likes: {
+          // <-- (2)
+          startCursor(ctx, nodes, { cursor }) {
+            // <-- (3)
+            return cursor != null ? cursor : 0;
+          },
+          endCursor(ctx, nodes, { cursor }) {
+            // <-- (4)
+            return nodes.length
+              ? (cursor != null ? cursor : 0) + nodes.length
+              : null;
+          },
+          sort(ctx, query, { cursor, sort }) {
+            // <-- (5)
+            if (cursor) {
+              query = query.skip(cursor);
+            }
 
-          return query.sort({
-            'action_counts.like': sort === 'DESC' ? -1 : 1,
-            created_at: sort === 'DESC' ? -1 : 1,
-          });
-        },
-      },
-    },
-  }),
-}
+            return query.sort({
+              "action_counts.like": sort === "DESC" ? -1 : 1,
+              created_at: sort === "DESC" ? -1 : 1
+            });
+          }
+        }
+      }
+    })
+  }
+};
 ```
 
 This has a bunch of special features:
 
 1. `Comments` is the name of the type being sorted, this is pluralized and
-    capitalized.
+   capitalized.
 2. `likes` is the `sortBy` field in lowercase.
 3. `startCursor` will retrieve the start cursor based on the current set of
-    nodes and the current cursor.
+   nodes and the current cursor.
 4. `endCursor` will retrieve the end cursor based on the current set of nodes
-    and the current cursor.
+   and the current cursor.
 5. `sort` will mutate the `query` to apply the sort operations.
 
 All the `startCursor`, `endCursor`, and `sort` functions must be provided in
@@ -126,11 +151,13 @@ order for the sorting to apply properly.
 ### loaders
 
 ```js
-(context) => ({
-  People: {
-    load: () => db.people.find({user: context.user})
-  }
-})
+module.exports = {
+  context: context => ({
+    People: {
+      load: () => db.people.find({ user: context.user })
+    }
+  })
+};
 ```
 
 Loaders should be provided as a function which returns a map which is used in
@@ -139,13 +166,15 @@ the resolvers function. These must return a promise or a value.
 ### mutators
 
 ```js
-(context) => ({
-  People: {
-    create: (name) => {
-      return db.people.insert({user: context.user, name});
+module.exports = {
+  context: context => ({
+    People: {
+      create: name => {
+        return db.people.insert({ user: context.user, name });
+      }
     }
-  }
-})
+  })
+};
 ```
 
 Mutators should be provided as a function which returns a map which is used in
@@ -154,27 +183,41 @@ the resolvers function. These must return a promise or a value.
 ### resolvers
 
 ```js
-{
-  Person: {
-    name(obj, args, context) {
-      return obj.name;
+module.exports = {
+  resolvers: {
+    Person: {
+      name(obj, args, context) {
+        return obj.name;
+      },
+      colour(obj, args, context) {
+        // Bill likes the colour red, everyone else likes blue.
+        return obj.name === "bill" ? "RED" : "BLUE";
+      }
     },
-    colour(obj, args, context) {
-      // Bill likes the colour red, everyone else likes blue.
-      return obj.name === 'bill' ? 'RED' : 'BLUE';
-    }
-  },
-  RootQuery: {
-    people(obj, args, {loaders: {People}}) {
-      return People.load();
-    }
-  },
-  RootMutation: {
-    createPerson(obj, {name}, {mutators: {People}}) {
-      return People.create(name);
+    RootQuery: {
+      people(
+        obj,
+        args,
+        {
+          loaders: { People }
+        }
+      ) {
+        return People.load();
+      }
+    },
+    RootMutation: {
+      createPerson(
+        obj,
+        { name },
+        {
+          mutators: { People }
+        }
+      ) {
+        return People.create(name);
+      }
     }
   }
-}
+};
 ```
 
 Should return a resolver map as described in the
@@ -185,40 +228,44 @@ This will merge with the existing resolvers in core and from previous plugins.
 ### hooks
 
 ```js
-{
-  RootMutation: {
-    createPerson: {
-      post: async (obj, args, {plugins: {Slack}}, info, person) {
-        if (!person) {
+module.exports = {
+  hooks: {
+    RootMutation: {
+      createPerson: {
+        post: async (obj, args, {plugins: {Slack}}, info, person) {
+          if (!person) {
+            return person;
+          }
+
+          await Slack.notify(`A new person just was created with name ${person.name}`);
+
           return person;
         }
-
-        await Slack.notify(`A new person just was created with name ${person.name}`);
-
-        return person;
       }
     }
   }
-}
+};
 ```
 
 Hooks here are pretty special, for each resolver field, you can specify a
 pre/post hook that will execute pre and post field resolution.
 
 If your post function accepts four parameters, then it can modify the field
-result. It is *required* that the function resolves a promise (or returns) with
+result. It is _required_ that the function resolves a promise (or returns) with
 the modified value or simply the original if you didn't modify it.
 
 ### setupFunctions
 
 ```js
-setupFunctions: {
-  leader: (options, args) => ({
-    leader: {
-      filter: (person) => person.place === 1
-    },
-  }),
-}
+module.exports = {
+  setupFunctions: {
+    leader: (options, args) => ({
+      leader: {
+        filter: person => person.place === 1
+      }
+    })
+  }
+};
 ```
 
 Setup functions allow you to create filters that control which pubsub.publish() events
@@ -229,28 +276,32 @@ For more information, see the [Apollo Docs](https://github.com/apollographql/gra
 ### tokenUserNotFound
 
 ```js
-tokenUserNotFound: async ({jwt, token}) => {
-  let profile = await someExternalService(token);
-  if (!profile) {
-    return null;
+const Users = require("services/users");
+
+module.exports = {
+  tokenUserNotFound: async ({ jwt }) => {
+    const user = await Users.upsertExternalUser(
+      null,
+      jwt.sub,
+      jwt.iss,
+      jwt.username
+    );
+
+    const email = jwt.email.toLowerCase();
+
+    //upsertExternalUser will also create a profile with provider:jwt.iss, id:jwt.sub
+    //add a "local" profile to persist email on the user
+    user.profiles.push({
+      provider: "local",
+      id: email
+    });
+    user.created_at = new Date(jwt.memberSince * 1000);
+
+    await user.save();
+
+    return user;
   }
-
-  let user = await UserModel.findOneAndUpdate({
-    id: profile.id
-  }, {
-    id: profile.id,
-    username: profile.username,
-    lowercaseUsername: profile.username.toLowerCase(),
-    roles: [],
-    profiles: []
-  }, {
-    setDefaultsOnInsert: true,
-    new: true,
-    upsert: true
-  });
-
-  return user;
-}
+};
 ```
 
 The `tokenUserNotFound` hook allows auth integrations to hook into the event
@@ -258,8 +309,15 @@ when a valid token is provided but a user can't be found in the database that
 matches the provided id.
 
 The function is async, and should return the user object that was created in the
-database, or null if the user wasn't found. The `jwt` parameter of the object
-is the unpacked token, while `token` is the original jwt token string.
+database. The `jwt` parameter of the object is the unpacked token, which has already been validated.
+
+More details about the `upsertExternalUser` method can be found at:
+https://github.com/coralproject/talk/blob/32962aa1e84c09d87141440a1f04cbd1659b3336/services/users.js/#L592
+
+In this example, a unix timestamp was included on the jwt with a date that is being persisted on the user. This is optional, but can be used to handle any extra claims you want to include on the jwt. You can use the metadata object on the user to store custom values.
+
+Having trouble implementing your own `tokenUserNotFound` hook?
+Submit a Support ticket ([support@coralproject.net](mailto:support@coralproject.net))
 
 ### tags
 
@@ -268,18 +326,20 @@ or enabled by code). Below is an example pulled from the core off topic plugin
 on how to create a hook for the `OFF_TOPIC` name:
 
 ```js
-[
-  {
-    name: 'OFF_TOPIC',
-    permissions: {
-      public: true,
-      self: true,
-      roles: []
-    },
-    models: ['COMMENTS'],
-    created_at: new Date()
-  }
-]
+module.exports = {
+  tags: [
+    {
+      name: "OFF_TOPIC",
+      permissions: {
+        public: true,
+        self: true,
+        roles: []
+      },
+      models: ["COMMENTS"],
+      created_at: new Date()
+    }
+  ]
+};
 ```
 
 You can refer to `models/schema/tag.js` for the available schema to match when
@@ -288,11 +348,13 @@ creating models to enable/disable specific features.
 ### router
 
 ```js
-(router) => {
-  router.get('/api/v1/people', (req, res) => {
-    res.json({people: [{name: 'Bob'}]});
-  });
-}
+module.exports = {
+  router: router => {
+    router.get("/api/v1/people", (req, res) => {
+      res.json({ people: [{ name: "Bob" }] });
+    });
+  }
+};
 ```
 
 The Router hook allows you to create a function that accepts the base express
@@ -302,56 +364,73 @@ action needed by external applications.
 ### passport
 
 ```js
-const FacebookStrategy = require('passport-facebook').Strategy;
-const UsersService = require('services/users');
-const {ValidateUserLogin, HandleAuthPopupCallback} = require('services/passport');
+const FacebookStrategy = require("passport-facebook").Strategy;
+const UsersService = require("services/users");
+const {
+  ValidateUserLogin,
+  HandleAuthPopupCallback
+} = require("services/passport");
 
 module.exports = {
-  passport(passport) {
-    passport.use(new FacebookStrategy({
-      clientID: process.env.TALK_FACEBOOK_APP_ID,
-      clientSecret: process.env.TALK_FACEBOOK_APP_SECRET,
-      callbackURL: `${process.env.TALK_ROOT_URL}/api/v1/auth/facebook/callback`,
-      passReqToCallback: true,
-      profileFields: ['id', 'displayName', 'picture.type(large)']
-    }, async (req, accessToken, refreshToken, profile, done) => {
+  passport: passport => {
+    passport.use(
+      new FacebookStrategy(
+        {
+          clientID: process.env.TALK_FACEBOOK_APP_ID,
+          clientSecret: process.env.TALK_FACEBOOK_APP_SECRET,
+          callbackURL: `${
+            process.env.TALK_ROOT_URL
+          }/api/v1/auth/facebook/callback`,
+          passReqToCallback: true,
+          profileFields: ["id", "displayName", "picture.type(large)"]
+        },
+        async (req, accessToken, refreshToken, profile, done) => {
+          let user;
+          try {
+            const { id, provider, displayName } = profile;
+            user = await UsersService.upsertSocialUser(
+              req.context,
+              id,
+              provider,
+              displayName
+            );
+          } catch (err) {
+            return done(err);
+          }
 
-      let user;
-      try {
-        const { id, provider, displayName } = profile;
-        user = await UsersService.upsertSocialUser(
-          req.context,
-          id,
-          provider,
-          displayName
-        );
-      } catch (err) {
-        return done(err);
-      }
-
-      return ValidateUserLogin(profile, user, done);
-    }));
+          return ValidateUserLogin(profile, user, done);
+        }
+      )
+    );
   },
-  router(router) {
-
+  router: router => {
     // Note that we have to import the passport instance here, it is
     // instantiated after all the strategies have been mounted.
-    const {passport} = require('services/passport');
+    const { passport } = require("services/passport");
 
     /**
      * Facebook auth endpoint, this will redirect the user immediately to facebook
      * for authorization.
      */
-    router.get('/facebook', passport.authenticate('facebook', {display: 'popup', authType: 'rerequest', scope: ['public_profile']}));
+    router.get(
+      "/facebook",
+      passport.authenticate("facebook", {
+        display: "popup",
+        authType: "rerequest",
+        scope: ["public_profile"]
+      })
+    );
 
     /**
      * Facebook callback endpoint, this will send the user a html page designed to
      * send back the user credentials upon successful login.
      */
-    router.get('/facebook/callback', (req, res, next) => {
-
+    router.get("/facebook/callback", (req, res, next) => {
       // Perform the facebook login flow and pass the data back through the opener.
-      passport.authenticate('facebook', HandleAuthPopupCallback(req, res, next))(req, res, next);
+      passport.authenticate(
+        "facebook",
+        HandleAuthPopupCallback(req, res, next)
+      )(req, res, next);
     });
   }
 };
@@ -360,10 +439,10 @@ module.exports = {
 ### translations
 
 ```js
-const path = require('path');
+const path = require("path");
 
 module.exports = {
-  translations: path.join(__dirname, 'translations.yml'),
+  translations: path.join(__dirname, "translations.yml")
 };
 ```
 
@@ -377,11 +456,11 @@ en:
 
 Which overrides the copy for the `embedlink.copy` template. You can
 also provide other languages as well by using the correct language
-prefix. 
+prefix.
 
-When creating a plugin using this `translations` hook to override copy 
+When creating a plugin using this `translations` hook to override copy
 from another plugin, be sure to list it after the plugin it's overriding
-in the `plugins.json` file. 
+in the `plugins.json` file.
 
 ### websockets
 
@@ -392,12 +471,12 @@ module.exports = {
       // Do something with the connection params or connection, like
       // logging it out, or incrementing a metric.
     },
-    onDisconnect: (connection) => {
+    onDisconnect: connection => {
       // Do something with the connection params or connection, like
       // logging it out, or decrementing a metric.
-    },
-  },
-}
+    }
+  }
+};
 ```
 
 This `websockets` hook can be used to attach methods to the
@@ -411,12 +490,13 @@ connections.
 module.exports = {
   schemaLevelResolveFunction: (root, args, ctx, info) => {
     // The GraphQL Operation Name. Example: CoralEmbedStream_Embed
-    const name = info.operation.name !== null ? info.operation.name.value : null;
+    const name =
+      info.operation.name !== null ? info.operation.name.value : null;
     // Maybe increment a metric based on the operation name...
 
     // You must _always_ return the root.
     return root;
-  },
+  }
 };
 ```
 
@@ -431,9 +511,7 @@ Contents of `plugins.json`:
 
 ```json
 {
-  "server": [
-    "people"
-  ]
+  "server": ["people"]
 }
 ```
 
@@ -527,5 +605,4 @@ module.exports = {
     }
   }
 };
-
 ```

docs/source/integrating/amp.md

@@ -0,0 +1,47 @@
+---
+title: Accelerated Mobile Page
+permalink: /integrating/amp/
+---
+
+[AMP](https://amp.dev/) is a light-weight, stripped down HTML page that aims to improve reader experience. _Talk v4.9.0+_ comes with  [AMP](https://amp.dev/) support. The current caveat however is that _toast notifications_ are not being rendered when viewing inside AMP.
+
+# How to integrate
+Put the following code into your _AMP_ page and replace `$TALK_URL` and `$ASSET_URL` with the
+corresponding values. You can also pass `asset_id` instead of `asset_url`.
+
+```html
+<amp-iframe
+  width=600 height=140
+  layout="responsive"
+  sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
+  resizable
+  src="https://$TALK_URL/embed/amp#asset_url=$ASSET_URL">
+  <div placeholder></div>
+  <div overflow tabindex=0 role=button aria-label="Read more">Read more</div>
+</amp-iframe>
+```
+
+## Single Sign-On
+For SSO integration you need to create a page with the following output and replace `$TALK_URL` and `$AUTH_TOKEN` with the appropriate values. Inject your SSO auth scripts to get the  `$AUTH_TOKEN` for the current user. Integrating with [amp-access](https://amp.dev/documentation/components/amp-access) is recommended which opens a 1st-party popup to not have browsers block your cookies. This page is then used in `src` of `<amp-iframe>` above. It must be accessed over `https` and live in a different domain than the `amp` page.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <title>Coral Talk Amp Embed</title>
+  </head>
+  <body>
+    <div id='coralStreamEmbed'></div>
+    <script src="https://$TALK_URL/static/embed.js"></script>
+    <script>
+      window.TalkEmbed = Coral.Talk.render(document.getElementById('coralStreamEmbed'), {
+        talk: '$TALK_URL',
+        auth_token: '$AUTH_TOKEN',
+        amp: true,
+      })
+    </script>
+  </body>
+</html>
+```

docs/source/integrating/asset-scraping.md

@@ -9,6 +9,9 @@ in a simple way. We use the following
 [meta tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) on
 the target pages that allow us to extract some properties.
 
+Asset scraping is performed by the `scraper` job which is enabled by default when you launch Talk. If your production site is behind a paywall or otherwise prevents scraping, you might need to confiugre a [TALK_SCRAPER_PROXY_URL](/talk/advanced-configuration/#talk-scraper-proxy-url) or custom [TALK_SCRAPER_HEADERS](/talk/advanced-configuration/#talk-scraper-headers). 
+
+
 | Asset Property     | Selector |
 |--------------------|----------|
 | `title`            | See [`metascraper-title`](https://github.com/microlinkhq/metascraper/blob/dc664c37ea1b238b1e3e9d5342edfacc9027892c/packages/metascraper-title/index.js) |
@@ -19,7 +22,7 @@ the target pages that allow us to extract some properties.
 | `modified_date`    | `meta[property="article:modified"]` |
 | `section`          | `meta[property="article:section"]` |
 
-You can use the `./bin/cli assets debug <url>` to print the scraped metadata
+You can use the `./bin/cli assets debug <url>` command to print the scraped metadata
 from that URL. For example:
 
 ```bash
@@ -41,4 +44,8 @@ from that URL. For example:
 ├──────────────────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
 │ section          │                                                                                                                                                                                  │
 └──────────────────┴──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
-```
+```
+
+
+
+You can use the `./bin/cli assets refresh [age]` to trigger scraping or rescrape assets where the scraper job was unsuccessful. 

docs/source/integrating/authentication.md

@@ -3,38 +3,39 @@ title: Authenticating with Talk
 permalink: /integrating/authentication/
 ---
 
-Out of the box Talk supports account registration with username and password, as well as features like forgot password. 
+### Authentication Strategies 
 
-You can also integrate Talk with any external authentication service that will enable
-seamless single sign-on (SSO) for users within your organization. There are a few
-methods of doing so:
+Talk comes with built in user management features like account registration with username/email and password, as well as features like resetting a forgotten password. 
 
-1. Passport Middleware
-2. Custom Token Integration
+There are four strategies to choose from when it comes to user authentication:
 
-Both methods work, but there are product decisions that will affect the overall
-choice.
+#### Talk Email Authentication
+Best when you want Talk to manage all user registration, creation and authentication. Requires the least amount of setup and configuration. Users register by creating a Username (must be unique across users, no spaces or special chars), Email, and Password and are stored in Talk’s database. Optionally - you can require an email verification step at time of account creation. *Plugins required: [talk-plugin-local-auth](/talk/plugin/talk-plugin-local-auth), [talk-plugin-auth](/talk/plugin/talk-plugin-auth)*
 
-## Passport Middleware
+#### Social Sign-in (FaceBook or Google via Passport Middleware)
 
-You would choose the **Passport Middleware** route when you are OK using an auth
-that is triggered from inside Talk that is not connected to an external auth
-state (you don't use the auth anywhere else now). 
-
-Plugins are available for the following 3rd party authentication providers:
+Allows users to use existing social media account to sign in to Talk. Requires you to setup API keys with social sign on provider, and configure your API keys in Talk. Users register and login via a *“Sign in with ….”*, but are not required to set user details such as password or email address. *Plugins required: [talk-plugin-auth](/talk/plugin/talk-plugin-auth), plus at least one of the following:*
 
 * [Facebook](/talk/plugin/talk-plugin-facebook-auth/)
 * [Google](/talk/plugin/talk-plugin-google-auth/) 
 
-## Custom Token Integration 
+_FAQ: Can I create a Twitter auth plugin?_ 
+This is currently not possible because Talk uses passport.js which does not support Twitter's oAuth2 requirements.
+
+#### Social Sign-in with Email Association 
+This strategy is actually a combination of the first two. Talk’s built in Email Authentication is augmented by also allowing registration with a social account. Users with social accounts are prompted to associate an email address with their social profile to enable notifications. *Plugins required: [talk-plugin-auth](/talk/plugin/talk-plugin-auth), [talk-plugin-local-auth](/talk/plugin/talk-plugin-local-auth), [talk-plugin-facebook-auth](/talk/plugin/talk-plugin-facebook-auth/), and or [talk-plugin-google-auth](/talk/plugin/talk-plugin-google-auth/)*
+
+#### Custom SSO Token Integration
+When you want users to authenticate via your existing identity system, and be automatically registered/logged into Talk. Users register, login, and manage their user details on your existing site, your user database maintains the source of truth for all user information. Users are created and updated in Talk via jwt tokens passed from your auth service to Talk. *Required Plugins: requires custom plugin development, as well as disabling talk-plugin-auth, and talk-plugin-local-auth*
+
+## Setting Up Custom SSO Token Integration
 
 You can integrate Talk with any authentication service to enable single sign-on
 for users. The steps to do that are:
 
 1. Create a service that generates [JWT tokens](https://jwt.io/introduction/).
-2. Push the token into the embed.
-3. Implement the [`tokenUserNotFound`](#implement-tokenusernotfound) hook to
-   process the token.
+2. Include the JWT token in your Talk embed script
+3. Create a custom plugin to generate and authenticate Talk users from the jwt token
 
 ### Create JWT Token
 
@@ -61,7 +62,10 @@ The generated JWT must contain the following claims:
 - [`iss`](https://tools.ietf.org/html/rfc7519#section-4.1.1): the issuer for the token must match the value of `TALK_JWT_ISSUER`
 - [`aud`](https://tools.ietf.org/html/rfc7519#section-4.1.3): the audience for the token must match the value of `TALK_JWT_AUDIENCE`
 
-### Push token into embed
+### Generate a key to sign the JWT
+Optionally you can use https://github.com/coralproject/coralcert to generate a key with which to sign the JWTs and specify the secret as an environment variable. 
+
+### Include token in embed
 
 We're assuming that your CMS is capable of authenticating a user account, or 
 at least having the user's details available to send off to the token creation
@@ -77,15 +81,17 @@ Coral.Talk.render(document.getElementById('coralStreamEmbed'), {
 });
 ```
 
-Which will pass down the token to Talk and will fire the next steps
+Which will pass down the token to Talk and will fire the 
 `tokenUserNotFound` hook to complete the auth flow.
 
-### Implement `tokenUserNotFound`
+### Create a Custom Plugin to Generate Talk Users 
 
 This is the only piece of code you'll have to write that lives inside Talk. 
 The role of this code is to live as a plugin and provide Talk with a way of
 taking the token that you gave it, and turning into a user.
 
+Your custom plugin will need to include a `tokenUserNotFound` function that will handle creating a user in Talk from the claims provided on the JWT, refer to [`tokenUserNotFound`](/talk/api/server/#tokenusernotfound) for reference.
+
 Using the example application we were working with in the JWT issuing step
 above, we'll need to ensure that the configuration is consistent in-between both
 Talk and the JWT issuer. Namely, the following environment variables from our
@@ -102,5 +108,4 @@ example issuer and Talk must match:
 reference, the basic takeaway is that the secret used to sign the tokens issued
 by the issuer must be able to be verified by Talk.
 
-For an example of implementing the plugin, refer to [`tokenUserNotFound`](/talk/api/server/#tokenusernotfound)
-reference.
+For an example of implementing the plugin, check out our [SSO Custom Auth Recipe](https://github.com/coralproject/talk-recipes/tree/master/plugins/custom-auth)

docs/source/integrating/cms-integration.md

@@ -1,23 +1,124 @@
 ---
-title: Asset Management
-permalink: /integrating/asset-management/
+title: CMS Integration
+permalink: /integrating/cms-integration/
 ---
 
+## Embedding Comments on Your Site
+
+Talk provides an embed script that you can drop into your site where you want a comments section to appear. By default that script dynamically generate Assets
+in Talk in order to make it easier for lighter installations.
+
+You can find the embed script inside talk under `Configure > Tech Settings > Embed Script`. It should look something like this, but with your domain in place of `${TALK_ROOT_URL}`:
+
+```html
+<div id="coral_talk_stream"></div>
+<script
+  src="${TALK_ROOT_URL}/static/embed.js"
+  async
+  onload="
+  Coral.Talk.render(document.getElementById('coral_talk_stream'), {
+    talk: '${TALK_ROOT_URL}'
+  });
+"
+></script>
+```
+
+The URL for the asset is first inferred from the _Canonical link element_, which
+takes the form of a `<link>` element in your `<head>` of the page:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="canonical" href="https://example.com/page" />
+  </head>
+  <body>
+    ...
+  </body>
+</html>
+```
+
+If this tag is not present, you can also pass a `asset_url` parameter into the
+render function as:
+
+```js
+Coral.Talk.render(document.getElementById("coral_talk_stream"), {
+  talk: "${TALK_ROOT_URL}",
+  asset_url: "https://example.com/page"
+});
+```
+
+Which will explicitly force Talk to reference a particular url. This is
+recommended if your canonical url does not match the current url.
+
+> **NOTE:** If the canonical link tag or `asset_url` parameter are not present, Talk will use the current URL excluding the query and hash elements. This may lead to undesired behavior, and it is recommended to use one of the above methods of specifying the URL.
+
+## Triggering the Comments Section (client side, i.e. Your site)
+
+When the embed script is triggered on your page load several things are initiated inside Talk, including fetching all comments for the specified article, establishing websocket connections for this user, and checking user’s session for SSO/authentication.
+
+Instead of greedily triggering the embed to render on _EVERY PAGE LOAD_, we highly recommend implementing a _“lazy”_ rendering strategy to only render the comments section if a user wants to interact with it. This will greatly improve your initial page load performance, and will be critical to managing server resources if you’re running Talk on a heavy-traffic production site.
+
+We recommend using one of these _“lazy”_ loading strategies:
+
+#### Scroll to Comments Section
+
+Wait for user to scroll to the comment section before triggering the embed to render.
+
+You can pass lazy: true to the render options, like so:
+
+```js
+Coral.Talk.render(document.getElementById("container"), {
+  talk: "${TALK_ROOT_URL}",
+  lazy: true
+});
+```
+
+Or you can enable lazy rendering by default on all assets using ENV variable `TALK_DEFAULT_LAZY_RENDER=TRUE`
+
+_\*Note: This feature requires Talk version 4.6.8 or greater_
+
+#### Show Comments Button
+
+You can hide the comments section until a user clicks button, then trigger the embed to render
+
+This example uses jQuery to render the embed on the button's click event
+
+```html
+<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+
+<div id="coral_talk_stream">
+  <button>Show Comments</button>
+</div>
+
+<script type="text/javascript">
+  $("#coral_talk_stream button").on("click", function() {
+    $.getScript("${TALK_ROOT_URL}/static/embed.js", function() {
+      Coral.Talk.render(document.getElementById("coral_talk_stream"), {
+        talk: "${TALK_ROOT_URL}"
+      });
+    });
+  });
+</script>
+```
+
+## Creating Assets in Talk (server side, i.e. What you need to send to Talk)
+
 One of the most frequent questions that we get asked by organizations trying to
 integrate Talk is: _How do we hook our CMS up to Talk so that articles are in
 sync?_
 
-This guide is designed to explain the steps to take your base installation of
-Talk and configure it to allow only assets pushed into it from your CMS, and
-keep your URL/title in sync. We won't cover here how to install the plugin, as
-it is covered in our [Plugins Overview](/talk/plugins/).
+### “Lazy Asset Creation”
 
-## Why do we need to create a plugin?
+Talk’s provided embed script by default dynamically generates Assets in Talk based on each unique url that triggers it. The url must reference an existing Permitted Domain. If your articles/stories always have unique urls, then you will not need to modify the default behavior.
 
-By default, Talk will use "Lazy Asset Creation" to dynamically generate Assets
-in Talk in order to make it easier for lighter installations. In order to have
-more strict control over this flow, we will create a plugin that will:
+Assets created in this way will then be scraped to load metadata, see [Asset Scraping](/talk/integrating/asset-scraping/)
 
+## Customizing the Integration with a Plugin
+
+In order to have more strict control over the asset creation flow to allow only assets pushed into it from your CMS, and keep your URL/title in sync we will create a plugin.
+
+We will create a plugin that will:
 
 1. Disable "Lazy Asset Creation" by [Overriding a Resolver](#overriding-a-resolver).
 2. Create Assets from our CMS by [Creating a New Asset Route](#creating-a-new-asset-route).
@@ -25,6 +126,8 @@ more strict control over this flow, we will create a plugin that will:
 
 We will then modify our embed so that we can [Target the Asset](#target-the-asset).
 
+This guide is designed to explain the steps to take your base installation of Talk and configure it. We won't cover here how to install the plugin, as it is covered in our [Plugins Overview](/talk/plugins/).
+
 But first we should grab our basic plugin structure:
 
 ```sh
@@ -68,8 +171,8 @@ module.exports = {
 
       // Send the asset back.
       return asset;
-    },
-  },
+    }
+  }
 };
 ```
 
@@ -97,14 +200,14 @@ We'll replace the contents of the `router.js` file with the following:
 // This file we'll create routes that will facilitate asset creation and
 // updates.
 
-const authz = require('middleware/authorization');
+const authz = require("middleware/authorization");
 
 module.exports = router => {
   // We'll respond to a POST request on the following route where the request
   // must have a valid ADMIN access token.
   router.post(
-    '/api/v1/plugin/asset-manager-example',
-    authz.needed('ADMIN'),
+    "/api/v1/plugin/asset-manager-example",
+    authz.needed("ADMIN"),
     async (req, res, next) => {
       // Get the graph context from the request.
       const { context } = req;
@@ -112,7 +215,11 @@ module.exports = router => {
       // Grab from the graph context, the AssetModel that we can use to create
       // the new Asset. Lots of object destructuring here, but this lets us keep
       // the important business logic cleaner.
-      const { connectors: { models: { Assets } } } = context;
+      const {
+        connectors: {
+          models: { Assets }
+        }
+      } = context;
 
       try {
         // Now we can create the asset that was passed to us in the body of the
@@ -147,20 +254,24 @@ CMS using the Talk cli tool:
 
 You can attach the generated token to the request a few ways:
 
-1. HTTP Header:
+1.  HTTP Header:
 
-        curl ${TALK_ROOT_URL}/api/v1/plugin/asset-manager-example \
-            -XPOST \
-            -H "Authorization: Bearer ${TOKEN}" \
-            -H "Content-Type: application/json" \
-            --data "${ASSET_JSON}"
+```sh
+curl ${TALK_ROOT_URL}/api/v1/plugin/asset-manager-example \
+    -XPOST \
+    -H "Authorization: Bearer ${TOKEN}" \
+    -H "Content-Type: application/json" \
+    --data "${ASSET_JSON}"
+```
 
-2. Query Parameter:
+2.  Query Parameter:
 
-        curl ${TALK_ROOT_URL}/api/v1/plugin/asset-manager-example?access_token=${TOKEN}
-            -XPOST \
-            -H "Content-Type: application/json" \
-            --data "${ASSET_JSON}"
+```sh
+curl ${TALK_ROOT_URL}/api/v1/plugin/asset-manager-example?access_token=${TOKEN}
+    -XPOST \
+    -H "Content-Type: application/json" \
+    --data "${ASSET_JSON}"
+```
 
 Where `${ASSET_JSON}` is the JSON for your Asset matching the
 [AssetSchema](https://github.com/coralproject/talk/blob/master/models/asset.js).
@@ -178,14 +289,14 @@ Update your `router.js` to the following:
 // This file we'll create routes that will facilitate asset creation and
 // updates.
 
-const authz = require('middleware/authorization');
+const authz = require("middleware/authorization");
 
 module.exports = router => {
   // We'll respond to a POST request on the following route where the request
   // must have a valid ADMIN access token.
   router.post(
-    '/api/v1/plugin/asset-manager-example',
-    authz.needed('ADMIN'),
+    "/api/v1/plugin/asset-manager-example",
+    authz.needed("ADMIN"),
     async (req, res, next) => {
       // Get the graph context from the request.
       const { context } = req;
@@ -193,7 +304,11 @@ module.exports = router => {
       // Grab from the graph context, the AssetModel that we can use to create
       // the new Asset. Lots of object destructuring here, but this lets us keep
       // the important business logic cleaner.
-      const { connectors: { models: { Assets } } } = context;
+      const {
+        connectors: {
+          models: { Assets }
+        }
+      } = context;
 
       try {
         // Now we can create the asset that was passed to us in the body of the
@@ -212,8 +327,8 @@ module.exports = router => {
   // We'll respond to a PUT request on the following route where the request
   // must also have a valid ADMIN access token.
   router.put(
-    '/api/v1/plugin/asset-manager-example/:id',
-    authz.needed('ADMIN'),
+    "/api/v1/plugin/asset-manager-example/:id",
+    authz.needed("ADMIN"),
     async (req, res, next) => {
       // Get the graph context from the request.
       const { context } = req;
@@ -221,7 +336,11 @@ module.exports = router => {
       // Grab from the graph context, the AssetModel that we can use to update
       // the Asset. Lots of object destructuring here, but this lets us keep
       // the important business logic cleaner.
-      const { connectors: { models: { Assets } } } = context;
+      const {
+        connectors: {
+          models: { Assets }
+        }
+      } = context;
 
       try {
         // Now we can lookup the asset we're updating and apply out updates to
@@ -231,7 +350,7 @@ module.exports = router => {
           req.body,
           {
             // We want to validate the model being updated.
-            runValidators: true,
+            runValidators: true
           }
         );
         if (!asset) {
@@ -282,23 +401,31 @@ When you install Talk, and visit the admin panel, we can see under
 
 ```html
 <div id="coral_talk_stream"></div>
-<script src="${TALK_ROOT_URL}static/embed.js" async onload="
+<script
+  src="${TALK_ROOT_URL}static/embed.js"
+  async
+  onload="
   Coral.Talk.render(document.getElementById('coral_talk_stream'), {
     talk: '${TALK_ROOT_URL}'
   });
-"></script>
+"
+></script>
 ```
 
 We'll modify this to the following:
 
 ```html
 <div id="coral_talk_stream"></div>
-<script src="${TALK_ROOT_URL}static/embed.js" async onload="
+<script
+  src="${TALK_ROOT_URL}static/embed.js"
+  async
+  onload="
   Coral.Talk.render(document.getElementById('coral_talk_stream'), {
     talk: '${TALK_ROOT_URL}',
     asset_id: '${ASSET_ID}'
   });
-"></script>
+"
+></script>
 ```
 
 Adding the `asset_id` parameter to the render function will accomplish a very
@@ -308,8 +435,10 @@ the URL in the future, the embed will still reference the correct Asset. The
 `${ASSET_ID}` should be replaced by your CMS with the correct Asset id using
 your desired scripting/templating tools.
 
+> **NOTE:** When used in conjunction with `asset_url`, you can explicitly force Talk to use a specified URL, rather than the canonical for link references. When used together, both `asset_id` and `asset_url` will be treated as unique identifiers for Talk assets.
+
 At this point, you should have a fully built Talk plugin that can be paired with
 some work on your CMS to create a fully integrated asset management pipeline!
 
 To view the fully completed source code, visit
-https://github.com/coralproject/talk-plugin-asset-manager-example.
+https://github.com/coralproject/talk-plugin-asset-manager-example.

docs/source/integrating/event-tracking-metrics.md

@@ -3,9 +3,19 @@ title: Tracking Talk Events and Metrics
 permalink: /integrating/event-tracking-metrics/
 ---
 
-Talk supports event emitting via Redux, Apollo and GraphQL. This means that common actions taken within Talk, such as successfully posting a comment, posting a reaction, or changing a setting, are automatically emitted from Talk. To send these events to your analytics tool of choice, however, will require some integration on your part.
+Talk supports event emitting. This means that common actions taken within Talk, such as successfully posting a comment, posting a reaction, or changing a setting, are automatically emitted from Talk. To send these events to your analytics tool of choice, you’ll need to configure your Talk embed to process them. 
 
-First, we want to uncomment the tracking code in `article.ejs` (https://github.com/coralproject/talk/blob/93bda87ad061a2dc5eb8dc5b65a579a20efb76f7/views/article.ejs#L34). This will enable events to be sent via the Talk embed that is on your article pages. This will start a stream of events to the browser console, so that you can see which events are available.
+The following example demonstrates how the event emitter works on a sample article page generated by Talk. When you’re ready to capture and handle events from your actual site, add the events property along with your event handling functions to your Talk embed script. 
+
+## Example Using Local Development Instance of Talk
+If you have Talk running in a local development environment you can follow these steps to first view all of the events emitted by Talk, and then capture the `PostComment.success` event and send it to a third party analytics provider. 
+
+
+First, with Talk running, ensure that you can access the `/dev/assets` endpoint and create a random article (i.e.: `localhost:3000/dev/assets`).
+
+
+Then in Talk, uncomment the events code in `/views/dev/article.njk` 
+(https://github.com/coralproject/talk/blob/master/views/dev/article.njk#L32). This will enable events to be sent via the Talk embed that is on the sample article page. This will start a stream of events to the browser console, so that you can see which events are available.
 
 ```
     events: function(events) {
@@ -16,7 +26,10 @@ First, we want to uncomment the tracking code in `article.ejs` (https://github.c
    },
 ```
 
-Now, we want to add our code that sends the events to our analytics system. In this case, we're sending the `PostComment.success` event. The particular way you send this will depend on what tool you're using. Refer to your tool's API and docs to determine this.
+Save your changes to `article.njk`, restart Talk, and try refreshing your article in a browser with development console open. You should see the console log the list of Talk’s events.
+
+
+Next, we want to add our code that sends the events to our analytics system. In this example, we're sending the `PostComment.success`  event. The particular way you send this will depend on what tool you're using. Refer to your tool's API and docs to determine this.
 
 ```
     events: function(events) {
@@ -30,4 +43,24 @@ Now, we want to add our code that sends the events to our analytics system. In t
 ```
 You can continue this process for any specific events you'd like to track. You can also remove the `console.log` to stop events being emitted to the browser and instead only send the events to your analytics tool.
 
-PR for Reference: https://github.com/coralproject/talk/pull/785
+## Metrics List
+
+Note: This is not an exhaustive list, but should get you started.
+
+```
+mutation.CreateRespectAction.success
+mutation.CreateLikeAction.success
+mutation.PostComment.success
+mutation.PostFlag.success
+mutation.EditComment.success
+
+action.CORAL_STREAM_SET_ACTIVE_TAB
+action.SHOW_SIGNIN_DIALOG
+action.FOCUS_SIGNIN_DIALOG
+action.TALK_FRAMEWORK_HANDLE_SUCCESSFUL_LOGIN
+action.HIDE_SIGNIN_DIALOG
+action.TALK_VIEWING_OPTIONS_OPEN_MENU
+action.TALK_VIEWING_OPTIONS_CLOSE_MENU
+action.CORAL_STREAM_SET_SORT
+action.SET_ACTIVE_REPLY_BOX
+```

docs/source/integrating/notifications.md

@@ -3,22 +3,13 @@ title: Notifications
 permalink: /integrating/notifications/
 ---
 
-Talk currently supports 3 types of email notifications.
+There are several plugins included with Talk that once enabled will control how and when Talk sends emails to users based on user activity. Only basic user profile notifications are enabled by default. 
 
-
-1. When someone replies to my comment
-2. When a staff member replies to my comment
-3. When my comment gets featured
-
-Talk support 3 options for notification frequency: immediately, hourly or daily. Commenters can also opt-out of email notifications. Notifications are set to OFF by default.
-
-Commenters cannot enable notifications until they have verified their email.
-
-Note: Notifications are not currently supported for users that sign-up via Facebook or Google auth, or don't have an email attached to their account for any other reason.
+_NOTE: Notifications are only supported for users that have an email address in Talk! If you are using authenticate via Facebook, Google, or SSO and you want to persist the user’s email, you will also need to enable `talk-plugin-local-auth` ([See Authentication](/talk/integrating/authentication/))_
 
 ### Configuring SMTP
 
-You must setup SMTP to use notifications. The following ENV variables must be set:
+You must setup SMTP to send email notifications. The following ENV variables must be set:
 
 ```
 TALK_SMTP_FROM_ADDRESS=email@email.com
@@ -28,28 +19,74 @@ TALK_SMTP_HOST=smtp.domain.net
 TALK_SMTP_PORT=2525
 ```
 
-### Enabling Notifications
+See our documentation on [setting env variables](/talk/advanced-configuration/#talk-smtp-from-address) for reference. 
 
-Enabling the `talk-plugin-notifications` creates a NotificationManager that creates and manages events send from the event emitter that is linked to the Graph API PubSub system.
+When running Talk in production we recommend using a 3rd party mail service provider like SendGrid or MailGun. 
 
-Adding the `talk-plugin-notifications` plugin will also enable the `notifications` plugin hook. Any plugin that registers before the `talk-plugin-notifications` plugin will get picked up by.
+If you are having difficulty with your SMTP settings you can add `DEBUG=talk:jobs:mailer` to your .env to see additional logs from the mailer service.
 
-See https://github.com/coralproject/talk/blob/8b669a31c551a042f0f079d8cfc16825673eb8f0/plugins/talk-plugin-notifications-reply/index.js for an example.
+All notifications require SMTP settings to be correctly configured first, then enable the corresponding plugin, and configure any settings in the Talk Admin. If SMTP is not enabled, it will log to the server console that some variables were not provided.
 
-### Notification Categories
+### Notification Types & Plugins
 
-Talk currently supports the following Notifications options out of the box:
+In addition to the core notifications included with Talk, some plugins add features that are supported by and will add additional types of email notifications. Commenters can opt-out of most email notifications, and comment activity notifications are set to OFF by default. Commenters cannot enable notifications until they have verified their email.
 
-`talk-plugin-notifications-category-reply`
-`talk-plugin-notifications-category-staff-reply`
-`talk-plugin-notifications-category-featured`
+You can see a list of all the plugins related to notifications by visiting:
+https://docs.coralproject.net/talk/plugins-directory/?q=notifications
+
+#### Type: User Profile Notifications (Included by Talk core)
+
+* When user registers, sends email confirmation and verification 
+* When user requests password reset 
+* When user changes username, sends confirmation
+* When a user is banned or suspended
+
+_NOTE: Users can not opt-out of User Profile Notifications_
+
+#### Type: GDPR Notifications (optional)
+`talk-plugin-profile-data:`
+* When my comment history is ready for download (only one link can be generated every 7 days, and the link is valid for 24 hours)
+
+`talk-plugin-local-auth:`
+* When user changes their email address
+* When a user adds a new email address 
+
+#### Type: Comment Activity Notifications (optional)
+Talk support 3 options for notification frequency for this type of notification: 
+* immediately
+* hourly 
+* daily
+
+`talk-plugin-notifications:`
+* Enables notifications configuration (required for all comment activity notifications below)
+
+`talk-plugin-notifications-category-reply:`
+* When someone replies to my comment
+
+`talk-plugin-notifications-category-staff-reply:`
+* When a staff member replies to my comment
+
+`talk-plugin-notifications-category-featured:`
+* When my comment gets featured
 
 ### Notification Digests
 
+Notification digests are enabled by enabling the corresponding plugin, otherwise comment activity notifications are sent immediately.
+* `talk-plugin-notifications-digest-daily`
+* `talk-plugin-notifications-digest-hourly`
+
 Talk supports hourly and daily digests out the box, if you would like to create your own, refer to the below:
 
 https://github.com/coralproject/talk/blob/9cc9969320dca47bb0f8f81e8d944ae4d19e548b/plugins/talk-plugin-notifications/server/connect.js#L69-L102
         
+
+### Customizing Notifications
+
+Enabling the `talk-plugin-notifications` creates a NotificationManager that creates and manages events send from the event emitter that is linked to the Graph API PubSub system. This allows the instance that received the mutation to also fire off a notification job that can be handled. It also enabels the `notifications` plugin hook. Any plugin that registers after the `talk-plugin-notifications` can export the notifications plugin to reference it.
+
+See https://github.com/coralproject/talk/blob/8b669a31c551a042f0f079d8cfc16825673eb8f0/plugins/talk-plugin-notifications-reply/index.js for an example.
+
+
 ### Connect API
 
 This exposes the `graph/connectors.js` via the `connect` hook.
@@ -67,3 +104,12 @@ See https://github.com/coralproject/talk/blob/90290cfa2de88e62f687e1ed0235ba6dfe
 ### Email Templates
 
 Email templates are text based and support translations. If you would like to create a new email template, you can register it via the Connect API, see https://github.com/coralproject/talk/blob/8b669a31c551a042f0f079d8cfc16825673eb8f0/plugins/talk-plugin-notifications/server/connect.js#L12-L28### 
+
+Any email template registered with the same name as another template will replace the existing template for that type of email.  _NOTE: that also means that the template data sent to each email template will __not__ change, so bear that in mind when designing templates that you may not have rich access to data._
+
+An example of this is with the `talk-plugin-notifications-category-featured` plugin:
+
+Notification translation is located: https://github.com/coralproject/talk/blob/dd0601a80132d2849c53ef7eaf12ff382f3920b9/plugins/talk-plugin-notifications-category-featured/translations.yml#L13
+
+Where the template content is provided: https://github.com/coralproject/talk/blob/dd0601a80132d2849c53ef7eaf12ff382f3920b9/plugins/talk-plugin-notifications-category-featured/index.js#L79
+

docs/source/plugin/talk-plugin-notifications-category-moderation-actions.md

@@ -0,0 +1,18 @@
+---
+title: talk-plugin-notifications-category-moderation-actions
+permalink: /plugin/talk-plugin-notifications-category-moderation-actions/
+layout: plugin
+plugin:
+    name: talk-plugin-notifications-moderation-actions
+    default: true
+    depends:
+        - name: talk-plugin-notifications
+    provides:
+        - Server
+        - Client
+---
+
+When a comment that is initially withheld from publication and is then approved or rejected, the user will receive a notification email.
+
+Configuration:
+`TALK_MODERATION_NOTIFICATION_TYPES`. This plugin requires values to be set. Available options: `APPROVED`, `REJECTED` as a single string (comma separated).

docs/source/plugins/overview.md

@@ -67,9 +67,9 @@ External plugins can be resolved by running:
 This achieves two things:
 
 1. It will traverse into local plugin folders and install their dependencies.
-  _Note that if the plugin is already installed and available in the
+  __Note that if the plugin is already installed and available in the
   node_modules folder, it will not be fetched again unless there is a version
-  mismatch._ This will result in the project `package.json` and `yarn.lock`
+  mismatch.__ This will result in the project `package.json` and `yarn.lock`
   files to be modified, this is normal as this ensures that repeated deployments
   (with the same config) will have the same config, these changes should not be
   committed to source control.
@@ -111,7 +111,7 @@ If you deploy using Docker, you can extend from the `*-onbuild` image, an
 example `Dockerfile` for your project could be:
 
 ```Dockerfile
-FROM coralproject/talk:4.5-onbuild
+FROM coralproject/talk:4-onbuild
 ```
 
 Establish a private repository for your instance that includes the following:

docs/source/version-5-api.md

@@ -0,0 +1,203 @@
+---
+title: GraphQL API Overview
+permalink: /v5/api/overview/
+---
+
+Our API is generally served via GraphQL at `/api/graphql` on your Coral installation. If you're running Coral locally, this would be https://localhost:8080/api/graphql.
+
+You can enable the GraphiQL interface at https://localhost:3000/graphiql (Note the port number here is not 8080, this is because this route is directly served by the server, and not the webpack development server) when running in development to access a GraphQL playground to use with documentation provided in the sidebar on what edges are available to you. You can do this by setting `ENABLE_GRAPHIQL=true`. **(🚨 Note 🚨) we do not recommend using this in production environments as it disables many safety features used by the application**.
+
+## Making your first request
+
+To learn a bit about how to interact with Coral, we'll query for comments on a
+page of Coral.
+
+The GraphQL endpoint we have can be used with any HTTP client available, but our
+examples below will use the common `curl` tool:
+
+```sh
+curl --request POST \
+  --url "http://localhost:8080/api/graphql" \
+  --header "content-type: application/json" \
+  --data '{"query":"query GetComments($url: String!) {story(url: $url) { id metadata { title } url comments { nodes { id body author { id username } } } } }","variables":{"url":"http://localhost:8080/"},"operationName":"GetComments"}'
+```
+
+When you unpack that, it's really quite simple. We're executing a `POST` request
+to the `/api/graphql` route of the local Talk server with the GraphQL
+request we want to make. It's composed of the `query`, `variables`, and
+`operationName`.
+
+```graphql
+query GetComments($url: String!) {
+  story(url: $url) {
+    metadata {
+      title
+    }
+    url
+    comments {
+      nodes {
+        body
+        author {
+          username
+        }
+      }
+    }
+  }
+}
+```
+
+We are grabbing the asset with the specified `$url`, and grabbing it's title and the comments under it.
+
+We can then also specify our variables to the query being executed (in this
+case, the url for the page where we have comments on our local install of Coral):
+
+```json
+{
+  "url": "http://localhost:8080/"
+}
+```
+
+It's also sometimes common to have multiple queries within a query, which is
+where the `operationName` comes into play, where we simply specify the named
+query that we want to execute (in this case, `GetComments`).
+
+To get a deeper understanding of GraphQL queries, read up on
+[GraphQL Queries and Mutations](http://graphql.org/learn/queries/).
+
+## Understanding the response
+
+Once you completed the above GraphQL query with `curl`, you'll get a response
+sort of like this:
+
+```json
+{
+  "data": {
+    "story": {
+      "metadata": {
+        "title": "Coral 5.0 – Embed Stream"
+      },
+      "url": "http://localhost:8080/",
+      "comments": {
+        "nodes": [
+          {
+            "body": "First comment!",
+            "author": {
+              "username": "wyatt.johnson"
+            }
+          }
+        ]
+      }
+    }
+  }
+}
+```
+
+All of the parameters you requested should be available under the `data`
+property. Any errors that you get would appear in a `errors` array at the top
+level, like this:
+
+```json
+{
+  "errors": [
+    {
+      "message": "The specified story URL does not exist in the permitted domains list.",
+      "locations": [
+        {
+          "line": 2,
+          "column": 3
+        }
+      ],
+      "path": ["story"],
+      "extensions": {
+        "code": "STORY_URL_NOT_PERMITTED",
+        "id": "e255e860-d3ab-11e9-acdf-b9e9700f06fa",
+        "type": "INVALID_REQUEST_ERROR",
+        "message": "The specified story URL does not exist in the permitted domains list."
+      }
+    }
+  ],
+  "data": {
+    "story": null
+  }
+}
+```
+
+You should know that any property that is marked with a `!` is considered
+required, and non-nullable, which means you can always guarantee on it being
+there in your request if there were no errors.
+
+## Authorizing a request
+
+Some queries you may notice seem to return an error of
+`USER_NOT_ENTITLED`. It's likely the case that you are making a request to a
+route that requires authorization. You can perform authorization a few ways in
+Talk.
+
+Essentially, you need to get access to a JWT token that you can use to authorize
+your requests.
+
+```sh
+curl --request POST \
+  --url http://localhost:3000/api/auth/local \
+  --header 'content-type: application/json' \
+  --data '{ "email": "${EMAIL}", "password": "${PASSWORD}"}'
+```
+
+Which returns a response similar to:
+
+```json
+{
+  "token": "${TOKEN}"
+}
+```
+
+Where `${EMAIL}` is the email address of an admin user, and `${PASSWORD}` is the password for that admin user. This will generate a short term token (valid for 90 days). To generate a long lived access token (or Personal Access Token), you have to exchange the token generated above to create a new long lived token:
+
+```sh
+curl --request POST \
+  --url "http://localhost:3000/api/graphql" \
+  --header 'authorization: Bearer ${TOKEN}' \
+  --header 'content-type: application/json' \
+  --data '{"query":"mutation CreateAccessToken { createToken(input: { clientMutationId: \"\", name: \"My PAT\" }) { signedToken }}","operationName":"CreateAccessToken"}'
+```
+
+Which returns a response similar to:
+
+```json
+{
+  "data": {
+    "createToken": {
+      "signedToken": "${TOKEN}"
+    }
+  }
+}
+```
+
+Where `${TOKEN}` in the request being from the previous set of login steps and returning a new `signedToken` as `${TOKEN}` which can be used instead of the previous `${TOKEN}` value in the below examples.
+
+Once you have your access token, you can substitute it as `${TOKEN}` in your
+`curl` request as follows:
+
+### Bearer Token
+
+```sh
+curl --request POST \
+  --url "http://localhost:8080/api/graphql" \
+  --header "content-type: application/json" \
+  --header "Authorization: Bearer ${TOKEN}" \
+  --data '{"query":"query GetComments($url: String!) {story(url: $url) { id metadata { title } url comments { nodes { id body author { id username } } } } }","variables":{"url":"http://localhost:8080/"},"operationName":"GetComments"}'
+```
+
+### Cookie
+
+```sh
+curl --request POST \
+  --url "http://localhost:8080/api/graphql" \
+  --header "content-type: application/json" \
+  --cookie "authorization=${TOKEN}"
+  --data '{"query":"query GetComments($url: String!) {story(url: $url) { id metadata { title } url comments { nodes { id body author { id username } } } } }","variables":{"url":"http://localhost:8080/"},"operationName":"GetComments"}'
+```
+
+## Persisted Queries
+
+You might see an error like `RAW_QUERY_NOT_AUTHORIZED`. This means that you attempted to use either no token, or a token from a user without admin privileges. In Coral, we whitelist the GraphQL mutations and queries that are performed by the applications for security reasons meaning that only admin users can make arbitrary queries against the GraphQL API.

docs/source/version-5-configuration.md

@@ -0,0 +1,67 @@
+---
+title: Configuring Version 5
+permalink: /v5/configuration/
+---
+
+The following environment variables can be set to configure the Coral Server. You
+can expose them in your shell via `export NODE_ENV=development` or by placing
+the variables in a `.env` file in the root of the project in a simple
+`NODE_ENV=development` format delimited by newlines.
+
+- `NODE_ENV` - Can be one of `production` or `development`. All production
+  deployments should use `production`. Defaults to `production` when ran with
+  `npm run start` and `development` when run with `npm run start:development`.
+- `PORT` - The port to listen for HTTP and Websocket requests. (Default `3000`)
+- `MONGODB_URI` - The MongoDB database URI to connect to.
+  (Default `mongodb://127.0.0.1:27017/coral`)
+- `REDIS_URI` - The Redis database URI to connect to.
+  (Default `redis://127.0.0.1:6379`)
+- `REDIS_OPTIONS` - A JSON string with optional configuration options to be used
+  when connecting to Redis as specified in the [ioredis](https://github.com/luin/ioredis/blob/1dac50a63753c2afc969315cfe38faf0edc50bc5/API.md#new_Redis_new) documentation.
+  (Default: `{}`)
+- `SIGNING_SECRET` - The shared secret to use to sign JSON Web Tokens (JWT) with
+  the selected signing algorithm. 🚨 **Don't forget to set this variable!** 🚨
+  (Default: `keyboard cat`)
+- `SIGNING_ALGORITHM` - The signing algorithm to use for signing JWT's.
+  (Default `HS256`).
+- `LOGGING_LEVEL` - The logging level that can be set to one of `fatal`,
+  `error`, `warn`, `info`, `debug`, or `trace`. (Default `info`)
+- `STATIC_URI` - The URI that static assets can be accessed from. This URI can
+  be to a proxy that uses this Coral server on `PORT` as the upstream. Disabled
+  by default.
+- `DISABLE_TENANT_CACHING` - When `true`, all tenants will be loaded from the
+  database when needed rather than keeping a in-memory copy in sync via
+  published events on Redis. (Default `false`)
+- `DISABLE_MONGODB_AUTOINDEXING` - When `true`, Coral will not perform indexing
+  operations when it starts up. This can be desired when you've already
+  installed Coral on the target MongoDB, but want to improve start performance.
+  **You should not use this parameter unless you know what you're doing! Upgrades
+  may introduce additional indexes that the application relies on.**
+  (Default `false`)
+- `LOCALE` - Specify the default locale to use for all requests without a locale
+  specified. (Default `en-US`)
+- `ENABLE_GRAPHIQL` - When `true`, it will enable the `/graphiql` even in
+  production, use with care. (Default `false`)
+- `CONCURRENCY` - The number of worker nodes to spawn to handle web traffic,
+  this should be tied to the number of CPU's available. (Default
+  `os.cpus().length`)
+- `DEV_PORT` - The port where the Webpack Development server is running on.
+  (Default `8080`)
+- `METRICS_USERNAME` - The username for _Basic Authentication_ at the `/metrics` and `/cluster_metrics`
+  endpoint.
+- `METRICS_PASSWORD` - The password for _Basic Authentication_ at the `/metrics` and `/cluster_metrics`
+  endpoint.
+- `CLUSTER_METRICS_PORT` - If `CONCURRENCY` is more than `1`, the metrics are provided at this port under `/cluster_metrics`. (Default `3001`)
+- `DISABLE_LIVE_UPDATES` - When `true`, disables subscriptions for the comment
+  stream for all stories across all tenants (Default `false`)
+- `WEBSOCKET_KEEP_ALIVE_TIMEOUT` - A duration in a parsable format (e.g. `30 seconds`
+  , `1 minute`) that should be used to send keep alive messages through the
+  websocket to keep the socket alive (Default `30 seconds`)
+- `TRUST_PROXY` - When provided, it configures the "trust proxy" settings for Express (See https://expressjs.com/en/guide/behind-proxies.html)
+
+## `TRUST_PROXY`
+
+If you are encountering issues where urls in the administration are showing with
+a `http` instead of `https`, you may need to set the `TRUST_PROXY` setting.
+Refer to https://expressjs.com/en/guide/behind-proxies.html for possible values
+of this configuration variable as it pertains to your setup.

docs/source/version-5-counts.md

@@ -0,0 +1,38 @@
+---
+title: Comment Count Integration
+permalink: /v5/integrating/counts/
+---
+
+Add the `count.js` script to your `html` tree. On a page that includes the _Stream Embed_ this is done for you automatically, however for best performance we recommend to include it into the `<head>` tag.
+
+```html
+<script src="//{{ CORAL_DOMAIN_NAME }}/assets/js/count.js" defer></script>
+```
+
+> **NOTE:** Replace the value of `{% raw %}{{ CORAL_DOMAIN_NAME }}{% endraw %}` with the location of your running instance of Coral.
+
+Insert an html element with the class `coral-count` and configure it using `data-coral-*` attributes. 
+
+```html
+<span class="coral-count" data-coral-url="http://example.com/blog-entry-1/"></span>
+```
+
+After successful injection it will become:
+
+```html
+<span class="coral-count" data-coral-url="http://example.com/blog-entry-1/">
+   <span class="coral-count-number">5</span>
+  <span class="coral-count-text">Comments</span>
+</span>
+```
+
+### Available `data-coral-*` attributes
+
+Set the class of your html element to `coral-count` in order to get story counts. The following `data-coral-*` attributes will configure the output:
+
+- `data-coral-id` – The id of the story of which counts should be injected.
+- `data-coral-url` – The url of the story of which counts should be injected.
+- `data-coral-notext` – If set to `"true"`, only the count number will be injected
+
+Either `data-coral-id` or `data-coral-url` should be set. If none are provided the story url
+will be retrieved from the [canonical url reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs#Using_%3Clink_relcanonical%3E) `<link rel="canonical" href="...">` or inferred using the current page url.

docs/source/version-5-development.md

@@ -0,0 +1,103 @@
+---
+title: Developing
+permalink: /v5/developing/
+---
+
+Running Coral for development is very similar to installing Coral via Source as
+described above.
+
+Coral requires NodeJS >=12, we recommend using `nvm` to help manage node
+versions: https://github.com/creationix/nvm.
+
+```bash
+# Clone and cd into the Coral directory.
+git clone https://github.com/coralproject/talk.git
+cd talk
+
+# Install dependencies.
+npm install
+```
+
+Running Coral with default settings assumes that you have:
+
+- MongoDB >=4.2 running on `127.0.0.1:27017`
+- Redis >=3.2 running on `127.0.0.1:6379`
+
+If you don't already have these databases running, you can execute the following
+assuming you have Docker installed on your local machine:
+
+```bash
+docker run -d -p 27017:27017 --restart always --name mongo mongo:4.2
+docker run -d -p 6379:6379 --restart always --name redis redis:3.2
+```
+
+We recommend installing [watchman](https://facebook.github.io/watchman/docs/install.html) for better watch
+performance.
+
+```bash
+# On macOS, you can run the following with Homebrew.
+brew update
+brew install watchman
+```
+
+Then start Coral with:
+
+```bash
+# Run the server in development mode in order to facilitate auto-restarting and
+# rebuilding when file changes are detected. This might take a while to fully run.
+npm run watch
+```
+
+When the client code has been built, navigate to http://localhost:8080/install
+to start the installation wizard. **Note: Ensure `localhost:8080` is used in the permitted domains list.**
+
+To see the comment stream goto http://localhost:8080/.
+
+To run linting and tests use the following commands:
+
+```bash
+# Run the linters.
+npm run lint
+
+# Run our unit and integration tests.
+npm run test
+```
+
+## Email
+
+To test out the email sending functionality, you can run [inbucket](https://www.inbucket.org/)
+which provides a test SMTP server that can visualize emails in the browser:
+
+```bash
+docker run -d --name inbucket --restart always -p 2500:2500 -p 9000:9000 inbucket/inbucket
+```
+
+You can then configure the email server on Coral
+by setting the email settings in
+`Configure -> Email` in the admin:
+
+| Field          | Value                |
+| -------------- | -------------------- |
+| From Address   | `community@test.com` |
+| Secure         | `No`                 |
+| Host           | `localhost`          |
+| Port           | `2500`               |
+| Authentication | `No`                 |
+
+Navigate to http://localhost:9000, click the "Monitor" tab. New emails received
+on this screen.
+
+## Design Language System (UI Components)
+
+We use [docz](https://docz.site) to document and develop our Design Language System. To start docz run:
+
+```bash
+# Make sure CSS types are generated.
+# This is not required when `npm run watch` is already running.
+npm run generate:css-types
+
+# Run docz in development.
+npm run docz -- dev
+```
+
+After compilation has finished you can access docz at http://localhost:3030/.

docs/source/version-5-gdpr.md

@@ -0,0 +1,39 @@
+---
+title: GDPR Compliance
+permalink: /v5/integrating/gdpr/
+---
+
+In order to facilitate compliance with the
+[EU General Data Protection Regulation (GDPR)](https://www.eugdpr.org/), Coral
+provides features so your users can change and manage their own data.
+
+Even if GDPR will not apply to you, it is recommended to enable these
+features as a best practice to provide your users with control over their own
+data.
+
+## GDPR Feature Overview
+
+Integrating our GDPR tools will give your users and organizations the following benefits:
+
+- **Download my comment data**: Users can request a download of their comments. An email with a link is emailed to them to download a CSV with each comment they've made, what story it was made on, and the comment's ID and timestamp.
+- **Delete my account**: Users can request deletion of their account. Deleted account requests are pending for 24 hours to allow the user to download their comments, or to change their mind and reactivate their account before the expiry. Account deletions remove all of their comments from the site, all their comments and actions from the database, and their account info from our system.
+- **Add an email to an OAuth/external account**: Users are prompted to add an email to their non-Coral account (Facebook, Google, external, etc) so that they can take part in GDPR and other features requiring email communication.
+- **Change my username**: Users can update their username. This is capped at once every 2 weeks.
+- **Change my email**: Users can change their email.
+- **Change my password**: Users can change their password.
+
+## GDPR with SSO
+
+As many newsrooms often implement their own [SSO solutions](/talk/v5/integrating/sso/),
+we also provide API support to manage GDPR features directly from your own Account or My Profile page.
+
+We provide the following GraphQL mutations designed to allow you to integrate it into your existing user
+interfaces or exports.
+
+- `requestUserCommentsDownload` - lets you grab the direct link to download a users
+  account in a zip format. From there, you can integrate it into your existing
+  data export or simply proxy it to the user to allow them to download it
+  elsewhere in your UI.
+- `deleteUserAccount` - lets you delete the specified user
+
+**Note: These mutations require an administrative token**

docs/source/version-5-installation.md

@@ -0,0 +1,120 @@
+---
+title: Installing Version 5
+permalink: /
+---
+
+Online comments are broken. Our open-source commenting platform, Coral, reimagines
+moderation, comment display, and conversation. Use Coral to add safer, smarter discussions to your site without giving away your data.
+
+More than 70 publishers in 14 countries trust Coral to run their on-site communities, including the Washington Post, the Wall Street Journal, and Der Spiegel.[Read more about Coral here](https://coralproject.net/).
+
+<div class="callout">
+  We offer hosting and support packages for Coral, as well as exclusive, customer-only resources. [Contact us for more information.](https://coralproject.net/pricing/)
+</div>
+
+Built with ❤️ by Coral by [Vox Media](https://product.voxmedia.com/).
+
+Try out a test version of Coral by running it via a Heroku App:
+
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/coralproject/talk)
+
+## Requirements
+
+- MongoDB >=4.2
+- Redis >=3.2
+- NodeJS >=12
+- NPM >=6.7
+
+## Running
+
+You can install Coral using Docker or via Source. We recommend Docker, as it
+provides the easiest deployment solution going forward, as all the dependencies
+are baked and shipped with the provided
+[coralproject/talk:5](https://hub.docker.com/r/coralproject/talk) image.
+
+### Docker
+
+The easiest way to get started with Coral is through our published Docker image
+and provided example `docker-compose.yml` file. The following assumes that you
+have Docker and Docker Compose installed on your local machine:
+
+- Install Docker: https://docs.docker.com/install/
+- Install Docker Compose: https://docs.docker.com/compose/install/ (this is typically included in the Docker Desktop editions already)
+
+```bash
+# Create directories to persist the data in MongoDB and Redis.
+mkdir -p data/{mongo,redis}
+
+# Create the `docker-compose.yml` file to get started.
+cat > docker-compose.yml <<EOF
+version: "2"
+services:
+  talk:
+    image: coralproject/talk:5
+    restart: always
+    ports:
+      - "127.0.0.1:3000:5000"
+    depends_on:
+      - mongo
+      - redis
+    environment:
+      - MONGODB_URI=mongodb://mongo:27017/coral
+      - REDIS_URI=redis://redis:6379
+      - SIGNING_SECRET=<replace me with something secret>
+  mongo:
+    image: mongo:4.2
+    volumes:
+      - ./data/mongo:/data/db
+  redis:
+    image: redis:3.2
+    volumes:
+      - ./data/redis:/data
+EOF
+
+# Start up Coral using Docker.
+docker-compose up -d
+```
+
+Then head on over to http://localhost:3000 to install Coral!
+
+### Source
+
+Coral requires NodeJS >=12, we recommend using `nvm` to help manage node
+versions: https://github.com/creationix/nvm.
+
+```bash
+# Clone and cd into the Coral directory.
+git clone https://github.com/coralproject/talk.git
+cd talk
+
+# Install dependencies.
+npm install
+
+# Build the application dependencies.
+# This might take a while.
+npm run build
+```
+
+This should output all the compiled application code to `./dist`.
+
+Running Coral with default settings assumes that you have:
+
+- MongoDB >=4.2 running on `127.0.0.1:27017`
+- Redis >=3.2 running on `127.0.0.1:6379`
+
+If you don't already have these databases running, you can execute the following
+assuming you have Docker installed on your local machine:
+
+```bash
+docker run -d -p 27017:27017 --restart always --name mongo mongo:4.2
+docker run -d -p 6379:6379 --restart always --name redis redis:3.2
+```
+
+Then start Coral with:
+
+```bash
+# Start the server in production mode.
+npm run start
+```
+
+Then head on over to http://localhost:3000 to install Coral!

docs/source/version-5-integrating.md

@@ -0,0 +1,29 @@
+---
+title: Integrating on your site
+permalink: /v5/integrating/cms/
+---
+
+With Coral setup and running you can embed the comment stream with this sample embed script:
+
+```
+<div id="coral_thread"></div>
+<script type="text/javascript">
+  (function() {
+      var d = document, s = d.createElement('script');
+      var url = '{{ CORAL_DOMAIN_NAME }}';
+      s.src = '//' + url + '/assets/js/embed.js';
+      s.async = false;
+      s.defer = true;
+      s.onload = function() {
+          Coral.createStreamEmbed({
+              id: "coral_thread",
+              autoRender: true,
+              rootURL: '//' + url,
+          });
+      };
+      (d.head || d.body).appendChild(s);
+  })();
+</script>`;
+```
+
+> **NOTE:** Replace the value of `{% raw %}{{ CORAL_DOMAIN_NAME }}{% endraw %}` with the location of your running instance of Coral.

docs/source/version-5-slack.md

@@ -0,0 +1,28 @@
+---
+title: Slack
+permalink: /v5/integrating/slack/
+---
+
+Coral version 5 supports built-in Slack integration to help you forward comments from your moderation queues into appropriate Slack channels.
+
+## Creating a Slack App
+
+To enable web hooks that we will use to forward comments, you'll need to create an App and give it permissions over a channel.
+
+For details on how to create a Slack app with webhooks, please go to:
+
+https://slack.com/intl/en-ca/help/articles/115005265063-incoming-webhooks-for-slack
+
+After you have created a Slack app with a webhook, you can use it in your Coral configuration.
+
+1. Sign into the administration side of your Coral deployment.
+2. Select _Configure_ from the top navigation.
+3. Select _Slack_ from the side navigation for the configuration area.
+4. Here you can configure a Slack channel.
+5. Paste in the webhook URL you created for your Slack app and select which comment categories you want to receive notifications for.
+
+## I need to find the webhook URL again, where is it?
+
+Webhooks options are tied to a Slack app and can be found under your app settings at:
+
+https://api.slack.com/apps

docs/source/version-5-sso.md

@@ -0,0 +1,127 @@
+---
+title: Single Sign On
+permalink: /v5/integrating/sso/
+---
+
+In order to allow seamless connection to an existing authentication system,
+Coral utilizes the industry standard [JWT Token](https://jwt.io/) to connect. To
+learn more about how to create a JWT token, see [this introduction](https://jwt.io/introduction/).
+
+1. Visit: ```https://{{ CORAL_DOMAIN_NAME }} /admin/configure/auth```
+2. Scroll to the `Login with Single Sign On` section
+3. Enable the Single Sign On Authentication Integration
+4. Enable `Allow Registration`
+5. Copy the string in the `Key` box
+6. Click Save
+
+> **NOTE:** Replace the value of ```{{ CORAL_DOMAIN_NAME }}``` with the location of your running instance of Coral.
+
+You will then have to generate a JWT with the following claims:
+
+- `jti` _(optional)_ - A unique ID for this particular JWT token. We recommend
+  using a [UUID](https://en.wikipedia.org/wiki/Universally_unique_identifier)
+  for this value. Without this parameter, the logout functionality inside the
+  embed stream will not work and you will need to call logout on the embed
+  itself.
+- `exp` _(optional)_ - When the given SSO token should expire. This is
+  specified as a unix time stamp in seconds. Once the token has expired, a new
+  token should be generated and passed into Coral. Without this parameter, the
+  logout functionality inside the embed stream will not work and you will need
+  to call logout on the embed itself.
+- `iat` _(optional)_ - When the given SSO token was issued. This is required to
+  utilize the automatic user detail update system. If this time is newer than
+  the time we received the last update, the contents of the token will be used
+  to update the user.
+- `user.id` **(required)** - the ID of the user from your authentication system.
+  This is required to connect the user in your system to allow a seamless
+  connection to Coral.
+- `user.email` **(required)** - the email address of the user from your
+  authentication system. This is required to facilitate notification email's
+  about status changes on a user account such as bans or suspensions.
+- `user.username` **(required)** - the username that should be used when being
+  presented inside Coral to moderators and other users. There are no username validations or restrictions enforced by Coral when you're using SSO.
+- `user.badges` _(optional)_ - array of strings to be displayed as badges beside
+  username inside Coral, visible to other users and moderators. For example, to indicate
+  a user's subscription status.
+- `user.role` _(optional)_ - one of "COMMENTER", "STAFF", "MODERATOR", "ADMIN". Will create/update
+  Coral user with this role.
+
+An example of the claims for this token would be:
+
+```json
+{
+  "jti": "151c19fc-ad15-4f80-a49c-09f137789fbb",
+  "exp": 1572172094,
+  "iat": 1562172094,
+  "user": {
+    "id": "628bdc61-6616-4add-bfec-dd79156715d4",
+    "email": "bob@example.com",
+    "username": "bob"
+  }
+}
+```
+
+With the claims provided, you can sign them with the `Key` obtained from the
+Coral administration panel in the previous steps with a `HS256` algorithm. This
+token can be provided in the above mentioned embed code by adding it to the
+`createStreamEmbed` function:
+
+```js
+Coral.createStreamEmbed({
+  // Don't forget to include the parameters from the
+  // "Embed On Your Site" section.
+  accessToken: "{{ SSO_TOKEN }}"
+});
+```
+
+Or by calling the `login/logout` method on the embed object:
+
+```js
+var embed = Coral.createStreamEmbed({
+  // Don't forget to include the parameters from the
+  // "Embed On Your Site" section.
+});
+
+// Login the current embed with the generated SSO token.
+embed.login("{{ SSO_TOKEN }}");
+
+// Logout the user.
+embed.logout();
+```
+
+## External Integrations
+
+You can integrate directly with the Coral GraphQL API in order to facilitate
+account updates for your users when using Coral SSO. The relevant mutations are
+as follows:
+
+- `updateUserUsername` lets you update a given user with a new username using
+  an admin token.
+- `updateUserEmail` lets you update a given user with a new email address
+  using an admin token.
+- `deleteUser` lets you delete a given account using an admin token.
+  Note that even with an admin token, you may not delete yourself via
+  this method, and instead must use the `requestAccountDeletion`
+  mutation instead. This differs from the `requestAccountDeletion` as
+  it does the operation immediately instead of scheduling it as
+  `requestAccountDeletion` does.
+- `requestUserCommentsDownload` lets you retrieve a given account's comments download. This mutation will provide you with a `archiveURL` that can be used to download a ZIP file containing the user's comment export.
+
+If you're unsure on how to call GraphQL API's, refer to the section here on [Making your first GraphQL request](/talk/v5/api/overview/#making-your-first-request).
+
+## Login Prompts
+
+In order to handle login prompts (e.g. a user clicks on the sign in button) you can listen to the `loginPrompt` event.
+
+```js
+var embed = Coral.createStreamEmbed({
+  // Don't forget to include the parameters from the
+  // "Embed On Your Site" section.
+  events: function(events) {
+    events.on("loginPrompt", function() {
+      // Redirect user to a login page.
+      location.href = "http://example.com/login";
+    });
+  }
+});
+```