Merge pull request #844 from BBaoVanC/author-badge

Make it possible to identify the page author's comments

CHANGES.rst

@@ -18,6 +18,8 @@ Changelog for Isso
   in post box (`#861 <https://github.com/posativ/isso/pull/861>`_, ix5)
 - Re-enable ``no-intra-emphasis`` misaka extension in default config.
 - Allow ``sup`` and ``sub`` HTML elements by default
+- Add ``data-isso-page-author-hashes`` option to client which makes it possible
+  to style comments and replies made by the page's author(s).
 
 .. _Gravatar: Image requests: http://en.gravatar.com/site/implement/images/
 

docs/docs/reference/client-config.rst

@@ -20,6 +20,7 @@ preferably in the script tag which embeds the JS:
             data-isso-vote="true"
             data-isso-vote-levels=""
             data-isso-feed="false"
+            data-isso-page-author-hashes="f124cf6b2f01,7831fe17a8cd"
             data-isso-reply-notifications-default-enabled="false"
             src="/prefix/js/embed.js"></script>
 
@@ -143,6 +144,49 @@ data-isso-feed
     thread. The link will only be valid if the appropriate setting, in
     ``[rss]`` section, is also enabled server-side.
 
+data-isso-page-author-hashes
+    Provide the hash (or list of hashes) of the current page's author. Any
+    comments made by those authors will be given the ``isso-is-page-author``
+    class. This can be styled using CSS.
+
+    The hash of a user can be found by checking the ``data-hash`` parameter on the
+    ``<div>`` tag containing their comment. This is what the element looks like:
+
+    .. code-block:: html
+
+        <div class="isso-comment isso-no-votes" id="isso-14" data-hash="41faef0a49fc">
+
+    According to this example, your script tag would look something like this:
+
+    .. code-block:: html
+
+        <script src="..." data-isso-page-author-hashes="41faef0a49fc"></script>
+
+    When adding multiple hashes to support multiple page authors, separate the
+    hashes by a command and/or space. All of the following are acceptable
+    (although the hashes are made up):
+
+    - ``data-isso-page-author-hashes="86g7n8g67nm,8m787mg8"``
+    - ``data-isso-page-author-hashes="86g7n8g67nm 8m787mg8"``
+    - ``data-isso-page-author-hashes="86g7n8g67nm, 8m787mg8"``
+
+    For example, these CSS rules make the page author's name a sort of
+    turquoise color, and the comment's background a lighter version of that:
+
+    .. code-block:: css
+
+        .isso-comment.isso-is-page-author > .isso-text-wrapper {
+            background-color: #bae0ea;
+        }
+
+        .isso-comment.isso-is-page-author > .isso-text-wrapper > .isso-comment-header > .isso-author {
+            color: #19798d;
+        }
+
+
+    .. versionadded:: 0.13
+
+
 data-isso-reply-notifications-default-enabled
     Set to ``true`` to make the reply notifications checkbox on the postbox be
     checked by default. Otherwise, the user will have to manually opt-in to

isso/css/isso.css

@@ -33,8 +33,6 @@
 
 #isso-root .isso-comment {
     max-width: 68em;
-    padding-top: 0.95em;
-    margin: 0.95em auto;
 }
 #isso-root .isso-preview .isso-comment {
     padding-top: 0;
@@ -43,11 +41,12 @@
 #isso-root .isso-comment:not(:first-of-type),
 .isso-follow-up .isso-comment {
     border-top: 1px solid rgba(0, 0, 0, 0.1);
+    margin-bottom: 0.5em;
 }
 .isso-comment > .isso-avatar {
     display: block;
     float: left;
-    margin: 3px 15px 0 0;
+    margin: 0.95em 0.95em 0;
 }
 .isso-comment > .isso-avatar > svg {
     max-width: 48px;
@@ -58,6 +57,7 @@
 }
 .isso-comment > .isso-text-wrapper {
     display: block;
+    padding: 0.95em;
 }
 .isso-comment .isso-follow-up {
     padding-left: calc(7% + 20px);
@@ -92,6 +92,10 @@
     font-weight: bold;
     color: #555;
 }
