☰

Pinboard - Specific Tag Emboldener

Makes tags which match specific criteria stand out better in Pinboard.

// ==UserScript==
// @name Pinboard - Specific Tag Emboldener
// @description Makes tags which match specific criteria stand out better in Pinboard.
// @include http://pinboard.in/*
// @include http://www.pinboard.in/*
// @include https://pinboard.in/*
// @include https://www.pinboard.in/*
// @grant GM_addStyle
// @author original script by murklins, updated by mkp
// @version 0.0.1.20210223015129
// @namespace https://greasyfork.org/users/396532
// ==/UserScript==

var main_node = document.getElementById("pinboard");
if (main_node) {
  // get all the bookmarks
  var tagAnchors = document.evaluate("//div[contains(@class, 'bookmark')]/div[@class = 'display']/a[@class = 'tag']", 
                                  main_node, 
                                  null,
                                  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
                                  null);

  for (var i = 0; i < tagAnchors.snapshotLength; i++) {     
// assign tags to specific tag classes based on the tag's composition 
// note: script as written parses the tags looking for the keyword(s) anywhere within the text of the tag
    var tagA = tagAnchors.snapshotItem(i);   
    if (tagA.innerHTML.indexOf("relationship") != -1) {
      tagA.className = tagA.className + " gm_relationship_tag";
    }else if (tagA.innerHTML.indexOf("fandom") != -1) {
      tagA.className = tagA.className + " gm_fandom_tag";
    }else if (tagA.innerHTML.indexOf("warning") != -1) {
      tagA.className = tagA.className + " gm_warning_tag";
    }
  }
}
// format tags based on their assigned tag class
// you can change font color, font style, and/or even highlight the tag with a specific color
GM_addStyle(
  "a.gm_relationship_tag { font-weight: bold}" +
  "a.gm_fandom_tag { color: #1d085f; font-weight: bold; }" +
  "a.gm_warning_tag { color: #a3031e;}"
);


/* /////////////////////////////////////

// the following is the same code for parsing tags in a more template-like format

    var tagA = tagAnchors.snapshotItem(i);   
    if (tagA.innerHTML.indexOf("KEYWORD") != -1) {
      tagA.className = tagA.className + " gm_KEYWORD_tag";
    }
  }
}



// to create more than one tag class / use more than one keyword, use 'else if'

    var tagA = tagAnchors.snapshotItem(i);   
    if (tagA.innerHTML.indexOf("KEYWORD1") != -1) {
      tagA.className = tagA.className + " gm_KEYWORD1_tag";
	}else if (tagA.innerHTML.indexOf("KEYWORD2") != -1) {
      tagA.className = tagA.className + " gm_KEYWORD2_tag";  
    }
  }
}


// the following is the same code for formatting tags in a more template-like format

//// bold text for a given tag class

GM_addStyle(
  "a.gm_KEYWORD_tag { font-weight: bold;}" 


//// change text color for a given tag class  

GM_addStyle(
  "a.gm_KEYWORD_tag { color:#800;}"   
  
//// highlight text of a given tag class with a specific color
/////// you can use hex codes or css-supported color names

GM_addStyle(
  "a.gm_KEYWORD_tag { background-color: blue;}"   
  
*/