Organic Posts in Steemit Trending List - Header and Body added

in #utopian-io4 years ago

merged pull request :

New Features

Organic Trending Post Viewer is a tool to see Steemit trending posts that did not pay to bid-bots to buy upvotes.
Major updates have been made to the tool as below :

  • Before

The trending page only showing author and link.

  • After

The trending page shows

  • Header
  • Body

The markdown information of the body is converted into HTML.
The user can see the summary of the trending post.

  • Before

The bot selection was made only manually

  • After

A "check-box" is added for the user to select the filtering from current trending users.
When the user "ticks" the check-box, the author is added in the bot list and removed from organic trending page.
The manual bot addition button is preserved.

Implementation of changes

  • Dynamic quantity of Divs instead of static Divs

 var div = document.createElement("div");
        div.setAttribute("id", "div_" + i);
        div.setAttribute("class", "gwd-div-1eiz"); = (i * 310) + "px";

The divs are created with "createElement" according to the number of posts.

// append all the child objects to the div


All the elements are appended to the divs with "div.appendChild"

  • Check Box for voter addition to bot-list

var input = document.createElement("input");
        input.setAttribute("id", "input_" + i);
        input.setAttribute("type", "checkbox");
        input.setAttribute("class", "gwd-input-1eoi");
        input.addEventListener('click', masterEventHandler, false);

An EventListener is added to each created check-box

    // event handler for un-wanted voter selection
    function masterEventHandler() {
      var target =;
      var index = target.split("_")[1];
      var in_text=document.getElementById("uw_" + index).innerHTML
      console.log("clicked" +, index);
      if (document.getElementById(target).checked) {
        document.getElementById('button_div_1').style.display = "block";
        document.getElementById('button_div').enabled = "false";                           
        document.getElementById("p_" + index).innerHTML = in_text.strike();

      if (document.getElementById(target).checked != true) {
       var ind=bots.indexOf(in_text);
       document.getElementById("p_" + index).innerHTML = in_text;       


The bot list addition is handled via masterEventHandler() function.

  • Display of Body of the post in the Div

To convert the mark-down to HTML, an open source tool Remarkable is used.
Remarkable is implemented in the JS code via CDN as below.

<script src=""></script>

The body markdown is converted into HTML as below

 var md = new Remarkable({
          html: true, // Enable HTML tags in source
          xhtmlOut: false, // Use '/' to close single tags (<br />)
          breaks: false, // Convert '\n' in paragraphs into <br>
          linkify: true, // Autoconvert URL-like text to links

          // Enable some language-neutral replacement + quotes beautification
          typographer: false,

          // Double + single quotes replacement pairs, when typographer enabled,
          // and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.
          quotes: '“”‘’'
        var bod=result[i].body
        document.getElementById("pb_"+i).style.fontSize = "medium";
        document.getElementById("pb_"+i).innerHTML =md.render(bod).substring(0,500)+".....";


Organic_Trending_Tool :
GitHub :
GitHub for Remarkable:


@FireDream - Steemit
@firedream#3528 - Discord

Proof of Work


Coin Marketplace

STEEM 0.76
TRX 0.09
JST 0.073
BTC 54812.07
ETH 4111.68
BNB 591.20
SBD 7.02