Bump version 4.6.11 (#2130)

Add localization for QuestionBoxBuilder

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 {

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}

docs/_config.yml

@@ -104,8 +104,8 @@ sidebar:
       children:
         - title: Authentication
           url: /integrating/authentication/
-        - title: Asset Management
-          url: /integrating/asset-management/
+        - title: CMS Integration
+          url: /integrating/cms-integration/
         - title: Asset Scraping
           url: /integrating/asset-scraping/
         - title: Configuring the Comment Stream

docs/public/_redirects

@@ -1,3 +1,4 @@
 / /talk/
 /talk/reference/server/ /talk/api/server/
-/talk/reference/graphql/ /talk/api/graphql/
+/talk/reference/graphql/ /talk/api/graphql/
+/talk/integrating/asset-management/ /talk/integrating/cms-integration/

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

@@ -29,7 +29,7 @@ permalink: /pre-launch-checklist/
   - 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

docs/source/integrating/cms-integration.md

@@ -1,23 +1,81 @@
 ---
-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>`:
+```
+<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>
+```
+
+## 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:
+```
+Coral.Talk.render(document.getElementById('container'), {
+    talk: 'https://my-talk-installation.com',
+    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
+```
+<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”
+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. 
 
-## Why do we need to create a plugin?
+Assets created in this way will then be scraped to load metadata, see [Asset Scraping](/talk/integrating/asset-scraping/)
 
-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:
+## 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 +83,9 @@ 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

locales/de.yml

@@ -136,6 +136,7 @@ de:
     code_of_conduct_summary_desc: 'Verfassen Sie eine Einleitung, die über jedem Kommentarbereich erscheint. Nützlich z.B. für Community-Richtlinien.'
     include_question_here: 'Stellen Sie Ihre Frage hier:'
     include_text: 'Fügen Sie Ihren Text hier ein.'
+    include_an_icon: 'Fügen Sie ein Icon hinzu'
     moderate: Moderieren
     moderation_settings: Moderations-Einstellungen
     open: Öffnen

locales/en.yml

@@ -139,6 +139,7 @@ en:
     hours: Hours
     code_of_conduct_summary: 'Summary of your Code of Conduct'
     code_of_conduct_summary_desc: 'This message will appear above every comments stream on your site. Click here to learn more about writing a good code.'
+    include_an_icon: 'Include an Icon'
     include_question_here: 'Write your question here:'
     include_text: 'Include your text here.'
     moderate: Moderate

package.json

@@ -1,6 +1,6 @@
 {
   "name": "talk",
-  "version": "4.6.10",
+  "version": "4.6.11",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "private": true,