add title support for comments and last comments widget

README.md

@@ -284,7 +284,8 @@ Add this snippet to the bottom of web page:
     site_id: 'YOUR_SITE_ID',
     url: 'PAGE_URL', // optional param; if it isn't defined window.location.href will be used
     max_shown_comments: 10, // optional param; if it isn't defined default value (15) will be used
-    theme: 'dark', // optional param; if it isn't defined default value ('light') will be used 
+    theme: 'dark', // optional param; if it isn't defined default value ('light') will be used
+    page_title: 'Moving to Remark42' // optional param; if it isn't defined `document.title` will be used
   };
 
   (function() {

web/app/common/api.js

@@ -31,10 +31,11 @@ export const putCommentVote = ({ id, url, value }) =>
     withCredentials: true,
   });
 
-export const addComment = ({ text, pid }) =>
+export const addComment = ({ title, text, pid }) =>
   fetcher.post({
     url: '/comment',
     body: {
+      title,
       text,
       locator: {
         site: siteId,

web/app/common/settings.js

@@ -11,6 +11,7 @@ const querySettings =
     }, {}) || {};
 
 export const siteId = querySettings['site_id'];
+export const pageTitle = querySettings['page_title'];
 export const url = querySettings['url'];
 export const maxShownComments = querySettings['max_shown_comments'];
 export const token = querySettings['token'];

web/app/components/comment/_view/_preview/comment_view_preview.scss

@@ -9,6 +9,22 @@
       color: #0aa;
     }
 
+    .comment__title {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      color: #0aa;
+    }
+
+    .comment__title-link {
+      color: #0aa;
+      text-decoration: none;
+
+      &:hover {
+        opacity: 0.75;
+      }
+    }
+
     .comment__info {
       display: inline;
       padding-right: 0;

web/app/components/comment/comment.jsx

@@ -438,6 +438,14 @@ export default class Comment extends Component {
       return (
         <article className={b('comment', props, defaultMods)}>
           <div className="comment__body">
+            <div className="comment__title">
+              <a
+                className="comment__title-link"
+                href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`}
+              >
+                {o.title}
+              </a>
+            </div>
             <div className="comment__info">
               <a href={`${o.locator.url}#${COMMENT_NODE_CLASSNAME_PREFIX}${o.id}`} className="comment__username">
                 {o.user.name}

web/app/components/input/input.jsx

@@ -2,7 +2,7 @@
 import { h, Component } from 'preact';
 
 import { BASE_URL, API_BASE, DEFAULT_MAX_COMMENT_SIZE } from 'common/constants';
-import { siteId, url } from 'common/settings';
+import { siteId, url, pageTitle } from 'common/settings';
 
 import api from 'common/api';
 import store from 'common/store';
@@ -73,8 +73,9 @@ export default class Input extends Component {
 
     this.setState({ isDisabled: true, isErrorShown: false });
 
-    const request =
-      mods.mode === 'edit' ? api.updateComment({ text, id }) : api.addComment({ text, ...(pid ? { pid } : {}) });
+    const request = mods.mode === 'edit'
+      ? api.updateComment({ text, id })
+      : api.addComment({ title: pageTitle || document.title, text, ...(pid ? { pid } : {}) });
 
     request
       .then(comment => {