Docs update- Jul 2020 (#3056)

* added existing closing stories behavior

* updated find your embed

* updated sso docs

* updated graphiql section

* clarified A user, not all the users

* clarified manual override on open/close stories

* clarified uniqueness constraints on sso

Co-authored-by: jessie.rushing <jessie.rushing@voxmedia.com>

docs/source/01-02-configuration.md

@@ -1,5 +1,5 @@
 ---
-title: Configuring Version 5
+title: Configuring Version 5+
 permalink: /v5/configuration/
 toc: true
 ---
@@ -9,60 +9,82 @@ 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`
+## Required Configuration Variables
 
-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`
+### `PORT`
 
 The port to listen for HTTP and Websocket requests. (Default `3000`)
 
-## `DEV_PORT`
-
-The port where the Webpack Development server is running on. (Default `8080`)
-
-## `MONGODB_URI`
+### `MONGODB_URI`
 
 The MongoDB database URI to connect to. (Default `mongodb://127.0.0.1:27017/coral`)
 
-## `REDIS_URI`
+### `REDIS_URI`
 
 The Redis database URI to connect to. (Default `redis://127.0.0.1:6379`)
 
-## `REDIS_OPTIONS`
+### `SIGNING_SECRET`
 
-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: `{}`)
+The shared secret to use to sign JSON Web Tokens (JWT) with the selected signing
+algorithm. (Default: `keyboard cat`)
 
-## `SIGNING_SECRET`
+Note: While there is a default for this so development can be simplified, Coral
+will throw a runtime error in the event it's started with `NODE_ENV=production`
+and the `SIGNING_SECRET="keyboard cat"` to prevent insecure installations. This
+_must_ be set in production to something long and secure. You can use `openssl`
+to help with that:
 
-The shared secret to use to sign JSON Web Tokens (JWT) with the selected signing algorithm. (Default: `keyboard cat`)
-🚨 **Don't forget to set this variable!** 🚨
+```sh
+openssl rand -base64 45
+```
 
-## `SIGNING_ALGORITHM`
+## Advanced Configuration Variables
 
-The signing algorithm to use for signing JWT's. (Default `HS256`).
+### `NODE_ENV`
 
-## `LOCALE`
+Can be one of `production` or `development`. All production deployments should
+use `production`. Defaults to `production` when ran with `npm run start`, or
+with Docker deployments. Defaults to `development` when run with
+`npm run start:development`.
+
+### `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_ALGORITHM`
+
+The signing algorithm to use for signing tokens. (Default `HS256`).
+
+Supported algorithms are:
+
+- `HS256`
+- `HS384`
+- `HS512`
+- `RS256`
+- `RS384`
+- `RS512`
+- `ES256`
+- `ES384`
+- `ES512`
+
+### `LOCALE`
 
 Specify the default locale to use for all requests without a locale specified. (Default `en-US`)
 
-## `LOGGING_LEVEL`
+### `LOGGING_LEVEL`
 
 The logging level that can be set to one of `fatal`,
 `error`, `warn`, `info`, `debug`, or `trace`. (Default `info`)
 
-## `DISABLE_CLIENT_ROUTES`
-
-Disables mounting of client routes for developing with Webpack Dev Server (Default `false`)
-
-## `FORCE_SSL`
+### `FORCE_SSL`
 
 Forces SSL in production by redirecting all HTTP requests to HTTPS, and sending
-HSTS headers. (Default `false`)
+[HSTS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security) headers. (Default `false`)
 
