TKTK Outstanding Copy Highlighter

README.md

TKTK

Tktk short for "To Come" in publishing is a simple placeholder highlighting library. Load this file on your latest project to highlight all the areas that still need copy, links, or final imagery. To highlight items, simply do one of the following:

Images: Either add a tktk class to the img tag or add #tktk to the image source.

Copy: Either add a tktk class to the element, or start the copy with "tktk"

For all elements that are "to come", copy will be highlighted in a nice, obvious magenta and images bordered in a 2px magenta border (using box-shadow so as not to affect layout).

Dependencies

• ES6 compatible build system such as Browserify or WebPack with the Babel loader

tktk.js

/**
 * Highlight outstanding images and copy
 *
 * Outlines images and highlights copy in magenta wherever "tktk" is found.
 * Simply start outstanding copy blocks with "tktk" to highlight text. Add
 * a "#tktk" to the end of image src values and un-defined href values to
 * outline images and highlight links respectively.
 */
export default function() {
  const css = `.tktk, a[href*="#tktk"] {
    color: magenta !important;
  }
  img[src*="#tktk"], img[srcset*="#tktk"] {
    box-shadow: 0 0 0 2px magenta;
  }`
  const styleTag = document.createElement('style')
  styleTag.type = "text/css"
  styleTag.innerHTML = css
  document.querySelector('head').appendChild(styleTag)

  document.querySelectorAll("p,li,dt,dd,blockquote,cite,div,h1,h2,h3,h4,h5,h6").forEach((element) => {
    element.childNodes.forEach((childNode) => {
      if(childNode.nodeType === 3 && /^\s*tktk/.test(childNode.nodeValue)) {
        childNode.nodeValue = childNode.nodeValue.replace(/^\s*tktk\s*/gi, "")
        element.classList.add('tktk')
      }
    })
  })
}