+.isso-comment > .isso-text-wrapper > .isso-comment-header .isso-page-author-suffix {
+    font-weight: bold;
+    color: #2c2c2c;
+}
 .isso-comment > .isso-text-wrapper > .isso-textarea-wrapper .isso-textarea,
 .isso-comment > .isso-text-wrapper > .isso-textarea-wrapper .isso-preview {
     margin-top: 0.2em;

isso/js/app/config.js

@@ -22,7 +22,8 @@ var config = {
                   "#be5168", "#f19670", "#e4bf80", "#447c69"].join(" "),
     "vote": true,
     "vote-levels": null,
-    "feed": false
+    "feed": false,
+    "page-author-hashes": "",
 };
 
 var js = document.getElementsByTagName("script");
@@ -82,4 +83,7 @@ config["langs"] = languages;
 delete config["lang"];
 delete config["default-lang"];
 
+// Convert page-author-hash into a array by splitting at whitespace and/or commas
+config["page-author-hashes"] = config["page-author-hashes"].split(/[\s,]+/);
+
 module.exports = config;

isso/js/app/i18n/en.js

@@ -26,6 +26,7 @@ module.exports = {
     "comment-queued": "Comment in queue for moderation.",
     "comment-anonymous": "Anonymous",
     "comment-hidden": "{{ n }} Hidden",
+    "comment-page-author-suffix": "Author",
 
     "date-now": "right now",
     "date-minute": "a minute ago\n{{ n }} minutes ago",

isso/js/app/isso.js

@@ -151,7 +151,7 @@ var insert_loader = function(comment, lastcreated) {
         entrypoint = $("#isso-root");
         comment.name = 'null';
     } else {
-        entrypoint = $("#isso-" + comment.id + " > .isso-text-wrapper > .isso-follow-up");
+        entrypoint = $("#isso-" + comment.id + " > .isso-follow-up");
         comment.name = comment.id;
     }
     var el = $.htmlify(template.render("comment-loader", {"comment": comment}));
@@ -208,7 +208,7 @@ var insert = function(comment, scrollIntoView) {
     if (comment.parent === null) {
         entrypoint = $("#isso-root");
     } else {
-        entrypoint = $("#isso-" + comment.parent + " > .isso-text-wrapper > .isso-follow-up");
+        entrypoint = $("#isso-" + comment.parent + " > .isso-follow-up");
     }
 
     entrypoint.append(el);

isso/js/app/templates/comment.js

@@ -7,16 +7,22 @@ var html = function (globals) {
   var svg = globals.svg;
 
   var author = comment.author ? comment.author : i18n('comment-anonymous');
+  var isPageAuthor = conf["page-author-hashes"].indexOf(comment.hash) > -1;
+  var pageAuthorClass = (isPageAuthor ? " isso-is-page-author" : '');
 
   return "" +
-"<div class='isso-comment' id='isso-" + comment.id + "'>"
+"<div class='isso-comment" + pageAuthorClass + "' id='isso-" + comment.id + "' data-hash='" + comment.hash + "'>"
 + (conf.gravatar ? "<div class='isso-avatar'><img src='" + comment.gravatar_image + "'></div>" : '')
 + (conf.avatar ? "<div class='isso-avatar'><svg data-hash='" + comment.hash + "'</svg></div>" : '')
 + "<div class='isso-text-wrapper'>"
   + "<div class='isso-comment-header' role='meta'>"
     + (comment.website
         ? "<a class='isso-author' href='" + comment.website + "' rel='nofollow'>" + author + "</a>"
         : "<span class='isso-author'>" + author + "</span>")
+    + (isPageAuthor
+        ? "<span class='isso-spacer'>&bull;</span>"
+          + "<span class='isso-page-author-suffix'>" + i18n('comment-page-author-suffix') + "</span>"
+        : '' )
      + "<span class='isso-spacer'>&bull;</span>"
      + "<a class='isso-permalink' href='#isso-" + comment.id + "'>"
        + "<time title='" + humanize(comment.created) + "' datetime='" + datetime(comment.created) + "'>" + humanize(comment.created) + "</time>"
@@ -38,8 +44,8 @@ var html = function (globals) {
      + "<a class='isso-edit' href='#'>" + i18n('comment-edit') + "</a>"
      + "<a class='isso-delete' href='#'>" + i18n('comment-delete') + "</a>"
   + "</div>" // .isso-comment-footer
-  + "<div class='isso-follow-up'></div>"
 + "</div>" // .text-wrapper
++ "<div class='isso-follow-up'></div>"
 + "</div>" // .isso-comment
 };
 module.exports = html;