-By default, Coral does not use HTTPS. If you want to enable HTTPS, you must
-configure a proxy in front of Coral such as [Caddy](https://caddyserver.com/).
+Coral does not provide or manage HTTPS certificates. If you want to enable
+HTTPS, you must configure a proxy in front of Coral such as
+[Caddy](https://caddyserver.com/).
 
 **Troubleshooting**: If you are seeing redirect loops when trying to access
 pages like the admin, you may need to configure [`TRUST_PROXY`](#trust-proxy) to
@@ -73,65 +95,99 @@ headers that will force web browsers to connect via HTTPS for the next 60 days.
 By forcing SSL use you'll need to provide a secure connection to your Coral
 instance for at least the next 60 days.
 
-## `DISABLE_LIVE_UPDATES`
+### `DISABLE_LIVE_UPDATES`
 
-When `true`, disables subscriptions for the comment stream for all stories across all tenants (Default `false`)
+When `true`, the comment stream will not create a websocket connection to get
+live comment updates. This applies across all tenants on the installation, and
+cannot be turned back on via the interface. (Default `false`)
 
-## `DISABLE_LIVE_UPDATES_TIMEOUT`
+### `DISABLE_LIVE_UPDATES_TIMEOUT`
 
 Stories that have not received a comment within this time frame will pause live
-live updates automatically. Once a single comment is received on these stories,
-live updates will be re-enabled until the story sits idle for the timeout value.
+updates automatically. Once a single comment is received on these stories, live
+updates will be re-enabled until the story sits idle for the timeout value,
+parsed by [ms](https://www.npmjs.com/package/ms). (Default `2 weeks`)
 
-## `DISABLE_RATE_LIMITERS`
-
-Disables the rate limiters in development. This will only work when also set to a development environment (Default `false`)
-
-## `DISABLE_TENANT_CACHING`
+### `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`)
 
-## `ENABLE_GRAPHIQL`
+### `ENABLE_GRAPHIQL`
 
-When `true`, it will enable the `/graphiql` even in production, **use with care**. (Default `false`)
+When `true`, it will enable the interactive GraphQL developer environment at the
+`/graphiql` route. This will also disable persisted (Default `false`)
 
-## `METRICS_USERNAME`
+Note: We do not recommend using this in production environments as it disables
+many safety features used by the application to provide it.
 
-The username for _Basic Authentication_ at the `/metrics` endpoint. If not
+### `METRICS_USERNAME`
+
+The username for _Basic Authentication_ at the `/metrics` route. If not
 provided with `METRICS_PASSWORD`, no authentication will be added to this route.
 
-## `METRICS_PASSWORD`
+### `METRICS_PASSWORD`
 
-The password for _Basic Authentication_ at the `/metrics` endpoint. If not
+The password for _Basic Authentication_ at the `/metrics` route. If not
 provided with `METRICS_USERNAME`, no authentication will be added to this route.
 
-## `METRICS_PORT`
+### `METRICS_PORT`
 
-Metrics are provided at this port under `/metrics`. (Default `9000`)
+[Prometheus](https://prometheus.io/docs/introduction/overview/) metrics are
+provided at this port under `/metrics` route. (Default `9000`)
 
-## `SCRAPE_TIMEOUT`
+### `SCRAPE_TIMEOUT`
 
-The request timeout (in ms) for scraping operations. (Default `10 seconds`)
+The request timeout for scraping operations, parsed by [ms](https://www.npmjs.com/package/ms).
+(Default `10 seconds`)
 
-## `SCRAPE_MAX_RESPONSE_SIZE`
+### `SCRAPE_MAX_RESPONSE_SIZE`
 
 The maximum size (in bytes) to allow for scraping responses. (Default `10e6`)
 
-## `STATIC_URI`
+### `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.
+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.
 
-## `TRUST_PROXY`
+### `TRUST_PROXY`
 
-When provided, it configures the "trust proxy" settings for Express. 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.
+When provided, it configures the "trust proxy" settings for Express. 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.
 
-## `WEBSOCKET_KEEP_ALIVE_TIMEOUT`
+### `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`)
+The interval that should be used to send keep alive messages over websocket to
+keep the socket open, parsed by [ms](https://www.npmjs.com/package/ms).
+(Default `30s`)
 
-## `WORD_LIST_TIMEOUT`
+### `WORD_LIST_TIMEOUT`
 
-The word list timeout (in ms) that should be used to limit the amount of time
-the process is frozen processing a word list comparison. (Default `100`)
+The length of time that a given request to test a comment against a given word
+list, parsed by [ms](https://www.npmjs.com/package/ms). (Default `100ms`)
+
+### `PERSPECTIVE_TIMEOUT`
+
+The length of time that a given request should wait for a response when
+interacting with the Perspective API, parsed by [ms](https://www.npmjs.com/package/ms).
+(Default `800ms`)
+
+## Development Configuration Variables
+
+The following configuration variables are only enabled when the server has been
+started in development mode (where `NODE_ENV=development`).
+
+### `DEV_PORT`
+
+The port where the Webpack Development server is running on. (Default `8080`)
+
+### `DISABLE_CLIENT_ROUTES`
+
+Disables mounting of client routes for developing with Webpack Dev Server.
+(Default `false`)
+
+### `DISABLE_RATE_LIMITERS`
+
+Used to disable the rate limiters used in Coral. (Default `false`)

docs/source/01-03-administration.md

@@ -60,7 +60,7 @@ characters. Commenters will be alerted that they have gone over that number and
 Set a limit on how long commenters have to edit their comments sitewide. Edited comments are marked as (Edited) on the comment stream and the moderation panel.
 
 #### **Closing comment streams**
-Set comment streams to close after a defined period of time after a story’s publication
+Set comment streams to close after a defined period of time after a story’s publication. When this feature is enabled, existing stories older than the defined period that have not been manually opened or closed will also be updated and set as closed. Manually opening or closing a story will permantenly override the auto-close functionality. 
 
 #### **Closed comment stream message**
 A message to appear when a story is closed for commenting.

docs/source/02-01-integrating.md

@@ -3,7 +3,7 @@ title: Integrating on your site
 permalink: /v5/integrating/cms/
 ---
 
-With Coral setup and running locally you can find your **Embed code** under **Configure** > **Advanced** (logged in as an ADMIN). It should look something like this, but with your domain in place of `CORAL_DOMAIN_NAME`. You can test placing the comment stream embed on your page with this sample embed script:
+With Coral setup and running locally you can find your **Embed code** under **Configure** > **Organization** > **Site Details** (when logged in as an ADMIN). It should look something like this, but with your domain in place of `CORAL_DOMAIN_NAME`. You can test placing the comment stream embed on your page with this sample embed script:
 
 ```
 <div id="coral_thread"></div>

docs/source/02-02-sso.md

@@ -11,7 +11,7 @@ learn more about how to create a JWT token, see [this introduction](https://jwt.
 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
+5. Copy the string in the `Secret` box
 6. Click Save
 
 > **NOTE:** Replace the value of `{% raw %}{{ CORAL_DOMAIN_NAME }}{% endraw %}` with the location of your running instance of Coral.
@@ -20,31 +20,27 @@ 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.
+  for this value. This claim controls the logout functionality on the embed stream. To disable the “Sign Out” links in the embed, remove this claim, and disable “Login with email authentication” on the Comment Stream. You can then call `logout()` on the embed, or expire the token when the SSO user should be signed out of Coral. 
 - `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.
+  token should be generated and passed into Coral. Without this parameter 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.
+  to update the user. Any claims not present on the jwt will be ignored on update, and will not overwrite existing values.
+- `user.id` **(required)** - the unique 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
+- `user.email` **(required)** - the unique 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.
+  a user's subscription status. If you include the claim, but you are not passing a badge value, then use an empty array instead of null. 
 - `user.role` _(optional)_ - one of "COMMENTER", "STAFF", "MODERATOR", "ADMIN". Will create/update
-  Coral user with this role.
+  Coral user with this permission level. When users have both an assigned role greather than COMMENTER and a badge, both will be displayed.  
 - `user.url` _(optional)_ - url for user account management, where a user will
   be able to perform account management tasks such as changing password or
   deleting data. If provided, user will be able to access this URL by clicking
@@ -65,7 +61,7 @@ An example of the claims for this token would be:
 }
 ```
 
-With the claims provided, you can sign them with the `Key` obtained from the
+With the claims provided, you can sign them with the `Secret` 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:
@@ -129,3 +125,8 @@ var embed = Coral.createStreamEmbed({
   }
 });
 ```
+## Troubleshooting JWT Validation Errors
+
+In addition to the uniqueness constraints on User `id` and `email` values, each `user.id`/`user.email` combination must also be unique inside Coral. This is true for both Single Sign On users created by JWT tokens, as well as users that register/login using Coral’s built in “Login with email authentication”. You can not share authentication strategies for a single user; thus if a user logs in with SSO, they can not also login with email and vice versa. When you attempt to authenticate a JWT token with an email address that already exists in Coral with a different `user.id` than was passed on the token Coral will throw a Duplicate User error. 
+
+Any JWT validation errors thrown can be found in Coral's server logs.  

docs/source/02-04-css.md

@@ -5,7 +5,29 @@ permalink: /v5/css/
 
 You can add your own stylesheet in **Admin** > **Configure** > **Advanced** > **Custom CSS**.
 
-If you would like to change the styling of any elements of the comment embed, we provide global classnames. Most elements will be tagged with either `.coral` or `.coral-stream`. 
+### Use CSS Variables
+
+We recommend using CSS Variables to broadly apply changes to certain styling aspects like color or fonts.
+
+Here is a CSS example that modifies some of the CSS Variables.
+
+```css
+:root {
+  /* Change primary font */
+  --font-family-primary: 'Verdana';
+
+  /* Remove round corners */
+  --round-corners: 0px;
+}
+```
+
+You can find all CSS Variables using the Web Inspector or navigate to https://github.com/coralproject/talk/blob/master/CSS_VARIABLES.md for a comprehensive list and additional information. 
+
+> **NOTE:** Before 6.3.0 Coral uses a different set of CSS Variables. Navigate to the link above to get information on upgrading. 
+
+### Use stable CSS Class Names
+
+If you would like to change the styling of any elements of the comment embed, we provide global classnames. Most elements will be tagged with either `.coral` or `.coral-stream`.
 
 The easiest way to find the classname for the element you're looking for is to use the web inspector, and then update your stylesheet accordingly.
 
@@ -16,15 +38,41 @@ You can also navigate to https://github.com/coralproject/talk/blob/master/src/co
 You can set the class name of the `<body>` tag inside the embed by using the `bodyClassName` parameter when calling `Coral.createStreamEmbed`:
 
 ```js
-  Coral.createStreamEmbed({
-    bodyClassName: "pink",
-  });
+Coral.createStreamEmbed({
+  bodyClassName: "pink"
+});
 ```
 
 This will allow your styles to include variations:
 
 ```css
-  .pink button.coral {
-    background: pink;
-  }
+.pink button.coral {
+  background: pink;
+}
+```
+
+### Reaction styling
+
+As of Coral 6.3.0, Coral has support for styling based on the number of
+reactions that a given comment has received. It does so via the:
+
+```sh
+.coral-reacted-{{ n }}
+```
+
+Where `{{ n }}` is the number of reactions the comment has received. You can
+invert this when creating CSS to allow you to highlight comments that have at
+least `{{ n }}` reactions. For example, if you wanted to add a coral color to
+comments with at least 3 reactions, you could write:
+
+```css
+.coral-comment .coral-indent {
+  background-color: coral;
+}
+
+.coral-reacted-0 .coral-indent,
+.coral-reacted-1 .coral-indent,
+.coral-reacted-2 .coral-indent {
+  background-color: transparent;
+}
 ```

docs/source/03-01-api.md

@@ -3,9 +3,21 @@ title: GraphQL API Overview
 permalink: /v5/api/overview/
 ---
 
+## GraphQL API
+
 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**.
+## Enabling & Using `/graphiql`
+
+It is not required to enable the `/graphiql` playground to use Coral’s GraphQL API. The playground simply provides an easy way to explore and interact with Coral’s GraphQL schema. 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. 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**. 
+
+When submitting requests in the `/graphiql` playground, it is necessary to include an ADMIN level bearer token to authenticate your requests. When signed into Coral as an ADMIN level user, you can grab your current access token from your browser’s local storage. Add the following to the HTTP Headers section of your GraphiQL call.
+```sh
+{“authorization”:”Bearer <token>”}
+```
+
 
 ## Making your first request