Tips & Tricks

Sections covered in this document:

Lazy-loading on scroll

You can defer loading the embed.min.js script until the user has scrolled to the bottom of the page:

<script type="text/javascript">
    // Lazy-load isso only when page end is in view
    function loadIsso() {
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        script.setAttribute("src", "/prefix/js/embed.min.js");
        // add relevant data-isso attributes here
        script.setAttribute("data-isso", "/prefix/");
        document.getElementsByTagName("head")[0].appendChild(script);
    }
    let offset = 50; // Start loading 50px before reaching bottom
    function scrollBottomListener(ev) {
        if ((window.scrollY + window.innerHeight)
                >= (document.documentElement.scrollHeight - offset)) {
            loadIsso();
            window.removeEventListener('scroll', scrollBottomListener);
        }
    }
    window.onload = function() {
      // If viewport >= page height, load immediately
      if ((window.scrollY + window.innerHeight)
                >= (document.documentElement.scrollHeight - offset)) {
          loadIsso();
      } else {
          window.addEventListener('scroll', scrollBottomListener);
      }
    }
</script>

Note that loading additional content only after user interaction is bad for SEO. Additionally, users could experience a “jank” effect.

Use lazy-loading only if you are desperately trying to save bandwidth. By specifying async in the <script tag, loading the Isso Javascript will not render-block anyway.

Advanced Migration

In quickstart we saw you can import comments from Disqus or WordPress. But there are a many other comments system and you could be using one of them.

Isso provides a way to import such comments, however it’s up to you to to:

  • dump comments

  • fit the data to the following JSON format:

    A list of threads, each item being a dict with the following data:
    
    - id: a text representing the unique thread id (note: by default isso
          associates this ID to the article URL, but it can be changed on
          client side with "data-isso-id" - see :doc:`client configuration <../configuration/client>` )
    - title: the title of the thread
    - comments: the list of comments
    
        Each item in that list of comments is a dict with the following data:
    
        - id: an integer with the unique id of the comment inside the thread
          (it can be repeated among different threads); this will be used to
          order the comment inside the thread
        - author: the author's name
        - email: the author's email
        - website: the author's website
        - remote_addr: the author's IP
        - created: a timestamp, in the format "%Y-%m-%d %H:%M:%S"
    

Example:

[
    {
        "id": "/blog/article1",
        "title": "First article!",
        "comments": [
            {
                "author": "James",
                "created": "2018-11-28 17:24:23",
                "email": "email@mail.com",
                "id": "1",
                "remote_addr": "127.0.0.1",
                "text": "Great article!",
                "website": "http://fefzfzef.frzr"
            },
            {
                "author": "Harold",
                "created": "2018-11-28 17:58:03",
                "email": "email2@mail.com",
                "id": "2",
                "remote_addr": "",
                "text": "I hated it...",
                "website": ""
            }
        ]
    }
]

Keep in mind that isso expects to have an array, so keep the opening and ending square bracket even if you have only one article thread!

Next you can import you json dump:

~> isso -c /path/to/isso.cfg import -t generic comment-dump.json
[100%]  53 threads, 192 comments

Export comments as CSV

As suggested by Joshua Gleitze:

dbpath='/path/to/your/isso.db'
data=$(sqlite3 ${dbpath} -csv 'SELECT threads.uri, threads.title, comments.id, comments.mode, datetime(comments.created, "unixepoch", "localtime"), datetime(comments.modified, "unixepoch", "localtime"), comments.author, comments.email, comments.website, comments.remote_addr, comments.likes, comments.dislikes, comments.voters,comments.text FROM comments INNER JOIN threads ON comments.tid=threads.id')
header='"page: URI","page: title","ID","mode","created on","modified on","author: name","author: email","author: website","author: IP","likes","dislikes","voters","text"'
echo -e "${header}\n""${data}" > export.csv

Use isso-to-disqus.py and see other options as discussed in this issue.

Pretty-print entire comments database

The following bash function pretty-print the entire comments DB sorted by insertion date.

get_blog_comments () {
    ssh $host sqlite3 -line /path/to/isso/isso.db \
        "'SELECT t.uri,c.created,c.modified,c.text,c.author,c.email,c.website \
          FROM comments AS c, threads as t WHERE c.tid = t.id;'" \
        | perl -wpe '/(created|modified) = ./&&s/= (.*)/"= ".scalar(localtime($1))/e';
}

Example output:

     uri = /lucas/blog/2014/12/12/fr-la-tete-dans-le-guidon/
 created = Mon Dec 15 13:10:28 2014
modified =
    text = Merci ! Je suis très content d'apprendre que cette lecture a pu plaire à quelqu'un
N'hésitez pas à partager vos propres réflexions et astuces dans les commentaires.
  author = lucas
   email = lucas@chezsoi.org
 website = https://chezsoi.org/lucas/blog

Delete IP addresses weekly

Add this to your crontab to set all saved commenter IP addresses to 127.0.0.1 to preserve their privacy under GDPR:

@weekly /usr/bin/sqlite3 /path/to/isso/comments.db 'UPDATE comments SET remote_addr = "127.0.0.1";'

From blog.mdosch.de:

Note that Isso already anonymizes the last part of IP addresses by setting them to to zero.

Change linked comment highlight color

When you click a link that goes to a specific Isso comment (such as https://example.com/example-post/#isso-43), the comment will be highlighted yellow and then fade out over a few seconds.

Add the following CSS to your site to change that color (replace #3f3c1c with any color of your choice):

@keyframes isso-target-fade {
  0% { background-color: #3f3c1c; }
}

Attention

This section of the Isso documentation is incomplete. Please help by expanding it.

Click the Edit on GitHub button in the top right corner and read the GitHub Issue named Improve & Expand Documentation for further information.

What’s missing?

  • Removing unused languages

  • Importing & exporting comments (integrate migration docs)

  • Keeping compat using babel

… and other collected tips & tricks, maybe also from the wiki.