/r/megalinks base64+bold text decoder

index.html

<div id=content>
  <div id=bm-link-container>
    <p>Bookmarklet <em>(drag this to your bookmarks bar)</em></p>
    <span id=bm-link></span>
  </div>
  <div id=bm-code-container>
    <p>Bookmarklet Code <em>(processed by babel and URIencoded)</em></p>
    <textarea id=bm-code readonly></textarea>
  </div>
  <div id=bm-source-container>
    <p id=bm-source-title>Bookmarklet Source</p>
    <textarea id=bm-source readonly></textarea>
  </div>
</div>

r-megalinks-base64-bold-text-decoder.markdown

/r/megalinks base64+bold text decoder

reddit megalinks base64 decoder

A Pen by Ben Alman on CodePen.

License.

script.js

const bookmarkletName = 'mega'
const bookmarkletSource = () => {
  const log = (...args) => console.log('[mega]', ...args)
  const elems = [...document.querySelectorAll('.usertext-body *')]
  // remove bold elements that are a part of a contiguous word
  elems
    // only process elements that contain bold children
    .filter(p => [...p.children].some(n => n.nodeName === 'STRONG'))
    .forEach(p => {
      const children = [...p.children]
      // ensure all children...
      const remove = children.every(n => {
        const prev = n.previousSibling
        const next = n.nextSibling
        // are bold,
        return n.nodeName === 'STRONG'
        // have a previous or next sibling
        && (prev || next)
        // aren't separated from their previous or next sibling by a space
        && (!prev || prev.nodeType === 3 && /\S$/.test(prev.nodeValue))
        && (!next || next.nodeType === 3 && /^\S/.test(next.nodeValue))
        // don't contain spaces
        && /^\S+$/.test(n.nodeValue)
      })
      if (remove) {
        log('remove bold <=', p.innerHTML)
        children.forEach(n => p.removeChild(n))
        // "collapse" all text nodes into one
        p.innerText = p.innerText
        log('remove bold =>', p.innerHTML)
      }
    })
  // base64 decode stuff
  elems
    .forEach(p => [...p.childNodes]
      // only process text nodes
      .filter(n => n.nodeType === 3)
      .forEach(n => {
        // should fail gracefully if there are any errors (eg. with atob)
        try {
          let isHtml, child
          const str = n.nodeValue.split(/(\s+)/).map(s => {
            // process 16+ contiguous character base64 words
            if (/^[A-Za-z0-9+/=]{16,}$/.test(s)) {
              log('base64 <=', s)
              // base64 decode word and remove any surrounding spaces
              s = atob(s).trim()
              // convert any decoded urls to clickable links
              if (/^https?:\/\//.test(s)) {
                s = `<a href="${s}">${s}</a>`
                isHtml = true
              }
              log('base64 =>', s)
            }
            return s
          }).join('')
          if (isHtml) {
            // ensure html gets rendered properly
            const tmp = document.createElement('div')
            tmp.innerHTML = str
            child = document.createDocumentFragment()
            Array.from(tmp.childNodes).forEach(c => child.append(c))
          } else {
            // no html? just add the text
            child = document.createTextNode(str)
          }
          n.parentNode.replaceChild(child, n)
        } catch (e) {}
      })
    )
}

// STUFF TO MAKE THE PAGE RENDER
const transform = code => {
  code = `(${code})()`
  code = Babel.transform(code, {
    presets: ['es2015'],
    minified: true,
  }).code
  return `(()=>{${code}})()`
}

const getBookmarklet = fn => {
  const transformed = transform(fn.toString())
  return "javascript:" + encodeURIComponent(transformed)
}

const bookmarkletCode = getBookmarklet(bookmarkletSource)

$('#bm-link').html(`<a href="${bookmarkletCode}">${bookmarkletName}</a>`)
$('#bm-code').html(bookmarkletCode)
$('#bm-source').html(bookmarkletSource.toString())
//$('#bm-source').html(transform(bookmarkletSource.toString()))

// show edit button if relevant
const parts = location.pathname.split('/')
if (parts[2] === 'fullpage') {
  parts[2] = 'pen'
  const href = `https://codepen.io${parts.join('/')}`
  $('#bm-source-title').append(` <em>(<a href="${href}" target=_top>edit source</a>)</em>`)
}

scripts

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.postcss

@use postcss-cssnext;
html, body {
  height: 100%;
}

body {
  font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
  background: #eee;
}

#content {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#content > div {
  padding: 1em 1em 0;
  display: flex;
  flex-direction: column;
  &:last-child {
    padding-bottom: 1em;
  }
}

#bm-code-container {
  flex: 1;
}

#bm-source-container {
  flex: 8;
}

p {
  margin-top: 0;
}

textarea {
  flex: 1;
  font-family: Consolas, monaco, monospace; 
  width: 100%;
  min-height: 3em;
}

em {
  font-size: 0.8em;
  color: #777;
}

a {
  color: #3ae;
  &:hover {
    color: #3b3;
  }
}

#bm-link a {
  background: #3ae;
  color: #fff;
  padding: 0.1em 0.4em;
  border-radius: 5px;
  text-decoration: none;
  &:hover {
    background: #3b3;
  }
}